Figma connector for RevampKey

What the Figma connector does

Connect Figma and the agent can read the design you point it at: layout, spacing, colors, variables and components. It uses that to build matching UI in your codebase instead of guessing from a screenshot.

It also picks up your Code Connect mappings so it reuses the components you already have, and it can read FigJam boards and draw diagrams.

Things to ask once it's connected

• “Build this Figma frame as a React component”Copy
• “Which color variables does the checkout screen use?”Copy
• “Turn this FigJam flow into a list of tickets”Copy

How to connect Figma

1. Open Connectors in RevampKey and search for Figma.
2. Paste your Figma API key when asked. RevampKey shows where to find it.
3. Come back and ask in plain English. The agent asks before it changes anything.

Tools the agent can use (9)

• generate_diagram
• get_design_context
• get_screenshot
• get_metadata
• create_design_system_rules
• get_variable_defs
• get_code_connect_map
• get_figjam
• whoami

Related connectors

AAdobeCreativeCCanvaCreativeDDropboxCreativeMMiroCommunication