FigmaFlet

<p align="center"> <img align="center" src="https://github.com/user-attachments/assets/7c2116cd-b31d-464d-b024-9001292e149e" width=200 height=200> </p> <h1 align="center"> FigmaFlet </h1>

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.

<a href="https://www.paypal.com/donate/?hosted_button_id=7L6XHBCCZL9K4"> <img src="https://img.shields.io/badge/Donate-PayPal-blue.svg" width="200"> </a>

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:

git clone https://github.com/Benitmulindwa/figmaflet.git
cd figmaflet

2. Install the dependencies:

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:

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:

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 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 file for details.

📝Author

Benit Mulindwa - GitHub

❤️Acknowledgments

• Special thanks to the tkinterdesigner and Figma 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.