Components are elements of your designs that you want to reuse - you can think of them like building blocks. Components help keep your designs consistent and allow you to quickly apply changes across multiple files and projects. They can be basic elements made up of a few layers, like buttons or icons. Or more elaborate combinations of other elements, like toolbars and menus.
Styles are sets of properties that can be applied to objects across your team's designs. You can use Styles to define attributes for color, text, stroke, fill, effects, and layout grids.
Styles and components live in the files they are originally created in. To find and access styles and components across your files and projects, you can publish them as a library. This allows you to enable that library in your teams, drafts, or files.
Access components from the assets panel in the left sidebar, and styles using the Style icon next to any relevant property.
Create the styles and main components that define your brand. Publish these styles and components as a library.
- Styles in Figma
- Manage and share styles
- Apply styles to layers and objects
- Create styles for colors, text, effects and, layout grids
- Create and use variants
- Create and use component variants
- Create components to reuse in designs
Manage and share
Continue to develop, iterate and refine your styles and components, and publish your changes to the library. Figma will keep a detailed record of your changes in the file's version history.
- Name and organize components
- Publish styles and components to a library
- Make changes to main components
- Create branches and merge changes
- Move published components between files
- Unpublish a library to remove it for all collaborators
Enable libraries in team files to allow members to view and use them across their files. Designers and collaborators receive updates to styles and components, making sure they're always using the latest version.
- Enable libraries in drafts, teams, and files
- Accept updates from a library
- Remove a file from your libraries
- Add and remove libraries in an organization
- Track library and component usage
Use styles and components
Create local instances of components and apply styles to layers in your files. Override properties of local instances or detach them to customize further. Swap individual instances or swap entire style and component libraries.
- Create an instance of a component
- Apply overrides to instances
- Swap between instances in a file
- Detach instances from their main component
- Swap style and component libraries
There are a few different contexts for swapping your libraries:
- Manage missing libraries
- Swap between style themes
- Swap styles and instances in bulk