Learn how to create and manage scalable design systems in Figma: reusable components, shared libraries, design tokens, and best practices for working efficiently and consistently in teams.
Index
1. Course Title
Creating Design Systems in Figma
2. Training Objective
Learn Figma from the basics to advanced design based on reusable components, design systems, and efficient collaboration.
3. Duration
24 hours of instruction
4. Mode of Delivery
Online (recommended) or in-person.
- In online mode, no more than 3.5 hours per day is recommended.
- In-person mode requires additional costs for transportation and accommodation, if applicable.
5. Cost
Consult. Go to the contact form.
Please indicate the number of participants, the location for the in-person course, and whether you need any modifications to the syllabus to meet your company's needs.
6. Technical Requirements
The course will be taught with a company license.
Hardware Requirements
- One computer per participant.
Software Requirements
- Web browser (Chrome).
Classroom Requirements (In-person mode)
- Wi-Fi connection with internet access.
- Projector and cable with HDMI or VGA connection (or Chromecast).
- Whiteboard
7. Syllabus
Block 0 - Introduction
- Course presentation
Block I. Getting Started
- Why Figma?
- Teams, projects, and permissions.
- Document types.
-
Designing in Figma: Understanding the interface
- Activating libraries.
- Versioning and branches.
- Collaborative mode.
- Dev Mode.
-
Your daily allies
- Frames vs Groups.
- Autolayout: Differences between fill, fixed, hug.
- Aspect ratio.
- Position absolute.
- AI
- Practice: Apply key concepts of structure, behavior, and positioning in Figma using frames, autolayout, and other advanced tools.
Block II. Introduction to Design Systems
- What is a Design System?
- Advantages.
- Difference between atoms, molecules, and organisms.
- Organization according to needs. (related post)
Block III. Creating the Design System
-
Create document
- Recommendations
- Organization
-
Foundations
- What are they?
- Defining accessible color styles.
- Defining text styles.
- Layout
- Useful plugins.
- Practice: Define the visual foundation of a design system in Figma, focusing on accessibility, typographic consistency, and a clean layout structure.
-
Variables
- What are they?
- Types of variables: color, string, number, boolean.
- Sharing variables with development.
- Useful plugins.
- Practice: Create a design structure based on variables, ideal for maintaining consistency, facilitating design system maintenance, and adapting to specific needs.
-
Components
- What is a component, variant, and instance?
- Boolean properties, True/false, nested instance, states, breakpoints...
- Naming and organizing layers.
- Applying variables.
- Stress-testing and component validation.
- Publishing the library.
- Definition of Done (DoD). (related post)
- Practice: Create reusable components that can adapt to different situations, maintaining a clear, organized structure connected with the fundamentals of the design system.
Block IV - Prototyping
-
Interactions in components
- Practice: Use Figma's prototyping mode to bring your components to life, creating basic and advanced interactions that simulate real interface behavior.
-
Interactions in screens
- Practice: Create a small navigation flow between screens using Figma's prototyping features, focusing on user experience.
-
Prototyping with variables and conditions
- Practice: Create an interactive flow in Figma using variables and logical conditions.
Block V. Handoff to Development
- Dev mode: HTML, CSS, and component inspection.
- Exporting images and icons.
- Integration with development tools: Storybook, Github, Chromatic, Notion...
Final Project: Create a Design System from Scratch
-
Create a small design system
- Structure the library.
- Create consistent, reusable components (meeting DoD requirements).
- Prototype components and screens.
Do you need a quote?
Describe your needs to us and we will send you a free estimate, no obligation!
Contact usF.A.Q
Frequently Asked Questions
All courses can be delivered either online or in person.
In-person courses are held on-site at the company’s premises that requested the course. However, if on-site delivery is not feasible, they can also be conducted at our offices.
Online courses are delivered through our virtual classroom platform, which includes integrated videoconferencing systems and is fully compliant with FUNDAE requirements for subsidized training.
Training courses are limited to a maximum of 10 participants.
This is because the courses are highly practical and require interaction between the instructor and participants during guided exercises. A larger number of participants would hinder effective communication.
These courses are typically delivered to employees of companies or staff from other types of organizations, such as public administrations or NGOs.
At this time, we do not plan to offer these courses to individual participants. However, if you are interested, please let us know through the contact form, as we could organize a public session if we reach 8 to 10 people.
You don't need to be an expert, but having a general understanding of concepts like layout, visual hierarchy, and prototyping will help you keep up more comfortably.
Our courses are designed to help you learn Figma from a solid foundation, delving into key tools like autolayout, components, variables, and design systems.
Of course. All of our courses are subsidized by FUNDAE (formerly Tripartita), so companies can practically get these courses for free.
Additionally, we handle the time tracking, satisfaction surveys, and the issuance of course completion certificates to meet the rest of the FUNDAE requirements.