Overview
Design
Frontend
Fullstack
Create Website
Blog
Design
Typography json to FTD
Use Figma Tokens with fastn color schemes
Create your own fastn color scheme from Figma json
Modify color scheme package
Create font package
Export typography as json
Typography json to FTD

Typography json to fastn

fastn allows you to generate typography code from its equivalent json. To generate fastn code, you will need to include typo.js from fastn-js repo and use its typo_to_ftd(json) JS function.

This function typo_to_ftd(json) takes json string as input and returns two strings - fastn source code, styled fastn code.

Example

Below mentioned code shows how we can generate equivalent fastn code for fastn-io-typography from its json.
Using typo_to_ftd(json) to generate fastn code
Input
-- import: fastn-stack.github.io/fastn-js/assets as js-assets
-- import: fastn-community.github.io/doc-site as ds
-- import: fifthtry.github.io/fastn-io-typography as fastn-typo

-- optional string $code:
-- optional string $formatted-code:

-- string fastn-typo-json:
$processor$: pr.figma-typo-token
variable: $forest-cs.main
name: fastn-typography

-- void typo-to-ftd(json,store_at,formatted_string):
string json:
string $store_at:
string $formatted_string:
js: [$js-assets.files.typo.js]

value = typo_to_ftd(json);
store_at = value[0];
formatted_string = value[1];

-- ftd.text: Generate `fastn` code
$on-click$: $typo-to-ftd(json = $fastn-typo-json, $store_at = $code, $formatted_string = $formatted-code)
color: $inherited.colors.text
role: $inherited.types.copy-regular
border-width.px: 2
padding.px: 5

-- ds.code:
if: { code != NULL }
body: $formatted-code
text: $code
max-height.fixed.px: 300
Lang:
ftd
Output
Generate fastn code

Exporter

Paste any typography json below and generate its fastn equivalent code.
Generate FTD code

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!
⭐️

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.

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