Thread Reader


Feb 27
7 tweets

We spend a lot of time talking about component structure, but the library files themselves are often ignored So what goes into structuring a good Figma component library? Here are a few tips, hopefully a good starting point 📈

Image showing a list of items. At the top is a label reading "❖ UI Kit", underneath is a separate list reading vertically: "🗂 Forms", "↪️ Buttons", "↪️ Inputs", "↪️ Checkbox", "↪️ Radio", "↪️ Toggle".
The first thing we want to decide is whether we use one file or many files Both are fine! Single file is best for smaller projects, or when you're thrashing around at the start of a bigger system project Separate files are best for collaboration, performance, and versioning
On the left is three white pills with labels that read "❖ Components", "🎨 Styles", and "◇ Icons". On the right is one pill that reads ❖ UI Kit" and underneath is a vertical list that reads "🎨 Styles, ◇ Icons, ❖️ Components, 🗂️ Forms, ↪️ Button, ↪️ Input"
Then we want to start thinking about page structure I find it really useful to include emojis here! A folder emoji 🗂 for component groups e.g. forms, menus, tables A return arrow emoji ↪ For the individual components within the groups e.g. Form ↪ Inputs, Menus ↪ Tab bar
A visualisation of the folder and sub page concept with examples. Underneath forms are "buttons, inputs, checkbox, radio, toggle." Then there's a list with "menus" as the top label, and "header, tab bar, footer" as the examples.
Next up is the components themselves Variants are great! But be careful to not "explode" them = put too many components in one variant I try to optimise for searching / usage rather than maintenance here (🚨 IMPORTANT) So, split variants where it makes sense for search
A screenshot of a Figma variant with a lot of different components inside the same set.
A set of four different Figma variant components. One for primary, secondary, danger, and warning components.
The key thing here is using this structure: Page ⤵️ Section ⤵️ Variant ⤵️ I personally think variants are best for combining types & states, with functional or visual differences being split Primary & Secondary separate components, but Primary/Filled Primary/Outline combined
A Figma component variant set for a primary button. This lives inside a section called Primary.
"That's a lot of components!" I can hear you shouting Buuuut, remember when I said we should optimise for consumption and not creation? The assets panel becomes visually way more easier to use, thanks to the categorisation we implemented
Two screenshots of the Figma assets panel, showing the button component created earlier.  The left shows the "danger" button opened, the right showing the "primary" button opened.
Back to the variant combos for a second... If you *do* combine everything into one variant, you're putting a lot of pressure on your consuming designer to understand the possibilities of the component How will they know what's possible if all they see is one component?
A screenshot of a large(ish) variant button set, with a 😱 emoji over the top and text that reads "how do I know these exist". Alongside that text is an arrow pointing to some of the components. In the Figma assets panel, "button" has been searched for, and the result returns one component.


Working @figma. I write a newsletter, write & host @8pxmag. 🌶️ on everything. DMs are open, but might take a while to reply 🙏
Follow on Twitter
Missing some tweets in this thread? Or failed to load images or videos? You can try to .