Gigma — AI Design Canvas

Say goodbye to Figma MCP's read-only screenshots. Gigma is a cloud design tool built for AI agents — you get a real editable canvas with full MCP control. Create shapes, add text, insert images, arrange layers, preview with screenshots, and export high-res PNGs — all through natural conversation.

Why Gigma over Figma MCP?

Prerequisites

1. Sign up at gigma.10xboost.org with Google (free, no credit card)
2. Get your MCP link: Click the "MCP Link" button in the toolbar → copy the JSON config
3. Add to Claude: Paste into your MCP settings — no install needed

Setup guide: gigma-doc.10xboost.org

Available Tools (19 total)

Project Management

Canvas

Elements (Create, Read, Update, Delete)

Layer & Selection

Export & Preview

Design Workflow

Step 1: Set Up Canvas

create_project(name: "Instagram Post")
set_canvas(width: 1080, height: 1080, backgroundColor: "#1a1a2e")

Common canvas sizes:

Step 2: Build the Design

Add a background shape:

add_element(type: "rect", x: 0, y: 0, width: 1080, height: 1080, fillColor: "#4A90D9")

Add text:

add_element(type: "text", x: 100, y: 200, width: 880, height: 100, text: "Your Headline Here", fontSize: 64, fontWeight: "bold", fillColor: "#FFFFFF", textAlignment: "center")

Add an image with circular mask:

add_image(url: "https://example.com/photo.jpg", x: 400, y: 400, width: 280, height: 280, maskShape: "circle", strokeColor: "#FFD700", strokeWidth: 6)

Add decorative elements:

add_element(type: "circle", x: -100, y: -100, width: 400, height: 400, fillColor: "#16213e", opacity: 0.5)

Step 3: Arrange Layers

Recommended stacking order (bottom to top):

1. Background rectangle
2. Decorative elements (gradients, borders)
3. Images and icons
4. Text (topmost for readability)

reorder_layer(elementId: "<text_id>", action: "front")

Step 4: Preview

Always verify before exporting:

get_screenshot()

This returns a base64 PNG — check layout, colors, and text positioning.

Step 5: Export

export_canvas(format: "png", scale: 2)

Scale options:

• 1x — standard resolution (e.g., 1080×1080)
• 2x — high-res (e.g., 2160×2160) — recommended
• 3x — ultra high-res (e.g., 3240×3240)

Returns a signed URL valid for 7 days.

Batch Design Workflow

Create multiple variations from a template:

Step 1: Design the template

create_project(name: "Quote Template")
set_canvas(width: 1080, height: 1080, backgroundColor: "#2C3E50")
add_element(type: "rect", ...)        → save elementId as bg_id
add_element(type: "text", text: "Quote here", ...)  → save as quote_id
add_element(type: "text", text: "— Author", ...)    → save as author_id

Step 2: Loop through data

For each variation:

update_element(elementId: bg_id, fillColor: "#new_color")
update_element(elementId: quote_id, text: "New quote text")
update_element(elementId: author_id, text: "— New Author")
export_canvas(format: "png", scale: 2)

Step 3: Collect export URLs

Each export_canvas returns a unique signed URL — collect all for the user.

Pro tip: Use create_project(cloneFromId: "") to clone a template project for non-destructive batch creation.

Element Properties Reference

Shapes (rect, circle)

x, y, width, height, fillColor, strokeColor, strokeWidth, opacity, rotation

Text

x, y, width, height, text, fontSize, fontWeight ("normal"/"bold"), textAlignment ("left"/"center"/"right"), fillColor, opacity, rotation

Image

url/imageUrl, x, y, width, height, maskShape ("circle"/"ellipse"/"roundedRect"), strokeColor, strokeWidth, opacity, rotation

Line

x, y, width, height, strokeColor, strokeWidth, opacity, rotation

Tips

• Screenshot often — use get_screenshot after every 2-3 elements to catch issues early
• Update, don't recreate — modify existing elements with update_element instead of delete + add
• Bold, large text — social media feeds scroll fast, use 48px+ and high contrast
• 2-3 colors max — clean designs with a restricted palette perform best
• Track element IDs — save the UUID returned by add_element for later updates/deletes
• Canvas changes sync to browser — edits appear in the web editor within ~2 seconds

Error Handling

Documentation

Full docs: gigma-doc.10xboost.org