Glypfig

The icon library workflow for Figma.

Picks up your existing icons from Figma and outputs them ready for production. Currently supported export formats include JPG, PDF, PNG, SVG, CSS and React (with typescript support). Can also optimize image assets and builds UI components according to your custom template.

Find an example Storybook with all formats here🚀

Prerequisites

• NodeJS installed
• Figma project with a page that has a frame or similar container with icon components
• Figma API key – Generate new personal access token at Settings -> Account -> Personal access tokens
• File key – Your file's (with the icon components) key identifier e.g. figma.com/file/{figma-file-key}/Glypfig
• Node ID – Your frame's URL decoded node ID e.g. figma.com/...?node-id=0%3A1 -> URL decoded to 0:1

Figma notes

To exclude a component to be exported from the frame prefix it's name with a dot e.g. ".Title". Frames and groups along with their child nodes can also be excluded in the same way.

For best results always have your icon component's main layer in Figma boxed with equal width and height e.g. 24x24px.

Development notes

It is suggested to run a linter on build components such as Prettier, Stylelint and code analyser such as ESLint.

Get started

1. Install Glypfig from NPM with npm or yarn.

   npm install --save-dev glypfig

   yarn add --dev glypfig

2. Run with your preferred configuration. See all the possible options below.

   npx glypfig --apikey <figma-api-key> --filekey <figma-file-key> --nodeid <icon-frame-node-id>

Configuration

| Parameter | Flag | Value | Default | Options | | ----------------- | -------------- | ------- | ------------------------- | ------------------------------------------------------------ | | Figma API Key | apikey, a | string | None | Figma: Settings/Account/Personal access tokens | | File key | filekey, k | string | None | e.g. figma.com/file/{figma-file-key}/Glypfig | | Node ID | nodeid, n | string | None | figma.com/...?node-id=0%3A1 URL param value decoded to 0:1 | | Output format | format, f | string | png,svg,react | jpg, png, svg, pdf, css and react | | Output path | output, o | string | icon-library | e.g. ./the-path/to/your-icons | | Silent logging | silent, s | boolean | false | true or false | | Optimize files | optimize, p | boolean | false | true or false | | Template formats | template, t | string | jsx | jsx and tsx | | CSS template path | csspath, c | string | ./templates/css.eta | e.g. ./the-path/to/your-template-css.eta | | JS template path | jspath, j | string | ./templates/react-jsx.eta | e.g. ./the-path/to/your-template-tsx.eta | | CSS prefix | cssprefix, r | string | icon- | e.g. 'glypfig-' | | JS prefix | jsprefix, e | string | Icon | e.g. 'Glypfig' | | License file | license, l | string | ./templates/LICENSE.txt | Pass '' for default or e.g. ./the-path/to/your-license-file | | JPG image scale | jpgscale, b | string | None | Scale of exported image 0.01 - 4 | | PNG image scale | pngscale, d | string | None | Scale of exported image 0.01 - 4 | | Properties filter | filter, i | string | None | Filter components by properties e.g. 'Size=XS, Color=Blue' | | Property naming | propnames, m | boolean | None | Figma component properties in name e.g. icon-size-large.svg | | Help | help, h | boolean | None | Show help |

More

Support this project

Eta templating engine

Thanks

Helsinki Design System