How to Build a Component Library in Figma (and Publish It to Your Team)
· 3 min read · by the ProFigma team
A component library is a Figma file full of reusable parts, shared so everyone designs with the same buttons, inputs and cards. It saves time, keeps products consistent and makes handoff easier. You do not need a large team or a big budget to start. This guide gives a practical order of work, so your library stays small, useful and easy to keep up to date.
Step 1: Plan before you draw
List what your product actually uses. Open three or four screens and write down every repeated part: buttons, inputs, tabs, cards, navigation, modals, badges. Start with the five or six you use most. A small library that people trust beats a large one that is half finished.
Step 2: Create a separate file
Keep the library in its own Figma file, not inside a project file. Other files will use it, so it needs a clean home. Name the file clearly, for example "Product UI library". Use pages to organise it: one for foundations (colors, type), one for each group of components, and one for notes.
Step 3: Set up styles and variables
Components are only as consistent as the values inside them. Before you build, define:
- Color styles or variables for brand, text, borders, backgrounds and states.
- Text styles for headings, body and captions.
- Spacing and radius values. A 4 point scale works well: 4, 8, 12, 16, 24, 32.
When a component uses a style or variable, one change updates every part of the library, including a dark theme.
Step 4: Build small parts first
Start with the smallest parts, then combine them. A button, an input and a badge come first. A search bar, a card or a form come next, built from those parts. Use auto layout in every component, so padding and text length do not break it. See how to create a component in Figma for the steps.
Step 5: Add variants and properties
Add the states and sizes people really need: default, hover, focus, disabled, small and large. Use boolean, text and instance swap properties for optional parts. Our guide to component properties and variants shows when to use each.
Step 6: Name and document
Use a clear naming pattern with slashes, such as "Button / Primary / Large". The Assets panel turns this into folders. Add a short note next to each component: what it is for, when not to use it, and one example. Place a cover page at the start of the file with the version and the date.
Step 7: Publish and share
- Open the Assets panel in the library file.
- Click the Libraries icon (the book).
- Click Publish, add a short description of the changes, and confirm.
- In other files, open the same Libraries panel and turn the library on.
When you change the library and publish again, people who use it see an update notice and can accept it. Write the change description in plain words, for example "Added disabled state to Button".
Keep the library healthy
- Give one person or a small group the job of reviewing changes.
- Remove parts that nobody uses.
- Test updates in a copy before you publish.
- Record changes in a short changelog on the notes page.
Start from existing components
You do not have to draw every part. Many teams begin with a ready-made kit and adapt it to their brand. Our free Figma components use auto layout, 4 point spacing and clear layer names, so they fit into a library without much cleanup. Paste them into your library file and connect the colors to your own styles.
Quick answers
How many components should a first library have?
Five to ten. Button, input, select, checkbox, badge and card cover most screens.
Do I need a paid plan to publish a library?
Publishing a team library depends on your Figma plan. Check your plan's current limits in Figma's pricing page.
Should the library be one file or many?
One file is fine at the start. Split it into foundations, web and mobile files when it grows.
