The JSON token file represents the data that drives the Vega Design System. While it is not meant to be used by developers to create components, it should be helpful in creating integrations which will enable faster platform or framework-agnostic development.
The file is structured as follows.There are 9 top level nodes: colors, typography, spacing, breakpoints, corners, shadows, rings, borders, and glyphs.
Most of these include sub-nodes for all deprecated tokens, aliasTokens, and baseTokens.
The deprecated node includes tokens that are no longer used, but are kept as part of the system to ensure that legacy designs will continue to work and be updatable through the Vega Figma plugin.
The aliasTokens node contains the predominantly used tokens in Vega. They are named for their functions, and should be used for these specific types of actions to ensure that the system remains scalable. They contain references to an associated baseToken which contains the detail for the object.
The baseToken node contains the most granular information about each object. For instance, in the color baseToken will include the full RGB information about the object. Base Tokens should not be used directly in design or development.
The colors aliasToken contains the following information:
group: The function of the token. For instance there are backgrounds, accents, etc. modes: type: The type of tokenmode: Light/default or dark modefield: the associated CSS selectorfigmaKey: the unique identifier within Figmavalue: The associated baseToken.id: the token namedescription: a description of the function of the tokendisplayName: The name of the token in the Vega Figma Pluginstate: The state of the component when the token is active.Example:
{
"group": "Background",
"modes": [
{
"type": "colorToken",
"mode": null,
"field": "background-color",
"figmaKey": "9c2644cc2af460c539dc9925b32688c9bd180794",
"value": "gray-70"
},
{
"type": "colorToken",
"field": "background-color",
"mode": "dark",
"figmaKey": "78c3371a732be8ec6f74ee05553f7704c4861967",
"value": "coolGray-40"
}
],
"id": "bg-brand",
"description": "",
"displayName": "Brand",
"state": null
}Color base tokens include information about how the color itself is defined. This includes:
id: The name of the base tokengroup: The general color categorydisplayName: The display name with in the Vega Figma plugincolor: The RGBA values.Example:
{
"id": "red-10",
"group": "Red",
"displayName": "Red 10",
"color": {
"blue": 230,
"red": 255,
"green": 227,
"alpha": 1
}Alias tokens have the following metadata:
state: The state of the component when the component is activedisplayName: The display name of the token in the Vega Figma pluginbreakpoints: breakpoint:The name of the breakpoint, references the top-level breakpoints node (below)attributes: CSS style informationfield: The CSS elementvalue: The value of the CSS element.type: The type of token; here for safety reasons so if we need to apply a value for the font that is not a font token, id: The unique name of the tokendescription: Includes information about usageExample:
{
"state": null,
"displayName": "Heading1",
"breakpoints": [
{
"breakpoint": "S",
"attributes": [
{
"value": "-1%",
"field": "letter-spacing"
},
{
"value": "50",
"field": "line-height"
},
{
"type": "fontToken",
"field": "font",
"value": "bold-42"
}
],
"figmaKey": "74fb0d2c5894182440130a2da01a790dfa443ca5"
},
{
"figmaKey": "302694d38c6f5f2ffa209a97a619c0c6e8b736dc",
"attributes": [
{
"field": "letter-spacing",
"value": "-1.6%"
},
{
"value": "50",
"field": "line-height"
},
{
"value": "bold-42",
"field": "font",
"type": "fontToken"
}
],
"breakpoint": "M"
},
{
"attributes": [
{
"value": "-2.2%",
"field": "letter-spacing"
},
{
"value": "56",
"field": "line-height"
},
{
"type": "fontToken",
"field": "font",
"value": "bold-48"
}
],
"breakpoint": "L",
"figmaKey": "61c6b2ad573e8bcb6a0c1947b831d02f8114d411"
},
{
"attributes": [
{
"value": "-3%",
"field": "letter-spacing"
},
{
"value": "70",
"field": "line-height"
},
{
"type": "fontToken",
"value": "bold-60",
"field": "font"
}
],
"breakpoint": "XL",
"figmaKey": "32e76015a028bf80857a7197649430589735dc6c"
}
],
"id": "font-h1",
"description": "Use this text style for the primary heading on a page. Usually a page will contain only one primary heading."
}Spacing is defined under a single node entitled tokens.
Spacing tokens are designed in a factor of a 4-point grid.
Spacing tokens contain the following metadata:
displayName: the displayed name of the token in the Vega Figma plugin. id: the name of the token.value: the number of pixels assigned to the spacing token.Example:
"tokens": [
{
"displayName": "4px",
"id": "size-4",
"value": 4
}
]The breakpoints nodes are defined under a single node entitled tokens.
Breakpoints are used as a reference for other nodes in the JSON object, and include the following metadata:
description: A description of the breakpoint, if necessaryvalue: The number of horizontal pixels specified as the low-end breakpoint.id: The name or identifier of the breakpoint when used by different nodes (such as “typography”)displayName: The displayed name of the token in the Vega Figma PluginmaxWidth: The defined outer horizontal pixels of the breakpoint\Example:
{
"value": 768,
"description": "",
"maxWidth": 1023,
"id": "M",
"displayName": "Tablet Portrait"
}The corners node specifies the radius of the curve on element corners. They are listed under tokens.
Corners contain the following metadata:
id: The name and identifier of the corner tokendisplayName: The displayed name of the token in the Vega Figma Pluginvalue: The pixel value of the corner radius.Example:
{
"id": "rounded-2",
"displayName": "2px",
"value": 2
}The shadows token provides information about drop shadows which may be applied to various elements. Shadows have two modes, the default “light” mode, and a dark mode.
Shadows contain the following metadata:
id: the name and identifier of the shadow token. displayName: The displayed name of the token in the Vega Figma plugin.description: A description of the specific shadow token purposestate: The state of the element when the component is activemodes: The specified mode (light/default or dark)field: The CSS selector for the token.figmaKey: a unique Figma identifier. shadows:color: Includes the RGBA values for the shadowoffsetX: The horizontal offset for the shadow.inset: a Boolean value indicating whether the shadow has an inset.offsetY: The vertical offset for the shadow.spread:The distance by which to expand or contract the shadow. blurRadius: The blur radius value of the shadow.Example:
{
"id": "shadow-card",
"modes": [
{
"field": "box-shadow",
"figmaKey": "3ad1356a24df9057e094893c81c3dc57ac738cdc",
"shadows": [
{
"color": {
"alpha": 0.03999999910593033,
"red": 0,
"blue": 0,
"green": 0
},
"offsetX": 0,
"inset": false,
"offsetY": 2,
"spread": 0,
"blurRadius": 8
},
{
"color": {
"alpha": 0.019999999552965164,
"blue": 0,
"red": 0,
"green": 0
},
"blurRadius": 4,
"spread": 0,
"inset": false,
"offsetY": 2,
"offsetX": 0
}
],
"mode": null
},
{
"field": "box-shadow",
"mode": "dark",
"shadows": [
{
"color": {
"alpha": 0.18000000715255737,
"red": 0,
"blue": 0,
"green": 0
},
"inset": false,
"offsetX": 0,
"blurRadius": 10,
"offsetY": 2,
"spread": 0
},
{
"offsetX": 0,
"offsetY": 2,
"blurRadius": 4,
"inset": false,
"color": {
"green": 0,
"blue": 0,
"red": 0,
"alpha": 0.10000000149011612
},
"spread": 0
}
],
"figmaKey": "96fdee4d51c82235d9d8af352b5742bb92a7388f"
}
],
"displayName": "Card",
"description": "This is a subtle shadow that helps separate cards from the background.",
"state": null
}The rings tokens are used for form inputs and various elements which will have a ring surrounding the element. They are used to show a component in a focused state.
Rings are defined within the tokens node, and contain the following metadata:
displayName: The displayed name of the token in the Vega Figma pluginid: The name and identifier of the token. state: The state of the component when the token is active. (For ring tokens, this will always be set to focus).description: The purpose of the token.modes: field: Specifies the type of field for which the token is usedopacity: The opacity of the ring.width: The width of the ring.figmaKey: the unique identifier within Figmamode: Specifies whether the version of the ring is for light/default mode or dark mode.value: The base color token defining the color.offset: The offset value from the associated elementtype: Specifies what type of token the ring is.Example:
{
"displayName": "Input",
"id": "ring-input:focus",
"state": "focus",
"description": "-",
"modes": [
{
"field": "box-shadow",
"opacity": 0.25,
"width": 4,
"figmaKey": "678763b60c7dfa6407c6c37f8aefed0ab68e0185",
"mode": null,
"value": "blue-90",
"offset": 0,
"type": "colorToken"
},
{
"figmaKey": "2c02010732131e13e0873785bbd4d273de7e7537",
"value": "sky-60",
"opacity": 0.25,
"mode": "dark",
"type": "colorToken",
"offset": 0,
"width": 4,
"field": "box-shadow"
}
]
}The borders tokens define a border around an element. Borders include aliasTokens which are the referenced named tokens which should be used and baseTokens which serve as the containers for the CSS information.
Use the aliasTokens to ensure that designs are scalable. They contain the following metadata:
id: The identifier and name of the tokendisplayName: The displayed name of the token in the Vega Figma plugin.state: The specified state of the individual border token.description: The defined usage for this token.value: This contains a reference to the associated base border token that the alias token extends.modes: The defined mode (light/default or dark) for the token.field: The specific field-type for which the border token is to be associatedopacity: The opacity of the tokenwidth: The width of the borderfigmaKey: The unique identifier within Figmamode: Specifies whether the version of the border is for light/default mode or dark mode.value: The associated baseToken for the color of the borderoffset: The offset value for the bordertype: The type of token.Example:
{
"id": "border-secondary-btn",
"displayName": "Secondary Button",
"value": "border-2",
"color": {
"description": "",
"state": null,
"modes": [
{
"value": "blue-90",
"mode": null,
"type": "colorToken",
"field": "border-color",
"figmaKey": "717b738465fbbbef48d685498a5edd1e586ccc71"
},
{
"type": "colorToken",
"value": "sky-60",
"field": "border-color",
"figmaKey": "ab9fff6c021cadcbb82350b02f5d529f13797772",
"mode": "dark"
}
],
"group": "Border Color",
"id": "borderColor-action",
"displayName": "Action"
}
}The glyphs elements represent icons or graphics which can be used in the Vega system. They are typically in SVG format.
Glyphs include the following metadata:
sizes: These specify various sizes of the glyph, including the height and width of large, default and small versions.svg: This includes the full svg path and coordinates for the svg image. viewBox: The outer dimensions of the glyphid: The name and identifier for the glyph token. Example:
{
"sizes": {
"large": {
"width": 31,
"height": 24
},
"default": {
"width": 18,
"height": 14
},
"small": {
"width": 13,
"height": 10
}
},
"svg": "<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2684 4.29287H0.924519V5.70709H10.2684L7.23294 8.93929L8.22903 9.99996L12.9246 4.99998L8.22903 0L7.23294 1.06067L10.2684 4.29287Z"></path>",
"viewBox": "0 0 13 10",
"id": "arrow-right"
}