How to create your own Fastn Color Scheme from Figma json
It happens quite often that we get a hold of some nice color-scheme package which we believe would look good on our pages but we don't want to use the same color-scheme as it is. Sometimes, we want to do some tweaks on top of that already good looking color-scheme and create our own super awesome color-scheme specific for our websites.
In ftd, you can create your own color-scheme package from
the exported fastn color-scheme json generated from figma.
If you have come here, you might be already familiar
with using fastn color-scheme json in Figma using Token Studio for Figma plugin.
If not, then visit this guide.
Install figma tokens plugin
If you already have this
Token Studio for figma (Figma Tokens)
plugin installed, then awesome. If not, then visit the above link.Open your Figma file
You can use any of your existing figma file or create a new one as shown below.
In this tutorial, I will be using the same figma file which I used in this
tutorial guide
Download forest-cs.json file
Download the below json code as a new json file named forest-cs.json
by clicking on 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 in figma plugin
Once you have launched your figma tokens plugin,
head to
Tools -> Load from File/Folder or Preset as shown below
Then under
File tab, click on Choose File option
It will show a File picker, open your
forest-cs.json file
which you saved as shown below.
Then tick the
forest-cs-light checkbox to set the
light color-scheme in your page.
Check your component colors
You will notice that the rectangle is using this color:
Background Colors -> base
inside your figma plugin once you select the rectangle as shown below.
And text is using this color:
Standalone Colors -> text
Let's modify some colors
Guess what we don't like any of these two colors at all in this light color scheme.
Let's say we want the Background Colors -> base
to be some light green color (for eg. #90EE90)
instead of the boring white :(
Background Colors -> base and click on Edit token option
as shown below
You will see this window once you hit Edit token option.
On this window, edit the Color value to
this #90EE90 (for light green color) then hit Save button
as shown below.
Similarly, select the text-block and edit its color by right-clicking
on its color circle i.e Standalone Colors -> text as shown below
Now change this color by changing its Color value
to #0b5394 (for blue color) then hit Save button
This looks much better now :)
After doing such color modifications, you might want to save your color-scheme
as a fastn color-scheme package. For this, we can convert this json generated
from this color-scheme to
fastn code which we can use in our fastn
color-scheme package.Let's convert json to FTD
To export your color-scheme as json, click on Export to File/Folder under Tools
in your Figma Tokens plugin as shown below.
After doing that, copy the json from the preview section as shown below.
As you can see, this json is for light color-scheme. Similarly copy
the dark color-scheme json from preview section and make one json
after merging both jsons.
And paste this merged json in the text-box below.
Change to FTD
You will see the generated
fastn code. Copy this fastn code by clicking
on the copy icon at the top of the code-block above.Go to the color-scheme-template github repository
This repo is a template repo for fastn color-schemes, we will create our own color-scheme repo using this. To visit this repo, click here
To do that, click on theUse this template button then Create a new repository
as shown below
Fill your repository details as shown below, then click on
Create repository
button.
Wait for a while, after that you will see your color-scheme repository
created using this template like this:
But before you can use this repo, you need to do setup some things
Modify the FASTN.ftd
Change the fastn.package and download-base-url
based on your repo name and username as shown below.
To edit this file, hit the edit icon as shown below
and make your changes
Like this
When you are done updating the contents, scroll down and save changes
by committing directly on the main branch as shown below.
Modify index.ftd
Just like we updated FASTN.ftd, update the import for the colors
based on your username and repository name as shown below.
Like this
Modify colors.ftd
Go to your
colors.ftd file in your repo and click on the edit button
Then Paste your copied fastn code.
Activate github pages
Now to activate github pages (gh-pages) go to Settings as shown below
Go to Pages tab
Then select the Source to
Deploy from the branch and select the branch to
gh-pages, then hit Save as shown below.
Preview your color-scheme in action
Go to your (<github-username>.github.io/<repo>) page to see your color-scheme
in action.
heulitig.github.io/my-color-scheme as shown below
Congratulations you have completed this tutorial.
More Awesome fastn color-schemes
Check out these fastn color-schemes which you can use right away
