Skip to content

Latest commit

 

History

History
68 lines (46 loc) · 2.49 KB

README.md

File metadata and controls

68 lines (46 loc) · 2.49 KB

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