MCPcopy Index your code
hub / github.com/Benitmulindwa/FigmaFlet

github.com/Benitmulindwa/FigmaFlet @main

Chat with this repo
repository ↗ · DeepWiki ↗ · + Follow
91 symbols 242 edges 11 files 6 documented · 7%
What it actually does AI analysis from the code graph — generated when you open this
loading…
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:
git clone https://github.com/Benitmulindwa/figmaflet.git
cd figmaflet
  1. 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

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.

  • 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:

figmaOriginal

figmaflet0 0 4

figmaflet-signup

🌱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.

Core symbols most depended-on inside this repo

get
called by 73
figmaflet/figma/node.py
size
called by 6
figmaflet/figma/vector_elements.py
position
called by 6
figmaflet/figma/vector_elements.py
color
called by 4
figmaflet/figma/vector_elements.py
strockes_color
called by 3
figmaflet/figma/vector_elements.py
generate
called by 2
figmaflet/generateUI.py
text_color_from_bg
called by 2
figmaflet/figma/vector_elements.py
main
called by 1
figmaflet/cli.py

Shape

Method 67
Class 17
Function 7

Languages

Python100%

Modules by API surface

figmaflet/figma/vector_elements.py32 symbols
figmaflet/figma/node.py25 symbols
figmaflet/figma/frame.py17 symbols
figmaflet/generateUI.py5 symbols
figmaflet/figma/endpoints.py5 symbols
figmaflet/gui/__main__.py3 symbols
figmaflet/utils.py2 symbols
generated_ui/main.py1 symbols
figmaflet/cli.py1 symbols

For agents

$ claude mcp add FigmaFlet \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact