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

icon picker
Doc set up instructions

1) Name and link to your Figma library

Head over to the
Utility formulas
⁠
page.
Edit the inline formula called “UI Library”
Swap out the hyperlink with a link to your Figma library file, and change the name to match your Figma library’s name.
Check the box below when you’re done 👇

⁠
buddy doc 1.gif
⁠
⁠
Finished naming and linking to my Figma library

2) Delete placeholder data

This button below 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

3) List your components

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. Using the table below, please make a row for every publishable main component in your Figma library file. I recommend using the exact same name as to not cause confusion.
Name editable
Link to main component frame
Original author
1
Button
Alice Packard
2
Card
Alice Packard
3
Modal
Alice Packard
4
Tag
Alice Packard
5
Table cell / body
Alice Packard
6
Table cell / header
Alice Packard
7
Navigation
Alice Packard
8
Footer
Alice Packard
There are no rows in this table
⁠
Check the box below when you’re done 👇

All components from
Alice's cool library
⁠
have been accounted for in the table above

4) List your Doc Users & their jobs

These tables are only used to add context to the
About this doc
⁠
page and do not affect anything regarding
components
⁠
and
library publications
⁠
. That does not mean it’s not important though. A comprehensive About page makes a doc easier for your team to understand and adopt!
This part is all about getting clear about who is responsible for what. I’ve provided some “canned” responsibilities and job titles, but it’s likely the makeup of your team is different, so be encouraged to edit as you see fit:
4.1 Who will use this doc?
2
Name
Role
Primarily responsible for
Can help with
1
​
​
​
​
There are no rows in this table
⁠
4.2 What are the jobs Doc users responsible for?
2
Name
Details
Where does this work happen?
1
Create components
Open
Component Library (Figma)
2
Ensure visual design is tight
Open
Component Library (Figma)
3
Ensures component architecture is solid
Open
Component Library (Figma)
4
Publishes components
Open
Buddy Doc (Coda)
Component Library (Figma)
5
Writes documentation for components
Open
Buddy Doc (Coda)
6
Maintains the component library management doc
Open
Buddy Doc (Coda)
7
Ensures component library work is in alignment with (or at least not conflicting with) product work
Open
Buddy Doc (Coda)
There are no rows in this table
⁠

I suggest checking out the
About this doc
⁠
to see how the information above flows into what’s visible there.
Check the box below when you’re done 👇
Doc Users and their Jobs have been defined.

5) 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
⁠
⁠
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.