Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fbanespo1/figma2angular
Figma to Angular converter
https://github.com/fbanespo1/figma2angular
Last synced: 4 days ago
JSON representation
Figma to Angular converter
- Host: GitHub
- URL: https://github.com/fbanespo1/figma2angular
- Owner: fbanespo1
- Created: 2023-07-25T00:39:00.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-25T03:21:19.000Z (over 1 year ago)
- Last Synced: 2024-08-02T20:45:11.389Z (3 months ago)
- Language: Python
- Size: 15.6 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#Figma to Angular Code Generator
This app allows generating Angular component code from a Figma design file. It uses the Figma API to extract components and OpenAI's GPT-3 to generate TypeScript code for those components.
How it Works
The app follows these steps:
User uploads a Figma file (must have access permission)
The Figma API is called to analyze the file:
The images, fonts, colors and component names are extracted
This structured data is used to understand the design system
The component data is passed to OpenAI's Davinci-002 model to generate Angular code
A prompt is constructed describing each component
Code is generated to recreate the UI with Angular directives
The generated Angular code is displayed in the app
Syntax highlighted code rendered with Streamlit
Download button to save as a .ts file
(Optional) User can integrate into an Angular project
Ng CLI commands can scaffold a new project
Generated component added to app module
Provides a full working Angular app
This automated pipeline saves hours of manually converting designs to Angular code!
Interface
The app provides a simple interface built with Streamlit:
File uploader to select a Figma file
Output area showing generated Angular code
Buttons to download code and create project
Sliders to tweak OpenAI parameters
Streamlit's simplicity and speed allowed quick iterating and changes.
Running Locally
To run the app locally:
Clone the repository
Install requirements: pip install -r requirements.txt
Sign up for Figma and OpenAI APIs to get keys
Add keys to config.py
Run: streamlit run app.py
This will start the web app on localhost.
Deployment
For deployment I recommend:
Building a Docker container for the app
Hosting on a service like AWS Elastic Beanstalk
Using nginx + gunicorn for productionization
This allows deploying easily without managing servers directly.
Future Ideas
Some potential ways to expand the app:
Add more options for code generation: React, Vue, mobile, etc
Incorporate React Storybook for interactive component preview
Perform validation on generated code before download
Version control integration to commit generated code
Let us know if you have any other ideas for features!
Contributors
This app was created by:
Tony
We welcome contributions and feedback!
