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: 8 months 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 (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-31T19:13:12.000Z (over 1 year ago)
- Last Synced: 2025-01-31T20:22:41.793Z (over 1 year 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.
## 🦋Support Figmaflet
If this project resonate with you, consider supporting its development with a donation. Your contributions will help me maintain and enhance this project.
### Thank you for your support! 💕
## 🌟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.
- **Graphical Interface**: Provides an intuitive GUI for entering API tokens, file URLs, and output paths.
- **Images**
- **Font-families**
- **Shadow**
- **Gradients**:(Linear & Radial gradients)
- **TextFields**
- **Buttons**
## 📦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**
- **UI Responsivity**
- **Flexibility**: 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](https://github.com/ParthJadhav/Tkinter-Designer?tab=readme-ov-file) and [Figma](https://figma.com) communities for their support and inspiration.
- ⭐Star this Repo: if you find it useful.
### Contact
For questions, suggestions, or feedback, feel free to open an issue or reach out to mulindwabenit@gmail.com.
Connect with me on [LINKEDIN](https://www.linkedin.com/in/benit-mulindwa-06b11122a/).