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
- 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 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?
Join the Newsletter
Sign up and be the first to know about new releases, workshops, and articles.