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.

Security & Data Handling#

• MCP link is a credential: Your MCP config JSON contains an embedded authentication token in the URL ( https://gigma.10xboost.org/mcp/t/xxxxx...). Treat it like a password — do not share it publicly.
• Token scope: The embedded token grants design access to your Gigma projects. It can create/edit/delete elements, export images, and manage projects within your account. It cannot access any external services or social media accounts.
• Token storage: The token is stored server-side in Gigma's database (Google Cloud, us-central1). It is never written to your local filesystem. You can regenerate it anytime by clicking the "MCP Link" button in Gigma's toolbar.
• Data flow: Design operations (create elements, export images) are processed on Gigma's server. Exported PNGs are stored in Google Cloud Storage with signed URLs valid for 7 days. Image URLs you provide (e.g., for add_image) are fetched server-side to render on the canvas.
• No local credentials: No local API keys, environment variables, or secrets are needed. All auth is embedded in the MCP config.
• Third-party service: This skill relies on Gigma, a cloud design tool built for AI agents. Documentation: gigma-doc.10xboost.org. Source code: github.com/snoopyrain.

Why Gigma over Figma MCP?#

Figma MCPGigmaCanvas controlRead-only screenshotsFull read/writeCreate elementsLimitedShapes, text, images, linesEdit elementsNoUpdate any propertyImage maskingNoCircle, ellipse, rounded rectExportScreenshot onlyPNG up to 3x (5760×3240)Batch designNoClone projects, loop & exportSetupComplex OAuthPaste MCP link, done

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#

ToolDescriptionlist_projectsList all projects with metadatacreate_projectCreate new project (supports cloning from existing for templates)switch_projectSwitch active project

Canvas#

ToolDescriptionget_canvas_infoGet canvas dimensions, background color, element countset_canvasSet canvas width, height, background color

Elements (Create, Read, Update, Delete)#

ToolDescriptionadd_elementAdd shapes (rect, circle), text, images, or lines with full stylingadd_imageInsert image with masking (circle, ellipse, roundedRect) and strokelist_elementsList all elements on canvasget_elementGet full properties of an elementupdate_elementModify any property of an existing elementdelete_elementRemove an elementdelete_all_elementsClear the entire canvas

Layer & Selection#

ToolDescriptionreorder_layerMove element: front, back, forward, backwardselect_elementHighlight element in web editordeselect_allClear all selections

Export & Preview#

ToolDescriptionget_screenshotPreview canvas as base64 PNG (verify before export)export_canvasExport to Google Cloud Storage (PNG, 1x/2x/3x scale, 7-day URL)

Design Workflow#

Step 1: Set Up Canvas#

text

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

Common canvas sizes:

FormatSizeInstagram Post1080×1080Instagram Story1080×1920Facebook Post1200×630YouTube Thumbnail1280×720LinkedIn Post1200×627Presentation Slide1920×1080

Step 2: Build the Design#

Add a background shape:

text

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

Add text:

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:

text

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:

text

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)

text

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

Step 4: Preview#

Always verify before exporting:

text

get_screenshot()

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

Step 5: Export#

text

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#

text

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:

text

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: "<template_id>") 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#

ErrorSolutionToken validation failure (-32001)MCP link invalid — get a new one from gigma.10xboost.orgElement not foundUse list_elements to get current element IDsImage not loadingEnsure the image URL is publicly accessible (HTTPS)Export failedCheck canvas has elements; try get_screenshot first

Documentation#

Full docs: gigma-doc.10xboost.org