Turn your text prompts into editable UI elements instantly.

Designo is a next-generation Figma plugin that leverages Google's Agent Development Kit (ADK) and Gemini models to act as your intelligent design partner. Whether you need to generate new SVG icons, modify existing UI based on context, or ask complex design questions, Designo handles it all within the Figma canvas.

Click here to watch the full video demonstration (Right-click and 'Save Link As' to download if it doesn't play in browser)

• Features
• How It Works
• Tech Stack
• Prerequisites
• Installation & Setup
• Usage Guide
• Contributing

• 🧠 Context-Aware Intelligence: The AI automatically detects if you are trying to create a new element (empty frame selected) or modify an existing one.
• 🎨 Text-to-SVG Generation: Describe a UI element (e.g., "A user profile card with a logout button"), and Designo generates the vector code instantly.
• 🖌️ Visual Modification: Select an element and ask for changes (e.g., "Make the button rounded and blue"). Designo "sees" your design and adjusts the code.
• 💬 Integrated Chat & QA: Ask general design questions (e.g., "What are trending fonts for 2025?") and get answers powered by Google Search.
• 🤖 Multi-Agent System: Specialized AI agents handle routing, generation, modification, and research separately for optimal performance.

Designo uses a split architecture to keep the plugin lightweight while handling heavy AI processing on a Python backend.

graph TD
    User[User in Figma] -->|Selects Frame & Types Prompt| UI[Plugin]
    UI -->|Exports Selection & Request| BE[Flask Backend]
    
    subgraph "Backend Processing (Google ADK)"
        BE --> Decision{Decision Agent}
        Decision -->|Intent: Create| Agent1[Create Agent]
        Decision -->|Intent: Modify| Agent2[Modify Agent]
        Decision -->|Intent: Ask| Agent3[Answer Agent]
    end
    
    Agent1 -->|SVG Code| BE
    Agent2 -->|New SVG| BE
    Agent3 -->|Text Answer| BE
    
    BE -->|Response| UI
    UI -->|Updates Canvas| User

1. Figma Plugin (Frontend): Handles user selection, image export (for context), and rendering the chat interface.
2. Flask Backend: Uses Google's Agent Development Kit to route requests to specialized Gemini models.
3. Google Gemini: The core intelligence engine that generates SVG code or text responses.

• Frontend: HTML5, CSS3, JavaScript (Figma Plugin API)
• Backend: Python 3.8+, Flask
• AI/ML: Google Agent Development Kit (ADK), Google Gemini Pro, Google Gemini Pro Vision
• Tools: Node.js (for dependency management)

Before running Designo, ensure you have the following installed:

• Node.js & npm
• Python 3.8+
• Figma Desktop App
• Google API Key: Get one from Google AI Studio.

git clone https://github.com/atharva9167j/Designo.git
cd Designo

Set up the Python Flask server to handle AI requests.

cd Backend

# Create Virtual Environment
python -m venv venv

# Activate Virtual Environment
# Windows:
venv\Scripts\activate
# macOS/Linux:
source venv/bin/activate

# Install Dependencies
pip install Flask Flask-Cors google-adk

# Configure API Key
# Create a .env file in the Backend folder
echo 'GOOGLE_API_KEY="YOUR_ACTUAL_API_KEY"' > .env

Prepare the Figma interface.

cd ../Plugin
npm install
# Ensure 'dist/code.js' exists or run build script if available

1. Start the Backend: Run python app.py inside the Backend folder. Ensure it's running on port 5001.

2. Import to Figma:

   • Open Figma Desktop App.
   • Plugins > Development > Import plugin from manifest...
   • Select manifest.json inside the Plugin folder.

3. Run the Plugin:

   • Create Mode: Select an empty top-level Frame. Type: "Create a login form" -> Send.
   • Modify Mode: Select an element inside a frame. Type: "Change the background to dark mode" -> Send.
   • Q&A Mode: Select nothing. Type: "What is a good color palette for healthcare apps?" -> Send.

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Distributed under the MIT License. See LICENSE for more information.