How to use Figma Tokens with fastn color schemes
Install figma token
If you already have this
Token Studio for figma (Figma Tokens)
plugin installed, then awesome. If not, then visit the above link.Create a new figma document
From your figma account, create a new design file by clicking
on the
New design file button as shown below.
Open Figma Tokens plugin
Select quick actions from menu to open
Token Studio for figma
(Figma Tokens) plugin as shown below.
After clicking on quick actions, search for
Token Studio for figma
and launch that plugin by clicking on it.
Create a new empty file inside figma plugin
Once you have launched the plugin, create a new empty file
by clicking on its button as shown below
Save the forest theme json
Download and save the below json code by clicking at the download icon in the code-block below.
Note: You can also get this json from its
color documentationforest-cs
{
"forest-cs-light": {
"Accent Colors": {
"primary": {
"value": "#4ed42d",
"type": "color"
},
"secondary": {
"value": "#4fb2df",
"type": "color"
},
"tertiary": {
"value": "#c5cbd7",
"type": "color"
}
},
"Background Colors": {
"base": {
"value": "#e5e6e2",
"type": "color"
},
"code": {
"value": "#eaeaea",
"type": "color"
},
"overlay": {
"value": "rgba(0, 0, 0, 0.8)",
"type": "color"
},
"step-1": {
"value": "#293434",
"type": "color"
},
"step-2": {
"value": "#7c9e9d",
"type": "color"
}
},
"CTA Danger Colors": {
"base": {
"value": "#f9e4e1",
"type": "color"
},
"border": {
"value": "#e9968c",
"type": "color"
},
"border-disabled": {
"value": "#2b8074",
"type": "color"
},
"disabled": {
"value": "#faeceb",
"type": "color"
},
"focused": {
"value": "#d97973",
"type": "color"
},
"hover": {
"value": "#f1bdb6",
"type": "color"
},
"pressed": {
"value": "#d46a63",
"type": "color"
},
"text": {
"value": "#fffbfe",
"type": "color"
},
"text-disabled": {
"value": "#feffff",
"type": "color"
}
},
"CTA Primary Colors": {
"base": {
"value": "#0d712c",
"type": "color"
},
"border": {
"value": "#2b8074",
"type": "color"
},
"border-disabled": {
"value": "#6dd59569",
"type": "color"
},
"disabled": {
"value": "#6dd59569",
"type": "color"
},
"focused": {
"value": "#195c2e",
"type": "color"
},
"hover": {
"value": "#129039",
"type": "color"
},
"pressed": {
"value": "#0a690b",
"type": "color"
},
"text": {
"value": "#feffff",
"type": "color"
},
"text-disabled": {
"value": "#50b968eb",
"type": "color"
}
},
"CTA Secondary Colors": {
"base": {
"value": "#4fb2df",
"type": "color"
},
"border": {
"value": "#209fdb",
"type": "color"
},
"border-disabled": {
"value": "#2b8074",
"type": "color"
},
"disabled": {
"value": "rgba(79, 178, 223, 0.4)",
"type": "color"
},
"focused": {
"value": "#5ea4c3",
"type": "color"
},
"hover": {
"value": "#61b5dc",
"type": "color"
},
"pressed": {
"value": "#1da7e6",
"type": "color"
},
"text": {
"value": "#ffffff",
"type": "color"
},
"text-disabled": {
"value": "#feffff",
"type": "color"
}
},
"CTA Tertiary Colors": {
"base": {
"value": "#556375",
"type": "color"
},
"border": {
"value": "#e2e4e7",
"type": "color"
},
"border-disabled": {
"value": "#2b8074",
"type": "color"
},
"disabled": {
"value": "rgba(85, 99, 117, 0.4)",
"type": "color"
},
"focused": {
"value": "#4a4d51",
"type": "color"
},
"hover": {
"value": "#636d7a",
"type": "color"
},
"pressed": {
"value": "#3b4047",
"type": "color"
},
"text": {
"value": "#ffffff",
"type": "color"
},
"text-disabled": {
"value": "#feffff",
"type": "color"
}
},
"Custom Colors": {
"eight": {
"value": "#d554b3",
"type": "color"
},
"five": {
"value": "#eb57be",
"type": "color"
},
"four": {
"value": "#7a65c7",
"type": "color"
},
"nine": {
"value": "#ec8943",
"type": "color"
},
"one": {
"value": "#ed753a",
"type": "color"
},
"seven": {
"value": "#7564be",
"type": "color"
},
"six": {
"value": "#ef8dd6",
"type": "color"
},
"ten": {
"value": "#da7a4a",
"type": "color"
},
"three": {
"value": "#8fdcf8",
"type": "color"
},
"two": {
"value": "#f3db5f",
"type": "color"
}
},
"Error Colors": {
"base": {
"value": "#2a2a24",
"type": "color"
},
"border": {
"value": "#df2b2b",
"type": "color"
},
"text": {
"value": "#f5bdbb",
"type": "color"
}
},
"Info Colors": {
"base": {
"value": "#252f2a",
"type": "color"
},
"border": {
"value": "#252f2a",
"type": "color"
},
"text": {
"value": "#252f2a",
"type": "color"
}
},
"Standalone Colors": {
"border": {
"value": "#434547",
"type": "color"
},
"border-strong": {
"value": "#919192",
"type": "color"
},
"scrim": {
"value": "#007f9b",
"type": "color"
},
"shadow": {
"value": "#007f9b",
"type": "color"
},
"text": {
"value": "#556f68",
"type": "color"
},
"text-strong": {
"value": "#ffffff",
"type": "color"
}
},
"Success Colors": {
"base": {
"value": "#282f25",
"type": "color"
},
"border": {
"value": "#3d741f",
"type": "color"
},
"text": {
"value": "#e3f0c4",
"type": "color"
}
},
"Warning Colors": {
"base": {
"value": "#2a2f24",
"type": "color"
},
"border": {
"value": "#966220",
"type": "color"
},
"text": {
"value": "#fbefba",
"type": "color"
}
}
},
"forest-cs-dark": {
"Accent Colors": {
"primary": {
"value": "#4ed42d",
"type": "color"
},
"secondary": {
"value": "#4fb2df",
"type": "color"
},
"tertiary": {
"value": "#c5cbd7",
"type": "color"
}
},
"Background Colors": {
"base": {
"value": "#131a13",
"type": "color"
},
"code": {
"value": "#2b303b",
"type": "color"
},
"overlay": {
"value": "rgba(0, 0, 0, 0.8)",
"type": "color"
},
"step-1": {
"value": "#182517",
"type": "color"
},
"step-2": {
"value": "#233221",
"type": "color"
}
},
"CTA Danger Colors": {
"base": {
"value": "#f9e4e1",
"type": "color"
},
"border": {
"value": "#e9968c",
"type": "color"
},
"border-disabled": {
"value": "#2b8074",
"type": "color"
},
"disabled": {
"value": "#faeceb",
"type": "color"
},
"focused": {
"value": "#d97973",
"type": "color"
},
"hover": {
"value": "#f1bdb6",
"type": "color"
},
"pressed": {
"value": "#d46a63",
"type": "color"
},
"text": {
"value": "#1c1b1f",
"type": "color"
},
"text-disabled": {
"value": "#feffff",
"type": "color"
}
},
"CTA Primary Colors": {
"base": {
"value": "#0d712c",
"type": "color"
},
"border": {
"value": "#2b8074",
"type": "color"
},
"border-disabled": {
"value": "#6dd59569",
"type": "color"
},
"disabled": {
"value": "#6dd59569",
"type": "color"
},
"focused": {
"value": "#195c2e",
"type": "color"
},
"hover": {
"value": "#129039",
"type": "color"
},
"pressed": {
"value": "#0a690b",
"type": "color"
},
"text": {
"value": "#feffff",
"type": "color"
},
"text-disabled": {
"value": "#50b968eb",
"type": "color"
}
},
"CTA Secondary Colors": {
"base": {
"value": "#4fb2df",
"type": "color"
},
"border": {
"value": "#209fdb",
"type": "color"
},
"border-disabled": {
"value": "#2b8074",
"type": "color"
},
"disabled": {
"value": "rgba(79, 178, 223, 0.4)",
"type": "color"
},
"focused": {
"value": "#5ea4c3",
"type": "color"
},
"hover": {
"value": "#61b5dc",
"type": "color"
},
"pressed": {
"value": "#1da7e6",
"type": "color"
},
"text": {
"value": "#ffffff",
"type": "color"
},
"text-disabled": {
"value": "#feffff",
"type": "color"
}
},
"CTA Tertiary Colors": {
"base": {
"value": "#556375",
"type": "color"
},
"border": {
"value": "#e2e4e7",
"type": "color"
},
"border-disabled": {
"value": "#2b8074",
"type": "color"
},
"disabled": {
"value": "rgba(85, 99, 117, 0.4)",
"type": "color"
},
"focused": {
"value": "#4a4d51",
"type": "color"
},
"hover": {
"value": "#636d7a",
"type": "color"
},
"pressed": {
"value": "#3b4047",
"type": "color"
},
"text": {
"value": "#ffffff",
"type": "color"
},
"text-disabled": {
"value": "#feffff",
"type": "color"
}
},
"Custom Colors": {
"eight": {
"value": "#d554b3",
"type": "color"
},
"five": {
"value": "#eb57be",
"type": "color"
},
"four": {
"value": "#7a65c7",
"type": "color"
},
"nine": {
"value": "#ec8943",
"type": "color"
},
"one": {
"value": "#ed753a",
"type": "color"
},
"seven": {
"value": "#7564be",
"type": "color"
},
"six": {
"value": "#ef8dd6",
"type": "color"
},
"ten": {
"value": "#da7a4a",
"type": "color"
},
"three": {
"value": "#8fdcf8",
"type": "color"
},
"two": {
"value": "#f3db5f",
"type": "color"
}
},
"Error Colors": {
"base": {
"value": "#2a2a24",
"type": "color"
},
"border": {
"value": "#df2b2b",
"type": "color"
},
"text": {
"value": "#f5bdbb",
"type": "color"
}
},
"Info Colors": {
"base": {
"value": "#252f2a",
"type": "color"
},
"border": {
"value": "#252f2a",
"type": "color"
},
"text": {
"value": "#252f2a",
"type": "color"
}
},
"Standalone Colors": {
"border": {
"value": "#434547",
"type": "color"
},
"border-strong": {
"value": "#919192",
"type": "color"
},
"scrim": {
"value": "#007f9b",
"type": "color"
},
"shadow": {
"value": "#007f9b",
"type": "color"
},
"text": {
"value": "#9ea89e",
"type": "color"
},
"text-strong": {
"value": "#ffffff",
"type": "color"
}
},
"Success Colors": {
"base": {
"value": "#282f25",
"type": "color"
},
"border": {
"value": "#3d741f",
"type": "color"
},
"text": {
"value": "#e3f0c4",
"type": "color"
}
},
"Warning Colors": {
"base": {
"value": "#2a2f24",
"type": "color"
},
"border": {
"value": "#966220",
"type": "color"
},
"text": {
"value": "#fbefba",
"type": "color"
}
}
}
}
forest-cs.json
Lang:
json
Load forest-cs.json inside figma plugin
To load forest-cs.json which we just created,
Tools -> Click on Load from file/folder or Preset
Step 2: Go under
File Tab
Step 3: Click on
Choose File button
Step 4: Find and select
forest-cs.json from the file picker
and click on open button.
After opening
forest-cs.json, check the forest-cs-light checkbox
as shown below for making the light color scheme as the current
active color scheme.
Create a new rectangle
To do this first select rectangle shape from top menu.
After selecting it, drag the cursor and create your rectangle.
Now select this rectangle
and change its color to
Background Colors -> base as shown below
Create a new text-block
First, select the Text option from the top menu.
After selecting it, drag the cursor inside the rectangle
and create a text-block. Add some text to it,
let's say
Hello There
As you might see, the text is barely visible inside the rectangle.
So now, select the text-block and change its color to
Standalone Colors -> text as shown below.
Test your design in dark mode
Toggle the
forest-cs-dark checkbox to change the design with dark color scheme
Lets try another color scheme
Let's use sunset-cs now. Download this below json code as a new json file
named sunset-cs.json by clicking at the download button.
Note: You can also get this json from its
color documentationSunset-cs
{
"sunset-cs-light": {
"Accent Colors": {
"primary": {
"value": "#a53006",
"type": "color"
},
"secondary": {
"value": "#ef8435",
"type": "color"
},
"tertiary": {
"value": "#ffc136",
"type": "color"
}
},
"Background Colors": {
"base": {
"value": "#faebd7",
"type": "color"
},
"code": {
"value": "#eaeaea",
"type": "color"
},
"overlay": {
"value": "rgba(0, 0, 0, 0.8)",
"type": "color"
},
"step-1": {
"value": "#e3bc81",
"type": "color"
},
"step-2": {
"value": "#faad7b",
"type": "color"
}
},
"CTA Danger Colors": {
"base": {
"value": "#f9e4e1",
"type": "color"
},
"border": {
"value": "#e9968c",
"type": "color"
},
"border-disabled": {
"value": "#a53006",
"type": "color"
},
"disabled": {
"value": "#faeceb",
"type": "color"
},
"focused": {
"value": "#d97973",
"type": "color"
},
"hover": {
"value": "#f1bdb6",
"type": "color"
},
"pressed": {
"value": "#d46a63",
"type": "color"
},
"text": {
"value": "#fffbfe",
"type": "color"
},
"text-disabled": {
"value": "#feffff",
"type": "color"
}
},
"CTA Primary Colors": {
"base": {
"value": "#a53006",
"type": "color"
},
"border": {
"value": "#a53006",
"type": "color"
},
"border-disabled": {
"value": "#a5300661",
"type": "color"
},
"disabled": {
"value": "#a5300661",
"type": "color"
},
"focused": {
"value": "#611c03",
"type": "color"
},
"hover": {
"value": "#8c2702",
"type": "color"
},
"pressed": {
"value": "#611c03",
"type": "color"
},
"text": {
"value": "#feffff",
"type": "color"
},
"text-disabled": {
"value": "#a5300652",
"type": "color"
}
},
"CTA Secondary Colors": {
"base": {
"value": "#ef8435",
"type": "color"
},
"border": {
"value": "#f3a063",
"type": "color"
},
"border-disabled": {
"value": "#a53006",
"type": "color"
},
"disabled": {
"value": "#fad9c0",
"type": "color"
},
"focused": {
"value": "#b36328",
"type": "color"
},
"hover": {
"value": "#d77730",
"type": "color"
},
"pressed": {
"value": "#bf6a2a",
"type": "color"
},
"text": {
"value": "#ffffff",
"type": "color"
},
"text-disabled": {
"value": "#feffff",
"type": "color"
}
},
"CTA Tertiary Colors": {
"base": {
"value": "#ebe8e5",
"type": "color"
},
"border": {
"value": "#b0aeac",
"type": "color"
},
"border-disabled": {
"value": "#a53006",
"type": "color"
},
"disabled": {
"value": "#f9f8f7",
"type": "color"
},
"focused": {
"value": "#b0aeac",
"type": "color"
},
"hover": {
"value": "#d4d1ce",
"type": "color"
},
"pressed": {
"value": "#bcbab7",
"type": "color"
},
"text": {
"value": "#333333",
"type": "color"
},
"text-disabled": {
"value": "#feffff",
"type": "color"
}
},
"Custom Colors": {
"eight": {
"value": "#d554b3",
"type": "color"
},
"five": {
"value": "#eb57be",
"type": "color"
},
"four": {
"value": "#7a65c7",
"type": "color"
},
"nine": {
"value": "#ec8943",
"type": "color"
},
"one": {
"value": "#ed753a",
"type": "color"
},
"seven": {
"value": "#7564be",
"type": "color"
},
"six": {
"value": "#ef8dd6",
"type": "color"
},
"ten": {
"value": "#da7a4a",
"type": "color"
},
"three": {
"value": "#8fdcf8",
"type": "color"
},
"two": {
"value": "#f3db5f",
"type": "color"
}
},
"Error Colors": {
"base": {
"value": "#f9e4e1",
"type": "color"
},
"border": {
"value": "#e9968c",
"type": "color"
},
"text": {
"value": "#d84836",
"type": "color"
}
},
"Info Colors": {
"base": {
"value": "#dae7fb",
"type": "color"
},
"border": {
"value": "#dae7fb",
"type": "color"
},
"text": {
"value": "#dae7fb",
"type": "color"
}
},
"Standalone Colors": {
"border": {
"value": "#222222",
"type": "color"
},
"border-strong": {
"value": "#d9d9d9",
"type": "color"
},
"scrim": {
"value": "#393939",
"type": "color"
},
"shadow": {
"value": "#6f0100",
"type": "color"
},
"text": {
"value": "#707070",
"type": "color"
},
"text-strong": {
"value": "#333333",
"type": "color"
}
},
"Success Colors": {
"base": {
"value": "#dcefe4",
"type": "color"
},
"border": {
"value": "#95d0af",
"type": "color"
},
"text": {
"value": "#3e8d61",
"type": "color"
}
},
"Warning Colors": {
"base": {
"value": "#fdf7f1",
"type": "color"
},
"border": {
"value": "#f2c097",
"type": "color"
},
"text": {
"value": "#e78b3e",
"type": "color"
}
}
},
"sunset-cs-dark": {
"Accent Colors": {
"primary": {
"value": "#a53006",
"type": "color"
},
"secondary": {
"value": "#ef8435",
"type": "color"
},
"tertiary": {
"value": "#ffc136",
"type": "color"
}
},
"Background Colors": {
"base": {
"value": "#240002",
"type": "color"
},
"code": {
"value": "#2b303b",
"type": "color"
},
"overlay": {
"value": "rgba(0, 0, 0, 0.8)",
"type": "color"
},
"step-1": {
"value": "#550605",
"type": "color"
},
"step-2": {
"value": "#3e0e11",
"type": "color"
}
},
"CTA Danger Colors": {
"base": {
"value": "#f9e4e1",
"type": "color"
},
"border": {
"value": "#e9968c",
"type": "color"
},
"border-disabled": {
"value": "#a53006",
"type": "color"
},
"disabled": {
"value": "#faeceb",
"type": "color"
},
"focused": {
"value": "#d97973",
"type": "color"
},
"hover": {
"value": "#f1bdb6",
"type": "color"
},
"pressed": {
"value": "#d46a63",
"type": "color"
},
"text": {
"value": "#1c1b1f",
"type": "color"
},
"text-disabled": {
"value": "#feffff",
"type": "color"
}
},
"CTA Primary Colors": {
"base": {
"value": "#a53006",
"type": "color"
},
"border": {
"value": "#a53006",
"type": "color"
},
"border-disabled": {
"value": "#a5300661",
"type": "color"
},
"disabled": {
"value": "#a5300661",
"type": "color"
},
"focused": {
"value": "#611c03",
"type": "color"
},
"hover": {
"value": "#8c2702",
"type": "color"
},
"pressed": {
"value": "#611c03",
"type": "color"
},
"text": {
"value": "#feffff",
"type": "color"
},
"text-disabled": {
"value": "#a5300652",
"type": "color"
}
},
"CTA Secondary Colors": {
"base": {
"value": "#ef8435",
"type": "color"
},
"border": {
"value": "#f3a063",
"type": "color"
},
"border-disabled": {
"value": "#a53006",
"type": "color"
},
"disabled": {
"value": "#fad9c0",
"type": "color"
},
"focused": {
"value": "#b36328",
"type": "color"
},
"hover": {
"value": "#d77730",
"type": "color"
},
"pressed": {
"value": "#bf6a2a",
"type": "color"
},
"text": {
"value": "#ffffff",
"type": "color"
},
"text-disabled": {
"value": "#feffff",
"type": "color"
}
},
"CTA Tertiary Colors": {
"base": {
"value": "#ebe8e5",
"type": "color"
},
"border": {
"value": "#b0aeac",
"type": "color"
},
"border-disabled": {
"value": "#a53006",
"type": "color"
},
"disabled": {
"value": "#f9f8f7",
"type": "color"
},
"focused": {
"value": "#b0aeac",
"type": "color"
},
"hover": {
"value": "#d4d1ce",
"type": "color"
},
"pressed": {
"value": "#bcbab7",
"type": "color"
},
"text": {
"value": "#333333",
"type": "color"
},
"text-disabled": {
"value": "#feffff",
"type": "color"
}
},
"Custom Colors": {
"eight": {
"value": "#d554b3",
"type": "color"
},
"five": {
"value": "#eb57be",
"type": "color"
},
"four": {
"value": "#7a65c7",
"type": "color"
},
"nine": {
"value": "#ec8943",
"type": "color"
},
"one": {
"value": "#ed753a",
"type": "color"
},
"seven": {
"value": "#7564be",
"type": "color"
},
"six": {
"value": "#ef8dd6",
"type": "color"
},
"ten": {
"value": "#da7a4a",
"type": "color"
},
"three": {
"value": "#8fdcf8",
"type": "color"
},
"two": {
"value": "#f3db5f",
"type": "color"
}
},
"Error Colors": {
"base": {
"value": "#f9e4e1",
"type": "color"
},
"border": {
"value": "#e9968c",
"type": "color"
},
"text": {
"value": "#d84836",
"type": "color"
}
},
"Info Colors": {
"base": {
"value": "#dae7fb",
"type": "color"
},
"border": {
"value": "#dae7fb",
"type": "color"
},
"text": {
"value": "#dae7fb",
"type": "color"
}
},
"Standalone Colors": {
"border": {
"value": "#ffffff",
"type": "color"
},
"border-strong": {
"value": "#3e0306",
"type": "color"
},
"scrim": {
"value": "#393939",
"type": "color"
},
"shadow": {
"value": "#6f0100",
"type": "color"
},
"text": {
"value": "#d9d9d9",
"type": "color"
},
"text-strong": {
"value": "#ffffff",
"type": "color"
}
},
"Success Colors": {
"base": {
"value": "#dcefe4",
"type": "color"
},
"border": {
"value": "#95d0af",
"type": "color"
},
"text": {
"value": "#3e8d61",
"type": "color"
}
},
"Warning Colors": {
"base": {
"value": "#fdf7f1",
"type": "color"
},
"border": {
"value": "#f2c097",
"type": "color"
},
"text": {
"value": "#e78b3e",
"type": "color"
}
}
}
}
sunset-cs.json
Lang:
json
Load sunset-cs.json in figma
Just like we loaded forest-cs.json, similarly load sunset-cs.json
into the figma plugin.
Load -> Select File Tab ->
Click on Choose File -> Open sunset.cs.json
After loading
sunset-cs.json, check the sunset-cs-light checkbox as shown below
To see the design in dark color scheme, toggle
sunset-cs-dark checkbox.
Congratulations you have successfully completed this tutorial.
More Awesome fastn color-schemes
Check out these fastn color-schemes which you can use right away
