Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benitmulindwa/figmaflet
Generate Flet UI from Figma designs
https://github.com/benitmulindwa/figmaflet
code-generation convert drag-and-drop easy easy-to-use fast figma flet flet-gui flet-python python python-library python-script ui ui-design
Last synced: about 5 hours ago
JSON representation
Generate Flet UI from Figma designs
- Host: GitHub
- URL: https://github.com/benitmulindwa/figmaflet
- Owner: Benitmulindwa
- License: apache-2.0
- Created: 2024-12-20T10:57:54.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-01-31T19:13:12.000Z (1 day ago)
- Last Synced: 2025-01-31T20:22:41.793Z (1 day ago)
- Topics: code-generation, convert, drag-and-drop, easy, easy-to-use, fast, figma, flet, flet-gui, flet-python, python, python-library, python-script, ui, ui-design
- Language: Python
- Homepage:
- Size: 171 KB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
FigmaFlet
FigmaFlet is a tool that generates Flet UI code directly from Figma designs. It streamlines the process of transforming your Figma prototypes into production-ready Python code using the Flet framework.
## Features
- **Figma Integration**: Fetch designs directly from Figma using the file URL and API token.
- **Automatic Code Generation**: Generate Flet UI code from your designs with minimal manual effort.
- **Multi-line Text Handling**: Supports multi-line text elements seamlessly.
- **Graphical Interface**: Provides an intuitive GUI for entering API tokens, file URLs, and output paths.
- **Images**
- **Font-families**
- **Shadow**
- **Gradients**:(Linear & Radial gradients)
- **TextFields**
## 🛠Installation
### From Source
1. Clone the repository:
```bash
git clone https://github.com/Benitmulindwa/figmaflet.git
cd figmaflet
```
2. Install the dependencies:
```bash
pip install -r requirements.txt
```
### From PyPI
```
pip install figmaflet
```
## 🧰Usage
1. Launch the GUI to interactively input your API token, file URL, and output path:
```bash
python -m figmaflet.gui
```
### How It Works
- Input your API token, file URL and output path.
- FigmaFlet fetches the design data using Figma's API token.
- The tool processes the design elements and generates Flet-compatible Python code.
- The generated code is saved to your specified output path.
2. Command-Line Interface (CLI)
Once installed, use the CLI to generate Flet code:
```bash
figmaflet --apitoken YOUR_API_TOKEN --fileurl YOUR_FILE_URL --output YOUR_OUTPUT_PATH
```
#### Figma API Token
You will need your Figma API token to access design files. Generate your key by visiting your [Figma](https://figma.com) account settings.
#### File URL
Provide the Figma file URL containing your design; This is your figma project's URL.
## 🔥Examples:
##
## Upcoming Features
- **Icons**
- **Buttons** + **Events handling**(eg: on_hover)
- **UI Responsivity**
- **Flexibiliy**: the generated code must be more flexible and easy to edit
- **Animations**
## Contributing
Contributions to FigmaFlet are highly welcomed!
#### To contribute:
- **Fork the repository.**
- **Create a feature branch.**
- **Submit a pull request with a detailed explanation of your changes.**
## License
This project is licensed under the Apache-2.0 License. See the [LICENSE](LICENSE) file for details.
## Author
Benit Mulindwa - [GitHub](https://github.com/benitmulindwa)
### Acknowledgments
Special thanks to the tkinterdesigner and Figma communities for their support and inspiration.
### Contact
For questions, suggestions, or feedback, feel free to open an issue or reach out to [email protected].