Still in the Alpha stage. Please sponsor me to support this project.
Fig is another “Figma to React” tool to generate and synchronize various template languages, designed to be AST-based, pluggable platform.
This website example is generated from a Figma file. Not perfect, but it seems okay.
Make sure you have Node.js installed in your machine.
- Prepare your Figma access token by following this guide.
- 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. - Run this command.
$ npx @piglovesyou/fig-cli@latest --token FIGMA_ACCESS_TOKEN FILE_KEYYou'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
- 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?
- 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!"
APACHE LICENSE, VERSION 2.0