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 FTD 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 FTD code. Copy this FTD code by clicking on the copy icon at the top of the code-block above.
Go to the sailing-shark-cs 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 from template 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 FTD code.
Scroll down and commit directly to the main branch by press on Commit changes button as shown below.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
Getting Help
Have a question or need help?
Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.
Join our Discord channel and share your thoughts, suggestion, question etc.
Connect with our community!Found an issue?
If you find some issue, please visit our GitHub issues to tell us about it.
Quick links:
Join us
We welcome you to join our Discord community today.
We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.
Copyright © 2023 - FifthTry.com
