Level up Your Design System with Atomic Figma Components

How to create buttons using the Atomic Design Structure in Figma.

Step 1: Create Base Components

The first step is to create base components with variations of the button that you want to build out. These are not the final version and will not be published. Worry about structural and nested elements, colors can be swapped out later. These should just encompass all elements you would ever include in the final version.

The above designs capture all the shapes and variations you’d need in your “Base components”

Step 2: Naming the Base Components:

Name all the button designs “.base”. Putting a “.” in front of the element’s name makes it, so it won’t ever be published as a component.

This base button variation is named “.base” the “.” prevents it from being published

Step 3: Turn the “Base” Buttons Into Components

Command + option + K each “.base” button variation, individually, to make them components.

What the “Base” components should look like

Step 4: Add The Instance Swap Property to The Icon

Select the icon in one of your button variations, and click on the “Instance Swap Icon” Diamond shape on the right side panel and when the modal opens click “Create Property”.

How to activate the instance swap feature using the right side panel in Figma

View how an instance of the parent component should look like after “instance swap” property is activated.

How the instance swap property should look like on a component instance.

Step 5: Add the Instance Swap Property to Text

Make the text in the button easy to swap out using the diamond button in the right-hand side panel. Select the text in the “.base” button and click on the diamond “Instance Swap” icon in the right-hand panel. Once the “Create Component Property” modal opens, click “Create Property”

Results: After enabling “Instance swap” on the button text, a variant of the component, should have the option to edit text in the right-hand sidebar.

Step 6: Create an instance of the “.base” component

Create an instance of one “.base” component and hit Command-Option-K it to make it a component, then remove the “.” to enable it to be published. You should also rename it “Button”. Then repeat this process for all your “.Base” Components

New component named “button” made from instance of “.base” button component

Repeat the process for all “.base” components

Step 7: Create an instance of the “.base” component

Select one of the “Button” components and use the right-side panel to “Create Component Property”

Step 8: Turn “Button” Components Into Variants

Drag the other “Button” components into the “Properties” area you created for the first component.

Step 9: Create Properties in Right-side Panel

After you’ve added all the “Button” components into the variants' panel, create and assign new properties on the right side panel.

Current Variant properites panel

Step 10: Enjoy your new components!

Publish this new Figma component to your library and enjoy!

Resources:

⍚ Base components are still useful, just not in your UI library

https://uxdesign.cc/becoming-a-figma-ninja-with-base-components-102451f138ef