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

Install Glypfig from NPM with npm or yarn.

npm install --save-dev glypfig

yarn add --dev glypfig

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