Skip to main content
Figma is a collaborative design tool for interfaces, prototypes, and design systems. Connect your account once and the agent turns your designs, components, and styles directly into working parts of your project.
Available on all plans

​
Why connect Figma

  • Turn your designs into real pages. Point the agent at a Figma file and it builds the layout, components, and spacing into a responsive page, so you don’t rebuild your design by hand.
  • Keep your build on brand automatically. The agent pulls your components, styles, and variables, including a ready-to-use Tailwind config, so your project matches your design system without manual re-creation.
  • Hand off designs without leaving the chat. Export any frame as an image, pull dev resources and file details, and skip the back-and-forth between Figma and your project.

​
What you need

  • A Figma account. Create one for free at figma.com
  • A Figma Organization or Enterprise plan if you want published variables or full library analytics

​
Connect Figma to Macaly

1

Open Settings

Go to Settings → Integrations in your Macaly workspace.
2

Connect Figma

Find the Figma card in the list of apps and click the Connect button.
3

Authorize your account

A new window opens, where you’ll be asked to sign in to Figma. Once you approve access, you’ll be redirected back to Macaly.

​
Use Figma from the chat

Once connected, describe what you want and the agent handles the rest. Turn a design into a page: 
Here's my Figma design for the pricing page [link]. Build it
into a real page, match the layout, components, and spacing,
and make it responsive.
Bring your design system into the project: 
Pull the styles and color variables from this Figma file and
turn them into a Tailwind config for my project.
Export assets while you build: 
Export the "Hero" frame from my Figma file as an SVG and add
it to the homepage.
Or build on top of your design library: 
I'm building a design-system docs site. Pull the components
and styles from our Figma library and list them with previews.

​
What the agent can do in Figma

Turn a file’s structure, components, and styles into responsive pages, extract design tokens and a Tailwind config, export frames as images, and pull file details, comments, and version history for a clean handoff. Published variables and library analytics require Figma Organization or Enterprise.

​
Good to know

  • You connect once. Every project in your workspace reuses the same Figma connection.
  • Some library features need a paid Figma plan. Published variables and parts of library analytics require a Figma Organization or Enterprise plan.
  • Your account, your control. The agent only acts when you ask it to. You can disconnect Figma anytime from Settings → Integrations.