> ## Documentation Index
> Fetch the complete documentation index at: https://doc.getrationale.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Design canvas: align PRD and screens in one place

> Pin every screen, flow, and PRD next to each other on an infinite canvas, then run a logic audit that reads the pixels, not just the prompt.

The design canvas is the unified workspace where your PRD, Figma screens, and audit context all live together. Rather than switching between a docs tool, a design file, and a handoff doc, you bring everything into one place — and run audits against the complete picture.

## What the canvas holds

Each project version on the canvas contains:

* **Design screens** — uploaded directly or imported from Figma as PNG exports
* **PRD text** — pasted in, linked from Notion, or uploaded as a file
* **Audit results** — surfaced in the results tabs once an audit has run

All three feed into the same audit engine. The audit doesn't just read the prompt you give it — it reads the actual pixels of your screens and cross-references them against your PRD requirements.

## Importing designs from Figma

Paste a Figma file URL (or a bare file key) into the Figma import field. Rationale extracts the frames from the file and adds them as screens on your canvas. Supported URL formats include `/design/`, `/file/`, and `/proto/` URLs.

<Steps>
  <Step title="Copy the Figma file URL">
    Open the file in Figma and copy the URL from the browser address bar. A frame-level node ID in the URL will scope the import to that frame; leaving it off imports the top-level frames.
  </Step>

  <Step title="Paste the URL into Rationale">
    In your project, paste the URL into the Figma import field. Rationale fetches the frame list and downloads each frame as a PNG.
  </Step>

  <Step title="Name and arrange your screens">
    Imported frames take their name from Figma. You can rename any screen after import. The canvas treats each screen as an individual image the audit can reference.
  </Step>
</Steps>

<Note>
  Figma export URLs are short-lived. If an import fails after a delay, try pasting the URL again to generate a fresh set of signed URLs.
</Note>

## The canvas as audit context

Every audit you run uses the screens and PRD attached to the active version as its context. This means:

* Adding more screens to the canvas gives the audit more surface area to check
* Updating the PRD text changes what the audit considers a requirement
* Switching to a different version changes both the screens and PRD the audit reads

<Tip>
  Before running an audit, make sure the active version has both a PRD and at least one design screen. An audit with no PRD will only flag missing states; an audit with no screens will only parse requirements without cross-referencing them.
</Tip>

## Project gateways

When you create a new project, Rationale asks you to pick a starting point — called a gateway — that shapes how the canvas and audit flow are set up.

<Tabs>
  <Tab title="Design to PRD">
    Start from finished or in-progress Figma designs. You upload screens, attach a PRD, and run a full logic audit that checks whether the designs cover everything the PRD specifies. Results appear across the Summary, Requirements, Gaps & Edge Cases, Decisions & Notes, and Dev Handoff tabs.
  </Tab>

  <Tab title="PRD to Design">
    Start from a PRD before screens exist. Rationale generates a design brief — a structured read of what the screens need to do — so designers have a clear spec to work from. Results appear in the Design Brief, Gaps & Edge Cases, and Dev Handoff tabs.
  </Tab>

  <Tab title="Match">
    Cross-reference an existing PRD against existing designs to produce a gap report. Useful for auditing work that's already in progress when PRD and designs were written independently.
  </Tab>
</Tabs>

The gateway you choose at project creation affects which tabs appear in the results panel and how the audit interprets the inputs. You can't change the gateway after the project is created, but you can create a new project with a different gateway.