Gallery
Figma Component Library Buddy Doc
Share
Explore
Gallery
Figma Component Library Buddy Doc

icon picker
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
⁠
⁠

verified-account
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
5
Type
Name (editable)
Link to node in Figma
Original author
1
Component
Button
AP
Alice Packard
2
Component
Card
AP
Alice Packard
3
Component
Modal
AP
Alice Packard
4
Component
Tag
AP
Alice Packard
5
Component
Table cell / body
AP
Alice Packard
6
Component
Table cell / header
AP
Alice Packard
7
Component
Navigation
AP
Alice Packard
8
Component
Footer
AP
Alice Packard
9
Group of styles
Dense UI typography
AP
Alice Packard
10
Group of styles
Long-form copy typography
AP
Alice Packard
11
Group of styles
Marketing landing page typography
AP
Alice Packard
12
Collection of variables
01 Brand
AP
Alice Packard
13
Collection of variables
01 Theme
AP
Alice Packard
14
Collection of variables
02 Validation
AP
Alice Packard
There are no rows in this table
⁠
Check the box below when you’re done populating the
DB Elements
⁠
table above

verified-account
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 👇

⁠
buddy doc 2.gif
⁠
⁠
verified-account
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
Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.