Gallery
coda-figma
Share
Explore

icon picker
Figma variables

Have all your variables in one table and filter by collection. Figma enterprise account required.
megaphone
Design system documentation just got easier by pulling in your variable collections. Document and edit all your variable collections––so that updates in this doc get reflected in Figma.

Setup instructions

Copy the Figma link of your design system file
Open up the pack settings
⁠
CleanShot 2024-05-15 at 16.00.35@2x.png
⁠
⁠
Add your Figma account to read and pull in data
⁠
CleanShot 2024-05-15 at 16.00.45@2x.png
⁠
⁠
Also add your Figma account to make edits. Any edits made in this doc will be logged as this account in Figma
⁠
CleanShot 2024-05-15 at 16.00.51@2x.png
⁠
⁠
Paste your Figma link
⁠
CleanShot 2024-05-15 at 16.01.00@2x.png
⁠
⁠
All variables
0
Connect your account to refresh data and send edits to Figma.
Name
Collection
Mode
Search
Collection
Name
Mode
Value
Reference
Color preview
Color foundations
24
Neutral/100
2
Light
#fbfbfb
​
Dark
#0d1217
​
Neutral/200
2
Light
#d0d7de
​
Dark
#1d242a
​
Neutral/300
2
Light
#8c959f
​
Dark
#4a5159
​
Neutral/400
2
Light
#424a53
​
Dark
#afb7c0
​
Neutral/500
2
Light
#32383f
​
Dark
#b8bfc7
​
Neutral/600
2
Light
#24292f
​
Dark
#dfe3e7
​
Purple/100
2
Light
#e7e0ff
​
Dark
#0c003e
​
Purple/200
2
Light
#c7b9ff
​
Dark
#130061
​
Purple/300
2
Light
#b19eff
​
Dark
#18007a
​
Green/100
2
Light
#00d663
​
Dark
#409668
​
Red/100
2
Light
#ffb1a8
​
Dark
#4d0800
​
Red/200
2
Light
#ff8577
​
Dark
#800d00
​
Spacing
12
spacing-xs
3
Standard
4
​
​
Expanded
8
​
​
Condensed
2
​
​
spacing-default
3
Standard
8
​
​
Expanded
12
​
​
Condensed
4
​
​
spacing-sm
3
Standard
12
​
​
Expanded
24
​
​
Condensed
4
​
​
spacing-lg
3
Standard
24
​
​
Expanded
48
​
​
Condensed
12
​
​
Color tokens
8
Background fills/Primary
1
Alias refernce
#6b57e5
Neutral/100
Neutral/100
Button/Hover-bg
1
Alias refernce
#e7e0ff
Purple/100
Purple/100
Button/Rest-bg
1
Alias refernce
#c7b9ff
Purple/200
Purple/200
Button/Pressing-bg
1
Alias refernce
#b19eff
Purple/300
Purple/300
Border/Primary
1
Alias refernce
#424a53
Neutral/400
Neutral/400
Border/Selected
1
Alias refernce
#b19eff
Purple/300
Purple/300
Text/Primary
1
Alias refernce
#24292f
Neutral/600
Neutral/600
Text/Secondary
1
Alias refernce
#424a53
Neutral/400
Neutral/400
Radius
4
xs
1
Web
2
​
​
s
1
Web
8
​
​
m
1
Web
16
​
​
lg
1
Web
32
​
​
⁠

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.