ID101
Design Foundations - Intro to Figma
Faculty
Egor Nelubin
Freelance UI Designer / Co-founder at Two Studio
Course length
Duration
Total hours
Credits
Language
Course type
Fee for single course
Fee for degree students
Skills you’ll learn
Overview
This class aims to give students the necessary Figma skills to work on future design projects. During the class, students will get hands-on experience working on projects with design systems and libraries of different scales.
The first week will be dedicated to understanding Figma’s core features as a design software. Theoretical explanations will be followed by a mini-project where students will apply their new learning. The main focus of this part of the course is getting a solid base of knowledge about Figma.
In the following two weeks, students will receive a more advanced design brief, which they will be tasked with working on with more attention to details, the structure of the project, and more advanced techniques for building their designs.
By the end of the course, students will be fully ready to take on a design project without thinking about which button to click.
Learning highlights
- Get to know the most important aspects of Figma.
- Learn how to build and utilise components in Figma.
- Learn how to use auto-layout and structure the design.
- Learn how to deliver their designs for production.
- Practice presenting their designs.
Course outline
15 classes
Intro to Figma
Quickstart & Essential tools.
Collaboration in Figma.
Figjam snippet.
First Brief
Design foundation
Screen sizes.
Grids.
Layouts.
Autolayout
Directions & Alignment.
Spacings.
Grid, wrapping, shortcuts.
Working with text
Typography.
Colour.
Effects.
Vector editing.
Figma Draw snippet.
First project presentation
First project presentation.
Feedback and Q&A.
Components
Component sets.
Variants & Properties.
States & Instances.
Variables
Local variables.
Semantics & Collections.
Usage.
Image treatment. Plugins. Previewing your designs.
Image layers.
Blending modes.
Plugins & AI features.
Present / Preview.
Prototyping your designs
Interactions.
Animations & Scroll behaviour.
Timings & Easings.
Work in class.
Final brief check-in.
Feedback session.
Building, using and maintaining a design library
Teams.
Publishing libraries.
Figma Buzz, Figma Make.
Structurizing and organising design files. Best Practices
Pages & Hierarchy.
Naming.
Slides.
Thumbnails.
From Figma to production
Technical requirements.
Figma dev mode.
Variables vs CSS.
Work in class.
Feedback and Q&A.
Final presentation.
Final presentation.
Feedback.
Final presentation
Final presentation.
Feedback.
Methodology
The course consists of two parts: a mid-term project and a final project. The completion of both of them will be used for the final evaluation. During the course, there will also be:
Lectures, Live demos, In-class exercises, Homeworks
Grading
Egor is a UI designer and a Harbour.Space ID Bachelor's graduate based in Barcelona. Over the years he's designed and developed a variety of websites and applications, created visual identities and built interactive installations. In 2023, together with a co-founder, he started a small studio where he continues to work at the intersection of design and technology.
See full profileApply for this course
Design Foundations - Intro to Figma
by Egor Nelubin
Total hours
45 Hours
Dates
Sep 08 - Sep 26, 2025
Fee for single course
€1500
Fee for degree students
€750
Explore related courses
Filter by campus:
How to secure your spot
Complete the form below to kickstart your application
Schedule your Harbour.Space interview
If successful, get ready to join us on campus
FAQ
Will I receive a certificate after completion?
Yes. Upon completion of the course, you will receive a certificate signed by the director of the program your course belonged to.
Do I need a visa?
This depends on your case. Please check with the Spanish or Thai consulate in your country of residence about visa requirements. We will do our part to provide you with the necessary documents, such as the Certificate of Enrollment.
Can I get a discount?
Yes. The easiest way to enroll in a course at a discounted price is to register for multiple courses. Registering for multiple courses will reduce the cost per individual course. Please ask the Admissions Office for more information about the other kinds of discounts we offer and what you can do to receive one.