Already a member? Click here

Deep Dive: Components & Variants in Figma (2,5h)

Let's learn everything about advanced components in Figma and have a real deep dive into component-based UI Design.

We are going to have a closer look at components and instances in general, variants, component properties, as well as sharing and documenting your components in different ways.

As usual, we start from zero by understanding what components and instances are, how to set them up and how to nest and combine them to create powerful systems.

We will then learn when it makes sense to turn those components into a component set with variants and will learn all about the little hidden treasures and tips and tricks around them.

We will then go the extra mile and add components properties to align our components with code as much as possible.

I will show you advanced techniques to organize and store your components for different team setups, ranging from locally stored components with solid documentation to shared team libraries as well as a word on external design documentation.

With the course material file, you can work alongside me or return to exercises with detailed instructions in your own time.

This class is right for you if you have basic knowledge of Figma or if you are an advanced Figma user and want to dive deep into working with Figma components.

Components and Instances

What is a component
Creating components and instances in Figma
I created a component by error!
Overriding instances
A word on images
Nesting components
Styles and components

Component Sets and Variants

Creating variants
Multi-dimensional variants
Editing existing component sets
Re-organizing variants
Boolean toggle
What should NOT be a variant
Interactive components

Component Properties

What are component properties?
Boolean properties
Text properties
Why not simply override the instance?
Instance swap properties
When to use properties when variants

Responsive Components

Responsive Components and instances
Nested auto layout components
Some extras you might like
Create pages with responsive instances

Organising and Sharing Components

When to turn design into components
Easy organizing
Where to store components
Team library: Get working material from the community
Shared team libraries
Moving components to external libraries
Swapping libraries
Documenting components
Documenting components in Figma
Quick alignment with code
Connecting with storybook
External design system documentation
Component checklist

Tips, Tricks and Hacks

Slot components
Working with actual data
Figma tokens
Should I use a base component?

Take full course