https://github.com/cirediatpl/figmachain
FigmaChain is a set of Python scripts that generate HTML/CSS code based on Figma designs. Using OpenAI's GPT-3 model, FigmaChain enables developers to quickly generate HTML/CSS code from a Figma design input. It also includes a Streamlit-based chatbot interface for interactive code generation.
https://github.com/cirediatpl/figmachain
Last synced: 5 months ago
JSON representation
FigmaChain is a set of Python scripts that generate HTML/CSS code based on Figma designs. Using OpenAI's GPT-3 model, FigmaChain enables developers to quickly generate HTML/CSS code from a Figma design input. It also includes a Streamlit-based chatbot interface for interactive code generation.
- Host: GitHub
- URL: https://github.com/cirediatpl/figmachain
- Owner: cirediatpl
- Created: 2023-04-27T22:09:01.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-03T08:38:00.000Z (almost 2 years ago)
- Last Synced: 2024-08-03T01:25:54.695Z (9 months ago)
- Language: Python
- Size: 14.6 KB
- Stars: 944
- Watchers: 16
- Forks: 86
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-ChatGPT-repositories - FigmaChain - FigmaChain is a set of Python scripts that generate HTML/CSS code based on Figma designs. Using OpenAI's GPT-3 model, FigmaChain enables developers to quickly generate HTML/CSS code from a Figma design input. It also includes a Streamlit-based chatbot interface for interactive code generation. (Chatbots)
README
# FigmaChain: HTML/CSS Code Generation from Figma Designs
FigmaChain is a set of Python scripts that generate HTML/CSS code based on Figma designs. Using OpenAI's GPT-3 model, FigmaChain enables developers to quickly generate HTML/CSS code from a Figma design input. It also includes a Streamlit-based chatbot interface for interactive code generation.
## Prerequisites
- Python 3.6 or higher
- An OpenAI API key (set as environment variable `OPENAI_API_KEY`)
- Access token, node IDs, and file key for Figma (set as environment variables `ACCESS_TOKEN`, `NODE_IDS`, and `FILE_KEY`)
## Accessing the Figma RESTful API
To access the Figma RESTful API, you will need an access token, node IDs, and a file key.
- **File Key**: The file key can be pulled from the URL of the Figma design file. For example, the file key in the URL `https://www.figma.com/file/{filekey}/sampleFilename` is `{filekey}`.
- **Node IDs**: Node IDs are also available in the URL. Click on any element in the Figma design file and look for the `?node-id={node_id}` parameter in the URL.
- **Access Token**: Instructions for obtaining an access token can be found in the Figma help center article: https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
## Installation
1. Clone the repository to your local machine.
2. Navigate to the project directory.
3. Install the required Python packages: pip install openai langchain streamlit dotenv
4. Create a `.env` file in the project directory and add the following environment variables: OPENAI_API_KEY, ACCESS_TOKEN, NODE_IDS, FILE_KEY
## Usage
### generateCode.py
This script generates HTML/CSS code based on a user-provided input and a Figma design.
1. Navigate to the project directory.
2. Run the script with the desired input text as a command-line argument: python generateCode.py input_text
3. The script generates HTML/CSS code and saves it to an `output.html` file.
4. The script opens the generated HTML file in the default web browser.
### chatbot.py
This is the chatbot code.
1. Start the Streamlit app: streamlit run chatbot.py
2. Enter your input in the chat interface and receive generated HTML/CSS code.
3. The generated code is rendered on the page and the conversation is displayed.
## Sponsors
✨ Learn to build projects like this one (with an early bird discount): [BuildFast Course](https://www.buildfastcourse.com/)
## License
[MIT License](LICENSE)