Gallery
Design system template with Figma
Share
Explore
Gallery
Design system template with Figma

icon picker
Variables

figma-logo
This page requires a Figma enterprise account
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
⁠
⁠
If you still need help here is a step by step video walkthrough!
⁠
Loading…
⁠
⁠
All variables
Connect your account to refresh data from Figma.
Name
Collection
Mode
Search
Collection
Name
Mode
Value
Reference
Color preview
Color foundations
24
Neutral/100
2
Light
#6b57e5
​
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
​
​
⁠

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.