Figma Integration

Use Figma integration to let Dawn inspect design files, component nodes, and variable collections so answers and prototypes can reflect the design system your team actually uses.

Before you start

  • A Figma account with access to the files Dawn should use.
  • Either a Figma personal access token or a Dawn deployment that exposes the Connect Figma OAuth button.
  • At least one file URL or component node URL you want Dawn to discover and link.
  • The default API URL, https://api.figma.com, unless you use a proxy or a different Figma deployment.

Figma discovery is URL-driven. Dawn does not browse your whole Figma workspace automatically. You connect Figma first, then paste a file or node URL on the source step to discover the specific design resources you want available to agents.

Choose the connection method

Dawn supports two ways to connect Figma. The manual token flow works everywhere. OAuth is the smoother option if your Dawn deployment already exposes the Connect Figma button.

  • Personal access token: fastest setup, works well for a single user or a shared design account.
  • OAuth: better if you want Dawn to manage a refreshable user connection instead of a manually rotated token.

Create the Figma token if you are using the manual flow

  1. Create a Figma personal access token for the account Dawn should use.
  2. Grant at least current_user:read, file_content:read, and file_metadata:read.
  3. If you want Dawn to discover variable collections, also grant file_variables:read.
  4. Copy the token and store it safely. Dawn expects the raw token value.

Connect Figma in Dawn

  1. Open Integrations in Dawn and click Add connection.
  2. Choose Figma.
  3. If your Dawn deployment shows Connect Figma and you want OAuth, use that button and complete the browser flow.
  4. Otherwise paste the personal access token into Personal access token.
  5. Leave API URL set to https://api.figma.com unless you use a custom endpoint.
  6. Click Connect.
  1. On the source step, paste the exact Figma file URL or component node URL into search.
  2. Use a file URL if you want Dawn to read the broader file context.
  3. Use a node URL if you want Dawn to discover a specific reusable component from that file.
  4. Link only the file, components, and variable collections that agents should actually use.
  5. Assign those linked sources to the agents that should reference your design system or product UI.

Dawn accepts standard Figma share URLs such as /file/... and /design/.... If the URL includes a node-id, Dawn uses that to try to discover the specific component node as well as the parent file.

What Dawn discovers

  • File source: the main file context, so agents can inspect file structure and related design content.
  • Component source: a linked component or component set when the pasted node URL points to one.
  • Variable collection source: design-token style data when the file exposes readable variable collections and the connection has access to them.

This lets you keep the source set narrow. A prototype-focused agent may need one design system file and a few core components. A broader product-design agent may also need color and typography variable collections.

Troubleshooting

  • Connection fails: the token is invalid, expired, or missing a required read scope.
  • No sources appear after connect: paste a file URL or component node URL into search. Figma discovery does not list your whole workspace by default.
  • Variable collections are missing: the token or OAuth connection may not have file_variables:read, or the target file may not expose variable collections.
  • The file appears but the component does not: the pasted node may not be a component or component set, even if it lives inside the right file.
Validation Prompts

Use these prompts in Dawn chat to quickly validate this setup area.

List linked Figma sources and confirm I can read the file, component, and variable context I expect.
Check whether this Figma connection is missing variable access or file-level permissions.
Completion Checklist
  • Figma connection validated.
  • At least one intended file URL or node URL discovered successfully.
  • Linked file/component/variable sources assigned to the correct agent.
  • Agent can answer a question grounded in the linked design source.