Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.

Overview

Figmagic cover art

Figmagic

Build Status FOSSA Status

Quality Gate Status

CodeScene Code Health

CodeScene System Mastery

codecov

Maintainability

All Contributors

Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.

🏕️ Kumbaya, friends. Figmagic automates the world into a better place, but does not attempt to completely remove designers or developers: It just aims to move them closer, while eliminating most of the tedious busywork that has grown around front-end development.

Built initially as an internal handoff tool for Humblebee.


Translations 🗺️

You can also read this README in the following languages:


PSA: Version 4.3.0 introduces new handling of trashed/replaced files

Previous versions in the 4.0 series have been using trash to handle files that need to be replaced. In 4.3.0 this is no longer the case.

Any deleted files are now permanently destroyed by the Node native fs module.

Versions 4.3.0 and 4.3.1 used a flaky dual-mode, configurable pattern where you could use either a "hard" or "soft" delete mode (soft deletes meaning placing files in a local trash folder). This is NOT supported and intended from 4.3.2 and forward as that was too buggy.


Requirements

Please note: Figmagic requires that your document structure follows the conventions in this document; a full setup can be seen in the template at https://www.figma.com/community/file/821094451476848226/Figmagic-%E2%80%94-Design-System-for-Tokens.

Figmagic is compiled from Typescript to ES6, so you should have Node 12 or later (Node 14 and newer recommended) for it to work on your machine.


Introduction

Figmagic promotes a structured way of assembling design systems

Figmagic is a very straightforward, super-flexible command-line tool that helps you do three things well:

1. Output design tokens

Outputting and using design tokens aids in designing with a structured approach. These tokens are completely platform agnostic when output into JSON, or for most web developers, more readily useable in various supported flavors of JavaScript (TS, JS, MJS). It's web-oriented but works well with React Native too.

A basic set of tokens can look like this:

const tokens = {
  colors: {
    blue: 'rgba(20, 20, 255, 1)',
    warmWhite: 'rgba(240, 240, 240, 1)'
  },
  spacing: {
    small: '1rem',
    medium: '1.5rem'
  }
};

You use these tokens like so, color: ${colors.blue};, to shape and specify your coded components, web sites, apps, and what have you, instead of hard-coding every single value.

This way, you decouple implementation from data. You can now easily drive changes as design choices through Figma instead of as code changes.

2. Output graphics

Say goodbye to ever manually exporting graphics from Figma again. Grab your graphics as PNG, SVG, as React components with inlined SVG, or as objects that export all graphics from a single file.

3. Generate React components

Figmagic also allows you to generate React components from Figma components that follow a specific formal structure. It's best at fairly low-level components that you can piece together to make more complex organisms on your own. You can significantly cut down on boilerplate churn and scaffolding time with Figmagic.

And, no, the code actually doesn't suck! This was my own biggest gripe with services promising this functionality, so I knew it had to be good, or at least tolerable. Therefore Figmagic supports things like actually using your own tokens (so we can cut down on hard-coded garbage, unless matches aren't found) and you can completely customize the number of related generated files.

While not perfect, it's definitely better than many things I've seen, made by big companies. All of this is explained later here in the docs.

The arguments

Here are a few reasons you'd want to use Figmagic rather than anything similar:

  • In Figmagic, design tokens are a first-class concept since day 1
  • Figmagic is designer-driven, since Figma is seen as the source of truth
  • Figmagic is automatable and very lightweight (~45kb compressed), with no external dependencies
  • Figmagic is developer-friendly and makes very few assumptions on your use and/or setup and supports a range of output formats plus that it's extensible through custom templates if you need something completely different
  • Figmagic is open-sourced under the MIT license and has a long track record of very short implementation cycles for new features/fixes
  • Generated React components bind to any token values you've defined so these are equally useful as starter code or as code you continually output

Additional documentation sources

The Figmagic developer docs are auto-generated on every push and can be found at the dedicated documentation site.

For deeper information pertaining to Figmagic Elements and syncing them, see the dedicated README page.

The Figmagic ecosystem

In addition to Figmagic itself, there are several more repos/projects around Figmagic:

  • figmagic-example: This repository is a demo of Figmagic. In this project you're going to see how a project running Webpack, React and Styled Components might use tokens. See more below!
  • figmagic-action: Figmagic GitHub action. Use Figmagic to retrieve tokens, graphics, and/or React components from a Figma document.
  • demo-figmagic-action: Demo of the above GitHub action.
  • figma-plugin-continuous-design: Continuous Design is a Figma plugin that lets you run GitHub Actions, Bitbucket Pipelines, and Azure DevOps Pipelines from Figma.
  • automator-figmagic: Mac OS X Automator service for Figmagic.

Example project

An example project—using React, Styled Components and Storybook—is available at https://github.com/mikaelvesavuori/figmagic-example.

Note that this demo is not meant to fully style and do all of the things in the Figma document. I wanted to straddle a middle-of-the-road solution where I did the least work possible to get it working with React and style only a few of the most obvious and helpful elements, like setting disabled state on the button and checkbox.

Figmagic Example Demo

Figmagic Example Demo: On the left is a big Figma component assembled of a number of "Elements", Figmagic-compliant components that can be output into code. On the right is the React-composed version of those after just a few minutes of coding and closing elements correctly.

Using Figmagic

Installation

Global (recommended)

Run npm install -g figmagic or yarn global add figmagic.

Local

Local usage is possible by installing Figmagic as a developer dependency (under devDependencies) with npm install figmagic -D or yarn add figmagic -D, then using a script pointing to the local version, like so:

"scripts": {
  "figmagic": "npx figmagic"
}

Create configuration file (figmagic.json or .figmagicrc)

Figmagic can be run without any configuration. You will always need to specify your Figma API token and Figma document ID, though! However, it's highly recommended to add a configuration: it's easy and gives you a ton of possibilities to optimize for your own needs.

Run figmagic init to initialize a basic configuration file, either named figmagic.json or .figmagicrc file. As long as you provide your Figma token and document ID/URL, the new generated file is ready to use for Element Sync which can only be done if your configuration points to valid code generation templates (which the generated one does). You'll see that the config will point templates.templatePath{Graphic|React|Styled|Storybook} to ./node_modules/figmagic/templates/{graphic|react|styled|story}. Read more under the Configuration file section.

Running Figmagic

First of all, get your Figma API token and Figma URL:

  • Get your file ID by right-clicking your Figma tab inside of the app and click Copy Link—the first, long junk-looking bit is the ID.
  • For more on API keys, go to Figma's developer docs.

Pass in your Figma API token and Figma URL by either:

  • Stepping into your project directory (where you want Figmagic to run), and add or replace FIGMA_URL and FIGMA_TOKEN in a .env file with your own file ID (i.e. similar to 821094451476848226) or full Figma URL (i.e. similar to https://www.figma.com/file/821094451476848226/Figmagic-%E2%80%94-Design-System-template-4.0) and API token key.
  • Passing in API token and URL through the CLI, like this figmagic --token {TOKEN} --url {URL} (substitute curly braces for your actual values)
  • Setting them in figmagic.json/.figmagicrc under token and url. This is discouraged since you will display these values in clear text and you probably don't want that.

Then:

  • Run figmagic
  • You should now have a folder with the raw JSON dump (default: /.figmagic) and a folder with tokens (default: /tokens) in the root

Folders

Folder names below follow their default naming. The naming is possible to change via configuration.

  • .figmagic will contain the extracted JSON retrieved from Figma's API
  • tokens will contain the token files
  • elements will contain the generated code
  • graphics will contain graphics

For a more complete description of the code structure, see the Code structure section.

Preparing Figma for Figmagic usage

Easy solution: Copy the public Figmagic design system template from Figma Community

Go to https://www.figma.com/community/file/821094451476848226/Figmagic-%E2%80%94-Design-System-for-Tokens and make your own copy. Go at it by using the document ID as the FIGMA_URL or start copying in your own work.

Less easy solution: Start from scratch

Your structure needs to correspond to the following:

  • A Page needs to exist, called Design tokens. Without this page you can't really do much with Figmagic.
  • Further, inside the Design tokens page, frames need to exist. You can have any number of supported token frame. For starters, name them Colors, Font sizes, Font families, Font weights, Line heights, and Spacing – exact casing is not important, however the spelling is important! For a full list of token types, see the types of design tokens Figmagic can extract.
  • All items on a page need to be contained within one or more frames.
  • Want element syncing? Then create an "Elements" page and place any components there. For the generation to work correctly, you need to stay within the limits specified above.

See a template design system at https://www.figma.com/community/file/821094451476848226/Figmagic-%E2%80%94-Design-System-template-4.0. Feel free to simply copy-paste it or base your own work around it.

Note: Refer to the document structure in the image below and in the template linked above.

Figma Document Structure: Tokens

How a Figmagic project could be structured in regards to tokens, if you want to support all currently available token types.

What are Design Tokens?

Design tokens are the abstract and shared elements from which your design system is built.

Design tokens express any of the individual values that you build from, such as colors, spacing, and typographic features.

Tokens offer a form of “contract” between a designer’s intent and its fulfillment by developers. This means that both sides agree to treat the individual parts of a complete design through the tokens that represent those values. As a format, they are super easy to read and understand and are adaptable for consumption by many types of systems or applications. That’s very important as you start doing cross-platform apps and things like that.

Design tokens

Tokens ensure that values are not magic numbers or ”just picked at random”. This makes communication precise and effortless. Creating actual code for components, even complex ones, also becomes a lot less of a bore, since what you are doing is just pointing stuff like padding, Z indices, and anything else to their token representations.

However: You may still want to add written guidance for usage. It’s just that the tokens should be able to be consumed without understanding anything specific about them.

You should bind tokens to Figma styles whenever and wherever possible to simplify your own design work, but make sure that those are also represented in the Tokens page, as this page is where a developer will pick up tokens with Figmagic.

The types of design tokens Figmagic can extract

You can currently extract design tokens for:

  • Colors (including linear and radial gradients, though note: linear gradients which are not using straight angles will get an incorrect calculation)
  • Font Sizes
  • Spacing
  • Font Weights
  • Line Heights
  • Font Families
  • Letter Spacings
  • Z Indices
  • Radii
  • Border Widths
  • Shadows (currently supports single/multiple Drop Shadows; see caveat below)
  • Opacities
  • Durations (for animations)
  • Delays (for animations)
  • Easing functions (for animations)
  • Media Queries

A typical use-case for the generated documents is to feed the extracted values into CSS systems that support external values (such as Styled Components, Emotion, Styled System, any other CSS-in-JS libraries, or maybe even Sass).

Note on shadows

From alehar9320 commenting on issue 111:

Figma calls everything Drop-shadow, while translating the design into box-shadow or drop-shadow CSS dependent upon whether it's a ~ shape or a vector graphic. See blog post from the Figma developer who built the feature.

This means that if Figmagic is used to define shadow tokens, it should be recommended to only have one drop-shadow definition per rectangle. To maintain compatibility with both drop-shadow and box-shadow CSS. The exception would be if there is a clear distinction between tokens to be used with box-shadow and drop-shadow. As drop-shadow can only accept a single shadow parameter. Any token that has two values will simply be incompatible with drop-shadow.

Working with Figmagic as a designer

Figma styles

Figma styles became publicly available in June 2018 and are incredibly valuable for designers to create single-sources-of-truth when it comes to design values (tokens). When using Figmagic though, the thinking and usage is a bit different from how Figma styles work.

Unidimensional or multidimensional values

A Figma style is multidimensional: It contains any number of properties wrapped into one style, acting as kind of a package. This is handy in a design environment and is practical from a user standpoint. The user doesn't have to think too hard about storing "redundant" values that are the same in another component, such as N number of units for line height: They are all taken care of.

Figmagic instead expresses tokens as instances of every individual value, thus being unidimensional – meaning they store only one value per item. Examples could be sets of line heights, font weights, or font sizes, each one individually specified. What this entails for they developer and designer, is that values can be used and mixed as pleased in any number of contexts, not becoming bound to one specific context such as a certain kind of heading. For a developer this is good because we would rather just map out the definitive values for something, onto a component (a "context" so to speak).

Because of this difference, the appropriate way to structure a Figmagic-compatible Figma design document is to display one or more items/tokens in the respective frames that correspond to the accepted token types (line height, font size...) where each item has only one key property that's changed in-between them (such as one text using size 48, the next using size 40...), since those items are what Figmagic loops through when creating your code tokens.

One of the major deviations from this principle is "Fonts" where you can specify more properties than one. However, then those need to individually match other typographical tokens you might have, such as line heights.

Nesting: Button, Normal

The "Heading L" font token is composed of values that are also represented in the "lesser" uni-dimensional tokens: displayed here are "Line Height S" (135% line height), "H1" (size 48), and "Font Bold" (Bold font style). Setting this font as a Figma Style will make your life as a designer much easier as your apply the text style to things. Auto-generating code with Figmagic will also work just fine, since the individual values are respected.

OK, but should I use Figma styles (also) when using Figmagic?

Whatever suits you! As long as you remember that what Figmagic fetches are those single (unidimensional) values from each design item/token it should all work. I've seen that Figma styles make the "contract" between tokens and their day-to-day workflow with designers a lot easier. Again though, Figmagic does not use those values; think of them as a convenient glue.

Configuring Figmagic

Token Sync

By default this is turned on. You will need to have a page named "Design tokens", where your tokens lay within named frames.

Tokens are the "bread and butter" of Figmagic. Without tokens, Figmagic cannot create elements. And even without elements, tokens provide the core experience to help you run a competent design system with code.

In case you want to skip generating tokens for a given frame, you can just add a leading underscore to the frame name. You can also skip individual items by naming them ignore or adding a leading underscore.

This is activated by default, but it's now possible to deactivate it if you have very specific reasons to do so.

Graphics Sync

By default this is turned off. Pass in --syncGraphics as a flag to sync them or enable that in your configuration file. You will need to have a page named "Graphics", where your components lay directly on the artboard.

Graphics can be exported in multiple formats with Figmagic. Instead of doing manual hand-overs, just tell your developer(s) that there have been updates to the graphics and let them pull the latest versions from your Figma document.

Again, please look at the template at https://www.figma.com/community/file/821094451476848226/Figmagic-%E2%80%94-Design-System-for-Tokens for reference.

Element Sync

This is also turned off by default. Pass in --syncElements or enable it in your configuration file to generate code from your Figma components.

Upcoming versions of Figmagic may attempt to support Figma Variants, but that will have to be publicly released first, and then vetted against what Figmagic can generate before I commit to supporting that model. Until then, the existing mental model of "Elements" will continue to be used.

Elements are named so because they are primarily meant to help scaffold anything that maps to standard HTML elements like input, button, h1, and form. With scaffolding we mean that these elements can be generated as code in a shape that is fitting for continued development. Elements are a good entry-point both for design and for code generation, since they are relatively simple and as a concept map to HTML, which in turn is based on tags ("elements").

Elements are generated by parsing your structured Figma components into either "flat" or "nested" varieties. Any values, say a height of 48px and a specific blue color, will try to be derived from your relevant tokens. Therefore, without tokens, elements cannot be generated! In this example, maybe the height will map to a spacing token that uses 48px (mapping to 3rem where 3 x 16 = 48, with 16 being the root REM value) and the color might be mapped to a color in your color tokens.

If you need more information and guidance on this, see the dedicated documentation section at Figmagic Element Sync.

How user settings are propagated

There are several ways in which you can provide Figmagic with knowledge about how you want it to parse your tokens. You can combine them, but beware of the below prioritization chart (from lowest to highest):

  1. User-provided configuration from figmagic.json/.figmagicrc file
  2. Environment variables (also loaded from .env file)
  3. Command-line arguments and flags

If possible, stick to one way of providing settings.

Non-provided values will fall back to defaults outlined in bin/entities/Config/baseConfig.ts.

Configuration file (figmagic.json or .figmagicrc)

You can use a JSON-formated configuration file at the root of a project to use its settings. Figmagic will pick up the path by assessing the current working directory and looking for either a figmagic.json or .figmagicrc file there. If it finds it, it will use it.

An example file is provided in Figmagic—you can find it in the root of the project. The file is named figmagicrc, just add the leading dot and place the file in your own project folder to use it. To use it as JSON, add json as the file ending.

Since this is a configuration file, you'll need to be careful to write it correctly or you may end up with failures and errors.

Below is a complete set of what you can configure, together with the defaults.

{
  "debugMode": false,
  "fontUnit": "rem",
  "letterSpacingUnit": "em",
  "lineHeightUnit": "unitless",
  "opacitiesUnit": "float",
  "figmaData": "figma.json",
  "figmagicFolder": ".figmagic",
  "outputFolderElements": "elements",
  "outputFolderGraphics": "graphics",
  "outputFolderTokens": "tokens",
  "outputFormatColors": "rgba",
  "outputFormatCss": "ts",
  "outputFormatDescription": "md",
  "outputFormatElements": "tsx",
  "outputFormatGraphics": "svg",
  "outputFormatStorybook": "js",
  "outputFormatTokens": "ts",
  "outputGraphicElements": false,
  "outputGraphicElementsMap": false,
  "outputScaleGraphics": 1,
  "outputDataTypeToken": null,
  "overwrite": {
    "css": false,
    "description": false,
    "graphic": false,
    "react": false,
    "storybook": false,
    "styled": false
  },
  "recompileLocal": false,
  "refreshType": "soft",
  "remSize": 16,
  "skipFileGeneration": {
    "forceUpdate": true,
    "skipCss": false,
    "skipDescription": false,
    "skipReact": false,
    "skipStorybook": false,
    "skipStyled": false
  },
  "spacingUnit": "rem",
  "syncElements": false,
  "syncGraphics": false,
  "syncTokens": true,
  "templates": {
    "templatePathGraphic": "templates/graphic",
    "templatePathReact": "templates/react",
    "templatePathStorybook": "templates/story",
    "templatePathStyled": "templates/styled"
  },
  "token": "",
  "unitlessPrecision": 2,
  "url": "",
  "usePostscriptFontNames": false,
  "versionName": null
};

CLI arguments

Run these in your command line environment of choice.


Toggle debug mode

figmagic [--debug | -d]

Default: false.


Switch font unit

figmagic [--fontUnit | -fu] [rem|em|px]

Default: rem.


Switch letter-spacing unit

figmagic [--letterSpacingUnit | -lsu] [em|px]

Default: em.


Switch line-height unit

figmagic [--lineHeightUnit | -lhu] [unitless|em|px|rem]

Default: unitless.


Switch opacities unit

figmagic [--opacitiesUnit | -ou] [float|percent]

Default: float.


Set output file name

figmagic [--figmaData | -file] [filename]

Default: figma.json.


Set Figma base file output folder

figmagic [--figmagicFolder | -base] [folder]

Default: .figmagic.


Set elements output folder

figmagic [--outputFolderElements | -elements] [folder]

Default: elements.


Set graphics output folder

figmagic [--outputFolderGraphics | -graphics] [folder]

Default: graphics.


Set token output folder

figmagic [--outputFolderTokens | -tokens] [folder]

Default: tokens.


Switch color format

figmagic [--outputFormatColors | -fcol] [hex|rgba]

Default: rgba.

This only applies to solid colors; gradients will still use RGBA colors.

Hex color support may potentially interfere with element generation and binding to tokens, since RGB(A) is the format that Figma itself uses, so there is a slight possibility of mismatches in the Figmagic binding process.

Note that hex colors will not use any alpha/transparency!


Switch CSS file format

figmagic [--outputFormatCss | -fc] [ts|mjs|js]

Default: ts.


Switch description file format

figmagic [--outputFormatDesc | -fd] [md|txt]

Default: md.


Switch elements file format

figmagic [--outputFormatElements | -fe] [tsx|jsx|mjs|js]

Default: tsx.


Switch graphics file format

figmagic [--outputFormatGraphics | -fg] [svg|png]

Default: svg.


Switch Storybook file format

figmagic [--outputFormatStorybook | -fs] [ts|js|mdx]

Default: js.


Switch token file format

figmagic [--outputFormatTokens | -ft] [ts|mjs|js|json]

Default: ts.


Output graphics as wrapped React elements

figmagic [--outputGraphicElements | -oge]

Default: false.


Output graphics elements map

figmagic [--outputGraphicElementsMap | -ogm]

Default: false.


Set output scale of graphics

figmagic [--outputScaleGraphics | -scale] [number]

Default: 1.

Note that from the CLI you must specify the scale size like 3x (or anything at the end, as long as it includes a letter at the end). This only applies to CLI configuration, and does not apply to other types of config, such as through figmagic.json or .figmagicrc.


Set output token data type

figmagic [--outputDataTypeToken | -tokentype] [null | enum]

Default: null.


Overwrite files

This is not currently possible to adjust from the CLI.


Recompile data from local Figma JSON file

figmagic [--recompileLocal | -local]

Default: null, and will then be taken from local .env file if not explicitly passed in through the CLI.


Set REM size

figmagic [--remSize | -rem] [number]

Default: 16.

Note that from the CLI you must specify the REM size like 16p (or anything at the end, as long as it includes a letter at the end). This only applies to CLI configuration, and does not apply to other types of config, such as through figmagic.json or .figmagicrc.


Force update all elements

figmagic [--forceUpdate | -force]

Default: true.

Forces all elements and file types to be regenerated.


Skip file generation: CSS

figmagic [--skipCss | -nocss]

Default: false.

Skip creating CSS file when syncing elements.


Skip file generation: Markdown description

figmagic [--skipDescription | -nodesc]

Default: false.

Skip creating Markdown file when syncing elements.


Skip file generation: React

figmagic [--skipReact | -noreact]

Default: false.

Skip creating React file when syncing elements.


Skip file generation: Storybook

figmagic [--skipStorybook | -nostory]

Default: false.

Skip creating Storybook file when syncing elements.


Skip file generation: Styled Components

figmagic [--skipStyled | -nostyled]

Default: false.

Skip creating Styled Components file when syncing elements.


Switch spacing unit

figmagic [--spacingUnit | -s] [rem|em|px]

Default: rem.


Sync elements

figmagic [--syncElements | -se]

Default: false, and will then be taken from local .env file if not explicitly passed in through the CLI.

Use this when you want to sync elements in your "Elements" page in Figma.


Sync graphics

figmagic [--syncGraphics | -sg]

Default: false, and will then be taken from local .env file if not explicitly passed in through the CLI.

Use this when you want to sync graphics in your "Graphics" page in Figma. Use the RC configuration file to pass in options. Default format will be SVG.


Sync tokens

figmagic [--syncTokens | -st]

Default: true, and will then be taken from local .env file if not explicitly passed in through the CLI.

Use this when you want to sync tokens in your "Design tokens" page in Figma. Use the RC configuration file to pass in options.


Set path to graphics template

figmagic [--templatePathGraphic | -tpgraphic] [path]

Default: templates/graphic.

Your local figmagic.json or .figmagicrc file must have a block with templates.templatePathGraphic that specifies a valid path, such as ./node_modules/figmagic/templates/graphic.


Set path to React template

figmagic [--templatePathReact | -tpreact] [path]

Default: templates/react.

Your local figmagic.json or .figmagicrc file must have a block with templates.templatePathReact that specifies a valid path, such as ./node_modules/figmagic/templates/react.


Set path to Storybook template

figmagic [--templatePathStorybook | -tpstory] [path]

Default: templates/story.

Your local figmagic.json or .figmagicrc file must have a block with templates.templatePathStory that specifies a valid path, such as ./node_modules/figmagic/templates/story.


Set path to Styled Components template

figmagic [--templatePathStyled | -tpstyled] [path]

Default: templates/styled.

Your local figmagic.json or .figmagicrc file must have a block with templates.templatePathStyled that specifies a valid path, such as ./node_modules/figmagic/templates/styled.


Pass in Figma API token

figmagic [--token | -t] [token]

Default: null, and will then be taken from local .env file if not explicitly passed in through the CLI.


Set relative import path for tokens (for CSS)

figmagic [--tokensRelativeImportPrefix | -tip] [path]

Default: '' (effectively just blank or the same folder). Use this so CSS files can import tokens from the correct location, for example to resolve something like ../../tokens/colors.ts you would pass in ../../ and tokens would be whatever your outputFolderTokens value is.


Pass in Figma URL

figmagic [--url | -u] [url_id]

Default: null, and will then be taken from local .env file if not explicitly passed in through the CLI.


Pass in unitless precision

figmagic [--unitlessPrecision | -up] [number]

Default: 2.

Defines the precision (decimals) for unitless values (rounded using .toFixed() internally).


Set font family name to be Postscript name instead of "common name"

figmagic [--usePostscriptFontNames | -ps]

Default: false, i.e. common name.


Use a versioned Figma document

figmagic [--versionName | -v]

Default: null which will resolve to the latest version. The value you specify here is the name of the version in the Figma file's Version history.


Templates used for code generation

Starting with Figmagic version 4.0, four types of generated files have customizable templates:

  • Graphic elements
  • React elements
  • Storybook files
  • Styled Components (React) files

These four types have support for a variety of formats that differ a bit between each type.

Figmagic comes with a set of templates for several file formats. In case you want to customize these, you should respect and keep any substitution tags that exist in the original files; removing them may cause your templates to function incorrectly. For example, the React template includes a substitution tag called {{NAME_STYLED}} which will be changed to your adjusted element name with a "Styled" suffix. Removing it would make your generated code useless as-is.

The recommended way of adding and using your own templates would be to copy-paste any/all existing templates from Figmagic into your project, pointing the configuration file to your local copies, and then modifying them as needed.

Token formatting and conversions

Font families

The font family name, either as its common name (as picked up by Figma; spaces are removed) or its Postscript name (eg. FiraSans-Regular).

Default: Common name.

Note: In previous versions of Figmagic the Postscript font family name was used.


Font weights

Typical font weight values like 200, 300 etc.


Font sizes

Units based on global font size (base 16px).

Default: rem units. Can be set to rem or em.


Line heights

Unitless.

2 decimals numbered values by default. Precision can be configured with unitlessPrecision (see config)


Colors

RGBA colors.


Spacing

Default: rem units. Can be set to rem or em.


Border widths

Default: px units.


Letter spacings

Default: em units.


Media queries

Default: px units.


Opacities

Typical 2 decimals numbered values between 0 and 1 like 0 or 0.65. Can be set to percent to have them converted to % strings instead like 0% or 65%.


Radii

Default: px units.


Shadows

Default: px units for three values (horizontal offset, vertical offset, blur) and RGBA for the color.


Z indices

Default: numbers (whole numbers, i.e. integers).


Code structure

Figmagic source code structure

Folder Description
__tests__/ Tests, structured similarly to the bin folder source code
.github/ GitHub files for CI and issue template
.husky/ Husky pre-commit configuration
.vscode/ Visual Studio Code configuration
bin/ Source code
bin/contracts Types and interfaces
bin/controllers Controllers
bin/entities Entities (DDD-style), this is where most of the logic will be contained
bin/frameworks Non-domain functionality, like string manipulation and downloading files etc.
bin/usecases Where the application "features" are orchestrated, as per Clean Architecture
build/ ES6-compiled code (this is the code that consumers of the Figmagic binary actually use)
images/ Documentation, mostly images and screen shots. You can manually generate the Arkit diagram with npm run docs.
readme/ Additional README files
templates/ Files that are used as templates for code generation
testdata/ Most of the tests point to stored test data which is stored in this folder
translation/ Translations (localizations) of the README
typedoc-docs/ Documentation generated by TypeDoc, which gets hosted at https://docs.figmagic.com. You can manually generate these with npm run docs.
index.ts The file that initializes and sets up everything required to run Figmagic

Arkit diagram

This is how Arkit models Figmagic and its source code structure and dependencies. Note that this diagram omits frameworks, external dependencies and contracts (i.e. types) to focus on the primary flows.

Note! Only visible on the documentation site.

Arkit code structure diagram

License

Figmagic is licensed under the MIT License.

It uses a number of developer dependencies under various open source licenses, but none of these are bundled into the actual binary that users consume as Figmagic itself has no end-user-facing dependencies.

Copyright 2018-2021 Mikael Vesavuori

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

FOSSA Status

Contribution

Want to add or rethink something in Figmagic?

You are welcome to contribute to the project! Pull requests, as well as issues or plain messages, work fine. For pull requests, please refer to the contribution guidelines in CONTRIBUTING.md.

Contributors

Thanks goes to these wonderful people (emoji key):


Florent SCHILDKNECHT

💻

Paulo Henrique

💻

Petra Jaros

💻

Marko Marković

💻

mykhailoInnovecs

💻

Zack Brown

💻

Stanko Tadić

💻

Ishmam Chowdhury

💻

Ana Carolina

📖

This project follows the all-contributors specification. Contributions of any kind welcome!

Issues
  • Unable to connect to Figma API

    Unable to connect to Figma API

    Describe the bug Based on figmagic-example-master example. token and url variables read from .env, .figmaicrc or CLI --token or --url command parameters but errors out with "Error: Error: Error: Missing one or more of required arguments: "figmaToken", "figmaUrl" when attempting to get data from Figma API!". No issue connecting via Postman.

    To Reproduce Scenario 1 - Using .env file :: Steps to reproduce the behavior:

    1. Navigate project folder where local version of figmagic was installed as dev dependency and add script to package.json
    2. create .env file with 'FIGMA_URL' and 'FIGMA_TOKEN' entries:
    FIGMA_URL=XYX
    FIGMA_TOKEN=XYZ
    
    1. run ' npm run figmagic -- --debug'
    2. see error "Attempting to fetch data from Figma API... Error: Error: Error: Missing one or more of required arguments: "figmaToken", "figmaUrl" when attempting to get data from Figma API!":

    DEBUG:

    _SYSTEM: Final user configuration that will be used..._
    {...
      token: 'XYZ',
      unitlessPrecision: 2,
      url: 'XYZ',
      usePostscriptFontNames: false
    }
    

    Scenario 2 - Using .figmagicrc file (and no .env)

    1. Navigate project folder where local version of figmagic was installed as dev dependency and add script to package.json
    2. Run npm run figmagic init which creates the .figmagicrc file. Update file with 'url' and 'token' entries:
    {
     "templates": {
      "templatePathGraphic": "./node_modules/figmagic/templates/graphic",
      "templatePathReact": "./node_modules/figmagic/templates/react",
      "templatePathStorybook": "./node_modules/figmagic/templates/story",
      "templatePathStyled": "./node_modules/figmagic/templates/styled"
     },
     "token": "XYZ,
     "url": "XYZ"
    }
    
    1. run ' npm run figmagic -- --debug'
    2. see error "Attempting to fetch data from Figma API... Error: Error: Error: Missing one or more of required arguments: "figmaToken", "figmaUrl" when attempting to get data from Figma API!":

    DEBUG:

    _SYSTEM: Final user configuration that will be used..._
    {
    ...
      token: 'XYZ',
      unitlessPrecision: 2,
      url: 'XYZ',
      usePostscriptFontNames: false
    }
    

    Attempting to fetch data from Figma API... Error: Error: Error: Missing one or more of required arguments: "figmaToken", "figmaUrl" when attempting to get data from Figma API!

    Expected behavior Connects successfully to the FIGMA API

    Screenshots image

    Desktop (please complete the following information):

    • OS: macOS 11.2.1
    • Browser N/A
    • Version [e.g. 22]

    Additional context https://github.com/mikaelvesavuori/figmagic/issues/88#issuecomment-770176151 mentions "Your attempt at running npm run figmagic --token {token} --url {url} will not work since you use a local install. You should try node ./node_modules/figmagic/build/index.js --token {token} --url {url} which will work just fine (this is also documented in the Figmagic example repo's package.json; obscure but true).".

    The above does not seem to be clearly documented. With no .env or .figmagicrc and simply running node ./node_modules/figmagic/build/index.js --token XYZ --url XYZ -- --debug gives the same results.

    question 
    opened by stefencookwnzl 27
  • Add contributors with all-contributors

    Add contributors with all-contributors

    opened by mikaelvesavuori 18
  • SyntaxError: Unexpected reserved word when importing elements from example project

    SyntaxError: Unexpected reserved word when importing elements from example project

    When importing elements from figmagic example project we get the following error message:

    image

    Here is our figma json attached.

    Error message is really not explicit. maybe this issue is about producing a better error message. plz advice

    Using the master branch and node version 12.14

    opened by anback 17
  • "No such file or directory" error when running figmagic command

    Node version: v11.10.0 OS: RHEL 7.6

    Steps to reproduce:

    • Clone this repo, cd into it and run yarn setup
    • In a new terminal, go to the desired project directory, create .env file with figma credentials and run figmagic

    Output: /usr/bin/env: node --experimental-modules --no-warnings: No such file or directory

    It seems that passing node options in the shebang is causing this error, since deleting the --experimental-modules and --no-warnings part makes it run node successfully but then if fails at the first import statement of the script.

    /path/to/figmagic/index.mjs:3
    import { createFolder } from "./bin/functions/createFolder.mjs";
           ^
    
    SyntaxError: Unexpected token {
        at new Script (vm.js:85:7)
        at createScript (vm.js:266:10)
        at Object.runInThisContext (vm.js:314:10)
        at Module._compile (internal/modules/cjs/loader.js:698:28)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
        at Module.load (internal/modules/cjs/loader.js:630:32)
        at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
        at Function.Module._load (internal/modules/cjs/loader.js:562:3)
        at Function.Module.runMain (internal/modules/cjs/loader.js:801:12)
        at internal/main/run_main_module.js:21:11
    
    opened by vspedr 15
  • Error writing Design tokens

    Error writing Design tokens

    We are suddenly unable to sync design tokens from Figma, and are getting the following error:

    Error: Error: Error: Error: Error: Color has no "Fills" property

    This is a new issue, we had no problems pulling the tokens before. I noticed that Figma itself was just updated, is that possibly related?

    opened by BarnDotCom 11
  • Design token paths aren't updated in Element CSS imports

    Design token paths aren't updated in Element CSS imports

    Describe the bug If you have a directory set for the outputFolderTokens key in .figmagicrc and have syncElements set to true, the design token import root paths for your element's CSS will be tokens/ instead of the directory set in outputFolderTokens.

    To Reproduce Steps to reproduce the behavior:

    1. Go to .figmagicrc in your project
    2. Set outputFolderTokens to a custom location (I tried .figmagic/tokens)
    3. Set syncElements to true
    4. Go to the elements directory and open an element CSS file
    5. Observe that the import path for design tokens is tokens/

    Bug Example

    In my .figmagicrc, I have "outputFolderTokens": ".figmagic/tokens" but for my CheckboxCSS.ts, import colors from 'tokens/colors' was generated.

    Expected behavior If a outputFolderTokens value is set, the design token imports for the element CSS should use the outputFolderTokens value as its root path and if null, use tokens as the root path.

    Solution Example

    In my .figmagicrc, if I have "outputFolderTokens": ".figmagic/tokens", my CheckboxCSS.ts should show import colors from '.figmagic/tokens/colors'.

    opened by MasterMahariel 10
  • Global installation of figmagic cannot find file or directory

    Global installation of figmagic cannot find file or directory

    When I attempt to run the figmagic CLI that's install globally:

    figmagic
    /usr/local/bin/figmagic: line 2: //#: No such file or directory
    Error: Could not find file!
    

    Steps to reproduce the behavior:

    1. npm install -g figmagic
    2. figmagic
    3. See error

    Perhaps I'm meant to pass in a configuration file?

    opened by peterp 9
  • Mock Figma API with MSW

    Mock Figma API with MSW

    • [x] I have read the Figmagic Contribution Guideline
    • [x] The PR title summarizes the change

    1. Description of the changes made:

    • Added MSW package for mocking requests during tests, so it avoids hitting the real endpoints. MSW mocks work by intercepting requests on the network level, which allows to seamlessly reuse the same mock definition for testing, development, and debugging.
    • Added JSON mocks for all the Figma API requests, also added mocks for other tests scenarios.
    • Added log to warn when MSW is intercepting a request
    • Added ability to enable/disable mocks in the jest.env.js file
    • Updated Contributing guidelines with notes around mocking

    2. Screenshots

    API Call intercepted message:

    image

    All Tests Passing with mocking (msw) enabled:

    image

    All Tests Passing with mock disabled:

    image

    3. If this PR is related to an open issue please reference it with the # operator and the issue number:

    closes https://github.com/mikaelvesavuori/figmagic/issues/124 and solves https://github.com/mikaelvesavuori/figmagic/issues/125

    opened by opauloh 8
  • Font names are different in Design Tokens and Elements’ CSS

    Font names are different in Design Tokens and Elements’ CSS

    Describe the bug Font names are different in Design Tokens and Elements’ CSS.

    To Reproduce

    1. Create a Figma design with "Inter" as font.
    2. Export both Design Tokens and Elements.

    Expected behavior

    The same font names in both files.

    Screenshots

    fontFamilies

    ButtonBigPrimaryCss

    bug 
    opened by tomsoderlund 7
  • Add support for radial gradients

    Add support for radial gradients

    Is your feature request related to a problem? Please describe. Currently figmagic seems to pass over or omit a color token if it has a radial gradient fill type. Linear gradients appear to work fine.

    Describe the solution you'd like It would be great if a color had a radial gradient that figmagic could support that as a token output value.

    enhancement 
    opened by tjmusser 7
  • Elements are imported twice, in two different places

    Elements are imported twice, in two different places

    Below is our current figmagic.json configuration:

    {
        "templates": {
            "templatePathGraphic": "./node_modules/figmagic/templates/graphic",
            "templatePathReact": "./node_modules/figmagic/templates/react",
            "templatePathStorybook": "./node_modules/figmagic/templates/story",
            "templatePathStyled": "./node_modules/figmagic/templates/styled"
        },
        "outputFormatCss": "js",
        "outputFormatElements": "js",
        "outputFormatTokens": "js",
        "outputFolderTokens": "./src/frontend/tokens",
        "outputFolderElements": "./src/frontend/elements",
        "outputFolderGraphics": "./src/frontend/graphics",
        "tokensRelativeImportPrefix": "../../",
        "recompileLocal": false,
        "syncGraphics": false,
    	"syncElements": true,
    	"syncTokens": true,
        "camelizeTokenNames": false
    }
    

    After running npm run figmagic, the tokens as well as the elements are imported correctly under the src/frontend directory. However, the elements are also imported directly in the project root (./).

    I've taken a look at the Figma file and all seems to be where it should be: tokens under "Design Tokens", and elements under "Elements". The "Graphics", "Components", and "Views" sections are empty.

    Are we doing something wrong in the Figma file or the configuration? Is this a bug?

    opened by glouhaichi 1
  • Currently only a single layout element per group/nested layer will be picked up

    Currently only a single layout element per group/nested layer will be picked up

    Currently only a single layout element per group/nested layer will be picked up.

    Investigate if possible to make this functionality support more than a single element.

    bug 
    opened by mikaelvesavuori 0
  • Non-nested elements must have the layout element using the Component name or it fails

    Non-nested elements must have the layout element using the Component name or it fails

    (This is an older, anecdotal issue and needs to be re-verified and investigated!)

    This concerns (React) element generation.

    Non-nested elements need to have the layout element using the Component name (such as ”Slider”), else it fails.

    Investigate if possible to meaningfully update the implementation/code to support a less rigid pattern, so users can call the main layout element whatever they want.

    bug 
    opened by mikaelvesavuori 0
  • Cannot group elements inside each other?

    Cannot group elements inside each other?

    (This is an older, anecdotal issue and needs to be re-verified and investigated!)

    It is not possible to group elements inside each other, making (React) element generation less powerful (i.e. meaning elements are not generated as expected; I think it caps at the first detected element).

    Investigate if this is still the case. If it is, see if it's possible to "uncap" the limit of the current implementation.

    bug 
    opened by mikaelvesavuori 0
  • Restore three tests that only fail on Windows in CI

    Restore three tests that only fail on Windows in CI

    A small number of tests seem to fail exclusively on Windows CI builds:

    • getFileContentAndPath.test.ts
    • prepFile.test.ts
    • getSvgFileData.test.ts

    This might have to do with CRLF or some similar "invisible" problems?

    Successfully resolving this would make the tests accurately pass on all test platforms (Ubuntu, Windows...Mac?).

    ci 
    opened by mikaelvesavuori 0
  • Support higher-order

    Support higher-order "compositions"

    Support "compositions" that are higher-order components (groups?) referring to nested elements.

    This would enable creating for example a Form that would contain elements (Button, Heading, Paragraph). Currently, this needs to be manually puzzled together, as is currently done in the Figmagic example https://github.com/mikaelvesavuori/figmagic-example).

    Supporting this is probably a pretty significant undertaking as elements need to be enumerated (and generated?) before-hand, so these can be referenced in the higher-order component ("Form", in the above example). Because this also lacks a conceptual model in Figmagic, there will certainly be other parts of the source code that need to be adjusted.

    Success criteria:

    • The solution should follow the overall, general standards
    • As far as any new concepts go, these should stay consistent with the general domain model that is outlined
    • The solution requires good testing, ideally (near-) full coverage of additions
    • Any user APIs should stay unpolluted and unharmed, and new additions should stay consistent with existing language etc
    enhancement 
    opened by mikaelvesavuori 0
  • Fix flaky test for `createElements` that only fails in CI

    Fix flaky test for `createElements` that only fails in CI

    The test "It should write graphic elements and check that graphic elements map file exists" for createElements() is flaky and fails in CI, but seemingly not on a local machine.

    This issue concerns resolving that issue so we can continue using the test.

    ci 
    opened by mikaelvesavuori 1
  • Support images in elements

    Support images in elements

    Currently, when generating elements (i.e. "React components"), images are not supported.

    Example: If you were to generate a button with a background-image, the generation would attempt to understand the general CSS properties but bypass the image.

    I assume that an implementation of this would result in a background-image property to be generated. It would also be necessary to download the image and ensure that one is correctly pointing to it.

    enhancement 
    opened by mikaelvesavuori 0
  • Support blend modes

    Support blend modes

    Currently, colors do not support blend modes. This issue would adress adding support for blend modes.

    I currently have no clear idea of how this would manifest itself; perhaps it would use CSS blend modes (https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) that would add an extra line to the generated data.

    enhancement 
    opened by mikaelvesavuori 0
  • Figma (free version only?) only supports a named version for 30 days, breaking tests if run after that period

    Figma (free version only?) only supports a named version for 30 days, breaking tests if run after that period

    This issue results in tests relating to named versions (such as 4.1.0) to fail after those 30 days have passed. See if this can be mocked. There is a separate issue for mocking the Figma API, which this may able to hook into.

    Success criteria:

    • Follow all existing overall patterns
    • Stable solution
    tests 
    opened by mikaelvesavuori 0
Releases(v4.4.1)
  • v4.4.1(Nov 16, 2021)

    What's Changed

    • #153 — Element generation: Imported JavaScript for elements becomes invalid if using dashes

    Full Changelog: https://github.com/mikaelvesavuori/figmagic/compare/v4.4.0...v4.4.1

    Summary of changes

    When generating elements, the token imports will use bracket notation:

    color: ${colors['red']};
    

    instead of the previous dot notation:

    color: ${colors.red};
    
    Source code(tar.gz)
    Source code(zip)
    figmagic-4.4.1.tar.gz(3.82 MB)
    figmagic-4.4.1.zip(4.00 MB)
  • v4.4.0(Nov 9, 2021)

  • v4.3.7(Nov 4, 2021)

    What's Changed

    • https://github.com/mikaelvesavuori/figmagic/issues/148 — Token names exported in camelcase

    Full Changelog: https://github.com/mikaelvesavuori/figmagic/compare/v4.3.6...v4.3.7

    Summary of changes

    You can now opt-in to not transform/camel-case your token names (as much). Read more at https://github.com/mikaelvesavuori/figmagic#do-not-transform-camelize-token-names

    Source code(tar.gz)
    Source code(zip)
    figmagic-4.3.7.tar.gz(3.82 MB)
    figmagic-4.3.7.zip(4.00 MB)
  • v4.3.6(Nov 3, 2021)

    What's Changed

    • docs: add flo-sch as a contributor for code by @allcontributors in https://github.com/mikaelvesavuori/figmagic/pull/116
    • Remove docs command from pre-commit hook by @opauloh in https://github.com/mikaelvesavuori/figmagic/pull/135
    • refactored getTokenEnumString and getTokenString functions into single one by @Ishmam156 in https://github.com/mikaelvesavuori/figmagic/pull/137
    • feat: adding portuguese translation for README by @printf-ana in https://github.com/mikaelvesavuori/figmagic/pull/139
    • Add license scan report and status by @fossabot in https://github.com/mikaelvesavuori/figmagic/pull/141
    • Adding test:watch npm command by @opauloh in https://github.com/mikaelvesavuori/figmagic/pull/143
    • add length verification to getIds by @opauloh in https://github.com/mikaelvesavuori/figmagic/pull/144
    • Mock Figma API with MSW by @opauloh in https://github.com/mikaelvesavuori/figmagic/pull/142

    New Contributors

    • @allcontributors made their first contribution in https://github.com/mikaelvesavuori/figmagic/pull/116
    • @Ishmam156 made their first contribution in https://github.com/mikaelvesavuori/figmagic/pull/137
    • @printf-ana made their first contribution in https://github.com/mikaelvesavuori/figmagic/pull/139
    • @fossabot made their first contribution in https://github.com/mikaelvesavuori/figmagic/pull/141

    Full Changelog: https://github.com/mikaelvesavuori/figmagic/compare/v4.3.5...v4.3.6

    An additional change that is not reflected in commit messages is that Jest is (again) running in parallell, thus meaning faster tests.

    Summary of changes

    In short, the most obvious changes for developers will relate to tests being faster and a bit more stable because the Figma API is mocked.

    For consumers, the big change is that you can use rem, em, or px (default) for borderWidthUnit, radiusUnit, and shadowUnit.

    Source code(tar.gz)
    Source code(zip)
    figmagic-4.3.6.tar.gz(3.82 MB)
    figmagic-4.3.6.zip(4.00 MB)
  • v4.3.5(Sep 30, 2021)

    This release should close the following issues:

    • #112
    • #114

    Issue 112: Writing Figma graphics as elements errors out if their name has special characters

    There was previously no support whatsoever for nested names on graphics or components (such as Buttons/Edit/OK). Such support is added in this release.

    Since this is the first release supporting this functionality, it may exhibit unknown behaviours.

    Please note that "special characters" do not get any specific handling at all (thus implicitly they are supported). The exception was of course the forward slash (/) which is now supported.

    Issue 114: Exporting Graphics to React on unix fails because of case sensitive file names

    This release changes the previous behaviour of using pascal case or camelcase to adjust names that are passed through. The new behaviour is that names are taken "as-is".

    The change should fix issues where mismatched names (such as matching close to Close) would throw an error from the cleanSvgData() function.

    Source code(tar.gz)
    Source code(zip)
    figmagic-4.3.5.tar.gz(3.91 MB)
    figmagic-4.3.5.zip(4.32 MB)
  • v4.3.4(Sep 29, 2021)

    This release adds support for outputting colors with six-digit hex format, resolving issue #113 .


    The hex color output setting only applies to solid colors; gradients will still use RGBA colors.

    Hex color support may potentially interfere with element generation and binding to tokens, since RGB(A) is the format that Figma itself uses, so there is a slight possibility of mismatches in the Figmagic binding process.

    Also note that hex colors will not use any alpha/transparency.

    Source code(tar.gz)
    Source code(zip)
    figmagic-4.3.4.tar.gz(3.91 MB)
    figmagic-4.3.4.zip(4.32 MB)
  • v4.3.0(Sep 5, 2021)

    Version 4.3.0

    This release consists of both one bug fix (issue #111) and a number of clean-up and documentation activities.

    Since it contains a change that updates the API/config and functionality, I think the right choice is to bump up (finally!) to 4.3 series.

    In short

    This release is dramatically smaller than before for regular users: around 3.5MB compressed now down to ~40KB compressed! All thanks to actually using the files field in package.json - derp. Now Figmagic also only uses a single dependency: dotenv (that, if it weren’t so small, I’d write my own thingy to get env vars).

    Good to know: trash is no longer used as a dependency (on the user-side) since it’s somewhat big and bloaty. Instead you will be specifying which "refreshType” you want: “soft” or “hard”. Hard will be old behavior where fs junks your files, and soft will place timestamped folders in a .figmagic-trash folder so you can easily get any overwritten folders back.

    Long overdue updating of the documentation and CI stuff is done too, hopefully docs will be nicer to both newcomers and pros. Docs are published on https://docs.figmagic.com automatically after every commit.

    Recommendation

    Put /.figmagic* in your .gitignore file if you expect to be using the soft mode.

    Changes since 4.2.21

    • substitute node-fetch for native https module; use webpack to build and bundle, not tsc; add semicolon after const in CONST_ASSERTION; remove tslib from deps; update tests for new downloading and requesting; type errors as ‘any’
    • change instances of ‘throw new Error()’ to ‘throw Error()’ and use explicit ‘error.message’ in main() catch clausef
    • add ‘files’ block to package.json which massively reduces the size of Figmagic as a dependency
    • begin work on RefreshType and ability to switch soft/hard delete on folders; write real comments for old temp stuff
    • tokens: (de)reverse ingoing order of objects as they are somehow reversed from the Figma API; add this fix to shadows (element) ordering; update tests
    • rename readme/docs/images folders; add missing test for template path graphics
    • make refreshType configurable by user; add tests and docs for refreshType config; add typedoc config and change output folder;
    • update ci scripts
    • fix dumb bug where validation slipped out of try/catch
    • re-add missing trash call in test
    • move arkit diagram path
    • add test for parsers, for linear gradient; fix TODO comments; add last bits for refreshType
    • update docs
    • add note on shadows to docs; bump to 4.3.0
    Source code(tar.gz)
    Source code(zip)
    figmagic-4.3.0.tar.gz(3.90 MB)
    figmagic-4.3.0.zip(4.31 MB)
  • 4.0.0(Oct 16, 2020)

    Version 4 is now released, and development has been focused on stability, accessibility and quality-of-life improvements. It's been in active development since the summer and is the single biggest Figmagic release so far.

    The most significant change in version 4 is that the entire codebase is refactored into Typescript (version 4), and the software architecture should now mostly follow a Clean Architecture model, rather than being functionality-ordered as before. As a consequence, quality work and testing has been improved a ton. My hope is now that even more people can contribute to Figmagic's continued development.

    The majority of actual changes regard improvements and bug fixes for known issues, and a number of things that have been either reported through email conversations or Pull requests. Also, a fairly high number of issues have been identified by myself as I have been refactoring the code. Certain limitations have been addressed as well, though many of the limits on element generation from v3 still apply. Fixes for those would ideally come in the later v4 release cycle.

    From a consumer side, you now have the possibility to drive a lot more configuration through both CLI or the .figmagicrc configuration file. The API and commands has been slightly cleaned up, so I highly recommend that you check the documentation for any parameters that have changed names, if you are coming from a pre-v4 config file.

    With that said, Figmagic is now at a state of quality and stability that I am proud to offer up to the community of enthusiasts, designers and developers out there who have contributed with feedback, usage and pull requests. Thank you! 🙏

    Source code(tar.gz)
    Source code(zip)
Owner
Mikael Vesavuori
Cloud Software Architect (and Technical Standards Lead) at Polestar
Mikael Vesavuori
Cross-chain community-driven trading experience in your chrome browser

Crosschain ethereum wallet and trading platform made by the people, for the people.

Xfolio 1 Nov 29, 2021
This is used for minting NFTs and getting metadata , token owner, wallet address assigned to an NFT, just check it out and enjoy

nft-minter A Heroku web server to easily mint non-fungible tokens via an API Example Configuration: Blockchain: Ethereum Testnet: Rinkeby Contract: ER

John Oseni 3 Nov 22, 2021
Complete token authentication system for react + redux that supports isomorphic rendering.

Simple, secure authentication for react + redux TL;DR - View the Live Demo You can see a complete working example here. The code for the demo is here.

Lynn Dylan Hurley 2.2k Nov 19, 2021
Simple generator of React code from Figma

Simple generator of React code from Figma

seya 157 Nov 24, 2021
A plugin example for writing reactions with the Figma plugin API

?? figma-plugin-example-prototype-write The ability to write protoype interactions in the Figma plugin API has landed! This update allows plugins to c

Anthony DiSpezio 36 Oct 2, 2021
Tangle is a super simple, performant, event driven state library for React.

Tangle is a super simple, performant, event driven state library for React.

Luma 4 Oct 13, 2021
A tool created in react to generate complex box shadows visually

Check out the Tutorial on YouTube Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the

Shuvo 1 Oct 27, 2021
Generate fun kaleidoscope for user avatars.

React Avatar Generator This was inspired by an old website called LayerVault. You can see an example of how that used to look like here. Getting Start

Joseph Smith 38 Nov 28, 2021
Generate GitBook style modern docs/tutorial websites using Gatsby + MDX

gatsby-gitbook-starter Kick off your project with this starter to create a powerful/flexible docs/tutorial web apps. Motivation We wanted to create a

Vaishnavi Dwivedi 3 Nov 21, 2021
LocateJS predicts your location by analyzing your connection and system data.

LocateJS predicts your location by analyzing your connection and system data.

z0ccc 201 Nov 19, 2021
A React Custom able cursor that can decorate your site also your hand is open to manipulate the cursor with css

custom-react-cursor A React Custom able cursor that can decorate your site also your hand is open to manipulate the cursor with css Demo live Installi

amirhossein 9 Nov 17, 2021
Live coding in your browser with your favourite language.

Live coding in your browser with your favourite language.

Fatih Erikli 986 Nov 20, 2021
Make your React Components aware of their width and height!

Make your React Components aware of their width and/or height! Hyper Responsive Components! Performant. Easy to use. Extensive browser support. Suppor

Sean Matheson 1.8k Nov 26, 2021
Pimp my README is an open source profile builder that you can use to add some cool components to your README profile - Made with <3 by webapp.io :)

Pimp my README This repository is the open-source project for Pimp my README. How this came to be So basically, GitHub added a feature where you can a

Joshua D'Souza 88 Nov 22, 2021
Jed Saylor minting dapp is a quick and easy way to connect your smart contract and start minting NFTs.

Welcome to Jed Saylor ?? All the code in these repos was created and explained by Jed Saylor on his course. To find help please visit: ?? Instagram Je

null 1 Nov 26, 2021
The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.

The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State. Table of Contents Articles Featu

Sergey 77 Oct 17, 2021
🕹 GBA emulator on your React project - easy and powerful to use!

react-gbajs GBA emulator on your React project - easy and powerful to use! Just three steps to set it up ✨ 1 - Apply GbaProvider import { GbaProvider

Bruno Macabeus 20 Dec 1, 2021
Here is the place try to learn to call API using React.js with anything your code style and contribute to open-source. Part of Hacktoberfest

Table of Contents About The Project Built With Getting Started Prerequisites Installation Usage About The Project To welcome hacktoberfest we provide

Abdul Hakim 12 Nov 26, 2021
A simple Solana program to vote for your favorite type of peanut butter. Built with Anchor and React.

Cruchy vs Smooth V2 A simple Solana program to vote for your favorite type of peanut butter. Built with Anchor and React. This is a follow up to a pre

Brian Friel 17 Nov 12, 2021