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: fastn-community.github.io/virgil-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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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": null,
"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