Skip to main content
Macaly connects to Figma so the agent can turn your designs into real pages and pull your design system into your project. Ask it to export a frame, grab your styles and variables, or build a page straight from a Figma file.

​
What is Figma?

Figma is a collaborative design tool for interfaces, prototypes, and design systems. With the Figma integration, Macaly’s agent reads your Figma files directly: it pulls design structure, components, styles, and variables, renders images, and turns your designs into working parts of your project.

​
What you can do

A few examples of what the agent can do with Figma:
  • Turn designs into pages. Pull a file’s structure, components, and styles, and build them into your project as real, responsive pages.
  • Use your design system. Read components, component sets, styles, and variables, and extract design tokens (including a Tailwind config) to keep your build on-brand.
  • Export images and assets. Render any frame or node as a PNG, JPG, SVG, or PDF, and download image fills from a file.
  • Inspect and hand off. Get file metadata, node details, prototype interactions, and dev resources for a clean design-to-code handoff.
  • Collaborate. Read and post comments, react to them, and review a file’s version history.

​
How it works

You describe what you want in the chat, and the agent handles the rest. Ask for a one-off task, or have the agent build Figma right into your project. Ask the agent directly:
Or build it into your app:

​
Good to know

  • You connect once. Authorize your Figma account the first time, and the agent reuses that connection for later requests.
  • 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, and you can revoke access from your Figma settings at any time.