Skip to content

laitine/glypfig

Repository files navigation

Glypfig

NPM Patreon Apache 2.0 license E2E tests and deploy

The icon library workflow for Figma.

Glypfig icon library creator

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