VIDEO Install figma token If you already have this
[`Token Studio for figma` (Figma Tokens)](https://www.figma.com/community/plugin/843461159747178978/Tokens-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 documentation](https://fastn-community.github.io/forest-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"
}
}
}
}
Load `forest-cs.json` inside figma plugin To load `forest-cs.json` which we just created,
Step 1: Under `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 documentation](https://fastn-community.github.io/saturated-sunset-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"
}
}
}
}
Load `sunset-cs.json` in figma Just like we loaded `forest-cs.json`, similarly load `sunset-cs.json`
into the figma plugin.
Click on `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.
Learn More - [About how to create your own fastn color-scheme from figma](/figma-to-fastn-cs/)
More Awesome fastn color-schemes Check out these fastn color-schemes which you can use right away
- [Dark flame CS](https://fastn-community.github.io/dark-flame-cs/)
- [Forest CS](https://fastn-community.github.io/forest-cs/)
- [Saturated sunset CS](https://fastn-community.github.io/saturated-sunset-cs/)
- [Winter CS](https://fastn-community.github.io/winter-cs/)