ftd-to-figma.ftd

-- import: fastn/processors as pr
-- import: fifthtry.github.io/forest-cs as forest-cs
-- import: fifthtry.github.io/saturated-sunset-cs as sunset-cs
-- import: heulitig.github.io/figma-tokens-tutorial/json-to-ftd as j
-- import: heulitig.github.io/figma-tokens-tutorial/assets as assets

-- string forest-figma:
$processor$: pr.figma-cs-token
variable: $forest-cs.main
name: forest-cs


-- string sunset-figma:
$processor$: pr.figma-cs-token
variable: $sunset-cs.main
name: sunset-cs

-- ds.page: How to use Figma Tokens with fastn color schemes

-- ds.h1: 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.

-- ds.h1: 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.

-- ftd.image:
src: $assets.files.static.create-new-design-file.png
height.fixed.px: 350
width: fill-container

-- ds.h1: Open Figma Tokens plugin

Select quick actions from menu to open `Token Studio for figma`
(Figma Tokens) plugin as shown below.

-- ftd.image:
src: $assets.files.static.quick-actions.png
height.fixed.px: 350
width: fill-container

-- ds.markdown:

After clicking on quick actions, search for `Token Studio for figma`
and launch that plugin by clicking on it.

-- ftd.image:
src: $assets.files.static.select-token-studio.png
height.fixed.px: 350
width: fill-container

-- ds.h1: 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

-- ftd.image:
src: $assets.files.static.select-new-empty-file.png
height.fixed.px: 350
width: fill-container

-- ds.h1: Save the forest theme json

Click on the below copy button inside forest-cs code-block

-- ds.code: forest-cs
lang: json
max-height: 300

$forest-figma

-- ds.markdown:

Create a new json file named `forest-cs.json` using your favourite
text editor (for eg. Sublime Text) and paste the content you just copied
and save it.

-- ds.h1: Load `forest-cs.json` inside figma plugin

To load `forest-cs.json` which we just created,

Step 1: Click on the Load button

-- ftd.image:
src: $assets.files.static.select-load-button.png
height.fixed.px: 350
width: fill-container

-- ds.markdown:

Step 2: Go under File Tab

-- ftd.image:
src: $assets.files.static.select-file.png
height.fixed.px: 350
width: fill-container

-- ds.markdown:

Step 3: Click on Choose File button

-- ftd.image:
src: $assets.files.static.select-choose-file.png
height.fixed.px: 350
width: fill-container

-- ds.markdown:

Step 4: Find and select `forest-cs.json` from the file picker
and click on open button.

-- ftd.image:
src: $assets.files.static.select-forest-cs.png
height.fixed.px: 350
width: fill-container

-- ds.markdown:

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.

-- ftd.image:
src: $assets.files.static.select-forest-cs-light.png
height.fixed.px: 350
width: fill-container

-- ds.h1: Create a new rectangle

To do this first select rectangle shape from top menu.

-- ftd.image:
src: $assets.files.static.select-rectangle-shape.png
height.fixed.px: 350
width: fill-container

-- ds.markdown:

After selecting it, drag the cursor and create your rectangle.

-- ftd.image:
src: $assets.files.static.create-rectangle.png
height.fixed.px: 350
width: fill-container

-- ds.markdown:

Now select this rectangle
and change its color to `Background Colors -> base` as shown below

-- ftd.image:
src: $assets.files.static.select-rectangle-color.png
height.fixed.px: 350
width: fill-container

-- ds.h1: Create a new text-block

First, select the Text option from the top menu.

-- ftd.image:
src: $assets.files.static.select-text-option.png
height.fixed.px: 350
width: fill-container

-- ds.markdown:

After selecting it, drag the cursor inside the rectangle
and create a text-block. Add some text to it,
let's say `Hello There`

-- ftd.image:
src: $assets.files.static.hello-text-block.png
height.fixed.px: 350
width: fill-container

-- ds.markdown:

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.

-- ftd.image:
src: $assets.files.static.select-text-block-color.png
height.fixed.px: 350
width: fill-container

-- ds.h1: Test your design in dark mode

Toggle the `forest-cs-dark` checkbox to change the design with dark color scheme

-- ftd.image:
src: $assets.files.static.forest-toggle-cs.png
height.fixed.px: 350
width: fill-container

-- ds.h1: Lets try another color scheme

Let's use `sunset-cs` now. Save the following json to a new json file
named `sunset-cs.json`.

-- ds.code: Sunset-cs
lang: json
max-height: 300

$sunset-figma

-- ds.h1: 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`

-- ftd.image:
src: $assets.files.static.open-sunset-cs.png
height.fixed.px: 350
width: fill-container

-- ds.markdown:

After loading `sunset-cs.json`, check the `sunset-cs-light` checkbox as shown below

-- ftd.image:
src: $assets.files.static.select-sunset-cs-light.png
height.fixed.px: 350
width: fill-container

-- ds.markdown:

To see the design in dark color scheme, toggle `sunset-cs-dark` checkbox.

-- ftd.image:
src: $assets.files.static.sunset-toggle-cs.png
height.fixed.px: 350
width: fill-container

-- ds.markdown:

Congratulations you have successfully completed this tutorial.


-- end: ds.page