Deep Dive: Components (2h)

NEW! Full Config 2024 Update Featuring the New Figma UI Design!

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

We will examine components and instances in general, variants, component properties, using variables and modes, and how to document and share our components in various ways.

As usual, we will start from scratch 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 explore when it makes sense to turn those components into a component set with variants and uncover all the hidden treasures as well as tips and tricks related to them.

Next, we will go the extra mile and add component properties to align our components with code as much as possible.

I will demonstrate advanced techniques for adding variables and modes to your components, integrating light and dark modes, and automatically activating variants at breakpoints with the help of modes.

I will also show you how to set up and use shared team libraries and how to best store and organize your components for efficient collaboration with other designers and developers.

To finish, I will introduce you to my favourite helpers and plugins, such as quickly altering content with AI and turning live websites into Figma files with one click.

You can work alongside me using the course material file or return to exercises with detailed instructions at your own pace.

This class is ideal for you if you have basic knowledge of Figma or if you are an advanced Figma user looking to dive deeper into working with Figma components.

Component Basics

1. Components and instances in Figma
2. Overriding instances
3. What to override and what not to
4. Reverting components and overrides
5. A word on images
6. Nesting components
7. Swapping instances

Variants

1. Component sets with variants
2. Multi-dimensional variants
3. Adding to existing component sets
4. Reorganising variants
5. Creating a toggle
6. What should NOT be a variant
7. Interactive components and variants

Responsive Components

1. Responsive components and instances
2. More about auto layout

Component Properties

1. What are component properties?
2. Boolean properties
3. Text properties
4. Why not just override the instance?
5. Instance swap properties
6. Nested instance properties
7. When to use what

Adding Variables and Modes

1. Modes: The magic!
2. Light and dark mode with inherit
3. Binding variants to modes
4. Hide and show with booleans

Organising

1. When to turn design into components
2. Keeping components organised
3. Where to store your components
4. Team libraries
5. Changing the location of a component
6. Documenting components
7. Documenting in Figma
8. Automating documentation
9. External design systems

Tips, Tricks & Hacks

1. Slot components
2. Rewrite elements of your design using AI
3. Replace and automate content using AI
4. HTML to design

Already a member? Click here