Figma Component Library Buddy Doc

Explore

Pages

Doc set up instructions

1) Delete placeholder data

The “Delete placeholder data” button will clear all all of the placeholder data in this doc so you can use it as your own.

⁠

Delete placeholder data

⁠

Placeholder data has been removed

2) List your components, groups of styles, and variable collections

This part is a bit tedious. But it’s only tedious once! Here’s how to translate components, groups of styles, and variable collections into this doc:

These items should get their own row in the

DB Elements⁠

table below:

Each published main component

Each published group of styles (at the highest-parent level)

Each published variable collection

💡 PRO TIP: Coda’s UX team made a pack called

Figma Pack⁠

that lets you pull in individual variables into your doc, with two-way read+write access! Handy if you want to be able to reference individual variables. I have found that’s too granular for my team, so I track at the collection level.

In the future I’d like to build (or collaborate with a Pack-builder) on a Pack that watches a Figma library file for new components (is that you??

Hit me up!⁠

). But for now,

components⁠

are manually managed in this doc.

List your components

List your components

Type

Name (editable)

Link to node in Figma

Original author

Button

Card

Modal

Tag

Table cell / body

Table cell / header

Navigation

Footer

Dense UI typography

Long-form copy typography

Marketing landing page typography

01 Brand

01 Theme

02 Validation

There are no rows in this table

⁠

Check the box below when you’re done populating the

DB Elements⁠

table above

All components from

[ ]

⁠

have been accounted for in the table above

3) Hide the
`Back end`⁠
pages

This will help keep the page panel tidy. Only people who need to maintain the doc should use the pages nested under

Back end⁠

See the follow GIF to see how to reveal hidden pages 👉

Check the box below when you’re done 👇

⁠

⁠

Back-end pages have are hidden

6) Delete this page

Once you’ve completed the to-do items on this page, you can delete it and begin yours and your team’s journey of writing better, richer library publication notes 🥳

Gallery

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP