ddanielbee/figma-fsm

Figma prototype file to XState syntax Finite State Machine representation

figma-fsm

Convert Figma Prototype files to Xstate compatible Finite State Machine objects. It uses the Figma REST api to retrieve a file and transforms it into a Finite State Machine that can be visualized here

🆕 Try it out with an UI here: Figma FSM UI

Installation

The best way is to use npm

npm install figma-fsm

Usage

In Node

const figmaFSM = require("figma-fsm")

figmaFSM(<FigmaToken>, <FigmaFileKey>)
  .then(result => // Do something with your result).

In Typescript

import figmaFSM from "figma-fsm";

figmaFSM(<FigmaToken>, <FigmaFileKey>)
  .then(result => // Do something with your result).

Getting a Figma Token

The best way is to create one following the instructions in the Figma API Docs.

Next Steps

• Build a CLI tool.

figma-fsm's Issues

Recursively find Child nodes with transitionIds

Currently, we're going only one level deep. Sometimes, Figma groups have the transitions inside the children of children of children... you get it.

So, we need to recursively find all transitionIds and add them to the state object for every frame.