Skip to content

Yet another “Figma to React” to generate and synchronize various template language sources, designed to be AST-based, pluggable platform.

License

Notifications You must be signed in to change notification settings

piglovesyou/fig

Repository files navigation

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.

Screen Recording 2021-06-20 at 11 19 13

Sample output

This website example is generated from a Figma file. Not perfect, but it seems okay.

Try it out (Note: Alpha spec)

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

  1. Prepare your Figma access token by following this guide.
  2. Find out your fileKey in your browser location bar. It should look like https://www.figma.com/file/:fileKey/:title. Run this command in your terminal.
  3. Run this command.
$ npx @piglovesyou/fig-cli@latest --token FIGMA_ACCESS_TOKEN FILE_KEY

You'll find files generated like these.

├── components
│   ├── Button_1$48.js
│   ├── Button_1$48.tsx
├── images
│   ├── 02d6c74b348c68bacf5b0a87d670e94f.jpeg
│   ├── 1b823b23208a6cf9ec484609d96aadcb.svg
│   ├── f893d788c09554ac3f7c80d6a9bfb22e.png
├── pages
│   ├── Home_1$4.js
│   └── Home_1$4.tsx
└── public
    └── Home_1$4.html

Sponsors

Sponsor me🍩🍦🥶

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

  • I'd like you to make an issue to report CSS bugs/improvements. I'm happy even more if you make the PR for it, but not necessary!
  • A new Plugin PR is not ready since the architecture's still unstable. Please issue it instead, e.g. "I want Vue!"

License

APACHE LICENSE, VERSION 2.0

Author

Soichi Takamura @piglovesyou

About

Yet another “Figma to React” to generate and synchronize various template language sources, designed to be AST-based, pluggable platform.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project