frame-style-generator

Figma Stylesheet Exporter

A CLI tool used to extract CSS values from a Figma file into stylesheet files.

Requirements

You’ll want to ensure you have the following already installed on your local machine before getting started with Starter theme:

• Figma Client ID: We will need the Client ID from the Figma file that you will be exporting values from. This client ID is found in the URL of the file.

• Typescript: Typescript is a superset of JavaScript. You will need Typescript to compile the code. Simply install Typescript with the following command:

$ npm install -g typescript

• Node: The current LTS (long-term support) release. We like to use a Node Version Manager like NVM.

• NPM 5+ or Yarn: Both of these package managers have ups and downs, choose whichever you prefer. Follow the installation instructions for Yarn or NPM to make sure you're using the latest version.

Getting started

Nuxt.js is a higher-level framework that builds on top of Vue. It simplifies the development of universal or single page Vue apps.

# install dependencies in root directory
$ yarn

# begin CLI tool
$ yarn start

What next?

You should now have an export of typography base styling, color variables and icons in snippets.

1. You will now need to format the spacing and commenting of these files manually and paste into your Frame project.

2. The typography will still require you to edit the replace font-size or any hard-coded pixels values to use a font variable. Either the modular scale or a type scale variable in your configuration.

3. All icons files except the icon-styleguide.liquid will need to be placed inside your src/snippets directory.

4. The contents inside icon-styleguide.liquid will need to overwrite the icons section in the src/snippets/styleguide-styles.liquid.

Although this doesn't yet fully automate the process - it does a lot of tedious copy and pasting from Figma. You will still need to review manually and ensure the fonts are rendering properly, spacing is consistent and your project Styleguide is ready for use.