Figma
We are using figma for proptotyping and managing our components.
Our goal is to keep everything updated between the code and the figma files.
We wrote few scripts that uses the figma API to avoid us any manual work.
Import into figma
Figma let you use the figma object in the console, so we can easily interact with
the API without even having to create or publish plugins. We'll use that feature to
easily import the colors into figma as styles.
Clean up old color styles
This snippet will help you delete every color style (paint style, also include gradients
and patterns) on a project.
It should not be used in a production file, it is just for cleaning up tests,
if you use it on the library file, you will break every team projects!
// remove all style from pages existingStyles = figma.getLocalPaintStyles() existingStyles.forEach(style=> style.remove())
Color list
This is useful if you use the color importer figma plugin (TBA).
Base colors
[
{
"name": "black",
"description": "",
"color": {
"r": 0,
"g": 0,
"b": 0
}
},
{
"name": "blue / 10",
"description": "",
"color": {
"r": 234,
"g": 240,
"b": 250
}
},
{
"name": "blue / 100",
"description": "",
"color": {
"r": 13,
"g": 36,
"b": 74
}
},
{
"name": "blue / 20",
"description": "",
"color": {
"r": 193,
"g": 215,
"b": 251
}
},
{
"name": "blue / 30",
"description": "",
"color": {
"r": 175,
"g": 197,
"b": 232
}
},
{
"name": "blue / 40",
"description": "",
"color": {
"r": 103,
"g": 149,
"b": 224
}
},
{
"name": "blue / 50",
"description": "",
"color": {
"r": 49,
"g": 115,
"b": 222
}
},
{
"name": "blue / 60",
"description": "",
"color": {
"r": 44,
"g": 102,
"b": 196
}
},
{
"name": "blue / 70",
"description": "",
"color": {
"r": 38,
"g": 89,
"b": 171
}
},
{
"name": "blue / 80",
"description": "",
"color": {
"r": 31,
"g": 85,
"b": 173
}
},
{
"name": "blue / 90",
"description": "",
"color": {
"r": 21,
"g": 60,
"b": 122
}
},
{
"name": "gray / 10",
"description": "",
"color": {
"r": 248,
"g": 248,
"b": 248
}
},
{
"name": "gray / 100",
"description": "",
"color": {
"r": 20,
"g": 20,
"b": 20
}
},
{
"name": "gray / 20",
"description": "",
"color": {
"r": 224,
"g": 224,
"b": 224
}
},
{
"name": "gray / 30",
"description": "",
"color": {
"r": 198,
"g": 198,
"b": 198
}
},
{
"name": "gray / 40",
"description": "",
"color": {
"r": 168,
"g": 168,
"b": 168
}
},
{
"name": "gray / 50",
"description": "",
"color": {
"r": 141,
"g": 141,
"b": 141
}
},
{
"name": "gray / 60",
"description": "",
"color": {
"r": 111,
"g": 111,
"b": 111
}
},
{
"name": "gray / 70",
"description": "",
"color": {
"r": 82,
"g": 82,
"b": 82
}
},
{
"name": "gray / 80",
"description": "",
"color": {
"r": 57,
"g": 57,
"b": 57
}
},
{
"name": "gray / 90",
"description": "",
"color": {
"r": 38,
"g": 38,
"b": 38
}
},
{
"name": "green / 10",
"description": "",
"color": {
"r": 230,
"g": 248,
"b": 210
}
},
{
"name": "green / 20",
"description": "",
"color": {
"r": 196,
"g": 224,
"b": 165
}
},
{
"name": "green / 50",
"description": "",
"color": {
"r": 113,
"g": 199,
"b": 22
}
},
{
"name": "green / 60",
"description": "",
"color": {
"r": 100,
"g": 173,
"b": 19
}
},
{
"name": "green / 70",
"description": "",
"color": {
"r": 84,
"g": 148,
"b": 16
}
},
{
"name": "orange / 10",
"description": "",
"color": {
"r": 253,
"g": 226,
"b": 203
}
},
{
"name": "orange / 20",
"description": "",
"color": {
"r": 250,
"g": 185,
"b": 128
}
},
{
"name": "orange / 50",
"description": "",
"color": {
"r": 255,
"g": 147,
"b": 51
}
},
{
"name": "orange / 60",
"description": "",
"color": {
"r": 255,
"g": 120,
"b": 0
}
},
{
"name": "orange / 70",
"description": "",
"color": {
"r": 186,
"g": 104,
"b": 32
}
},
{
"name": "primary / 10",
"description": "",
"color": {
"r": 234,
"g": 240,
"b": 250
}
},
{
"name": "primary / 100",
"description": "",
"color": {
"r": 13,
"g": 36,
"b": 74
}
},
{
"name": "primary / 20",
"description": "",
"color": {
"r": 193,
"g": 215,
"b": 251
}
},
{
"name": "primary / 30",
"description": "",
"color": {
"r": 175,
"g": 197,
"b": 232
}
},
{
"name": "primary / 40",
"description": "",
"color": {
"r": 103,
"g": 149,
"b": 224
}
},
{
"name": "primary / 50",
"description": "",
"color": {
"r": 49,
"g": 115,
"b": 222
}
},
{
"name": "primary / 60",
"description": "",
"color": {
"r": 44,
"g": 102,
"b": 196
}
},
{
"name": "primary / 70",
"description": "",
"color": {
"r": 38,
"g": 89,
"b": 171
}
},
{
"name": "primary / 80",
"description": "",
"color": {
"r": 31,
"g": 85,
"b": 173
}
},
{
"name": "primary / 90",
"description": "",
"color": {
"r": 21,
"g": 60,
"b": 122
}
},
{
"name": "purple / 20",
"description": "",
"color": {
"r": 185,
"g": 149,
"b": 202
}
},
{
"name": "purple / 50",
"description": "",
"color": {
"r": 147,
"g": 45,
"b": 194
}
},
{
"name": "purple / 60",
"description": "",
"color": {
"r": 108,
"g": 33,
"b": 143
}
},
{
"name": "purple / 70",
"description": "",
"color": {
"r": 89,
"g": 27,
"b": 117
}
},
{
"name": "red / 10",
"description": "",
"color": {
"r": 251,
"g": 225,
"b": 225
}
},
{
"name": "red / 20",
"description": "",
"color": {
"r": 240,
"g": 168,
"b": 168
}
},
{
"name": "red / 50",
"description": "",
"color": {
"r": 242,
"g": 29,
"b": 29
}
},
{
"name": "red / 60",
"description": "",
"color": {
"r": 217,
"g": 25,
"b": 25
}
},
{
"name": "red / 70",
"description": "",
"color": {
"r": 191,
"g": 23,
"b": 23
}
},
{
"name": "white",
"description": "",
"color": {
"r": 255,
"g": 255,
"b": 255
}
},
{
"name": "yellow / 20",
"description": "",
"color": {
"r": 255,
"g": 249,
"b": 192
}
},
{
"name": "yellow / 50",
"description": "",
"color": {
"r": 255,
"g": 244,
"b": 144
}
},
{
"name": "yellow / 60",
"description": "",
"color": {
"r": 255,
"g": 230,
"b": 13
}
},
{
"name": "yellow / 70",
"description": "",
"color": {
"r": 223,
"g": 201,
"b": 3
}
}
]
Tokens
[
{
"name": "ui / background",
"description": "Page background.\nOriginal color: 'white'",
"color": {
"r": 255,
"g": 255,
"b": 255
}
},
{
"name": "ui / 01",
"description": "Secondary page\nBackground 2.\nOriginal color: 'gray-10'",
"color": {
"r": 248,
"g": 248,
"b": 248
}
},
{
"name": "ui / 02",
"description": "Subtle border\nBackground 3.\nOriginal color: 'gray-20'",
"color": {
"r": 224,
"g": 224,
"b": 224
}
},
{
"name": "ui / 03",
"description": "Medium contrast border.\nOriginal color: 'gray-50'",
"color": {
"r": 141,
"g": 141,
"b": 141
}
},
{
"name": "ui / 04",
"description": "High contrast border.\nOriginal color: 'gray-60'",
"color": {
"r": 111,
"g": 111,
"b": 111
}
},
{
"name": "ui / 05",
"description": "Lightly colored background.\nOriginal color: 'primary-10'",
"color": {
"r": 234,
"g": 240,
"b": 250
}
},
{
"name": "text / 01",
"description": "Primary text\nHeaders.\nOriginal color: 'gray-80'",
"color": {
"r": 57,
"g": 57,
"b": 57
}
},
{
"name": "text / 02",
"description": "Secondary text\nForm labels.\nOriginal color: 'gray-60'",
"color": {
"r": 111,
"g": 111,
"b": 111
}
},
{
"name": "text / 03",
"description": "Tertiary text\nHelp text\nPlaceholder text.\nOriginal color: 'gray-40'",
"color": {
"r": 168,
"g": 168,
"b": 168
}
},
{
"name": "text / 04",
"description": "Text on interactive colors.\nOriginal color: 'white'",
"color": {
"r": 255,
"g": 255,
"b": 255
}
},
{
"name": "text / 05",
"description": "Disabled text.\nOriginal color: 'gray-30'",
"color": {
"r": 198,
"g": 198,
"b": 198
}
},
{
"name": "interactive / 01",
"description": "Primary interactive color\nPrimary buttons\nChecked color.\nOriginal color: 'primary-60'",
"color": {
"r": 44,
"g": 102,
"b": 196
}
},
{
"name": "interactive / 01 / hover",
"description": "Hover for Interactive-01.\nOriginal color: 'primary-70'",
"color": {
"r": 38,
"g": 89,
"b": 171
}
},
{
"name": "interactive / 01 / active",
"description": "Active for Interactive-01.\nOriginal color: 'primary-90'",
"color": {
"r": 21,
"g": 60,
"b": 122
}
},
{
"name": "interactive / 02",
"description": "Secondary interactive color\nSecondary button.\nOriginal color: 'gray-10'",
"color": {
"r": 248,
"g": 248,
"b": 248
}
},
{
"name": "interactive / 02 / hover",
"description": "Hover for Interactive-02.\nOriginal color: 'primary-10'",
"color": {
"r": 234,
"g": 240,
"b": 250
}
},
{
"name": "interactive / 03",
"description": "Selected elements\nActive elements\nAccent icons.\nOriginal color: 'primary-50'",
"color": {
"r": 49,
"g": 115,
"b": 222
}
},
{
"name": "interactive / 04",
"description": "Selected elements light\n Alternative border.\nOriginal color: 'primary-20'",
"color": {
"r": 193,
"g": 215,
"b": 251
}
},
{
"name": "interactive / 05",
"description": "Active element border.\nOriginal color: 'primary-40'",
"color": {
"r": 103,
"g": 149,
"b": 224
}
},
{
"name": "danger",
"description": "Danger button background.\nOriginal color: 'red-50'",
"color": {
"r": 242,
"g": 29,
"b": 29
}
},
{
"name": "hover / danger",
"description": "Danger hover.\nOriginal color: 'red-70'",
"color": {
"r": 191,
"g": 23,
"b": 23
}
},
{
"name": "link / 01",
"description": "Primary links\nText buttons.\nOriginal color: 'primary-60'",
"color": {
"r": 44,
"g": 102,
"b": 196
}
},
{
"name": "link / 02",
"description": "Secondary links.\nOriginal color: 'gray-50'",
"color": {
"r": 141,
"g": 141,
"b": 141
}
},
{
"name": "link / 03",
"description": "Active link.\nOriginal color: 'primary-50'",
"color": {
"r": 49,
"g": 115,
"b": 222
}
},
{
"name": "link / 04",
"description": "Dark background link.\nOriginal color: 'primary-40'",
"color": {
"r": 103,
"g": 149,
"b": 224
}
},
{
"name": "link / 05",
"description": "Dark background active link.\nOriginal color: 'primary-30'",
"color": {
"r": 175,
"g": 197,
"b": 232
}
},
{
"name": "icon / 01",
"description": "Primary icon.\nOriginal color: 'gray-80'",
"color": {
"r": 57,
"g": 57,
"b": 57
}
},
{
"name": "icon / 02",
"description": "Secondary icon.\nOriginal color: 'gray-50'",
"color": {
"r": 141,
"g": 141,
"b": 141
}
},
{
"name": "icon / 03",
"description": "Icons on interactive colors.\nOriginal color: 'white'",
"color": {
"r": 255,
"g": 255,
"b": 255
}
},
{
"name": "support / error",
"description": "Error.\nOriginal color: 'red-50'",
"color": {
"r": 242,
"g": 29,
"b": 29
}
},
{
"name": "support / error / bg",
"description": "Error Background.\nOriginal color: 'red-10'",
"color": {
"r": 251,
"g": 225,
"b": 225
}
},
{
"name": "support / error / dark",
"description": "Error dark.\nOriginal color: 'red-70'",
"color": {
"r": 191,
"g": 23,
"b": 23
}
},
{
"name": "support / error / light",
"description": "Error light.\nOriginal color: 'red-20'",
"color": {
"r": 240,
"g": 168,
"b": 168
}
},
{
"name": "support / warning",
"description": "Warning.\nOriginal color: 'orange-50'",
"color": {
"r": 255,
"g": 147,
"b": 51
}
},
{
"name": "support / warning / bg",
"description": "Warning Background.\nOriginal color: 'orange-10'",
"color": {
"r": 253,
"g": 226,
"b": 203
}
},
{
"name": "support / warning / dark",
"description": "Warning dark.\nOriginal color: 'orange-70'",
"color": {
"r": 186,
"g": 104,
"b": 32
}
},
{
"name": "support / warning / light",
"description": "Warning light.\nOriginal color: 'orange-20'",
"color": {
"r": 250,
"g": 185,
"b": 128
}
},
{
"name": "support / success",
"description": "Success.\nOriginal color: 'green-50'",
"color": {
"r": 113,
"g": 199,
"b": 22
}
},
{
"name": "support / success / bg",
"description": "Success Background.\nOriginal color: 'green-10'",
"color": {
"r": 230,
"g": 248,
"b": 210
}
},
{
"name": "support / success / dark",
"description": "Success dark.\nOriginal color: 'green-70'",
"color": {
"r": 84,
"g": 148,
"b": 16
}
},
{
"name": "support / success / light",
"description": "Success light.\nOriginal color: 'green-20'",
"color": {
"r": 196,
"g": 224,
"b": 165
}
},
{
"name": "support / info",
"description": "Information.\nOriginal color: 'blue-50'",
"color": {
"r": 49,
"g": 115,
"b": 222
}
},
{
"name": "support / info / bg",
"description": "Information Background.\nOriginal color: 'blue-10'",
"color": {
"r": 234,
"g": 240,
"b": 250
}
},
{
"name": "support / info / dark",
"description": "Information dark.\nOriginal color: 'blue-70'",
"color": {
"r": 38,
"g": 89,
"b": 171
}
},
{
"name": "support / info / light",
"description": "Information light.\nOriginal color: 'blue-20'",
"color": {
"r": 193,
"g": 215,
"b": 251
}
}
]
The script
This can be copy and pasted directly into the console and will import your colors.
It will also edit existant colors if they exists already. Name will be used to
check existence.
Base colors only
tokens = [
{
"name": "black",
"description": "",
"color": {
"r": 0,
"g": 0,
"b": 0
}
},
{
"name": "blue / 10",
"description": "",
"color": {
"r": 234,
"g": 240,
"b": 250
}
},
{
"name": "blue / 100",
"description": "",
"color": {
"r": 13,
"g": 36,
"b": 74
}
},
{
"name": "blue / 20",
"description": "",
"color": {
"r": 193,
"g": 215,
"b": 251
}
},
{
"name": "blue / 30",
"description": "",
"color": {
"r": 175,
"g": 197,
"b": 232
}
},
{
"name": "blue / 40",
"description": "",
"color": {
"r": 103,
"g": 149,
"b": 224
}
},
{
"name": "blue / 50",
"description": "",
"color": {
"r": 49,
"g": 115,
"b": 222
}
},
{
"name": "blue / 60",
"description": "",
"color": {
"r": 44,
"g": 102,
"b": 196
}
},
{
"name": "blue / 70",
"description": "",
"color": {
"r": 38,
"g": 89,
"b": 171
}
},
{
"name": "blue / 80",
"description": "",
"color": {
"r": 31,
"g": 85,
"b": 173
}
},
{
"name": "blue / 90",
"description": "",
"color": {
"r": 21,
"g": 60,
"b": 122
}
},
{
"name": "gray / 10",
"description": "",
"color": {
"r": 248,
"g": 248,
"b": 248
}
},
{
"name": "gray / 100",
"description": "",
"color": {
"r": 20,
"g": 20,
"b": 20
}
},
{
"name": "gray / 20",
"description": "",
"color": {
"r": 224,
"g": 224,
"b": 224
}
},
{
"name": "gray / 30",
"description": "",
"color": {
"r": 198,
"g": 198,
"b": 198
}
},
{
"name": "gray / 40",
"description": "",
"color": {
"r": 168,
"g": 168,
"b": 168
}
},
{
"name": "gray / 50",
"description": "",
"color": {
"r": 141,
"g": 141,
"b": 141
}
},
{
"name": "gray / 60",
"description": "",
"color": {
"r": 111,
"g": 111,
"b": 111
}
},
{
"name": "gray / 70",
"description": "",
"color": {
"r": 82,
"g": 82,
"b": 82
}
},
{
"name": "gray / 80",
"description": "",
"color": {
"r": 57,
"g": 57,
"b": 57
}
},
{
"name": "gray / 90",
"description": "",
"color": {
"r": 38,
"g": 38,
"b": 38
}
},
{
"name": "green / 10",
"description": "",
"color": {
"r": 230,
"g": 248,
"b": 210
}
},
{
"name": "green / 20",
"description": "",
"color": {
"r": 196,
"g": 224,
"b": 165
}
},
{
"name": "green / 50",
"description": "",
"color": {
"r": 113,
"g": 199,
"b": 22
}
},
{
"name": "green / 60",
"description": "",
"color": {
"r": 100,
"g": 173,
"b": 19
}
},
{
"name": "green / 70",
"description": "",
"color": {
"r": 84,
"g": 148,
"b": 16
}
},
{
"name": "orange / 10",
"description": "",
"color": {
"r": 253,
"g": 226,
"b": 203
}
},
{
"name": "orange / 20",
"description": "",
"color": {
"r": 250,
"g": 185,
"b": 128
}
},
{
"name": "orange / 50",
"description": "",
"color": {
"r": 255,
"g": 147,
"b": 51
}
},
{
"name": "orange / 60",
"description": "",
"color": {
"r": 255,
"g": 120,
"b": 0
}
},
{
"name": "orange / 70",
"description": "",
"color": {
"r": 186,
"g": 104,
"b": 32
}
},
{
"name": "primary / 10",
"description": "",
"color": {
"r": 234,
"g": 240,
"b": 250
}
},
{
"name": "primary / 100",
"description": "",
"color": {
"r": 13,
"g": 36,
"b": 74
}
},
{
"name": "primary / 20",
"description": "",
"color": {
"r": 193,
"g": 215,
"b": 251
}
},
{
"name": "primary / 30",
"description": "",
"color": {
"r": 175,
"g": 197,
"b": 232
}
},
{
"name": "primary / 40",
"description": "",
"color": {
"r": 103,
"g": 149,
"b": 224
}
},
{
"name": "primary / 50",
"description": "",
"color": {
"r": 49,
"g": 115,
"b": 222
}
},
{
"name": "primary / 60",
"description": "",
"color": {
"r": 44,
"g": 102,
"b": 196
}
},
{
"name": "primary / 70",
"description": "",
"color": {
"r": 38,
"g": 89,
"b": 171
}
},
{
"name": "primary / 80",
"description": "",
"color": {
"r": 31,
"g": 85,
"b": 173
}
},
{
"name": "primary / 90",
"description": "",
"color": {
"r": 21,
"g": 60,
"b": 122
}
},
{
"name": "purple / 20",
"description": "",
"color": {
"r": 185,
"g": 149,
"b": 202
}
},
{
"name": "purple / 50",
"description": "",
"color": {
"r": 147,
"g": 45,
"b": 194
}
},
{
"name": "purple / 60",
"description": "",
"color": {
"r": 108,
"g": 33,
"b": 143
}
},
{
"name": "purple / 70",
"description": "",
"color": {
"r": 89,
"g": 27,
"b": 117
}
},
{
"name": "red / 10",
"description": "",
"color": {
"r": 251,
"g": 225,
"b": 225
}
},
{
"name": "red / 20",
"description": "",
"color": {
"r": 240,
"g": 168,
"b": 168
}
},
{
"name": "red / 50",
"description": "",
"color": {
"r": 242,
"g": 29,
"b": 29
}
},
{
"name": "red / 60",
"description": "",
"color": {
"r": 217,
"g": 25,
"b": 25
}
},
{
"name": "red / 70",
"description": "",
"color": {
"r": 191,
"g": 23,
"b": 23
}
},
{
"name": "white",
"description": "",
"color": {
"r": 255,
"g": 255,
"b": 255
}
},
{
"name": "yellow / 20",
"description": "",
"color": {
"r": 255,
"g": 249,
"b": 192
}
},
{
"name": "yellow / 50",
"description": "",
"color": {
"r": 255,
"g": 244,
"b": 144
}
},
{
"name": "yellow / 60",
"description": "",
"color": {
"r": 255,
"g": 230,
"b": 13
}
},
{
"name": "yellow / 70",
"description": "",
"color": {
"r": 223,
"g": 201,
"b": 3
}
}
]
tokens.forEach(token => {
// edit the style if already existing
const existingStyles = figma.getLocalPaintStyles()
let existing = existingStyles.find(style => style.name === token.name)
let figmaStyle
if (existing) {
figmaStyle = existing
} else {
figmaStyle = figma.createPaintStyle()
}
figmaStyle.name = token.name
figmaStyle.description = token.description
figmaStyle.paints = [
{
type: 'SOLID',
color: {
r: token.color.r / 255,
g: token.color.g / 255,
b: token.color.b / 255,
},
},
]
})
Tokens only
tokens = [
{
"name": "ui / background",
"description": "Page background.\nOriginal color: 'white'",
"color": {
"r": 255,
"g": 255,
"b": 255
}
},
{
"name": "ui / 01",
"description": "Secondary page\nBackground 2.\nOriginal color: 'gray-10'",
"color": {
"r": 248,
"g": 248,
"b": 248
}
},
{
"name": "ui / 02",
"description": "Subtle border\nBackground 3.\nOriginal color: 'gray-20'",
"color": {
"r": 224,
"g": 224,
"b": 224
}
},
{
"name": "ui / 03",
"description": "Medium contrast border.\nOriginal color: 'gray-50'",
"color": {
"r": 141,
"g": 141,
"b": 141
}
},
{
"name": "ui / 04",
"description": "High contrast border.\nOriginal color: 'gray-60'",
"color": {
"r": 111,
"g": 111,
"b": 111
}
},
{
"name": "ui / 05",
"description": "Lightly colored background.\nOriginal color: 'primary-10'",
"color": {
"r": 234,
"g": 240,
"b": 250
}
},
{
"name": "text / 01",
"description": "Primary text\nHeaders.\nOriginal color: 'gray-80'",
"color": {
"r": 57,
"g": 57,
"b": 57
}
},
{
"name": "text / 02",
"description": "Secondary text\nForm labels.\nOriginal color: 'gray-60'",
"color": {
"r": 111,
"g": 111,
"b": 111
}
},
{
"name": "text / 03",
"description": "Tertiary text\nHelp text\nPlaceholder text.\nOriginal color: 'gray-40'",
"color": {
"r": 168,
"g": 168,
"b": 168
}
},
{
"name": "text / 04",
"description": "Text on interactive colors.\nOriginal color: 'white'",
"color": {
"r": 255,
"g": 255,
"b": 255
}
},
{
"name": "text / 05",
"description": "Disabled text.\nOriginal color: 'gray-30'",
"color": {
"r": 198,
"g": 198,
"b": 198
}
},
{
"name": "interactive / 01",
"description": "Primary interactive color\nPrimary buttons\nChecked color.\nOriginal color: 'primary-60'",
"color": {
"r": 44,
"g": 102,
"b": 196
}
},
{
"name": "interactive / 01 / hover",
"description": "Hover for Interactive-01.\nOriginal color: 'primary-70'",
"color": {
"r": 38,
"g": 89,
"b": 171
}
},
{
"name": "interactive / 01 / active",
"description": "Active for Interactive-01.\nOriginal color: 'primary-90'",
"color": {
"r": 21,
"g": 60,
"b": 122
}
},
{
"name": "interactive / 02",
"description": "Secondary interactive color\nSecondary button.\nOriginal color: 'gray-10'",
"color": {
"r": 248,
"g": 248,
"b": 248
}
},
{
"name": "interactive / 02 / hover",
"description": "Hover for Interactive-02.\nOriginal color: 'primary-10'",
"color": {
"r": 234,
"g": 240,
"b": 250
}
},
{
"name": "interactive / 03",
"description": "Selected elements\nActive elements\nAccent icons.\nOriginal color: 'primary-50'",
"color": {
"r": 49,
"g": 115,
"b": 222
}
},
{
"name": "interactive / 04",
"description": "Selected elements light\n Alternative border.\nOriginal color: 'primary-20'",
"color": {
"r": 193,
"g": 215,
"b": 251
}
},
{
"name": "interactive / 05",
"description": "Active element border.\nOriginal color: 'primary-40'",
"color": {
"r": 103,
"g": 149,
"b": 224
}
},
{
"name": "danger",
"description": "Danger button background.\nOriginal color: 'red-50'",
"color": {
"r": 242,
"g": 29,
"b": 29
}
},
{
"name": "hover / danger",
"description": "Danger hover.\nOriginal color: 'red-70'",
"color": {
"r": 191,
"g": 23,
"b": 23
}
},
{
"name": "link / 01",
"description": "Primary links\nText buttons.\nOriginal color: 'primary-60'",
"color": {
"r": 44,
"g": 102,
"b": 196
}
},
{
"name": "link / 02",
"description": "Secondary links.\nOriginal color: 'gray-50'",
"color": {
"r": 141,
"g": 141,
"b": 141
}
},
{
"name": "link / 03",
"description": "Active link.\nOriginal color: 'primary-50'",
"color": {
"r": 49,
"g": 115,
"b": 222
}
},
{
"name": "link / 04",
"description": "Dark background link.\nOriginal color: 'primary-40'",
"color": {
"r": 103,
"g": 149,
"b": 224
}
},
{
"name": "link / 05",
"description": "Dark background active link.\nOriginal color: 'primary-30'",
"color": {
"r": 175,
"g": 197,
"b": 232
}
},
{
"name": "icon / 01",
"description": "Primary icon.\nOriginal color: 'gray-80'",
"color": {
"r": 57,
"g": 57,
"b": 57
}
},
{
"name": "icon / 02",
"description": "Secondary icon.\nOriginal color: 'gray-50'",
"color": {
"r": 141,
"g": 141,
"b": 141
}
},
{
"name": "icon / 03",
"description": "Icons on interactive colors.\nOriginal color: 'white'",
"color": {
"r": 255,
"g": 255,
"b": 255
}
},
{
"name": "support / error",
"description": "Error.\nOriginal color: 'red-50'",
"color": {
"r": 242,
"g": 29,
"b": 29
}
},
{
"name": "support / error / bg",
"description": "Error Background.\nOriginal color: 'red-10'",
"color": {
"r": 251,
"g": 225,
"b": 225
}
},
{
"name": "support / error / dark",
"description": "Error dark.\nOriginal color: 'red-70'",
"color": {
"r": 191,
"g": 23,
"b": 23
}
},
{
"name": "support / error / light",
"description": "Error light.\nOriginal color: 'red-20'",
"color": {
"r": 240,
"g": 168,
"b": 168
}
},
{
"name": "support / warning",
"description": "Warning.\nOriginal color: 'orange-50'",
"color": {
"r": 255,
"g": 147,
"b": 51
}
},
{
"name": "support / warning / bg",
"description": "Warning Background.\nOriginal color: 'orange-10'",
"color": {
"r": 253,
"g": 226,
"b": 203
}
},
{
"name": "support / warning / dark",
"description": "Warning dark.\nOriginal color: 'orange-70'",
"color": {
"r": 186,
"g": 104,
"b": 32
}
},
{
"name": "support / warning / light",
"description": "Warning light.\nOriginal color: 'orange-20'",
"color": {
"r": 250,
"g": 185,
"b": 128
}
},
{
"name": "support / success",
"description": "Success.\nOriginal color: 'green-50'",
"color": {
"r": 113,
"g": 199,
"b": 22
}
},
{
"name": "support / success / bg",
"description": "Success Background.\nOriginal color: 'green-10'",
"color": {
"r": 230,
"g": 248,
"b": 210
}
},
{
"name": "support / success / dark",
"description": "Success dark.\nOriginal color: 'green-70'",
"color": {
"r": 84,
"g": 148,
"b": 16
}
},
{
"name": "support / success / light",
"description": "Success light.\nOriginal color: 'green-20'",
"color": {
"r": 196,
"g": 224,
"b": 165
}
},
{
"name": "support / info",
"description": "Information.\nOriginal color: 'blue-50'",
"color": {
"r": 49,
"g": 115,
"b": 222
}
},
{
"name": "support / info / bg",
"description": "Information Background.\nOriginal color: 'blue-10'",
"color": {
"r": 234,
"g": 240,
"b": 250
}
},
{
"name": "support / info / dark",
"description": "Information dark.\nOriginal color: 'blue-70'",
"color": {
"r": 38,
"g": 89,
"b": 171
}
},
{
"name": "support / info / light",
"description": "Information light.\nOriginal color: 'blue-20'",
"color": {
"r": 193,
"g": 215,
"b": 251
}
}
]
tokens.forEach(token => {
// edit the style if already existing
const existingStyles = figma.getLocalPaintStyles()
let existing = existingStyles.find(style => style.name === token.name)
let figmaStyle
if (existing) {
figmaStyle = existing
} else {
figmaStyle = figma.createPaintStyle()
}
figmaStyle.name = token.name
figmaStyle.description = token.description
figmaStyle.paints = [
{
type: 'SOLID',
color: {
r: token.color.r / 255,
g: token.color.g / 255,
b: token.color.b / 255,
},
},
]
})
Base colors and tokens
tokens = [
{
"name": "black",
"description": "",
"color": {
"r": 0,
"g": 0,
"b": 0
}
},
{
"name": "blue / 10",
"description": "",
"color": {
"r": 234,
"g": 240,
"b": 250
}
},
{
"name": "blue / 100",
"description": "",
"color": {
"r": 13,
"g": 36,
"b": 74
}
},
{
"name": "blue / 20",
"description": "",
"color": {
"r": 193,
"g": 215,
"b": 251
}
},
{
"name": "blue / 30",
"description": "",
"color": {
"r": 175,
"g": 197,
"b": 232
}
},
{
"name": "blue / 40",
"description": "",
"color": {
"r": 103,
"g": 149,
"b": 224
}
},
{
"name": "blue / 50",
"description": "",
"color": {
"r": 49,
"g": 115,
"b": 222
}
},
{
"name": "blue / 60",
"description": "",
"color": {
"r": 44,
"g": 102,
"b": 196
}
},
{
"name": "blue / 70",
"description": "",
"color": {
"r": 38,
"g": 89,
"b": 171
}
},
{
"name": "blue / 80",
"description": "",
"color": {
"r": 31,
"g": 85,
"b": 173
}
},
{
"name": "blue / 90",
"description": "",
"color": {
"r": 21,
"g": 60,
"b": 122
}
},
{
"name": "gray / 10",
"description": "",
"color": {
"r": 248,
"g": 248,
"b": 248
}
},
{
"name": "gray / 100",
"description": "",
"color": {
"r": 20,
"g": 20,
"b": 20
}
},
{
"name": "gray / 20",
"description": "",
"color": {
"r": 224,
"g": 224,
"b": 224
}
},
{
"name": "gray / 30",
"description": "",
"color": {
"r": 198,
"g": 198,
"b": 198
}
},
{
"name": "gray / 40",
"description": "",
"color": {
"r": 168,
"g": 168,
"b": 168
}
},
{
"name": "gray / 50",
"description": "",
"color": {
"r": 141,
"g": 141,
"b": 141
}
},
{
"name": "gray / 60",
"description": "",
"color": {
"r": 111,
"g": 111,
"b": 111
}
},
{
"name": "gray / 70",
"description": "",
"color": {
"r": 82,
"g": 82,
"b": 82
}
},
{
"name": "gray / 80",
"description": "",
"color": {
"r": 57,
"g": 57,
"b": 57
}
},
{
"name": "gray / 90",
"description": "",
"color": {
"r": 38,
"g": 38,
"b": 38
}
},
{
"name": "green / 10",
"description": "",
"color": {
"r": 230,
"g": 248,
"b": 210
}
},
{
"name": "green / 20",
"description": "",
"color": {
"r": 196,
"g": 224,
"b": 165
}
},
{
"name": "green / 50",
"description": "",
"color": {
"r": 113,
"g": 199,
"b": 22
}
},
{
"name": "green / 60",
"description": "",
"color": {
"r": 100,
"g": 173,
"b": 19
}
},
{
"name": "green / 70",
"description": "",
"color": {
"r": 84,
"g": 148,
"b": 16
}
},
{
"name": "orange / 10",
"description": "",
"color": {
"r": 253,
"g": 226,
"b": 203
}
},
{
"name": "orange / 20",
"description": "",
"color": {
"r": 250,
"g": 185,
"b": 128
}
},
{
"name": "orange / 50",
"description": "",
"color": {
"r": 255,
"g": 147,
"b": 51
}
},
{
"name": "orange / 60",
"description": "",
"color": {
"r": 255,
"g": 120,
"b": 0
}
},
{
"name": "orange / 70",
"description": "",
"color": {
"r": 186,
"g": 104,
"b": 32
}
},
{
"name": "primary / 10",
"description": "",
"color": {
"r": 234,
"g": 240,
"b": 250
}
},
{
"name": "primary / 100",
"description": "",
"color": {
"r": 13,
"g": 36,
"b": 74
}
},
{
"name": "primary / 20",
"description": "",
"color": {
"r": 193,
"g": 215,
"b": 251
}
},
{
"name": "primary / 30",
"description": "",
"color": {
"r": 175,
"g": 197,
"b": 232
}
},
{
"name": "primary / 40",
"description": "",
"color": {
"r": 103,
"g": 149,
"b": 224
}
},
{
"name": "primary / 50",
"description": "",
"color": {
"r": 49,
"g": 115,
"b": 222
}
},
{
"name": "primary / 60",
"description": "",
"color": {
"r": 44,
"g": 102,
"b": 196
}
},
{
"name": "primary / 70",
"description": "",
"color": {
"r": 38,
"g": 89,
"b": 171
}
},
{
"name": "primary / 80",
"description": "",
"color": {
"r": 31,
"g": 85,
"b": 173
}
},
{
"name": "primary / 90",
"description": "",
"color": {
"r": 21,
"g": 60,
"b": 122
}
},
{
"name": "purple / 20",
"description": "",
"color": {
"r": 185,
"g": 149,
"b": 202
}
},
{
"name": "purple / 50",
"description": "",
"color": {
"r": 147,
"g": 45,
"b": 194
}
},
{
"name": "purple / 60",
"description": "",
"color": {
"r": 108,
"g": 33,
"b": 143
}
},
{
"name": "purple / 70",
"description": "",
"color": {
"r": 89,
"g": 27,
"b": 117
}
},
{
"name": "red / 10",
"description": "",
"color": {
"r": 251,
"g": 225,
"b": 225
}
},
{
"name": "red / 20",
"description": "",
"color": {
"r": 240,
"g": 168,
"b": 168
}
},
{
"name": "red / 50",
"description": "",
"color": {
"r": 242,
"g": 29,
"b": 29
}
},
{
"name": "red / 60",
"description": "",
"color": {
"r": 217,
"g": 25,
"b": 25
}
},
{
"name": "red / 70",
"description": "",
"color": {
"r": 191,
"g": 23,
"b": 23
}
},
{
"name": "white",
"description": "",
"color": {
"r": 255,
"g": 255,
"b": 255
}
},
{
"name": "yellow / 20",
"description": "",
"color": {
"r": 255,
"g": 249,
"b": 192
}
},
{
"name": "yellow / 50",
"description": "",
"color": {
"r": 255,
"g": 244,
"b": 144
}
},
{
"name": "yellow / 60",
"description": "",
"color": {
"r": 255,
"g": 230,
"b": 13
}
},
{
"name": "yellow / 70",
"description": "",
"color": {
"r": 223,
"g": 201,
"b": 3
}
},
{
"name": "ui / background",
"description": "Page background.\nOriginal color: 'white'",
"color": {
"r": 255,
"g": 255,
"b": 255
}
},
{
"name": "ui / 01",
"description": "Secondary page\nBackground 2.\nOriginal color: 'gray-10'",
"color": {
"r": 248,
"g": 248,
"b": 248
}
},
{
"name": "ui / 02",
"description": "Subtle border\nBackground 3.\nOriginal color: 'gray-20'",
"color": {
"r": 224,
"g": 224,
"b": 224
}
},
{
"name": "ui / 03",
"description": "Medium contrast border.\nOriginal color: 'gray-50'",
"color": {
"r": 141,
"g": 141,
"b": 141
}
},
{
"name": "ui / 04",
"description": "High contrast border.\nOriginal color: 'gray-60'",
"color": {
"r": 111,
"g": 111,
"b": 111
}
},
{
"name": "ui / 05",
"description": "Lightly colored background.\nOriginal color: 'primary-10'",
"color": {
"r": 234,
"g": 240,
"b": 250
}
},
{
"name": "text / 01",
"description": "Primary text\nHeaders.\nOriginal color: 'gray-80'",
"color": {
"r": 57,
"g": 57,
"b": 57
}
},
{
"name": "text / 02",
"description": "Secondary text\nForm labels.\nOriginal color: 'gray-60'",
"color": {
"r": 111,
"g": 111,
"b": 111
}
},
{
"name": "text / 03",
"description": "Tertiary text\nHelp text\nPlaceholder text.\nOriginal color: 'gray-40'",
"color": {
"r": 168,
"g": 168,
"b": 168
}
},
{
"name": "text / 04",
"description": "Text on interactive colors.\nOriginal color: 'white'",
"color": {
"r": 255,
"g": 255,
"b": 255
}
},
{
"name": "text / 05",
"description": "Disabled text.\nOriginal color: 'gray-30'",
"color": {
"r": 198,
"g": 198,
"b": 198
}
},
{
"name": "interactive / 01",
"description": "Primary interactive color\nPrimary buttons\nChecked color.\nOriginal color: 'primary-60'",
"color": {
"r": 44,
"g": 102,
"b": 196
}
},
{
"name": "interactive / 01 / hover",
"description": "Hover for Interactive-01.\nOriginal color: 'primary-70'",
"color": {
"r": 38,
"g": 89,
"b": 171
}
},
{
"name": "interactive / 01 / active",
"description": "Active for Interactive-01.\nOriginal color: 'primary-90'",
"color": {
"r": 21,
"g": 60,
"b": 122
}
},
{
"name": "interactive / 02",
"description": "Secondary interactive color\nSecondary button.\nOriginal color: 'gray-10'",
"color": {
"r": 248,
"g": 248,
"b": 248
}
},
{
"name": "interactive / 02 / hover",
"description": "Hover for Interactive-02.\nOriginal color: 'primary-10'",
"color": {
"r": 234,
"g": 240,
"b": 250
}
},
{
"name": "interactive / 03",
"description": "Selected elements\nActive elements\nAccent icons.\nOriginal color: 'primary-50'",
"color": {
"r": 49,
"g": 115,
"b": 222
}
},
{
"name": "interactive / 04",
"description": "Selected elements light\n Alternative border.\nOriginal color: 'primary-20'",
"color": {
"r": 193,
"g": 215,
"b": 251
}
},
{
"name": "interactive / 05",
"description": "Active element border.\nOriginal color: 'primary-40'",
"color": {
"r": 103,
"g": 149,
"b": 224
}
},
{
"name": "danger",
"description": "Danger button background.\nOriginal color: 'red-50'",
"color": {
"r": 242,
"g": 29,
"b": 29
}
},
{
"name": "hover / danger",
"description": "Danger hover.\nOriginal color: 'red-70'",
"color": {
"r": 191,
"g": 23,
"b": 23
}
},
{
"name": "link / 01",
"description": "Primary links\nText buttons.\nOriginal color: 'primary-60'",
"color": {
"r": 44,
"g": 102,
"b": 196
}
},
{
"name": "link / 02",
"description": "Secondary links.\nOriginal color: 'gray-50'",
"color": {
"r": 141,
"g": 141,
"b": 141
}
},
{
"name": "link / 03",
"description": "Active link.\nOriginal color: 'primary-50'",
"color": {
"r": 49,
"g": 115,
"b": 222
}
},
{
"name": "link / 04",
"description": "Dark background link.\nOriginal color: 'primary-40'",
"color": {
"r": 103,
"g": 149,
"b": 224
}
},
{
"name": "link / 05",
"description": "Dark background active link.\nOriginal color: 'primary-30'",
"color": {
"r": 175,
"g": 197,
"b": 232
}
},
{
"name": "icon / 01",
"description": "Primary icon.\nOriginal color: 'gray-80'",
"color": {
"r": 57,
"g": 57,
"b": 57
}
},
{
"name": "icon / 02",
"description": "Secondary icon.\nOriginal color: 'gray-50'",
"color": {
"r": 141,
"g": 141,
"b": 141
}
},
{
"name": "icon / 03",
"description": "Icons on interactive colors.\nOriginal color: 'white'",
"color": {
"r": 255,
"g": 255,
"b": 255
}
},
{
"name": "support / error",
"description": "Error.\nOriginal color: 'red-50'",
"color": {
"r": 242,
"g": 29,
"b": 29
}
},
{
"name": "support / error / bg",
"description": "Error Background.\nOriginal color: 'red-10'",
"color": {
"r": 251,
"g": 225,
"b": 225
}
},
{
"name": "support / error / dark",
"description": "Error dark.\nOriginal color: 'red-70'",
"color": {
"r": 191,
"g": 23,
"b": 23
}
},
{
"name": "support / error / light",
"description": "Error light.\nOriginal color: 'red-20'",
"color": {
"r": 240,
"g": 168,
"b": 168
}
},
{
"name": "support / warning",
"description": "Warning.\nOriginal color: 'orange-50'",
"color": {
"r": 255,
"g": 147,
"b": 51
}
},
{
"name": "support / warning / bg",
"description": "Warning Background.\nOriginal color: 'orange-10'",
"color": {
"r": 253,
"g": 226,
"b": 203
}
},
{
"name": "support / warning / dark",
"description": "Warning dark.\nOriginal color: 'orange-70'",
"color": {
"r": 186,
"g": 104,
"b": 32
}
},
{
"name": "support / warning / light",
"description": "Warning light.\nOriginal color: 'orange-20'",
"color": {
"r": 250,
"g": 185,
"b": 128
}
},
{
"name": "support / success",
"description": "Success.\nOriginal color: 'green-50'",
"color": {
"r": 113,
"g": 199,
"b": 22
}
},
{
"name": "support / success / bg",
"description": "Success Background.\nOriginal color: 'green-10'",
"color": {
"r": 230,
"g": 248,
"b": 210
}
},
{
"name": "support / success / dark",
"description": "Success dark.\nOriginal color: 'green-70'",
"color": {
"r": 84,
"g": 148,
"b": 16
}
},
{
"name": "support / success / light",
"description": "Success light.\nOriginal color: 'green-20'",
"color": {
"r": 196,
"g": 224,
"b": 165
}
},
{
"name": "support / info",
"description": "Information.\nOriginal color: 'blue-50'",
"color": {
"r": 49,
"g": 115,
"b": 222
}
},
{
"name": "support / info / bg",
"description": "Information Background.\nOriginal color: 'blue-10'",
"color": {
"r": 234,
"g": 240,
"b": 250
}
},
{
"name": "support / info / dark",
"description": "Information dark.\nOriginal color: 'blue-70'",
"color": {
"r": 38,
"g": 89,
"b": 171
}
},
{
"name": "support / info / light",
"description": "Information light.\nOriginal color: 'blue-20'",
"color": {
"r": 193,
"g": 215,
"b": 251
}
}
]
tokens.forEach(token => {
// edit the style if already existing
const existingStyles = figma.getLocalPaintStyles()
let existing = existingStyles.find(style => style.name === token.name)
let figmaStyle
if (existing) {
figmaStyle = existing
} else {
figmaStyle = figma.createPaintStyle()
}
figmaStyle.name = token.name
figmaStyle.description = token.description
figmaStyle.paints = [
{
type: 'SOLID',
color: {
r: token.color.r / 255,
g: token.color.g / 255,
b: token.color.b / 255,
},
},
]
})