Recommended: Follow Along in Figma

Follow along with the Figma Community file I created.

1. Component Shortcuts

The more you become familiar with the shortcuts for components, the quicker they’ll quickly become second nature.

Try these component shortcuts to speed up your workflow:

Mac:

• OPTION + CMD + K = Create component
• OPTION + CMD + B = Detach instance
• OPTION + CMD+ O = Team library
• OPTION + 2 = Show asset panel (option + 1 returns you to the layers panel)

Windows:

• ALT + CTRL + K = Create component
• ALT + CTRL + B = Detach instance
• ALT + CTRL + O = Team library
• ALT + 2 = Show asset panel (option + 1 returns you to the layers panel)

2. Swap Components

After opening the asset panel (using option/alt + 2 or shift + I), you can drag component instances onto the canvas. If you have a component in place already, try using these shortcuts while dragging a component to replace an existing one.

• Hold OPTION / ALT to replace a component
• Hold OPTION / ALT + CMD / CTRL to replace a nested component

3. Naming Component

How you name your components in Figma will determine the organization of those components. If you use a slash-separated naming convention, Figma will group those components in the instance menu, making them easier to find.

Figma uses file / page / frame /**name**/to organize our components.

So, for example, if I have a dropdown component, I would place it on its own Figma frame titled “Inputs” then name the component Dropdown/Active.

Figma will use that name to create a folder called “Inputs” and then a folder inside of there called “Dropdown.” You can also name your component Inputs/Dropdown/Active if the main component isn’t inside a frame titled “Inputs.”

4. Make Fun Component Shapes

Using the power of boolean operations to subtract shapes and set constraints for those shapes, we can achieve some neat-looking components (shoutout to

).

To achieve this, follow Rogie’s tutorial on YouTube (starts at 32:50).

5. Use Base Components

By using base components for our variant sets, we can make one adjustment to our base, and it will push the changes to all of our variant instances.

To do this, create a base component with all of the elements needed in our different variations for default, icon left, icon right, hover, active, error, and so on. Then it’s as simple as hiding elements we don’t need in different variants.

It’s also helpful to add a modifier before the component name, which will hide it from your library when you’re ready to publish your components. To do this, add “.” or “_” before a component name (i.e. “_Profile Card Base”)

6. Quick Insert Men

Add components in seconds by using the quick insert menu.

• Tap SHIFT + I to activate the quick insert menu
• Tap ESC to close

7. Follow Atomic Design Principles

Brad Frost’s Atomic Design is a methodology for creating design systems. This methodology helps us organize our components to scale effectively with our design system and maintain order within our nested components.

There are five distinct levels in atomic design:

1. Atoms

Atoms are the basic building blocks such as a form label, an input, or a button.

2. Molecules

Molecules are groups of atoms bonded together, for example, a form label, input, and button combined together as a form.

3. Organisms

Organisms consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search, and a list of social media channels.

4. Templates

Templates are concrete and provide context to all these relatively abstract molecules and organisms. Templates are where clients start seeing the final design in place. Templates over time increase fidelity to ultimately become the final deliverable.

5. Pages

Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.

To learn more, watch this tutorial on YouTube and read the Atomic Design Book by Brad Frost.

8. Use Slot Components

Slots allow us to have a placeholder that we can use swap instance to replace with the content that we need.

It can be tricky to have a modal component, for example, because not every modal will have the same content inside of it. To solve this, we can use a technique called “slots” (shoutout to Rogie, Ben Adelt, and Ridd). Simply insert a slot component where you’ll need flexible content and swap as needed.

9. Use Multiple Libraries

For larger organizations with a lot of components and styles required to support many different platforms and products, a library can grow very quickly. If users only need a small selection of those components, they’ll still have to sift through a lot of similar components they never need to use.

Try organizing your components in different files, i.e.:

• mobile components
• desktop components
• brand assets & colors
• and so on…

Learn more in the Figma docs

10. Have fun with components

Download the community file to play around.

Components are super versatile and can be used to create all kinds of different things like animations using interactive components or fun patterns.

By using the Rotate Copies plugin and components, it’s possible to create some fun and dynamic art right inside of Figma!