Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/piglovesyou/fig
Yet another “Figma to React” to generate and synchronize various template language sources, designed to be AST-based, pluggable platform.
https://github.com/piglovesyou/fig
figma react
Last synced: about 2 months ago
JSON representation
Yet another “Figma to React” to generate and synchronize various template language sources, designed to be AST-based, pluggable platform.
- Host: GitHub
- URL: https://github.com/piglovesyou/fig
- Owner: piglovesyou
- License: apache-2.0
- Created: 2021-04-11T14:02:38.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-31T17:18:15.000Z (about 2 months ago)
- Last Synced: 2024-07-31T21:19:35.254Z (about 2 months ago)
- Topics: figma, react
- Language: TypeScript
- Homepage: https://piglovesyou.github.io/fig/patagonia/public/Home_1%244.html
- Size: 13.7 MB
- Stars: 12
- Watchers: 3
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-list - fig - based, pluggable platform. | piglovesyou | 3 | (TypeScript)
README
**Still in the Alpha stage.** Please [sponsor me](https://github.com/sponsors/piglovesyou) 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.
## Sample output
[This website example](https://piglovesyou.github.io/fig/patagonia/public/Home_1%244.html) is generated from [a Figma file](https://www.figma.com/file/pC6EOjjdZpS7PVsPTgjNLL/Patagonia?node-id=1%3A4). Not perfect, but it seems okay.
## Try it out (Note: Alpha spec)
Make sure you have [Node.js](https://nodejs.org/) installed in your machine.
1. Prepare your **Figma access token** by following [this guide](https://www.figma.com/developers/api#access-tokens).
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.
```bash
$ 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🍩🍦🥶](https://github.com/sponsors/piglovesyou)
## Milestones
- [x] 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](https://github.com/piglovesyou/fig/issues/new) to report CSS bugs/improvements. I'm happy even more if you make the PR for it, but not necessary!
* [A new Plugin PR](https://github.com/piglovesyou/fig/tree/main/src/plugins) is not ready since the architecture's still unstable. Please [issue it](https://github.com/piglovesyou/fig/issues/new) instead, e.g. "I want Vue!"
## License
APACHE LICENSE, VERSION 2.0
## Author
[Soichi Takamura @piglovesyou](https://github.com/piglovesyou/)