Best practices: components, styles, and shared libraries

Two of Figma's most powerful features are components and styles. They let you reuse UI objects and attributes so you can maintain designs systematically at scale. When you need to change something, like your brand’s link color or home icon, you can make the change once — in the original main component or style — and watch it update across all your designs.

You can use components and styles:

1. Within one individual file in Figma's free tier
2. Across different files and projects in the Figma Professional tier
3. Across teams in the Figma Organization tier

There’s an endless number of things to consider when creating, naming and managing your components and styles, so we put together a best practice guide to help you out. Grab a cup of coffee and get settled for the 101 masterclass.

A quick note: Before making components in Figma, we recommend figuring out which Figma plan makes the most sense for you. If you're signed up for Figma Organization, read this best practice article on setting up your teams in Figma, because that structure will form the foundation of your component organization.

What are components and styles?

If you already know all the basics of components, styles and libraries, jump to to the next section.

Components: These are reusable objects in your design. They can be as simple as an individual button, or as complex as an entire navigation header (comprised of instances of other components like logos, avatars, buttons and menu items). You'll discover that components work similarly to "symbols" in Sketch or other design tools, but with a few unique differences. More on that in a bit.

Here is a list of common things people turn into components:

• UI components
• Company logos and brand assets
• Icons
• Device mockups
• Platform OS components (Android, iOS, Linux, OSX, etc)
• Cursors
• Redlining and annotation components
• Post-it notes and voting "stickers" for running collaborative design sprints
• Diagramming "helpers" like flow arrows and flowchart shapes

Component Instances: Once you make something a component, you can create instances of it, which are essentially connected copies of that component—so if you update the design of the original component, the instances will reflect that change. For example, if you change the color of a button component to red, and then publish those changes, any file that used instances of that button will get a notification. They can then choose whether to update their instances to red.

Styles: These are reusable collections of properties which you can easily apply to elements in your design. In Figma, you can create styles for text, colors, grids and effects like shadows and blurs. If components are reusable objects, think of styles as the attributes you might apply to those objects.

Libraries: In Figma, you can share components and styles by publishing them. This turns your file into a library, so you can use instances of those components in other files. Updates to the design of your components can be published and pushed out to other documents where instances of your components live. Users have the choice to accept those updates or continue working with an old version (if required).