iDevie
January 2022
M T W T F S S
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Categories


Using Components in the same file is okay if you only have a few, but existing libraries often have many pages of Components you might want to use. Sometimes even multiple files. There is a way to re-use these without copying and pasting these into your working file again and again. This will help you create your own Design System, or work from someone else’s copy.

Page titled “UI kits” with: a list of category selectors, search box, tabbed filters, and gallery list of results.

Page titled “UI kits” with: a list of category selectors, search box, tabbed filters, and gallery list of results.

Figma’s community is in Beta, but there’s still a good range of resources.
Figma’s main menu; “Chuck Rice’s Team” highlighted in the left panel, and list of two Projects and their details in the main stage area.

Figma’s main menu; “Chuck Rice’s Team” highlighted in the left panel, and list of two Projects and their details in the main stage area.

My example Team has two Projects: First Project, and Design System.
Left-hand side of a two-panel selector; a heading named “Lincoln” with a yellow exclamation symbol, and two folders listed underneath.

Left-hand side of a two-panel selector; a heading named “Lincoln” with a yellow exclamation symbol, and two folders listed underneath.

In one of my old teams, named Lincoln, I also favourited the Design System and the main project.
Top screenshot of an open Figma file; dropdown menu selected from the filename, and the “Publish styles…” option is highlighted.

Top screenshot of an open Figma file; dropdown menu selected from the filename, and the “Publish styles…” option is highlighted.

If you haven’t published the styles and components, you can’t reuse them using Figma’s library features.
  • Click on the dropdown menu next to it’s name, in the center at the top
  • Click on “Publish styles and components”
List of various settings in a list, grouped by “Team”, “Team Library”, and “Billing”.

List of various settings in a list, grouped by “Team”, “Team Library”, and “Billing”.

There aren’t many settings here, but one of the most powerful ones is!
A popup modal displaying a search box, one list item, and an open dropdown over that item.

A popup modal displaying a search box, one list item, and an open dropdown over that item.

I simply enable sharing for All files, but your team might have more complex or sensitive sharing needs

Now all that’s left is to test it out.

  • Text (text layers only)
  • Fill
  • Stroke
  • Effects
Right-hand side panel in Figma design program, with a modal overlayed on top with a list of various Layer modifiers.

Right-hand side panel in Figma design program, with a modal overlayed on top with a list of various Layer modifiers.

An example showing shared effects from the library I’ve enabled.

My screenshot says “Local components”, but yours should now show your newly shared component file.

If you only want to enable sharing of a component file on a file-by-file basis, you can click on the book icon in the top left instead and enable or disable using the toggle.

Top left Assets panel of Figma, and an arrow from a book icon pointing right to a modal with “Libraries” and “Updates”.

Top left Assets panel of Figma, and an arrow from a book icon pointing right to a modal with “Libraries” and “Updates”.

This option is great in a pinch if I simply want to experiment with a few files, before sharing it to the whole team.

I hope that was a helpful walkthrough to setting up a team in Figma with shared styles and components. It’s a feature that helps you bootstrap a project using widely used UI kits like Material Design or Bootstrap, or start encouraging more consistent pattern usage across your team in a controlled and systematic way.


UX

Comments 0
There are currently no comments.