How to use a design system in Figma

You can use Module as a design system library in other files or projects. With the Free version of Figma, you can publish styles but not components. To publish components, you should have a paid Figma plan.

After adding the Figma file to your project folder, open the file and Publish styles and components in the toolbar.

Now you can connect and use Module library in any file. Go to the project file and open Libraries menu in the left sidebar to enable Module. Done.

Note: You can also use all Module features without a paid plan, just create a new page inside Module file and design there.

Styles allow you to define a set of properties or attributes of an object. You can apply styles for Colors, Text, Effects, and Layout Grids.

1. Select the object(s) you’d like to apply a style to.
2. In the right sidebar, click the icon with four dots next to the property.
3. Select the style you want to use to apply it.

Open the Assets panel in the left sidebar or the Resources panel in the toolbar. There you will find all the ready-made components. Drag-n-drop one onto the workspace.

Each component has many variants. You can get a specific component variant by editing its properties in the right sidebar.

To change the icon within components, find and select the layer Icon and change it in the right sidebar.

Return to the Module file, and let’s start with editing Styles. For more convenience, go to the page Styles in Module to see style changes.

Click on the empty space to unselect objects. All styles are divided into folders in the right sidebar. You can edit styles for Colors, Text, Effects, and Layout Grids.

1. Find the style you’d like to edit.
2. Click the Edit icon next to the style.
3. Edit properties, changes apply instantly.

Before continuing to components, let’s understand the formation. At first, we created master components or Parents, then reproduced them into many variants or Childs. Childs inherit the base properties of their Parents. You can edit the base property in Parent, and they will apply to all its variants.

Go to the page Components and get to a component you’d like to customize. Find Parent components on the left and all their variants on the right. Check out tips and edit base properties on the left. And if you need to, edit specific properties on the right.

When you’re done, don’t forget to Publish all changes.