Overview
Design
Frontend
Fullstack
Create Website
Blog
Design
Export typography as json
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

Export typography as json

fastn supports exporting ftd.type-data variables as json. To export it as json you will need to use a processor named figma-typo-token to generate the equivalent json.

Example

Below mentioned example shows how to export virgil-font-typography as json.
Using figma-typo-token processor
Input
-- import: fastn-community.github.io/doc-site as ds
-- import: fifthtry.github.io/virgil-font-typography as virgil-typo

-- string virgil-typo-json:
$processor$: pr.figma-typo-token
variable: $virgil-typo.types
name: virgil-typography

-- ds.code: Virgil typography json
lang: json

$virgil-typo-json
Lang:
ftd
Output
Virgil typography json
{
"virgil-typography-desktop": {
  "blockquote": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "14",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "16",
      "type": "px"
    }
  },
  "button-large": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "18",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "700",
      "type": "integer"
    },
    "line-height": {
      "value": "24",
      "type": "px"
    }
  },
  "button-medium": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "16",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "700",
      "type": "integer"
    },
    "line-height": {
      "value": "21",
      "type": "px"
    }
  },
  "button-small": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "14",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "700",
      "type": "integer"
    },
    "line-height": {
      "value": "19",
      "type": "px"
    }
  },
  "copy-large": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "20",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "28",
      "type": "px"
    }
  },
  "copy-regular": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "16",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "24",
      "type": "px"
    }
  },
  "copy-small": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "16",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "20",
      "type": "px"
    }
  },
  "fine-print": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "14",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "18",
      "type": "px"
    }
  },
  "heading-hero": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "52",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "700",
      "type": "integer"
    },
    "line-height": {
      "value": "60",
      "type": "px"
    }
  },
  "heading-large": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "40",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "700",
      "type": "integer"
    },
    "line-height": {
      "value": "48",
      "type": "px"
    }
  },
  "heading-medium": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "32",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "600",
      "type": "integer"
    },
    "line-height": {
      "value": "44",
      "type": "px"
    }
  },
  "heading-small": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "24",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "500",
      "type": "integer"
    },
    "line-height": {
      "value": "36",
      "type": "px"
    }
  },
  "heading-tiny": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "18",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "500",
      "type": "integer"
    },
    "line-height": {
      "value": "26",
      "type": "px"
    }
  },
  "label-large": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "16",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "22",
      "type": "px"
    }
  },
  "label-small": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "14",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "16",
      "type": "px"
    }
  },
  "link": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "14",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "700",
      "type": "integer"
    },
    "line-height": {
      "value": "19",
      "type": "px"
    }
  },
  "source-code": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "14",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "16",
      "type": "px"
    }
  }
},
"virgil-typography-mobile": {
  "blockquote": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "14",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "16",
      "type": "px"
    }
  },
  "button-large": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "18",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "700",
      "type": "integer"
    },
    "line-height": {
      "value": "24",
      "type": "px"
    }
  },
  "button-medium": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "16",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "21",
      "type": "px"
    }
  },
  "button-small": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "14",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "19",
      "type": "px"
    }
  },
  "copy-large": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "20",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "28",
      "type": "px"
    }
  },
  "copy-regular": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "16",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "24",
      "type": "px"
    }
  },
  "copy-small": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "16",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "20",
      "type": "px"
    }
  },
  "fine-print": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "14",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "18",
      "type": "px"
    }
  },
  "heading-hero": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "52",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "700",
      "type": "integer"
    },
    "line-height": {
      "value": "60",
      "type": "px"
    }
  },
  "heading-large": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "40",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "700",
      "type": "integer"
    },
    "line-height": {
      "value": "48",
      "type": "px"
    }
  },
  "heading-medium": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "32",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "600",
      "type": "integer"
    },
    "line-height": {
      "value": "44",
      "type": "px"
    }
  },
  "heading-small": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "24",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "500",
      "type": "integer"
    },
    "line-height": {
      "value": "36",
      "type": "px"
    }
  },
  "heading-tiny": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "18",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "500",
      "type": "integer"
    },
    "line-height": {
      "value": "26",
      "type": "px"
    }
  },
  "label-large": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "16",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "22",
      "type": "px"
    }
  },
  "label-small": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "14",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "16",
      "type": "px"
    }
  },
  "link": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "14",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "19",
      "type": "px"
    }
  },
  "source-code": {
    "font-family": {
      "value": "fifthtry.github.io/virgil-font/assets#fonts.virgil",
      "type": "reference"
    },
    "size": {
      "value": "14",
      "type": "px"
    },
    "letter-spacing": {
      "value": "0",
      "type": "px"
    },
    "weight": {
      "value": "400",
      "type": "integer"
    },
    "line-height": {
      "value": "16",
      "type": "px"
    }
  }
}
}
virgil-typography.json
Lang:
json

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