README

Still in the Alpha stage. Please sponsor me to support this project.

Fig

Fig is another “Figma to React” tool to generate and synchronize various template languages, designed to be AST-based, pluggable platform.

Demo

Not perfect, but it seems pretty neat. Give me a feedback.

Try it out (Note: Alpha spec)

Make sure you have Node.js installed in your machine.

Run this command in your terminal.

# Required options: --token token fileKey [fileKey ...]
$ npx @piglovesyou/fig-cli@latest --token YOUR_TOKEN FILE_KEY

Get a Figma access token by following this guide.
fileKey is in your browser location bar when you open a Figma file. It should look as https://www.figma.com/file/:fileKey/:title.

Then you'll find files generated like this.

./images/f3d3bc2931ffab08c3df439b1392ed07.jpeg
./images/f893d788c09554ac3f7c80d6a9bfb22e.png
./components/Button_1$48.tsx
./components/Button_1$48.js
./pages/Home_1$4.tsx
./pages/Home_1$4.js
./public/Home_1$4.html

Milestones

Publish alpha release to generate simple React component source
Support "synchronize" behavior
Make it pluggable to generate multiple template language source
Support another Stylesheet plugin perhaps to support Tailwind CSS
Beta that supports another language, maybe Vue.js?

Contributions

It's still in progress to design the plugin architecture. Please share this project and wait until it's prepared for the contribution!

License

APACHE LICENSE, VERSION 2.0

Author

Soichi Takamura @piglovesyou

@piglovesyou/fig-cli

Usage no npm install needed!