Gallery
Design system template with Figma
Share
Explore

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

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.