Use our design systems in Figma

1Install the fonts

Download the kit's Fonts file and unzip it. Select all the .ttf files, right-click, choose Install. Restart Figma so it sees them.

Figma in the browser needs Figma's free font installer to see fonts on your computer.

2Add the colours and sizes

1. In Figma, open Plugins and run Tokens Studio for Figma (free).
2. Load the kit's Variables, light + dark file from your computer.
3. Use its Styles & Variables export to create Figma variables. Light and Dark become two modes, so any frame can switch theme.

The separate light and dark files are in the standard W3C format, for any other plugin that imports design tokens.

3Add the icons

Drag the kit's All icons, one sheet file onto the Figma canvas. Every icon arrives as its own layer, named as in the real app. Ungroup once, select them all, right-click and choose Create multiple components: that is your icon library.

4Bring in the screens

For reference, drag the screen pictures in. For editable layers, use the html.to.design plugin: share the page from Open Design to get a public link, paste the link into the plugin, and it imports the page as Figma frames and text.

Imported layers keep their colours as plain values; reconnect them to the variables from step 2 where you need to.