# frame-style-generator

> This tool allows a user to export a scss file containing all the font, gradient, and color variables for a given page.

Latest version **1.0.0** (published 2020-04-07) · 0 weekly downloads

## Install

```sh
npm install frame-style-generator
pnpm add frame-style-generator
yarn add frame-style-generator
bun add frame-style-generator
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-04-07 |
| First published | 2020-04-07 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 41.2 KB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | danngofett |

## Links

- npm: https://www.npmjs.com/package/frame-style-generator
- npm.io page: https://npm.io/package/frame-style-generator

## Dependencies (12)

- [axios](https://npm.io/package/axios.md) 0.19.0
- [chalk](https://npm.io/package/chalk.md) ^2.4.2
- [dotenv](https://npm.io/package/dotenv.md) ^8.1.0
- [inquirer](https://npm.io/package/inquirer.md) ^7.0.0
- [prettier](https://npm.io/package/prettier.md) 1.18.2
- [figma-api](https://npm.io/package/figma-api.md) ^1.5.5
- [stylelint](https://npm.io/package/stylelint.md) ^11.1.1
- [typescript](https://npm.io/package/typescript.md) ^3.8.3
- [common-tags](https://npm.io/package/common-tags.md) ^1.8.0
- [css-mqpacker](https://npm.io/package/css-mqpacker.md) ^7.0.0
- [stylelint-config-prettier](https://npm.io/package/stylelint-config-prettier.md) ^6.0.0
- [@we-make-websites/stylelint-config](https://npm.io/package/@we-make-websites/stylelint-config.md) ^1.0.2

## Recent versions

- 1.0.0 (latest) — 2020-04-07

## README

# 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:

```bash
$ 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.

``` bash
# 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.

---
_Source: https://npm.io/package/frame-style-generator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._