Skip to main content

​
Overview

Figma Mode connects to your design file, interprets frames, components, variants, and prototyped flows, then turns them into actionable tests. It catches broken states early by comparing intended interactions against the latest handoff artifacts.

Component Mapping

Understands variants, breakpoints, and nested components for smart selectors.

Interaction Trails

Reads prototype links to predict happy paths and edge transitions.

​
Inputs Required

  • Figma file link with can view or higher permissions.
  • Description of the flows or personas you care about.
  • Optional UX notes (e.g., “animations are critical” or “dark mode parity”).
Private teams sometimes block API access even with shared links. Confirm the service account has at least viewer access.

​
Step-by-Step

  1. Start Coverage Agent → Figma Mode.
  2. Paste the Figma link; include page or frame names if the file is large.
  3. Mention the use case (“new billing review component” or “mobile nav”).
  4. Run generation. The agent parses layers, components, and flows.
  5. Review the output: tests grouped by component/flow plus a gap analysis table.
  6. Ask for deliverables like “produce accessibility checklist” or “map to Jira epics”.
Figma Mode only accepts links—no file uploads. Follow the flow below to make sure the system can fetch the right design.
  1. Click the Figma chip under the composer to open Linked sources.
  2. Paste the share link straight from Figma.
  3. Select Add. Nota fetches the design metadata, variants, and interactions, then reflects the linked source in your chat context.
Linked sources panel with a Figma URL input You’ll see the link appear in the source list, confirming that Nota can read the design before analysis begins. Full-size preview: /images/new-chat/figma-link.png.
Ensure the Figma file grants at least Can view access to the Nota service identity. Private links without access will fail silently.

​
Required Access Token

Add a valid FIGMA_ACCESS_TOKEN to your environment configuration before running Figma Mode. This token lets Nota call the Figma API behind the scenes.
  1. Go to Settings → Environment Variables.
  2. Create or update the variable named FIGMA_ACCESS_TOKEN with a Figma personal access token that can read the target files.
  3. Save and redeploy the environment so the Coverage Agent session inherits the new secret.
Read the Environment Variables guide if you need help managing secrets.
If you rotate the Figma token, update the FIGMA_ACCESS_TOKEN environment variable with the new value.