How to Power Your Design Workflow with Gemini and Figma Make

Setup and context

Design work in Figma is creative but time-consuming. Especially in the early phases—from requirements gathering to initial prototype generation—designers often iterate multiple times, significantly impacting productivity.

In 2026, combining Gemini API with Figma Make can dramatically automate these initial phases. Simply describe your requirements in natural language, let Gemini structure them, and watch Figma Make generate multiple variations automatically. With this workflow, designers focus on judgment and refinement rather than repetitive design work, multiplying their creative output per hour.

This article walks through real-world examples to explain how Gemini × Figma Make creates a next-generation design workflow.

The Complete Gemini × Figma Make Workflow

Traditional design projects followed this sequence:

1. Requirements explained in text or verbally
2. Designer mentally processes the brief
3. Create one design concept in Figma
4. Receive feedback
5. Iterate through revisions

With Gemini × Figma Make, the workflow becomes:

• Step 1: Input requirements in natural language → Gemini API structures them
• Step 2: Send structured data to Figma Make → Auto-generate multiple variations
• Step 3: Review generated designs → Select your preferred direction
• Step 4: Use Gemini CLI to generate HTML prototype → Code review and refinement
• Step 5: Finalize and handoff → Pass to development team

This workflow reduces the initial phase from typical timelines to roughly 1/3 to 1/2 of original duration.

Step 1: Structure Requirements with Gemini API

The starting point of any design project is "how to organize requirements clearly." Ambiguity here undermines even the most powerful AI tools.

Use Gemini API to convert natural language requirements into structured JSON data.

Prompting Gemini API for Requirements

import json
from google import genai
 
client = genai.Client(api_key="YOUR_GEMINI_API_KEY")
 
# Design brief (natural language)
design_brief = """
I need to design a landing page for a mobile social app.
- Target users: Women aged 20-30 in urban areas
- Color theme: Pink and white base with yellow accents
- Concept: "Healing in everyday life" — gentle, calming vibe
- Features: Feed display, user profiles, like functionality
"""
 
# Use Gemini API to structure requirements
response = client.models.generate_content(
    model="gemini-2.0-flash",
    contents=f"""
Structure the following design brief into JSON format.
Must include these fields:
- target_audience
- color_palette (primary, secondary, accent colors)
- concept
- typography (heading and body approach)
- key_features
- layout_approach
 
Design brief:
{design_brief}
 
Return JSON only. No explanation needed.
"""
)
 
design_structure = json.loads(response.text)
print(json.dumps(design_structure, indent=2))

Sample Output:

{
  "target_audience": "Women 20-30 in urban areas (lifestyle & wellness conscious)",
  "color_palette": {
    "primary": "#FFB6D9",
    "secondary": "#FFFFFF",
    "accent": "#FFD700",
    "neutral": "#F5F5F5"
  },
  "concept": "Gentle and approachable. An app you'll want to use daily with rounded, soft design language",
  "typography": {
    "heading": "Rounded sans-serif (Poppins, DM Sans)",
    "body": "Readable sans-serif (Inter, Open Sans)"
  },
  "key_features": ["Feed display", "User profiles", "Like functionality"],
  "layout_approach": "Card-based layout with emphasis on breathing room"
}

This structured data significantly improves the accuracy of auto-generation in later steps.

Step 2: Auto-Generate UI Variations with Figma Make

Once structured data is ready, connect it to Figma Make—Figma's automation platform with conditional logic and API integrations.

Setting Up Figma Make Integration

1. Create a new Figma file
2. Open Figma Make (Menu → Plugins & apps → Browse → Make)
3. Create an automation scenario:
   • Trigger: Webhook (receive structured data from Gemini API)
   • Action 1: Create frames
   • Action 2: Apply color components
   • Action 3: Set text styles
   • Action 4: Duplicate for multiple variations

Example: Triggering Figma Make with Python

import requests
 
# Figma Make webhook URL (set up beforehand)
webhook_url = "https://hooks.make.com/path/to/webhook"
 
payload = {
    "design_structure": design_structure,
    "variations": [
        {"variant": "light", "tone": "minimalist"},
        {"variant": "colorful", "tone": "vibrant"},
        {"variant": "dark", "tone": "sophisticated"}
    ]
}
 
response = requests.post(webhook_url, json=payload)
print(f"Figma Make triggered: {response.status_code}")

Figma Make will generate three UI variations in about 2-3 minutes. You simply compare them and select your favorite.

Step 3: Review and Refine Generated Designs

Examine the UI variations in Figma. This step lets you focus on the one thing only humans can judge: aesthetics.

Key Review Criteria

• Concept alignment: Does the gentle, calming vibe match your brief?
• Color balance: Are primary, secondary, and accent colors in harmony?
• Legibility: Is text contrast and font sizing appropriate?
• Spacing: Does the whitespace feel comfortable and intentional?

Once you've selected a direction, refine it further. Use Figma's Design System to componentize your refinements for a smooth handoff to development.

Step 4: Auto-Generate HTML Prototypes with Gemini CLI

After design approval, it's time to build the prototype. This is where Gemini CLI and AI code generation tools like Claude Code excel.

Figma-to-Code Flow

1. Export Figma design → PNG or Design Tokens (JSON format)
2. Analyze with Gemini CLI → Extract UI structure
3. Generate HTML/CSS → Componentized markup
4. Add interactivity → JavaScript powered by Gemini
5. Code review → Polish and optimize

Analyzing with Gemini CLI

# Upload Figma screenshot to Gemini API
curl https://api.gemini.google.com/v1/files/upload \
  -H "Authorization: Bearer YOUR_GEMINI_API_KEY" \
  -F "file=@landing-page.png"
 
# Analyze using returned file ID
gemini analyze \
  --image-id "files/..." \
  --prompt "Generate HTML/CSS code for this UI. \
Use a flexible card-based layout and Tailwind CSS for styling."

Generated Output (excerpt):

<!-- Hero Section -->
<section class="bg-gradient-to-r from-pink-100 to-pink-50 py-20">
  <div class="max-w-4xl mx-auto px-6">
    <h1 class="text-5xl font-bold text-gray-900 mb-4">
      Healing in Everyday Life
    </h1>
    <p class="text-xl text-gray-700 mb-8">
      A community making each day a little more comfortable
    </p>
    <button class="bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full">
      Get Started
    </button>
  </div>
</section>
 
<!-- Feed Section -->
<section class="py-20">
  <div class="max-w-4xl mx-auto px-6">
    <h2 class="text-3xl font-bold mb-12">Timeline</h2>
    <div class="grid gap-6">
      <!-- Card component -->
      <div class="bg-white rounded-3xl shadow-md p-6 hover:shadow-lg transition">
        <!-- Content here -->
      </div>
    </div>
  </div>
</section>

Gemini transforms your design screenshot into working code. While manual review and refinement are necessary, this beats hand-coding from scratch.

Step 5: Code Review and Optimization with Gemini

Once HTML is generated, use Gemini for code review and optimization.

Code Review Prompt

html_code = """
<!-- Generated HTML code -->
"""
 
review_response = client.models.generate_content(
    model="gemini-2.0-flash",
    contents=f"""
Review the following HTML code. Check for:
- Accessibility (a11y) issues
- Responsive design completeness
- Performance optimization opportunities
- SEO meta tags adequacy
 
Provide specific improvement suggestions with code examples where applicable.
 
{html_code}
"""
)
 
print(review_response.text)

Gemini will flag accessibility gaps, performance bottlenecks, and suggest concrete improvements.

Real-World Example: SPA Landing Page

Let's walk through a complete project cycle.

Requirements (Natural Language)

Type: SPA landing page
Industry: EdTech (online learning)
Target: Professionals aged 25-40 (skill development focus)
Color: Blue primary with white and gray
Tone: Trust meets modernity

Structured by Gemini

{
  "page_type": "SPA_landing",
  "color_scheme": {
    "primary": "#0066CC",
    "secondary": "#FFFFFF",
    "accent": "#00D4AA",
    "text": "#333333"
  },
  "sections": [
    "hero",
    "features",
    "testimonials",
    "pricing",
    "cta"
  ]
}

Auto-Generated by Figma Make

Within 3-5 minutes, three variations emerge: minimalist, feature-rich, and dynamic.

Development Phase

Choose your preferred design → Convert to HTML → Get Gemini code review → Hand off to developers

This complete cycle from brief to code-ready takes 1-2 business days.

Wrapping Up

The Gemini × Figma Make workflow excels at freeing designers to focus on higher-order creative work:

• Let AI handle: Structuring, generating variations, boilerplate code
• Designers focus on: Aesthetic judgment, brand alignment, refinement

This partnership—machine automation plus human creativity—accelerates projects while maintaining quality.

In 2026, "working alongside AI" is simply how modern design operates. If you haven't tried this workflow yet, consider it for your next project.