# Credits & Usage
Source: https://docs.figr.design/account/credits-usage

Understand Figr's credit system, monitor your usage, and optimize your subscription for maximum value.

## How credits work

Every action in Figr uses credits. **Think of one credit as one hour of a designer's time.** Simple tasks use less. Complex ones use more.

| **Action in Figr**         | **What it does for you**                                                | **Typical credits used**\* | **What affects credits**                     |
| :------------------------- | :---------------------------------------------------------------------- | :------------------------- | :------------------------------------------- |
| Brainstorm & explore ideas | Generate directions, concepts, and problem‑framing from your context    | 0.1–0.5 per exploration    | Length of brief, number of ideas requested   |
| Define PRDs & flows        | Turn research into PRDs, user flows, and edge‑case maps                 | 0.5–1 per flow or PRD      | Flow complexity, number of scenarios covered |
| Generate designs           | Create screens and variations based on your PRD, flows, and constraints | 1–1.5 per screen           | Number of screens, number of variants        |
| Refine & polish designs    | Make precise edits, states, and micro‑improvements to existing designs  | 0.1-0.5 per edit           | Amount of content edited in one go           |
| Review & critique designs  | Get structured UX / product feedback on screens or flows                | 0.5–1 per review           | Number of screens, depth of critique         |
| Other AI assists           | Smaller tasks (naming, copy tweaks, summaries, etc.)                    | 0.1–0.5 per request        | Prompt length, extra context attached        |

The math is simple. Bigger, more complex work costs more credits.

## Checking your balance

You'll see your remaining credits after each query. **No surprises.**

Want to check anytime? Look at the bottom of your sidebar navigation. Click your email and you'll see your credit balance right there.

<img alt="Credits Usage Figr Pn" title="Credits Usage Figr Pn" />

## Team subscriptions

Teams share one pool of credits. **Unlimited seats.** Everyone on your team draws from the same credit pool. No need to track individual usage or worry about seat limits.

Add 5 people or 50. Zero extra cost.

## Credit rollover

Unused credits? They roll over to next month.

**But there's a cap.** You can roll over up to your monthly allocation amount. So if you get 100 credits per month, you can bank a maximum of 100 credits.

## What if I run out

Hit your limit mid-month? Upgrade to a higher plan anytime. You'll get access to more credits immediately.

<Card title="View all plans" icon="credit-card" href="https://figr.design/pricing">
  Check pricing and credit allocations
</Card>

<Note>
  Credit consumption is dynamic. The numbers above are estimates -actual usage depends on the complexity of what you're building.
</Note>

***

<Card title="Manage Your Team" icon="users">
  Learn how to add team members, assign roles, and manage collaborative workflows effectively.

  [Team Management →](/account/team-management)
</Card>


# Team Management
Source: https://docs.figr.design/account/team-management

Add team members, assign roles, manage permissions, and optimize collaborative workflows in Figr.

## Accessing organization settings

Click your profile icon in the top right corner. You'll see a dropdown with your email, remaining credits, and organization options.

<img alt="Accountmanagement05 Pn" title="Accountmanagement05 Pn" />

**See "Organization settings"?** You're an Admin. That's your control panel.

**Don't see the complete "Organization settings"?** You're a Member or Manager. You won't see the full settings.\
\
You can write to [hi@figr.design](mailto:hi@figr.design) to switch admins. An admin can also create multiple admins.

The badge next to your organization name shows your role - Admin, Manager, Member, or Outsider.

## Organization profile

This is where you set up the basics for your team.

<img alt="Accountmanagement04 Pn" title="Accountmanagement04 Pn" />

### Changing your organization name

Your organization name becomes your domain. Type "acme-design" and your domain becomes "acme-design.figr.design".

**Can't change it after setup?** You'll need to contact support. This prevents confusion once your team is collaborating.

### Domain access control

This is the big toggle. Turn it on and anyone with a matching email can walk right in.

Let's say your domain is "figr.design". Someone with "[alice@figr.design](mailto:alice@figr.design)" can sign up and automatically join your organization. No invitation needed.

<Info>
  When this is enabled, team members with your domain **can't** create their own separate workspace. They're redirected to yours instead.
</Info>

**Here's the catch:** You can not turn this on with a public domain like @gmail.com. To create a team you will need a business mail.

### Setting default roles for domain members

Right below the domain toggle, you'll see "New users from your domain join as."

Pick what role they get automatically:

* **Member** — They can create and work on projects
* **Manager** — They can also manage teams and invite people
* **Outsider** — They only see projects they're invited to

Most teams pick Member. It's open enough to be useful, restrictive enough to be safe.

### Deleting your organization

At the bottom, there's a red button: "Delete organisation."

<Warning>
  This is permanent. All boards vanish. Everyone gets kicked out. Figr won't ask twice.
</Warning>

Only Admins can delete. Even Managers can't touch this.

## Managing your team

Click "Members & Roles" in the sidebar.

<img alt="Accountmanagement03 Pn" />

You'll see everyone in your organization. Their name, email, current role. The member count shows up at the top.

### Adding people

Click "Invite members" in the top right.

Type their email. Pick a role from the dropdown. Send.

**Domain access enabled?** You might not even need to invite them. They'll show up automatically when they sign up with a matching email.

### Changing someone's role

Click the dropdown next to their current role. You'll see all four options.

<img alt="Accountmanagement02 Pn" />

Pick the new role. Done. The change is instant—they'll immediately gain or lose permissions.

**Can't change your own role.** You need another Admin to do it. Prevents accidents.

### Removing members

Click the trash icon on the right side of their row.

They lose access to everything immediately. Projects, teams, files—all gone.

<Note>
  Removed members don't get a notification. If you want to let them know, tell them yourself.
</Note>

## Organization teams

This is different from members. Teams let you group people for specific projects or departments.

You'll find "Organisation Teams" in the sidebar. Create teams like "Design", "Engineering", or "Customer Success" to organize work.

**Managers and Admins** can create and delete teams. Members can't.

## Understanding roles

Figr has four roles. The difference between them is what they're allowed to do.

<img alt="Accountmanagement01 Pn" />

Click "Permission Information" in the sidebar to see this comparison view. It shows every permission for every role, side by side.

### Outsider

**Who this is for:** External contractors, clients, agencies, consultants - anyone outside your company.

They can only see and edit projects you explicitly invite them to. That's it.

They can't see your other projects. Can't create new ones. Can't see who else is on your team.

**Permissions:**

* Project Collaborator (on invited projects only)

### Member

**Who this is for:** Your core team. Designers, PMs, developers, researchers - people who build the product.

They can create projects and collaborate freely. They can't manage people or change settings.

**Permissions:**

* Create Projects
* Project Collaborator (on all projects they have access to)

**What they can't do:** Invite people, create teams, delete anything, change anyone's role.

### Manager

**Who this is for:** Team leads, project managers, department heads. People who wrangle other people.

They get everything Members have, plus team management powers. They can add and remove people, create teams, and invite Outsiders.

They still can't delete the organization or change permissions.

**Permissions:**

* Everything Members can do, plus:
* Create Team
* Delete Team
* Remove Members
* Invite Outsiders

**What they can't do:** Delete projects, change role permissions, delete the organization.

### Admin

**Who this is for:** Founders, CTOs, heads of product—people who own the decisions.

Full control. They can do everything Managers can do, plus the destructive actions and permission changes.

**Permissions:**

* Everything Members and Managers can do, plus:
* Delete Projects
* Edit Permissions (change what each role can do)
* Delete Organization

**This is the only role** that can change what permissions each role has. And the only role that can delete the org.

## Permission definitions

Here's what each permission actually means.

**Project Collaborator** — View and edit projects you're invited to. This is the baseline—everyone has it for their projects.

**Create Projects** — Start new projects in any workspace. Members, Managers, and Admins can do this.

**Create Team** — Make new teams to organize people. Managers and Admins only.

**Delete Team** — Permanently remove a team. Can't be undone. Managers and Admins only.

**Remove Members** — Take people off the organization entirely. Managers and Admins only.

**Invite Outsiders** — Bring in external collaborators (contractors, clients). Managers and Admins only.

**Delete Projects** — Permanently remove projects. This is destructive—only Admins can do it.

**Edit Permissions** — Change what each role is allowed to do. Admins only. This is meta-permission.

**Delete Organization** — Shut down everything. Nuclear option. Admins only.

## Switching between organizations

You can be part of multiple organizations. Each one might have you at a different role.

Click your profile icon, then "Switch organisation". Pick the one you want to work in.

**Your role changes per organization.** You might be an Admin at your company and an Outsider at a client's organization.

Check the badge next to the organization name to see your current role.

## Setting up your organization (step by step)

Let's say you're starting fresh.

**Step 1:** Create your organization. Pick a name that becomes your domain.

**Step 2:** Decide on domain access. If your team all has company emails (@yourcompany.com), turn it on. Set the default role to Member.

**Step 3:** Invite your first few people manually. Give them the right roles:

* Admins: Founders, whoever needs full control (1-2 people max)
* Managers: Team leads, project managers (sparingly)
* Members: Everyone else on your team
* Outsiders: External contractors (invite per project)

**Step 4:** Create teams if you need them. "Design", "Engineering", "Product"—whatever matches your structure.

**Step 5:** Check "Permission Information" to make sure you've got roles set up right.

## Common scenarios

**"I hired a contractor for one project"**\
Make them an Outsider. Invite them only to that project. They won't see anything else.

**"Our designer just became a team lead"**\
Change their role from Member to Manager. Now they can invite people and manage the team.

**"Someone left the company"**\
Remove them from the organization. Click the trash icon next to their name.

**"I want my whole team to auto-join"**\
Turn on domain access. Set the default role to Member. Share your domain with them.

**"Someone needs to delete projects but shouldn't have full Admin"**\
You can't do this with the default roles. Only Admins can delete projects. Consider whether they really need this power.

## Security best practices

**Don't make everyone an Admin.** You don't need five people who can delete the organization. One or two is enough.

**Start restrictive.** New hire? Give them Member access. You can always promote them later. Can't demote without awkwardness.

**Turn off domain access if your domain is public.** Gmail, Yahoo, Outlook—these are shared by millions. Don't auto-invite strangers.

**Use Outsider liberally.** Client wants to see the designs? Make them an Outsider for that project only. Don't give them Member access.

**Managers don't need to be Admins.** Most team leads only need Manager. Save Admin for people who truly need to change permissions or delete things.

## Troubleshooting

**"I can't see Organization settings"**\
You're not an Admin. Ask an Admin to change your role or to handle whatever you need.

**"Someone joined automatically but they shouldn't have"**\
Your domain access is on. Turn it off if you want to control invites manually.

**"I removed someone but they can still see projects"**\
Did you remove them from the organization, or just change their role? Check the members list.

**"I deleted a team by accident"**\
There's no undo. You'll need to recreate it and re-add members.

**"Someone needs more permissions but I don't want to make them Admin"**\
Check if Manager gives them what they need. If not, you might need to make them Admin—or reconsider whether they need that permission.


# Troubleshooting
Source: https://docs.figr.design/aryan

Fixes for the most common Figr issues: design system, edge cases, prompts, and Figma export.

When Figr does not do what you expected, it is usually a context or prompt gap. Work through the relevant section below.

<AccordionGroup>
  <Accordion title="Figr did not follow my design system">
    Check these first:

    * Is a design language or design system actually added?
    * Is the right Context Pod attached?
    * Did you point Figr at the existing layout or component to follow?

    <Frame>
      <img alt="Where the active design system shows in the interface" title="Active design system" />
    </Frame>

    Then nudge it:

    ```text theme={null}
    Make this screen closer to our existing settings pages, using the current components and spacing.
    ```
  </Accordion>

  <Accordion title="Figr missed important edge cases">
    Ask for them explicitly:

    ```text theme={null}
    List the edge cases for this billing upgrade flow, including payment failure, expired card, permission restriction, and downgrade impact.
    ```

    <Frame>
      <img alt="A checklist of states to request" title="State checklist" />
    </Frame>
  </Accordion>

  <Accordion title="My prompt is not working">
    Use this formula:

    <Frame>
      <img alt="A card showing the prompt formula" title="Prompt formula" />
    </Frame>

    ```text theme={null}
    Given [context], help [user] achieve [goal]. The current problem is [problem]. Use [inputs and design system]. Consider [states and edge cases]. Output [artifact, design, or review].
    ```

    Example:

    ```text theme={null}
    Given our onboarding flow and design system, help a workspace admin finish setup faster. The current problem is drop-off on the team-invite step. Use the attached recording and design language. Consider empty, error, and success states. Output a redesigned setup screen.
    ```
  </Accordion>

  <Accordion title="Export to Figma is not matching expectations">
    Check these:

    * Is the design final enough to export?
    * Did you export the right item?
    * Are you comparing against the latest version?

    <Frame>
      <iframe title="Fix a Figma export by refining and re-exporting" />
    </Frame>
  </Accordion>
</AccordionGroup>

## Account and access

<AccordionGroup>
  <Accordion title="I can't see Organization settings">
    You are not an Admin. Only Admins see the full organization settings. Ask an Admin to change your role or to make the change for you. See [Roles and permissions](/roles-and-permissions/canonical-roles-and-permissions).
  </Accordion>

  <Accordion title="A teammate joined the workspace automatically">
    Domain access is on, so anyone with a matching company email joins without an invitation. Turn it off if you want to approve every invite manually. See [Domain auto-join](/roles-and-permissions/domain-auto-join).
  </Accordion>

  <Accordion title="I removed someone but they can still see projects">
    Check whether you removed them from the organization or only changed their role. A role change does not remove access, but removing them from Members & Roles does.
  </Accordion>

  <Accordion title="I ran out of credits mid-month">
    Your team shares one credit pool. Upgrade to a higher plan to get more credits immediately, or wait for next month's allocation. See [Usage and credits](/billing-and-settings/usage-and-credits).
  </Accordion>
</AccordionGroup>


# Item Actions
Source: https://docs.figr.design/canvas/action-items

Quick actions for any item you select on the Canvas, plus deeper actions in full screen.

When you select an item on the Canvas, Figr shows quick actions for that item. A canvas item can be a generated prototype, UX review, user flow, PRD, screenshot, reference, sticky note, or any other artifact on the Canvas. For prototypes, the quick actions can include **Interact** and **Full screen**. Interact lets you click through the prototype directly on the Canvas; Full screen opens it in a focused view for closer review.\\

<Frame>
  <img alt="Chat GPT Image Jun 24, 2026, 03 01 32 AM (1) 3" />
</Frame>

In full screen, you can reach deeper actions: export the design, copy it as an image, use the MCP server, download code, switch versions, or return to the Canvas.

## Common actions

<Note>
  Available actions depend on the item type. \
  The list below covers prototypes and common artifacts.
</Note>

| Action               | What it does                                | Where         |
| -------------------- | ------------------------------------------- | ------------- |
| Interact             | Click through a prototype on the Canvas     | Selected item |
| Full screen          | Open a focused review view                  | Selected item |
| Duplicate            | Copy the item on the Canvas                 | Selected item |
| Delete               | Remove the item from the Canvas             | Selected item |
| Return to Canvas     | Go back from full screen                    | Full screen   |
| Export to Figma      | Send the design to Figma as editable output | Full screen   |
| Copy as image        | Copy a rendered snapshot to your clipboard  | Full screen   |
| Use MCP server       | Give a coding assistant project context     | Full screen   |
| Download code        | Download the item's front-end output        | Full screen   |
| Switch versions      | Move between earlier and later outputs      | Full screen   |
| Preview device sizes | Check the output at different screen sizes  | Full screen   |

This makes the Canvas a working surface, not a static board. Select an output, inspect it, interact with it, export it, or move it forward without leaving the project.

<Frame>
  <img alt="Full-screen prototype view with Export, version dropdown, device preview, and Go to Canvas" />

  <img alt="Full-screen prototype view with Export, version dropdown, device preview, and Go to Canvas" />
</Frame>

## Related

<CardGroup>
  <Card title="Export to Figma" href="/export/figma">
    Continue a generated design in your team's Figma workflow.
  </Card>

  <Card title="Publish and Share" href="/export/publish">
    Turn an artifact into a public page or share the full project.
  </Card>

  <Card title="Figr MCP" href="/export/mcp">
    Let AI coding assistants read project context.
  </Card>

  <Card title="Canvas Overview" href="/canvas/canvas-overview">
    How the visual workspace fits together.
  </Card>
</CardGroup>


# Canvas overview
Source: https://docs.figr.design/canvas/canvas-overview

The canvas is your visual workspace where context, artifacts, and prototypes live together.

It is not a blank chat. It is where everything Figr does comes together.

<img alt="A working canvas with screens, references, a UX review, a flow, notes, and a prototype" title="A full Figr canvas" />

<img alt="A working canvas with screens, references, a UX review, a flow, notes, and a prototype" title="A full Figr canvas" />

On the canvas you can:

* Add screens and references
* Keep docs and prototypes side by side
* Annotate with notes and comments
* Reason from visible context, not just text
* Compare directions next to each other
* Interact with generated prototypes
* Track versions of any item
* Organize work into sections
* Collaborate with your team

<iframe title="Figr canvas walkthrough" />


# History and Layers
Source: https://docs.figr.design/canvas/history-layers

Find, review, or return to anything on the Canvas with version history, Layers, and Activity.

## Version history

Use version history to go back to earlier versions of a generated output. It helps when:

* A new edit changed too much
* You preferred an earlier direction
* You want to compare two versions
* You need to restore a previous output
* You want to see how the design evolved For example, you generate a dashboard, then ask Figr to make it more compact. If the new version feels worse, open version history and return to the earlier one.

## Layers

Use Layers to see what exists on the Canvas. This helps when your Canvas has many prototypes, notes, screenshots, flows, and sections. Use Layers to find a specific item, understand Canvas structure, check what belongs inside a section, and navigate a crowded Canvas faster.

<Frame>
  <img alt="Version dropdown, Layers panel, and Activity panel" />

  <img alt="Version dropdown, Layers panel, and Activity panel" />
</Frame>

## Activity

Revert to a previous version Use Activity to review what changed recently. It helps when you are collaborating with others or returning to a project after some time. Use Activity to check what was added, what was edited, what was moved, who made a change, and when it happened.

<Frame>
  <img alt="Version dropdown, Layers panel, and Activity panel" />

  <img alt="Version dropdown, Layers panel, and Activity panel" />
</Frame>

## Related

<CardGroup>
  <Card title="Item Actions" icon="square-mouse-pointer" href="/canvas/action-items">
    What you can do with a selected item.
  </Card>

  <Card title="Organize Canvas Work" icon="layer-group" href="/canvas/organize">
    Sticky notes, comments, and sections.
  </Card>

  <Card title="Edit Without Regenerating" icon="wand-magic-sparkles" href="/getting-started/tutorial/untitled-page-5">
    Refine a part without redoing the whole screen.
  </Card>
</CardGroup>


# Organize Canvas Work
Source: https://docs.figr.design/canvas/organize

Keep a crowded project scannable with sticky notes, comments, sections, and connector lines.

As a project fills up with screenshots, references, UX reviews, flows, PRDs, and prototypes, it gets harder to scan. Sticky notes, comments, sections, and connector lines keep it organized.

<Frame>
  <img alt="Canvas organized with sections, sticky notes, comments, and connector lines" />

  <img alt="Canvas organized with sections, sticky notes, comments, and connector lines" />
</Frame>

## Sticky notes

Quick context beside the work: "Need PM input," "Check empty state," "Final direction," "Needs edge cases," "Engineering constraint," or "Use this reference pattern."

## Comments

Feedback tied to a specific item on the Canvas:

* Ask a PM to confirm a requirement
* Leave design feedback on a screen
* Ask engineering to check feasibility
* Mark something for founder review
* Add handoff clarification before export

## Sections

Group related work into named stages: Research inputs, UX review, User flow, Design explorations, Final direction, Ready for review, Ready for export.

## Connector lines

Show relationships between items, such as a PRD connected to its prototype, or a user flow connected to the screens it produced.

## Organize a crowded canvas

<Steps>
  <Step title="Add a sticky note">
    Drop a sticky note beside an item to capture quick context or a decision.
  </Step>

  <Step title="Add a comment">
    Attach a comment to a specific item when feedback belongs to that artifact.
  </Step>

  <Step title="Group into a section">
    Select related items and group them into a named section so the stage is clear at a glance.
  </Step>

  <Step title="Link your artifacts">
    Link artifacts to each others with connectors and give Figr relational context
  </Step>
</Steps>

## Related

<CardGroup>
  <Card title="Canvas Overview" href="/canvas/canvas-overview">
    The visual workspace, end to end.
  </Card>

  <Card title="Item Actions" href="/canvas/action-items">
    What you can do with a selected item.
  </Card>

  <Card title="History and Layers" href="/canvas/history-layers">
    Find and restore earlier versions.
  </Card>
</CardGroup>


# Changelog
Source: https://docs.figr.design/changelog

Latest updates, new features, and improvements to the Figr platform.

### **Version 3.8.0 - Aug 19, 2026**

**Features**

* **Wireframes on canvas.** Wireframes created in chat now appear as canvas nodes alongside prototypes and other project work.
  * Edit parts of a wireframe without generating the whole thing again.
  * Add wireframes from older chats back onto the canvas.
  * Resize, view fullscreen, copy as an image, use version history, and Select & Edit.
* **Multiple chats in one project.** Explore different directions without duplicating the whole project.
  * Switch between separate conversations while keeping the same canvas, files, and version history.
  * Fork any completed turn to try another direction without changing the original chat.
  * Each chat can generate independently.
* **Custom Skills.** Add standing instructions for how Figr should work with your team.
  * Keep a Skill always on or let Figr use it only when relevant.
  * Type `/` in chat to bring in a specific Skill.
  * Team members can view shared Skills, while owners and admins manage them.
* **In-app feedback.** Rate your experience directly from chat and add more context when something is not working.
  * Negative feedback can include reason tags and free text.
  * Responses save as you fill them in.
  * A book-a-call option appears when more help is useful.
* **Enterprise credit reshuffling.** Admins can move unused AI credits from one team seat to another.
  * Remaining credits now appear in Members & Seats.
  * Credit transfers stay within the same organization.
  * Enterprise shared-credit handling was also added to the project-sharing flow.

**Improvements**

* **More reliable usage tracking.** Settings → Activity now uses a real-time usage ledger instead of waiting on slower project scans.
  * A loading state appears while older organization history is indexed.
* **More reliable Design System indexing.**
  * Failed indexing jobs now retry instead of getting stuck.
  * Runs that index zero projects are no longer marked as complete.
* **More reliable code generation.** Subagents now run an automatic lint check while generating code.
  * Exploration and code tasks moved to a newer model.
  * Stability work reduced crashes and hangs introduced by the linting flow.
* **Better Figma export debugging.** Bulk Figma exports now record the same debugging information available for single-screen exports.

**Fixes**

* Fixed a typography-panel overlap issue.
* Fixed Figma frames attached through the plugin not appearing as visible attachment chips.
* Fixed Design System publishing failures caused by hardcoded package names in prototype imports.
* Fixed Design System republishing that could overwrite hand-written agent guidance.
* Fixed vendored Design Systems, including MUI-based systems, not rendering correctly in previews.
* Fixed several crashes and hangs in the code-generation flow.

### Version 3.7.0 - Aug 3, 2026

**Features**

* **Screens for prototypes.** View every route and UI state on one flow board. Loading, empty, error, and success states appear as separate frames with labelled sections and transition edges.
  * Export multiple screens to Figma in one run, with progress and errors shown per screen.
  * Use Generate screens to let the agent propose and build missing states.
* **Queued messages.** Send follow-ups while the agent works. Figr runs them in order once the current task finishes.
  * Edit, remove, or clear queued messages.
  * Queues pause after errors or when credits run out, and resume when ready.
  * Also works in Design System chats.
* **Organize canvas.** Group canvas nodes by creation date or type, including Prototypes, Documents, Flows, Images, and Stickies.
  * Manually created sections stay unchanged.
  * Sections now behave more like Figma frames.
  * Stickies, text, and documents now resize with live previews.
* **Context from past chats.** New chats can pull relevant decisions from earlier chats in the same Context Pod and show where they came from.
  * Screenshots and attachments help find the right past context.
  * Figr stays quiet when nothing relevant exists.
* **Comments on shared projects.** Signed-in viewers can comment and reply through public project links without joining the workspace. Only workspace members can resolve or delete threads.

**Improvements:**

* **Workspace join requests.** Users with a matching work email can find and request access to their team’s workspace.
  * Admins can approve requests from email or Settings → Members.
  * Workspaces can allow instant domain-based access or require approval.

* **More reliable Design Systems.**
  * Attached or switched Design Systems now apply to the next query.
  * Removing one clears it across the project and agent context.
  * Older Design Systems now open the upgrade flow instead of failing.
  * Newer projects now use the same token, component, and lint checks as older projects.

* **Faster canvas opening.**
  * Canvas content loads before full history and project files.
  * Duplicated prototypes reuse their existing previews.

* **Updated design agent.** The agent now uses Claude Opus 5, with Sonnet 5 for subagents. More steps now run in parallel.
  * The agent makes fewer repeated edit calls and unnecessary follow-up questions. Failed steps report clearly.
  * Video summaries use a newer, faster model.

* **Starter pricing.** The Starter plan is back to \$39 with 200 credits per month

**Fixes:**

* **Clearer Figma plugin errors.** The plugin now detects when Figma is in the background and asks you to bring it forward.
  * Design System scans explain why capture paused.
  * Chat responses stay active when Figma stops responding.
* Improved Mermaid diagram rendering, including fullscreen.
* Deleted projects now leave the sidebar immediately.
* Fixed several canvas, loading, and interaction issues.

### Version 3.6.5 - Jul 17, 2026

**Features**

* **Unified @ mentions.** Reference canvas nodes, sections, chats, Context Pod attachments, and product-context files from one mention system. References are resolved before execution, with relevant product context retrieved automatically.
* **Context-aware canvas creation.** Choose a searchable Context Pod and Design System before creating a canvas, so the agent starts with the right product knowledge and component context.
* **Redesigned Context Pods & Design Systems.** New card-based pages with ownership filters, file and canvas counts, usage visibility, dark-mode component previews, and inline documentation.
* **Position-pinned prototype comments.** Leave comments directly on published prototypes. Pins stay anchored to the same screen position while reviewers pan and zoom.
* **Query-scoped file attachments.** Attach files directly to a query without automatically adding them to the canvas. Files can still be added to the canvas when needed.

**Improvements:**

* **More resilient sessions.** Automatic socket reconnection and larger payload limits make longer generations and heavier sessions more reliable.
* **Improved Claude and MCP hand-off.** One-click Claude plugin installation, hand-off marks, and more reliable context transfer between Figr and MCP-compatible tools.
* **Browser notifications.** Opt in to receive a notification when the agent finishes generating a response.
* **Annual pricing at usage limits.** Annual plan options now appear directly in the usage-limit modal, making lower-cost billing options easier to access.

**Fixes:**

* Failed streams now surface errors. Interrupted or failed generations show a clear error state instead of leaving the conversation silent.
* @ mentions resolve the correct resource. References now open the actual chat, canvas node, or document instead of falling back to guessed paths or incorrect resources.
* MCP communication is more reliable. Fixed issues that could cause hand-offs or context transfer to fail intermittently.
* Smoother plugin rename and open flow. Fixed stuttering and unnecessary transitions when renaming a plugin and opening it immediately afterward.

### Version 3.6.2 - Jul 3, 2026

**Features**

* **New Starter plan.** A lower entry point to go paid — the Starter tier now starts at \$19/month, so you can unlock the paid experience without a bigger upfront commitment.
* **Redesigned pricing page.** A cleaner, clearer pricing page that lays out what each plan includes and makes it easier to pick the right one, with checkout handled through Stripe.

**Improvements**

* **Better design-system adherence.** When a design system is attached to your project, new designs now stick to it far more reliably — reaching for your published components and design tokens instead of hand-rolling one-off styles. The building agent resolves your component catalog more accurately, so what it generates looks like it belongs to your system.
* **Steadier long sessions.** Extended, multi-step generations hold up better across long conversations — smarter handling of history and step limits means the agent winds down gracefully and finishes the job instead of stalling out on a large task.

**Fixes**

* Fixed errors that could interrupt submitting a query.
* Fixed preview rendering and loading states so results appear reliably.
* Fixed remote export so exports complete as expected.

## June 2026

### Version 3.6.0 - Jun 16, 2026

**Features**

* **Choose where your data lives.** Figr now supports EU data residency, so teams with regional requirements can keep their data in-region. Pick your region right where you work - no separate setup.
  * **Region-aware Figma plugin.** New and signed-out users get a US/EU selector; your choice is remembered after you sign in and reused on every run.
* **Reference another chat with** `@`**.** Type `@` in the canvas composer to pull in another chat by name — it drops in as a tidy, removable chip, so the agent has that project's context without you copy-pasting anything. Multi-word names and search-as-you-type make the right chat easy to find.
* **See what the agent will act on before you send.** A new card above the chat composer shows the canvas edits you've made since your last message — the exact changes the agent will pick up on its next turn. Sanity-check your context first, then send with confidence.

**Improvements**

* **Version-aware artifact cards.** Prototype, doc, and diagram cards now show which version they are and open that exact version instead of always jumping to the latest — so revisiting an earlier result lands you where you expect.

**Fixes**

* Cleaned up prototype node behavior on the canvas, including the delete-prototype confirmation and chip UI.
* Fixed connector rendering between canvas nodes.
* Improved handling of Markdown and `.mmd` diagram files.

### Version 3.5.5 - Jun 8, 2026

**Features**

* **New connector integrations: Slack, Linear, and Mobbin.** Connect the tools your team already lives in so Figr's agent designs with your real context. Pull conversations and decisions from Slack, tickets and specs from Linear, and reference real shipped-product screens from Mobbin — all feeding the agent's understanding of what you're building.
  * **Connect with an API key.** Providers that don't support one-click sign-in can now be linked with a personal access token or API key, so more tools are reachable.
  * **Add and use in one place.** Connectors you enable in settings now show up in the canvas assets menu right away, with a clear entry point to add your first one.
* **Auto app updates.** Figr now updates itself in the background — you get the latest version without manually refreshing, and an interrupted session can pick up where it left off instead of starting over.
* **Duplicate Nodes.** You can now duplicate and copy nodes across canvases. Just copy and paste into another canvas. Much easier to

**Improvements**

* **Security hardening.** A round of hardening across sign-in and sharing — stricter session handling, secure response headers, tightened redirects, and refreshed rate limits — to keep your account and shared projects safer.
* **Smoother Figma export.** Saving a design to Figma is more reliable, and the export now carries design tokens and richer styling through to the plugin for a cleaner result.
* **Faster, more reliable copying.** Copying and duplicating canvas nodes — including images and other media — is quicker, works consistently across browsers, and no longer races against the clipboard.

**Fixes**

* Fixed a duplicate/remix issue where copying a project could pull in content from the wrong project.
* Fixed SVGs not rendering in prototypes and several Figma import glitches, including frame fills, ring shadows, and spacing gaps.
* Fixed duplicated projects occasionally saving under the wrong ID.
* The browser tab title now updates as you move between projects.

## May 2026

### Version 3.5.0 - May 28, 2026

<Card title="Major Release" icon="atom-simple">
  The New Canvas. Your whole project is now one infinite, full-screen canvas — your first prompt becomes a live project with no reload.
</Card>

<video />

**Features**

* **The New Canvas.** Your project is now one infinite, full-screen canvas instead of separate pages. Your first prompt turns into a live project with no reload, and your drawings, stickies, and dropped media are versioned per project — they're no longer wiped when you retry a query.
* **New node types.** Drop in links (with live previews) and PDFs (first-page thumbnail, selectable text), group nodes into Sections, and add annotations — mark a region inside an image and the agent gets a crop of just that area plus your note.
* **Click-to-use prototypes.** Select a prototype and it's instantly live: drag to interact, hold Space to pan, scroll to zoom, resize to fit. No separate "Interact" toggle.
* **Live cursors and follow mode.** See teammates' named cursors on the canvas and click an avatar to follow their view, Figma-style.
* **Edit and re-run queries in place.** Return to earlier results and re-select them, with smoother gestures and deeper zoom.

**Improvements**

* **Smarter design agent, now on Opus 4.8.** Sharper, more on-brief generations that follow your intent more faithfully and break far less mid-build, with the agent's internal guidelines and tool instructions rewritten for fewer wasted steps.
* **Version history that reads like a story.** The Activity panel now groups edits under the prompt that made them, and deleted or retried queries no longer clutter the timeline. Docs, Mermaid diagrams, and freshly-pasted content now version correctly.

**Fixes**

* Shared links now render read-only for logged-in outsiders, guests, and anonymous visitors — no more 403. Sign in from a shared view and you land back on the same project.
* Legacy-engine projects publish, render, and show history without errors.
* The app detects a new version, prompts a refresh, and stops serving stale chunks — no blank screens after a deploy. Plus fixes for shared image thumbnails, project renaming, and new-user sign-up.

### Version 3.4.0 - May 14, 2026

**Features**

* **Version history for every artifact.** Each prototype, doc, and flow now keeps its own timeline of versions. Open the version dropdown in the fullscreen header to look back at any earlier state of a single artifact, without touching the rest of your canvas.
* **Version-pinned publishing.** When you publish, the shared link is now frozen to the exact version you published — later edits no longer leak into a live link. The publish panel shows which version is public and flags when a newer one is available, with a one-click "Update to latest."
  * **Reliable builds behind every share.** Published prototypes are compiled into their own standalone build per version, so a shared link always renders the frozen snapshot. If a build fails, the publish panel surfaces it and lets you retry, and unpublishing fully tears the live link down.

**Improvements**

* **Smoother upgrades and plan changes.** Upgrading now runs through a new checkout flow, and moving between plans (including converting to Stripe billing) is handled more cleanly end to end.
* **Slimmer iPhone prototype frame.** The device frame around mobile prototypes is tighter and truer to the real thing.

**Fixes**

* Fixed top-ups being blocked in some billing states.
* Fixed credits being drained incorrectly from a seat.
* Fixed image and asset uploads failing in some cases.
* Fixed prototypes occasionally rendering blurry.
* Fixed connection issues with the MCP server for tools that connect without auth.

## April 2026

### Version 3.3.0 - Apr 22, 2026

**Features**

* **Share and remix any project.** Projects can now stand on their own. Make one public and anyone can open it, then click Duplicate to spin up their own copy, no account required to view. Signed-out visitors keep their remix intent through sign-up so the project lands in their new workspace.
  * **Remix a single query.** Instead of cloning a whole project, you can fork just one query and its result into a fresh canvas to explore a variation without touching the original.
* **Design System over MCP.** Connect your Figr design system to external AI tools like Claude Code and Cursor through our MCP server, so those agents can read your real components and tokens and build against them directly. Richer tool descriptions and server-level guidance mean connected agents understand what your project holds without a discovery round-trip.
* **Personal workspaces.** Create your own personal workspace to work solo, with smarter handling of team invites and auto-join so you land in the right place instead of a shared org by default.
* **See who did what.** Projects and queries now show user attribution, so on shared work you can tell at a glance who created or ran each thing.

**Improvements**

* **Figma export with auto-layout and variables.** Exports to Figma now come through with proper auto-layout and mapped variables, so the result is a real editable Figma structure instead of a flat, static frame.
* **Sharper design-to-code from Figma.** The Figma plugin now extracts real assets — images and vectors — when you pull a frame, so generated code renders with your actual artwork instead of broken images or placeholders.
* **Stronger design system agent.** The design system agent gained import-tokens and query tooling and clearer craft guidance, so it pulls from your system more reliably and drifts off-brand less often.
* **Self-serve migration to the new agent.** Projects still on the old agent now show a banner and a one-click button to migrate to the current agent, and you can upload `.html` files directly into a project.
* **Video frames inline in chat.** Video output now renders directly inside the chat instead of forcing you elsewhere to view it.

**Fixes**

* Duplicating and remixing projects is more reliable, including longer-running clones that previously timed out and cases outside a single organization.
* Fixed a duplicate-streaming glitch where a response could render twice.
* Fixed the share dialog and several publish-mode styling issues.
* Fixed editing document nodes on the canvas.
* Removed the paste-from-Figma path in favor of the plugin flow, cleaning up a confusing duplicate way in.

### Version 3.2.4 - Apr 17, 2026

**Features**

* **Project cloning.** Duplicate any project, yours or a teammate's, and start a new project from where they left off. All context, artifacts, and product knowledge carried over. No rebuilding from scratch.
* **Agent 2.0 MCP Server.** An advanced MCP server built for Agent 2.0. Take your prototypes, flows, and product context from Figr into any AI application that supports MCP. Cursor, VS Code, or any MCP-compatible environment. Your work stays accessible wherever you build.
* **Usage metrics for all plans.** Detailed usage metrics are now live in Settings with user-by-user breakdowns for teams. Previously enterprise-only. Now available on free, pro, and team plans.

**Improvements**

* **Opus 4.7 for thinking agents.** Figr uses 5-6 specialized agents working together to deliver results. The thinking layer now runs on Opus 4.7 by default for everyone. It reasons more critically, catches more nuance, and generates sharper interfaces.
* **Better Figma export fidelity.** Exported designs transfer to Figma with improved accuracy across layout, spacing, and component structure.
* **Richer Figma asset extraction.** Asset import from Figma files now captures more vectors, icons, and images with higher precision.

**Fixes**

* Deeper Figma Sync connection. The plugin maintains a more stable, reliable connection between Figma and Figr throughout your session.

### Version 3.2.3 - Apr 10, 2026

<Card title="Major Release" icon="atom-simple">
  Figr Launch Week begins. Five major features over five days. <br />Each built from what 50 PMs told us slows them down most.
</Card>

**Features**

* **Design System Agent.** A new agent that understands your design system as structured, connected context, not a flattened markdown file.
  * **Import from Figma.** Open the Figr Sync plugin and the agent maps your design tokens, usage guidelines, and component variants exactly the way you've documented them.
  * I**mport from your live product.** No documented design system? Use the Chrome extension to capture your live web app or upload docs. Figr builds your design system with semantic tokens, linked and structured properly.
  * **Talk to it.** Ask where a token should be used. Ask which component fits a pattern. Your design system becomes a conversation, not a reference doc you never open. When needed, the agent can edit and update the design system with your permission.
  * *Existing users: Your current design system has been migrated to the new format automatically.*
* **Agent 2.0 general availability.** Agent 2.0 is now fully available to all users. It reads your Context Pod, your design system, your flows, and works across 40-50+ screens in a single prototype. <br />**Bigger builds.** Give it a complex product problem. Complete flows, not fragments you stitch together yourself. The agent builds a file system for your project and works through it screen by screen, state by state. <br />**More precise.** The agent reads smarter, knows when to pull from your Context Pod, when to reference your design system, and how much context it actually needs. Edits stay surgical. <br />**Lower cost.** Optimized context handling means fewer unnecessary reads and smarter context fetch. Better outputs while using fewer credits.

**Improvements**

* **Design system compliance by default.** Every prototype Figr generates now follows your tokens, components, and visual language automatically. No prompting required.

### Version 3.2.2 - Apr 8, 2026

<Card title="Major Release" icon="atom-simple">
  Figr Launch Week begins. Five major features over five days. <br />Each built from what 50 PMs told us slows them down most.
</Card>

**Features**

* **Context Pods with Connectors.** Context Pod is where Figr learns everything about your product. With Connectors, your context flows in automatically from Notion, Atlassian, Mixpanel, Amplitude, Google Workspace, Granola, Miro, and any tool that supports MCP. No copy-pasting between tools. Every new input makes Figr smarter about your product. This isn't retrieval. It's a context graph that compounds.
* **Refreshed Infinite Canvas.** Your brainstorms, user flows, edge cases, and high-fidelity prototypes now live in one connected workspace. Rearrange artifacts. Hide what you don't need. Comment directly on designs. Export what's ready. Canvas is your product thinking space, not a chat log. <br />*Note: The updated Canvas works in new projects and with Agent 2.0 only.*

**Improvements**

* **Canvas artifact management.** Add sticky notes, rearrange artifacts freely, delete what you don't need, and organize your canvas the way you think.
* **Inline commenting on artifacts.** Leave comments directly on any artifact in the canvas for team collaboration and decision tracking.
* **Optimized canvas loading.** Files load incrementally, canvas state can be modified mid-stream, and layout algorithm is improved.

**Fixes**

* Improved error messages now surface specific, actionable details instead of generic failures.

### Version 3.2.1 - Apr 6, 2026

<Card title="Major Release" icon="atom-simple">
  Figr Launch Week begins. Five major features over five days. <br />Each built from what 50 PMs told us slows them down most.
</Card>

**Features**

* **Figma Sync Plugin.** A native Figma plugin that gives Figr instant access to your complete file. Open the plugin inside any Figma file and Figr reads your tokens, components, instances, and sections in one click. No more pasting links one by one. Every prototype Figr builds now follows your spacing, your components, your visual language automatically.
* **Agent 2.0 (Beta).** A ground-up rebuild of Figr's design agent. Figr now builds a complete file system for your project, handles multi-screen prototypes in a single session, and runs longer on complex builds. Editing is faster and more precise. Enable it by selecting "Auto" below the chat input.
* **Edit subagent.** A dedicated agent now handles design edits with better context isolation. Changes to one screen don't bleed into unrelated parts of your design.

**Improvements**

* **Instant retry.** Retry button now starts streaming immediately. Updates are offloaded to the background.
* **Optimized canvas loading for deep agents.** Files load incrementally, canvas state can be modified mid-stream, and layout algorithm is improved.

**Fixes**

* Canvas state saving bug resolved.

## March 2026

### Version 3.1.0 - Mar 26, 2026

**Features**

* **Deep Agent available for all Pro users.** The deep agent, previously in limited access, is now live for every Pro subscriber. Longer-running, more complex design projects with multi-screen output.
* **Context Pods (formerly Product Ally).** Renamed for clarity. Same powerful context system, now called Context Pods across the product. Includes much better processing and fetches specific parts of the context to save token cost.

**Improvements**

* **Significantly faster app performance.** First load, project pages, chat pages, and Context Pods all load noticeably faster. Projects are paginated. Chat canvases load incrementally as you scroll instead of all at once.
* **All lists virtualized.** Long project lists, chat histories, and artifact collections no longer cause lag regardless of size.
* **Better error messages.** Errors from the backend now surface with specific, actionable messages instead of generic failures.

**Fixes**

* Figma copy behavior fixed.
* XML code no longer appears in outputs.
* Permanent loading states now have retry handling.

### Version 3.0.6 - Mar 3, 2026

**Features**

* **Edit subagent for design changes.** A dedicated agent now handles design edits with better context isolation. Edits are more precise and don't bleed into unrelated parts of your design.
* **Video analysis in execution agent.** The execution agent can now process video attachments directly during design work. Share a screen recording mid-flow and Figr incorporates it without switching modes.

**Improvements**

* **Smarter context orchestration.** Major upgrade to how Figr manages context during sessions. Less bloating, lower credit consumption, more stable performance across long conversations.
* **Figma image fidelity.** Imported Figma images no longer descale. What you see in Figma is what Figr works with.
* **Onboarding flow refined.** Cleaner first-time experience with improved copywriting and smoother account setup.
* **Attachment handling.** Attachments already in your conversation won't get re-fetched unnecessarily. Less redundant processing, fewer wasted credits.
* **Dynamic thinking.** Figr scales its reasoning depth to match query complexity. Simple questions get fast answers. Complex problems get deep thinking. Lower memory usage across the board.

**Fixes**

* Regenerate button now appears for errored states in spaces after 10 minutes.
* Credits modal copywriting updated for clarity.
* Various stability optimizations throughout the app.

## February 2026

### Version 3.0.4 - Feb 23, 2026

**Features**

* **Product context images in designs.** Figr's design agent can now embed your uploaded images, logos, screenshots, and brand assets, directly into generated prototypes. No more placeholder swaps after the fact.

**Improvements**

* **Space-based filters in All Chats.** Filter your chat history by space. Easier to find past conversations when you're working across multiple products.
* **Product Ally navigation via canvas.** The active Product Ally now displays beside the project name in canvas, so you always know which product context Figr is referencing.
* **Smarter context management.** Context cleanup is now phase-based instead of aggressive. Prevents premature cache invalidation, which means fewer repeated computations and more stable credit usage mid-session.
* **Faster design edits.** The execution agent now uses targeted reads (grep → offset → edit) instead of reading full files. Roughly 5x less context consumed per edit.
* **Better video analysis.** Improved model and analysis for screen recording interpretation. Figr extracts more accurate context from video walkthroughs.
* **More reliable image reading.** Improved handling for fetching reference images from URLs with graceful fallback when sources are inaccessible.
* **Credit deduction improvement.** More accurate billing, fewer surprise spikes.
* **Workspace rename permissions.** Only workspace owners and admins can rename workspaces now.
* **Persistent filters and org selection.** Project filters you apply now persist across sessions. Your last opened org stays selected even after logout.

**Fixes**

* File handling overhaul:
  * File names are sanitized on upload. Special characters replaced with `_` so uploads don't silently break.
  * Original file type is detected even if someone manually renames the extension. An `image.png` renamed to `image.webp` is still treated as PNG.
  * Duplicate file names no longer overwrite each other.
  * Only supported image formats accepted: JPG, JPEG, PNG, WebP, and GIF.
* Markdown node wasn't switching versions on first attempt. Fixed.
* Intercom integration to canvas only.
* Human assistance intermittent failures resolved.

### Version 3.0.1 - Feb 12, 2026

<Card title="Major Release" icon="atom-simple">
  **Product Ally Context Space**. A context graph for your product.

  Add your product's screens, docs, PDFs, analytics, screen recordings, and custom instructions, all in one place. Think of it as onboarding a teammate who never forgets what you told them.
</Card>

**Features**

* **Cross-canvas referencing with @mentions.** Add any artifact, screenshare, PDF, doc, or analytics file to your Ally's space, then reference it in any Canvas by typing @ in chat. Prototypes, flows, and docs created in one Canvas can be pushed back to Ally's space and pulled into a different Canvas. Your work stays connected across projects.

**Improvements**

* **Deeper brainstorming grounded in your data.** With Product Ally active, brainstorm sessions now pull from your actual screens, videos, docs, and analytics to find the most relevant context for the UX problem you're working on. Less generic suggestions, more answers that reference what you've already built.

**Fixes**

* Reduced unexpected credit surges through better caching.
* Human assistance requests failed intermittently. Now resolved.

### Version 2.9.8 - Feb 2, 2026

**Features**

* **Multiple design systems and product knowledge bases.** Create separate design system and product knowledge profiles per project. Select which ones to apply before generating. Switch context without re-importing.
* **Chrome Extension v2.** Now captures assets (images, icons, vectors) alongside HTML structure. Richer context extraction from live web apps.
* **Editable documents in canvas.** Documents generated by Figr can now be edited directly on canvas. No need to regenerate for minor changes.

**Improvements**

* **Better file management.** Images and PDFs compress more efficiently on upload. Results in faster upload and better understanding of PDFs.
* **PDF thumbnail previews.** Uploaded PDFs now display visual thumbnails

**Fixes**

* **Temporary email signups blocked.** Disposable email domains are now rejected at registration to avoid system abuse by a group of user.

## January 2026

### Version 2.9.7 - Jan 21, 2026

**Features**

* **Visual UX reviews with annotations.** Upload a screen, flow, share your screen, add Figma frames, or capture via Chrome extension. **Figr marks up your actual design with pinpointed annotations identifying UX clarity issues**, accessibility violations, UX copy problems, or conversion drop-off risks. <br />*UX Reviews evaluate whether the built design meets the original requirement's goal. Works across full flows, not just individual screens.*
  <img alt="Unnamed" title="Unnamed" />

**Fixes**

* **Figma export overhaul.** Resolved 11 issues affecting export fidelity.<br />Fixed text distortion, centering, and bold element spacing. Auto-layout now transfers correctly. Gradients, border radius, and SVG colors export as defined. Images, icons, and input components (range sliders, etc.) render properly. Resolved overflow clipping issues.

### Version 2.9.5 - Jan 12, 2026

**Features**

* **Editable user flows with export.** Flows are now fully editable directly in canvas. Modify nodes, connections, and labels inline. Export to PNG or SVG for documentation and stakeholder sharing.
  <img alt="Editableflows" />
* **Figr MCP Server.** Connect your entire project context to your IDE. Decisions trail, generated code, user flows, and design artifacts transfer to Cursor, VS Code, or any MCP-compatible environment. Setup takes minutes.
  <img alt="MCP Server" />
* **Planning-first design execution.** For multi-screen projects, Figr now generates a planning document before heavy design work. Includes: screens to build, decisions made, what execution decides, and constraints. *No more missing screens in complex prototypes*.
  <img alt="Docsinplanning" title="Docsinplanning" />
* **Visual thinking in chat.** Dynamic artifacts, flows, and diagrams render directly in conversation. Sharper zone-level wireframes during planning. Clear separation between thinking (structure) and execution (visual design).
  <img alt="Visual Thinking" title="Visual Thinking" />
* **Auto agent mode switching.** Figr detects when to transition between brainstorm and design phases automatically. No manual prompting to "continue to design" required.

**Improvements**

* **Full-screen flow rendering.** Flows now open in full-screen view when generated in chat. Better visibility for complex user journeys.
* **Screen-based task tracking.** Todos now reference actual screens ("Dashboard", "Settings modal") instead of UI facets ("header", "sidebar"). Clearer scope for what gets built.
* **Cleaner planning phase.** Reduced visual noise during early exploration. Wireframes show zone-level structure only. Detailed design decisions happen in execution, not planning.

### Version 2.9.3 - Jan 5, 2026

**Features**

* **Document artifact type.** Generate editable documents in Markdown format for PRDs, specs, and planning docs. Edit inline, download as PDF, or export to your preferred text editor.
  <img alt="PRD 6" />

**Improvements**

* **Pixel-perfect Figma asset import.** Deeper Figma integration now extracts all assets including images and SVGs with precise fidelity. Import complete design systems without quality loss.

**Fixes**

* Resolved workflow diagram rendering issues in main chat sidebar.
* Fixed product context failing to load in specific project configurations.

## December 2025

### Version 2.9.2 - Dec 30, 2025

**Features**

* **Visual brainstorming in chat.** HTML artifacts, flows, and diagrams now render directly in conversation. Thinking processes display as interactive visuals instead of text blocks for clearer explanation and more engaging exploration.

**Improvements**

* **Enhanced Figma asset extraction.** Figr now captures vectors and assets from Figma frames, not just layout structure. Your actual design elements transfer into Figr's working context.
* **Better placeholder image selection.** Designs now use higher quality, more contextually appropriate images. Proper rendering replaces broken placeholders.
* **Expanded video format support.** Improved understanding of screen recordings and video inputs across more file formats. Figr extracts more context from visual walkthroughs.
* **Faster brainstorming through parallel processing.** Inspiration search, web research, and memory retrieval now run simultaneously. Reduced wait time for complex queries.

**Fixes**

* Design system fetching. Design systems load automatically when available, ensuring consistency from the start of each project.
* Pricing model opening issues fixed when credits were exhausted.
* Performance optimization in projects with extensive artifacts and context history.
* Various stability and interaction bugs resolved.

### Version 2.9.1 - Dec 16, 2025

<Card title="Figr AI is Now Public" icon="globe">
  * Anyone can now try Figr AI. No waitlist. No whitelist required.
  * Thank you for being an early user. Your feedback shaped this release.
</Card>

**Features**

* **Separate thinking and execution agents.** Figr now reasons through problems before building. Dedicated agents for UX thinking and design execution mean better edge case detection, stronger flow logic, and reasoning you can follow.
* **Web search and asset extraction.** Research competitors, pull design patterns, and extract assets from URLs directly. Figr finds what you need and integrates it into your work.
* **Gallery of real projects.** See what's possible with Figr through actual solved problems, not demos. Includes builds on existing products, research & PRDs, user flows, edge cases, UX reviews, and test cases.
* **File system sandbox.** Work with files and assets in an isolated environment for safer experimentation and iteration.
* **Pricing update**. Individual plans now start at \*\*\$19/month. \*\*Team plans start at **\$24/member.**

**Improvements**

* **Automatic mode switching.** Figr selects the appropriate mode (Chat, Design, Review) based on your request. Less manual toggling.
* **Enhanced versioning system.** Design versions (v1, v2, v3) now managed cleanly. Regenerating replaces old versions instead of creating duplicates.
* **Higher quality diagrams and flows.** Improved output for flowcharts, user journeys, and technical diagrams.
* **Reliable regeneration.** "Try again" functionality now works consistently across all design types.
* **Improved performance.** Faster performance in projects with extensive artifacts and context history.

**Fixes**

* Corrected zoom level behavior in flow diagrams.
* Resolved accessibility issues in flow navigation and controls.

***

**What this means:** Figr now thinks like a PM and designs like a designer. Research → Think → Design → Test. All in one place.

### Version 2.9.0 - Dec 9, 2025

<Card title="Major Release" icon="atom-simple">
  * **Chrome Extension for web parsing.** Capture HTML structure from any live website in one click. Figr reads actual layout, spacing, and component hierarchy—not just visual screenshots. Use captured structures as input for design generation or UX audits and accessibility reviews.
  * **Multi-model orchestration.** Figr now automatically routes between Opus 4.5, Gemini 3, and custom models based on task requirements. Multiple model calls run in parallel for higher quality results without manual switching.
</Card>

<iframe title="YouTube video player" />

**Improvements**

* **Progressive loading indicators.** Real-time progress feedback during design generation shows which steps are executing.
* **Faster query processing.** Eliminated processing bottlenecks for quicker response times across all tools.

**Fixes**

* Resolved full-screen display issues affecting design view.
* Fixed query editing functionality that prevented modifications to in-progress requests.

## November 2025

### Version 2.8.6 - Nov 27, 2025

<img alt="Review27nov" />

**Features**

* **A/B testing comparison tool.** Upload two designs to compare side by side. Figr analyzes based on UX principles, interaction patterns, and data from 200,000+ app screens. Get specific breakdowns of what works and why, grounded in real patterns rather than generic suggestions.
* **Custom image uploads for brand assets.** Upload your own imagery and brand assets. Figr automatically integrates them into generated designs to match your visual style.

**Improvements**

* **Enhanced UX review depth.** Design reviews now reference specific patterns from the 200k+ screen database. Feedback includes actionable insights tied to proven UX principles.
* **Mobile-optimized published links.** Prototypes shared via web links now render properly on mobile devices. Test and share designs across any screen size.
* **Refined full-screen zoom controls.** Smoother zoom behavior with better aspect ratio preservation in full-screen design view.
* **Faster tool response times.** Reduced latency when switching between editing modes and invoking design tools.

**Fixes**

* Overall stability improvements and faster page load times across the platform.

### Version 2.8.4 - Nov 17, 2025

<Card title="Major Release" icon="atom-simple">
  * **Publish prototypes to web.** Generate shareable links for any prototype. Recipients can view and interact with designs without a Figr account. Test flows with stakeholders or present work externally.
  * **Memory management controls.** Edit or delete stored memories directly from the sidebar. Toggle whether Figr uses memories for each query. Control what product context, preferences, and decisions are retained.
  * **Enhanced design reviews.** Upload multiple screens or complete flows for comprehensive evaluation. Figr analyzes full context and provides targeted feedback based on what you're showing.
  * **Real images in designs.** Paste any asset URL or search Unsplash directly. Figr integrates actual images into high-fidelity prototypes instead of placeholders.
</Card>

<img alt="Publish" />

**Improvements**

* **Parallel Figma processing.** Auto-fetch design systems and process multiple Figma links simultaneously for faster context gathering.
* **Improved Figma layout understanding.** Better extraction of component structure, spacing, and design system patterns from Figma files.
* **Streaming stability.** Fixed response doubling and eliminated reload requirements during generation.

**Fixes**

* Resolved missing Figma fetch operations during queries.
* Fixed design system not loading at project start.
* Reduced unnecessary "thinking" steps for more direct responses.

### Version 2.8.0 - Nov 10, 2025

<Card title="Major Release" icon="atom-simple">
  * **Advanced quick prototyping.** Connect screens together to build interactive prototypes. Navigate between designs to simulate complete user flows.
  * **Planning tool for structured problem-solving.** Break down complex design problems into actionable steps. Figr thinks through the approach before execution.
</Card>

**Improvements**

* **Expanded video format support.** Upload .mp4, .mov, .mkv, and .webm files for design context and reference.
* **Dark mode accessibility updates.** Revised color palette to meet accessibility standards in dark mode.
* **Enhanced error messaging.** Error boundary now displays specific error details instead of generic update messages.

**Fixes**

* Removed select-and-edit option for users with read-only access.
* Fixed corner trimming artifacts in full-screen design view.
* Removed redundant "view full design" button from full-screen Mermaid diagrams.
* Improved URL redirect handling and added proper 404 error page.

### Version 2.7.2 - Nov 03, 2025

**Features**

* **Self-service design intelligence setup.** Configure design system guidelines and product context generation directly from your workspace. No need to wait for manual configuration.

**Improvements**

* **Enhanced design workflow interactions.** Visual nudge when designs appear, tooltips on hover for context, and relocated select-and-edit button for easier access.
* **Attachment support in select-and-edit mode.** Add reference images and files while editing designs.
* **Narrower chat sidebar minimum width.** More canvas space for design work without compromising chat readability.

**Fixes**

* Resolved state reversion issue when using stop-and-edit functionality.
* Fixed mobile overlay display inconsistencies.

## October 2024

<img alt="Figma Export Gif Gi" title="Figma Export Gif Gi" />

### Version 2.7.0 - Oct 23, 2025

**Features**

<Card title="Major Release" icon="atom-simple">
  **Figma input integration.** Paste Figma URLs directly as attachments. Figr extracts layout metadata automatically for pixel-perfect design work.
</Card>

* **Full-screen aspect ratio controls.** Designs now maintain proper aspect ratios in full-screen view with zoom slider for precise adjustments.

**Improvements**

* **Full-screen chat scrolling.** Chat interface now scrolls across the entire screen for better readability.
* **Enhanced human assistance input**. Added dedicated textarea for extra context when requesting human help. Accordion now expands by default.
* Loading states for design generation. Visual feedback now appears when design tools are processing your request.
* Send button enabled for pasted content. Large text pastes now immediately activate the send button.
* Payment confirmation modal. Clear success message after payment completion.

**Fixes**

* Improved UI consistency across filter controls, tooltips, and toast notifications.
* Added empty state messaging for organization teams page.
* Fixed image distortion while copying from artifact view.
* Removed "select and edit" option from workflow full-screen mode.

### Version 2.6.0 - Oct 15, 2025

**Features**

* **New interaction modes.** Switch between Chat, Design, Auto, and Review modes to match your workflow. Choose how Figr responds based on your current task.
* **Review Mode for design evaluation.** Analyzes your designs against UX laws, usability principles, and patterns from popular apps. Provides grounded feedback on images and user flows with specific references to best practices.

**Improvements**

* **Persistent sidebar state.** Your sidebar preferences now save across sessions.
* **Retry button for failed actions.** Quickly retry operations without starting over.

**Fixes**

* Recent projects now correctly display "Shared" status for collaborators (previously showed empty).
* Organization settings navigation no longer redirects to new chat unexpectedly.
* Resolved update screen appearing intermittently after logout.

### Version 2.5.0 - Oct 5, 2025

<Card title="Major Release" icon="atom-simple">
  A refreshed UI and better project management.
</Card>

**Features**

* A refreshed first time experience. Get started with new queries quickly.
* More user friendly credits system. Dynamic credits deduction and no limits on number of messages.

**Improvements**

* Simpler project management and access via sidebar
* Mark any project as your favourites.
* Upgraded to latest models leading to better and faster design generations.
* Decreased verbosity in text ouputs. Sounds more natural.

**Fixes**

* Minor bugs resolved with Mobile designs

## September 2024

<img alt="Editing Cl Pn" title="Editing Cl Pn" />

### Version 2.3.0 - Sep 26, 2025

**Features**

* **Version control for your designs.** Rewind to any previous version. Go back when you realize v3 was actually the winner. Your design history is always maintained.
* **Precise editing.** 'Select and Edit' an the elementor or refer to the complete design to make changes. Now onlt that selected element changes leads to **10x faster iterations**.

**Improvements**

* **Upload and asset management.** Better context handling for long conversations.
* Upload more type of assets, and chat history maintains even the longest PDFs.

**Fixes**

* Minor issues with 'Retry query' fixed.

### Version 2.2.0 - Sep 12, 2025

**Features**

* **Copy PRDs and text with included with formatting.** Figr turns them into actual structured PRDs. Now copy from Figr and paste the text anywhere Google Docs, MS Docs, Notion... and keep the formatting intact.
* **Deep web search built in.** Figr grounds its suggestions in current, real industry insights. Not generic patterns. Actual working UX from products shipping right now.

**Improvements**

* **Layout fidelity improved.** Upload a reference screen or sketch. Figr follows it very closely now. A new image processing model understands each element in your uploaded design.

**Fixes**

* Uploads don't fail anymore.
* Fixed issues of some queries stopping mid-way.

***

## August 2025

### Version 2.1.0 - Aug 28, 2025

**Features**

* **Inspiration module launched.** Figr now references to 200k+ best designed screens and refers to best UX laws to help you design the best version fo your product.

**Improvements**

* **Adding context is stupid simple now.** Redesigned the whole flow. Drop your stuff, Figr figures it out. Less clicking, more building.
* **Model fallbacks in place.** If one model's having a moment, Figr switches to another. You won't even notice. Your work just keeps moving.

### Version 2.0.1 - Aug 20, 2025

<Card title="Major Release" icon="atom-simple">
  **Figr is fully agentic now.** This is the big one. Figr doesn't just generate - it thinks, plans, and builds. It has a deeper understanding and retention of your context.
</Card>

**Features**

* It generates complete flows. Processes URLs without you asking. Understands your product context way deeper. And yes, it's faster too.

### Version 1.7.4 - Aug 8, 2025

**Features**

* **Point and edit anything.** Click exactly what needs fixing. Refine that button, that headline, that spacing. No more describing what you want - just point.

**Improvements**

* **Figr gets your brand voice now.** Better understanding of your visual identity and voice. Outputs feel more *you* from the first generation.

***

## July 2025

### Version 1.7.0 - Jul 16, 2025

<Card title="Enterprise Security" icon="lock">
  Figr is now SOC 2 Type II compliance certified.
</Card>

**Features**

* **Full-screen design interaction.** Hit full screen and actually see your work. No distractions.

**Improvements**

* **Access control got granular.** Set permissions exactly how your org needs them. Project-level, user-level, and team-level.

### Version 1.6.2 - Jul 7, 2025

**Features**

* **Export to Figma is live.** Copy your designs straight into Figma. One click. Done.
* **Design retrieval shipped.** Need that screen from three weeks ago? Figr finds it instantly. No more endless scrolling through canvases.

**Improvements**

* **Canvas got better.** Toolbar repositioned where your hands actually expect it. Interactions feel tighter, more responsive.
* **Homepage redesign.** Cleaner. Faster to what you need. Less chrome, more canvas.

***

## June 2025

### Version 1.5.0 - Jun 26, 2025

**Features**

* **Global Memory launched.** Tell Figr about your product once. Refer to your uploaded context in any canvas.
* **New brainstorm mode is live.** Better ideation. Better states. More control before you jump to design.
* **Chat module shipped.** Q\&A got smarter. It actually understands what you're asking.

**Improvements**

* **Better context for every state.** The last conversation pair flows into the next generation. Tighter, more relevant outputs.
* **Selection and targeted changes work.** Click what needs fixing. Change just that. No more regenerating everything.
* **Leaner context window.** Removed duplicate messages. Smaller context = sharper results = faster generations.

**Fixes**

* **Hit escape to deselect.** Finally works like you'd expect.
* **Scroll issue fixed.** That weird canvas jumping thing? Squashed.

### Version 1.4.0 - Jun 10, 2025

**Features**

* **Code export is here.** Select any artifact and hit that copy icon. Your designs, now in actual code you can ship.
* **Smarter thinking, visible thinking.** The AI shows its work now. You'll see how it gets from your brief to the final design.

**Improvements**

* **Design artifacts just show design.** No more clutter. Just the thing you asked for.
* **Your design system sticks properly.** Generated designs follow your tokens and components way more consistently.
* **Designs remember each other.** Build multiple screens? The second one learns UX patterns from the first. Your flows stay coherent.
* **Faster generation.** Latency's down. You'll notice.

**Fixes**

* Images copy correctly now. That annoying bug? Gone.

***

<Tip>
  **Have feedback or feature requests?**

  <br />We'd love to hear from you! <br />Email us at [moksh@figr.design](mailto:moksh@figr.design) or [contact us here ↗](https://figr.design/contact)
</Tip>


# Design System
Source: https://docs.figr.design/design-intelligence/design-system

Your design system is the visual foundation Figr uses for every screen it generates. Once set up, every color, font, spacing value, and component Figr ships is grounded in your actual tokens, not generic defaults.

## A design system AI actually understands

* Built on the open DTCG format
* Every color, type, and spacing choice, documented with the rationale behind it
* Your tokens, enforced in every screen Figr generates

## Setting up your Design System

### Step 1: Create a new Design System

Open the sidebar and click **Design Language**, then create a new one.

Fill in:

* **Name** (required): e.g., "Company Design System"
* **Description** (optional): Helpful when sharing with teammates
* **Project access**:
  * Private to me
  * All workspace members can view
  * All workspace members can edit

Click **Create**.

### Step 2: Connect your sources

Add one or more sources to teach Figr your design system. Figma is the fastest way to start.

Two source options:

* **Figma** (recommended): Connects via the Figr AI Figma Sync plugin
* **Files**: Upload exports, style guides, or token files manually

#### Connecting Figma

Click **Figma**. A modal opens with a one-click link to install the plugin.

The Figma plugin reads your designs:

* Imports multiple frames seamlessly from any Figma file
* Reads your tokens, values, and layers automatically
* Generates prototypes that match your product from the first draft

Click **Open Figma plugin**. Figma opens in a new tab with the **Figr AI - Figma Sync** plugin ready to run.

#### Inside the Figma plugin

Once the plugin loads, you'll see:

* **Connected** status (green) with your Figr account email
* **0 Selected for sync** counter
* **How it works** link
* Select the frames, components, or pages you want Figr to learn from. The counter updates as you select. Figr reads variables, styles, and components exactly as you built them.
* This is two-way sync. Anything you build in Figr can later export back to Figma as editable layers with components and tokens applied.

### Step 3: Add design system instructions (optional)

Back in Figr, you'll see Figma marked as **Connected**. Below the sources, there's an optional instructions field.

Use this to teach Figr nuances your tokens alone don't capture. Examples:

* *"Primary action color is always Blue-600. Avoid deprecated tokens prefixed with old-"*
* *"Keep the canvas in mind as a separate surface"*

Anything Figr should treat as a rule belongs here.

### Step 4: Setup design system

Click **Setup design system**. Figr processes the sources, maps your tokens to the DTCG format, and builds your design language library.

## Working inside your Design System

## Why Design System matters

Most AI design tools generate screens that look fine but don't match your product. Wrong shade of blue. Different border radius. Off-brand typography. You end up rebuilding from scratch.

| Without Design System                      | With Design System                      |
| ------------------------------------------ | --------------------------------------- |
| Generic AI styling that ignores your brand | Designs that match your actual product  |
| Manual cleanup on every generated screen   | Tokens enforced from the first draft    |
| Inconsistency across team-generated work   | One source of truth, applied everywhere |
| Junior designers misuse components         | Components used correctly by default    |

Set it up once. Every screen Figr generates from then on is on-brand by default.

***

Want me to add a section on syncing back to Figma, or managing multiple design systems for different products?


# Context Pod
Source: https://docs.figr.design/design-intelligence/product-context

Context Pod is where Figr stores everything it knows about your product. Once set up, every flow, edge case, prototype, and suggestion Figr generates is grounded in how your product actually works, not generic AI assumptions.

## Why share your product details

* Every flow, edge case, and suggestion grounded in how your product actually works
* Figr remembers your product across every conversation
* The more you share, the less you'll need to edit later

## Setting up your Context Pod

### Step 1: Create a New Context Pod

Open the sidebar and click **Context Pod**, then create a new one. Fill in:

* **Name** (required): e.g., "Context Pod - \[Your Product]"
* **Description** (optional): What you'll work on
* **Workspace access**: All members can view by default. Adjust if needed.

Click **Create**.

### Step 2: Add your product details

Figr uses these inputs to generate outcomes that match your product, your design language, flows, and terminology.

You'll see five ways to add context:

1. **Screen recording** - Record a quick walkthrough of your product. Figr watches and learns what to replicate.
2. **Files** - Upload screenshots, PDFs, CSVs, markdown docs, design exports, anything that explains your product.
3. **Paste text** - Drop in raw notes, PRDs, research, user interview snippets.
4. **Websites** - Add URLs Figr should crawl (your product, docs, marketing site).
5. **Instructions** - Add brand voice, tone rules, or any specific guidance.

### Step 3: Start Building

Once you've added enough context, click **Start Building**. Figr begins processing.

You'll see four stages:

1. **Reading through what you shared**
2. **Building an understanding**
3. **Creating knowledge graph**
4. **Ready to collaborate**

This usually takes two minutes. When it's done, every output will reflect your product.

## Why Context Pod matters

Design doesn't happen in a vacuum. Your product serves specific users, solves specific problems, operates in a specific market. Generic AI ignores all of this.

| Without Context Pod                       | With Context Pod                           |
| ----------------------------------------- | ------------------------------------------ |
| Designs that look fine but miss the point | Designs aligned with your product strategy |
| Generic copy and placeholder content      | Content that reflects your audience        |
| No understanding of your users or market  | Decisions informed by your market position |
| Decisions made in isolation               | Context that compounds over time           |

The more you feed it upfront, the less you correct later. Every session adds to Figr's memory of your product.

***

Want me to add a section on managing multiple Context Pods, or sharing/permissions?


# Memories
Source: https://docs.figr.design/design-intelligence/product-memory

Figr remembers your product, your patterns, and your preferences. Every conversation makes it smarter.

***

## How Memory Works

Figr listens to your conversations and extracts meaningful context. When you describe how your navigation works, explain a design decision, or share your content style, Figr stores it.

<Tip>
  Memory builds passively. You don't need to do anything special. Just work with Figr, and it learns.
</Tip>

<Accordion title="What triggers memory creation">
  * Describing your product structure
  * Explaining design decisions and rationale
  * Sharing user flow patterns
  * Discussing content and copy style
  * Stating preferences and constraints
</Accordion>

## Viewing Memories

<iframe title="YouTube video player" />

### Open the Memory Panel

1. Click **Memories** in the left sidebar
2. Browse all stored memories
3. Use the search bar to find specific context

***

## Editing Memories

Memories aren't locked. Update them as your product evolves.

### Edit a Memory

1. Open the Memories panel in the sidebar
2. Find the memory you want to update
3. Double-click to open edit mode
4. Make your changes
5. Press **Save** (⌘↵) or click Save button

### Delete a Memory

When context becomes outdated or incorrect:

1. Double-click the memory to open it
2. Click **Delete** (bottom-left, red text)
3. Confirm deletion

## Why Memory Matters

Every other AI tool has amnesia. You explain your product, describe your patterns, share your constraints. Get a decent result. Tomorrow? Start over. Figr remembers everything.

Your design patterns. Your user flows. Your content style. That decision you made three months ago about button placement. The way you like tables structured. All of it compounds into deeper product understanding over time.

| **Traditional AI Tools**                                 | **Figr's Memory**                                          |
| -------------------------------------------------------- | ---------------------------------------------------------- |
| Forget everything between sessions                       | Learns from every conversation automatically               |
| Require re-explaining context every time                 | Builds deeper understanding over time                      |
| Generate generic outputs that miss your product's nuance | Generates designs that match your existing product         |
| Can't learn from past decisions or feedback              | Remembers decisions, patterns, and preferences permanently |

## Memory Categories

<AccordionGroup>
  <Accordion title="Product Context">
    The foundational details about what you're building.

    ```text theme={null}
    Examples:
    - "Dashboard is the entry point after login, 
       shows key metrics and recent activity"
    - "User types include Admin, Manager, and Viewer 
       with different permission levels"
    - "Primary navigation is a left sidebar that 
       collapses on mobile"
    ```
  </Accordion>

  <Accordion title="Design Patterns">
    How your product looks and behaves visually.

    ```text theme={null}
    Examples:
    - "Primary CTA uses solid blue/purple button 
       with icon, positioned top-right"
    - "Delete actions use red color to signal 
       destructive intent"
    - "Disabled states shown in gray text"
    - "Cards use subtle shadow with 8px radius"
    ```
  </Accordion>

  <Accordion title="Flow Patterns">
    How users move through your product.

    ```text theme={null}
    Examples:
    - "Manage Members screen is entry point for 
       organization-level member and seat management"
    - "Reducing seats flow: click 'Manage plan seats' 
       → view allocation → select reduction → confirm 
       → handle member removal if necessary"
    - "Onboarding uses progressive disclosure across 
       4 steps with skip option on non-critical steps"
    ```
  </Accordion>

  <Accordion title="Work Style">
    How you prefer to work with Figr.

    ```text theme={null}
    Examples:
    - "Prefers seeing 2-3 variations before committing 
       to a direction"
    - "Wants edge cases called out proactively"
    - "Likes detailed rationale with design decisions"
    - "Prefers mobile-first approach for new features"
    ```
  </Accordion>

  <Accordion title="Content Patterns">
    Your voice, tone, and copy conventions.

    ```text theme={null}
    Examples:
    - "Error messages are friendly, never blame the user"
    - "CTAs use action verbs: 'Create project' not 
       'New project'"
    - "Empty states include illustration and single 
       clear action"
    - "Microcopy is concise, max 2 lines"
    ```
  </Accordion>
</AccordionGroup>

## Adding Memories Manually

<AccordionGroup>
  <Accordion title="Ask Figr to Remember">
    In any conversation, explicitly ask Figr to store something.

    ```text theme={null}
    Example prompts:

    "Remember that we always use inline validation 
    for forms, never on-submit validation"

    "Remember that our primary user persona is a 
    marketing manager at a mid-size B2B company"

    "Remember that modals are only used for 
    destructive actions, never for forms"

    "Remember that our brand voice is friendly 
    but professional, never casual"
    ```
  </Accordion>

  <Accordion title="Be Specific">
    Vague memories aren't useful. Specific ones are.

    | **Less useful**             | **More useful**                                                                                                                                                               |
    | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | "Remember our button style" | "Remember that primary buttons are solid with   #6366f1 background, secondary buttons are outline   style, and destructive buttons use red background"                        |
    | "Remember how forms work"   | "Remember that forms use inline validation on blur,   error messages appear below the field in red, and   submit button stays disabled until all required   fields are valid" |
  </Accordion>
</AccordionGroup>

***

## Memory in Action

| **Your prompt**          | **Without Memory**                                                                                                                                | **With Memory**                                                                                                                                                                                                                                 |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| "Design a settings page" | A settings page that looks like every other   settings page. Wrong colors. Wrong patterns.   Wrong component styles. You spend an hour fixing it. | A settings page that:  - Uses your left sidebar navigation pattern  - Follows your form layout conventions  - Matches your button hierarchy (primary/secondary)  - Includes your error state styling  - Uses your typography and spacing system |


# Comparing Designs
Source: https://docs.figr.design/designing/canvas/comparing-designs

Effectively compare design alternatives to make informed decisions and build stakeholder consensus.

# Comparing Designs

Making design decisions is easier when you can clearly see alternatives side-by-side. Figr provides powerful comparison tools that help teams evaluate options and build consensus.

<success>
  **Data-driven design decisions:** Move beyond subjective preferences to objective comparison based on user needs, business goals, and technical constraints.
</success>

## Comparison Methods

<Tabs>
  <Tab title="Side-by-Side Views">
    **Visual comparison layouts:**

    <Frame>
      <img alt="Two design alternatives displayed side-by-side with comparison annotations" />
    </Frame>

    **Layout options:**

    ```yaml theme={null}
    Split view: 50/50 vertical division
    Multi-column: 3+ designs in columns
    Carousel: Swipe between alternatives
    Overlay: Designs stacked with transparency
    Grid: Matrix view for many options
    ```
  </Tab>

  <Tab title="Interactive Comparison">
    **Dynamic evaluation tools:**

    <CardGroup>
      <Card title="Hover Switching" icon="mouse-pointer">
        Hover over areas to switch between design alternatives instantly
      </Card>

      <Card title="Slider Comparison" icon="sliders">
        Drag slider to reveal different designs progressively
      </Card>
    </CardGroup>

    **Advanced interactions:**

    ```text theme={null}
    🎯 Focus mode: Highlight specific elements
    🔍 Zoom sync: Synchronized zooming across designs
    📱 Device preview: Compare across screen sizes
    ⚡ Animation: Smooth transitions between options
    ```
  </Tab>

  <Tab title="Annotated Analysis">
    **Structured comparison framework:**

    <AccordionGroup>
      <Accordion title="Feature Comparison">
        ```yaml theme={null}
        Compare specific aspects:
        - User flow efficiency
        - Visual hierarchy clarity
        - Information density
        - Accessibility compliance
        - Mobile responsiveness
        - Brand consistency
        ```
      </Accordion>

      <Accordion title="Evaluation Criteria">
        ```yaml theme={null}
        Scoring framework:
        - User experience (1-10)
        - Technical feasibility (1-10)
        - Business alignment (1-10)
        - Design quality (1-10)
        - Implementation time (1-10)
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Comparison Frameworks

<Steps>
  <Step title="User-Centered Comparison">
    **Evaluate based on user needs:**

    <Tabs>
      <Tab title="Task Completion">
        ```yaml theme={null}
        Measure effectiveness:
        - Steps to complete primary task
        - Cognitive load assessment
        - Error prevention capabilities
        - Recovery from mistakes
        - Learning curve steepness
        ```
      </Tab>

      <Tab title="User Preferences">
        ```yaml theme={null}
        Preference indicators:
        - First impression ratings
        - Perceived trustworthiness
        - Aesthetic appeal scores
        - Functional clarity ratings
        - Overall satisfaction
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Business Impact Analysis">
    **Connect design to business outcomes:**

    ```yaml theme={null}
    Business metrics:
    Conversion potential: Which design drives more actions
    Brand alignment: Consistency with brand values
    Competitive position: Differentiation from competitors
    Market appeal: Target audience resonance
    Revenue impact: Projected business value
    ```
  </Step>

  <Step title="Technical Feasibility">
    **Implementation reality check:**

    <CardGroup>
      <Card title="Development Effort" icon="code">
        * Implementation complexity
        * Required development time
        * Technical risk assessment
        * Resource requirements
      </Card>

      <Card title="Performance Impact" icon="gauge">
        * Page load implications
        * Rendering performance
        * Accessibility compliance
        * Cross-browser compatibility
      </Card>
    </CardGroup>
  </Step>
</Steps>

## Team Decision Making

<Tabs>
  <Tab title="Stakeholder Reviews">
    **Structured decision processes:**

    <Frame>
      <img alt="Interface showing stakeholder voting and feedback on design alternatives" />
    </Frame>

    **Review workflow:**

    ```yaml theme={null}
    1. Present alternatives clearly
    2. Explain evaluation criteria
    3. Gather structured feedback
    4. Discuss pros and cons
    5. Document decision rationale
    ```
  </Tab>

  <Tab title="Team Voting">
    **Democratic design decisions:**

    <AccordionGroup>
      <Accordion title="Weighted Voting">
        ```yaml theme={null}
        Vote weighting by role:
        - Users/Customers: 40%
        - Product Manager: 25%
        - Lead Designer: 20%
        - Tech Lead: 15%

        Custom weighting available
        ```
      </Accordion>

      <Accordion title="Criteria-Based Scoring">
        ```yaml theme={null}
        Score each design on:
        - User experience quality
        - Technical implementation
        - Business goal alignment
        - Timeline feasibility
        - Risk assessment
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Consensus Building">
    **Collaborative decision making:**

    ```yaml theme={null}
    Consensus tools:
    - Anonymous initial feedback
    - Open discussion threads
    - Compromise alternative creation
    - Final agreement documentation
    - Decision appeal process
    ```
  </Tab>
</Tabs>

## A/B Testing Integration

<Steps>
  <Step title="Test Design Setup">
    **Prepare designs for user testing:**

    ```yaml theme={null}
    Test preparation:
    - Ensure comparable functionality
    - Match content and data
    - Standardize testing conditions
    - Define success metrics
    - Plan statistical significance
    ```
  </Step>

  <Step title="Results Analysis">
    **Interpret testing data:**

    <CardGroup>
      <Card title="Quantitative Results" icon="chart-bar">
        * Conversion rates
        * Task completion times
        * Error rates
        * Engagement metrics
      </Card>

      <Card title="Qualitative Insights" icon="comments">
        * User feedback themes
        * Behavioral observations
        * Preference explanations
        * Usability issues
      </Card>
    </CardGroup>
  </Step>

  <Step title="Design Iteration">
    **Apply learnings to improve designs:**

    ```yaml theme={null}
    Post-test improvements:
    - Combine winning elements
    - Address identified issues
    - Create hybrid solutions
    - Plan follow-up tests
    ```
  </Step>
</Steps>

## Comparison Documentation

<info>
  **Decision history:** Document comparison rationale to inform future decisions and build institutional knowledge.
</info>

<Tabs>
  <Tab title="Decision Records">
    **Capture decision context:**

    ```yaml theme={null}
    Document for each comparison:
    - Alternatives considered
    - Evaluation criteria used
    - Stakeholders involved
    - Decision rationale
    - Expected outcomes
    - Success metrics defined
    ```
  </Tab>

  <Tab title="Learning Capture">
    **Build design knowledge:**

    ```yaml theme={null}
    Pattern recognition:
    - Which design approaches work best
    - Common decision factors
    - Stakeholder preference patterns
    - User testing insights
    - Implementation learnings
    ```
  </Tab>
</Tabs>

## Advanced Comparison Features

<CardGroup>
  <Card title="AI-Assisted Analysis" icon="brain">
    **Intelligent comparison insights:**

    * Pattern recognition across designs
    * Best practice compliance checking
    * User research alignment analysis
    * Accessibility gap identification
  </Card>

  <Card title="Historical Comparison" icon="history">
    **Learn from past decisions:**

    * Compare with previous successful designs
    * Track decision pattern evolution
    * Identify recurring design challenges
    * Reference proven solutions
  </Card>
</CardGroup>

## Best Practices

<Steps>
  <Step title="Fair Comparison Setup">
    **Ensure objective evaluation:**

    ```text theme={null}
    ✅ Use equivalent content and data
    ✅ Test under similar conditions
    ✅ Consider all user scenarios
    ✅ Include edge cases and errors
    ✅ Account for different skill levels
    ```
  </Step>

  <Step title="Comprehensive Evaluation">
    **Consider multiple perspectives:**

    ```text theme={null}
    ✅ User experience and usability
    ✅ Business goal achievement
    ✅ Technical implementation reality
    ✅ Brand and design consistency
    ✅ Long-term maintainability
    ```
  </Step>

  <Step title="Decision Communication">
    **Share decisions effectively:**

    ```text theme={null}
    ✅ Clear rationale explanation
    ✅ Acknowledge trade-offs made
    ✅ Document next steps
    ✅ Plan success measurement
    ✅ Create implementation timeline
    ```
  </Step>
</Steps>

***

<Card title="Explore Canvas Overview" icon="map">
  Learn how to use zooming and overview features to navigate large design projects effectively.

  [Zooming Overview →](/designing/canvas/zooming-overview)
</Card>


# Infinite Workspace
Source: https://docs.figr.design/designing/canvas/infinite-workspace

Explore Figr's infinite canvas that adapts to your design process and team collaboration needs.

# Infinite Workspace

Figr's infinite canvas gives you unlimited space to explore, iterate, and collaborate. Unlike traditional design tools with fixed artboards, Figr adapts to how you actually think and work.

<success>
  **Think without limits:** No more cramped artboards or rigid layouts. Spread out your ideas, compare alternatives, and let your design process flow naturally.
</success>

## Canvas Philosophy

<CardGroup>
  <Card title="Traditional Tools" icon="grid-3x3">
    **Fixed artboard constraints:**

    * Pre-defined canvas sizes
    * Linear design progression
    * Limited comparison space
    * Rigid organization structure

    **Result:** Design thinking constrained by tool limitations
  </Card>

  <Card title="Figr's Infinite Canvas" icon="maximize">
    **Limitless creative space:**

    * Infinite zoom and pan
    * Organic layout organization
    * Natural comparison workflows
    * Flexible spatial relationships

    **Result:** Design thinking drives tool usage, not vice versa
  </Card>
</CardGroup>

## Canvas Navigation

<Steps>
  <Step title="Zoom Controls">
    **Navigate at any scale:**

    <Frame>
      <img alt="Canvas zoom controls showing overview to pixel-perfect detail levels" />
    </Frame>

    **Zoom levels:**

    ```text theme={null}
    🔍 Pixel level (400%): Fine detail work
    📱 Component level (100%): Normal editing
    🏠 Page level (25%): Layout overview  
    🌍 Project level (5%): Full project view
    🚁 Bird's eye (1%): Spatial organization
    ```

    **Navigation shortcuts:**

    * `Scroll wheel`: Zoom in/out
    * `Space + drag`: Pan around canvas
    * `Cmd/Ctrl + 0`: Fit to screen
    * `Cmd/Ctrl + 1`: Actual size
  </Step>

  <Step title="Smart Navigation">
    **Intelligent movement assistance:**

    <Tabs>
      <Tab title="Quick Jump">
        **Jump to relevant content:**

        ```text theme={null}
        🎯 Recent designs
        👥 Team member locations
        🔍 Search results
        📌 Bookmarked areas
        🏷️ Tagged sections
        ```
      </Tab>

      <Tab title="Follow Mode">
        **Collaborative navigation:**

        ```text theme={null}
        👥 Follow team member cursor
        🎥 Presentation mode
        🔄 Auto-sync viewports
        📍 Shared anchor points
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Viewport Management">
    **Multiple view perspectives:**

    ```yaml theme={null}
    Personal Views:
    - Save custom zoom levels
    - Bookmark important areas
    - Create named viewports
    - Quick access shortcuts

    Team Views:
    - Shared anchor points
    - Collaborative focus areas
    - Presentation viewports
    - Review checkpoints
    ```
  </Step>
</Steps>

## Spatial Organization

<Tabs>
  <Tab title="Organic Layout">
    **Natural design arrangement:**

    <Frame>
      <img alt="Canvas showing natural clustering of related designs and iterations" />
    </Frame>

    **Common patterns:**

    ```text theme={null}
    🌟 Central hub: Main design surrounded by variations
    📊 Linear flow: User journey laid out left-to-right
    🎯 Focused clusters: Related features grouped together
    📈 Evolution chains: Design iterations in sequence
    🔀 Comparison grids: Alternatives side-by-side
    ```
  </Tab>

  <Tab title="Flexible Grouping">
    **Dynamic content organization:**

    <AccordionGroup>
      <Accordion title="Auto-Grouping">
        **Figr suggests logical groupings:**

        ```text theme={null}
        By feature: Login flows, dashboard components
        By stage: Wireframes, high-fidelity, final
        By device: Mobile, tablet, desktop versions
        By user type: Admin interfaces, user views
        ```
      </Accordion>

      <Accordion title="Manual Organization">
        **Custom spatial relationships:**

        ```text theme={null}
        Proximity grouping: Related items close together
        Path connections: Flow lines between screens
        Color coding: Visual project organization
        Size relationships: Importance through scale
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Contextual Zones">
    **Purpose-driven canvas areas:**

    <CardGroup>
      <Card title="Exploration Zone" icon="lightbulb">
        Raw ideation, quick sketches, and experimental concepts
      </Card>

      <Card title="Development Zone" icon="hammer">
        Active design work, iterations, and refinements
      </Card>

      <Card title="Archive Zone" icon="archive">
        Completed designs, rejected concepts, and reference materials
      </Card>
    </CardGroup>
  </Tab>
</Tabs>

## Collaborative Canvas Features

<Steps>
  <Step title="Real-Time Collaboration">
    **Multiple people, one canvas:**

    <Frame>
      <img alt="Canvas showing multiple user cursors and real-time collaboration indicators" />
    </Frame>

    **Collaboration indicators:**

    ```text theme={null}
    👤 User cursors: See where teammates are working
    ✏️ Edit indicators: Real-time design changes
    💬 Comment threads: Contextual discussions
    📍 Anchor points: Shared reference locations
    🔒 Edit locks: Prevent simultaneous editing conflicts
    ```
  </Step>

  <Step title="Workspace Sharing">
    **Flexible access control:**

    <Tabs>
      <Tab title="Team Workspaces">
        ```yaml theme={null}
        Shared project canvas:
        - All team members have access
        - Real-time synchronization
        - Shared navigation and bookmarks
        - Collaborative organization
        ```
      </Tab>

      <Tab title="Personal Areas">
        ```yaml theme={null}
        Individual work zones:
        - Private exploration space
        - Personal design iterations
        - Individual note-taking
        - Custom organization
        ```
      </Tab>

      <Tab title="Guest Access">
        ```yaml theme={null}
        External collaboration:
        - Time-limited access
        - View-only or comment permissions
        - Specific area restrictions
        - Watermarked exports
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Async Collaboration">
    **Work across time zones:**

    ```text theme={null}
    Handoff features:
    📝 Progress notes: "Working on mobile version next"
    📍 Focus areas: "Review this section when you're online"
    ⏰ Status updates: "Ready for review", "Work in progress"
    🔄 Change highlights: "See what changed since yesterday"
    ```
  </Step>
</Steps>

## Canvas Performance

<info>
  **Optimized for scale:** Figr's canvas handles thousands of design elements without performance degradation through intelligent rendering and caching.
</info>

<Tabs>
  <Tab title="Intelligent Rendering">
    **Performance optimization techniques:**

    ```yaml theme={null}
    Viewport-based rendering:
    - Only render visible content
    - Progressive detail loading
    - Adaptive quality based on zoom
    - Background pre-loading

    Content optimization:
    - Vector graphics when possible
    - Automatic image compression
    - Efficient font rendering
    - Smart caching strategies
    ```
  </Tab>

  <Tab title="Large Project Handling">
    **Manage complex design systems:**

    <CardGroup>
      <Card title="Content Streaming" icon="stream">
        Load canvas content progressively as you navigate, maintaining smooth performance
      </Card>

      <Card title="Detail Levels" icon="layers">
        Show appropriate detail based on zoom level - overviews at distance, pixels up close
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Offline Capabilities">
    **Work without internet:**

    ```text theme={null}
    Offline features:
    ✅ Local canvas caching
    ✅ Design editing without connection
    ✅ Automatic sync when reconnected
    ✅ Conflict resolution for team changes
    ✅ Progressive loading of external assets
    ```
  </Tab>
</Tabs>

## Canvas Customization

<Steps>
  <Step title="Grid and Guides">
    **Alignment and structure tools:**

    <AccordionGroup>
      <Accordion title="Flexible Grid System">
        ```yaml theme={null}
        Grid options:
        - 8px, 12px, 16px base units
        - Custom grid sizing
        - Responsive breakpoint guides
        - Component-based grids
        - Snap-to-grid behavior
        ```
      </Accordion>

      <Accordion title="Smart Guides">
        ```yaml theme={null}
        Dynamic alignment:
        - Element alignment suggestions
        - Spacing consistency helpers
        - Typography baseline grids
        - Component boundary guides
        ```
      </Accordion>
    </AccordionGroup>
  </Step>

  <Step title="Canvas Appearance">
    **Customize your workspace:**

    ```yaml theme={null}
    Appearance options:
    Background: Light, dark, custom colors
    Grid visibility: Always, on zoom, hidden
    Element outlines: Hover only, always visible
    Animation: Full, reduced, minimal
    Density: Compact, comfortable, spacious
    ```
  </Step>

  <Step title="Workflow Optimization">
    **Adapt canvas to your process:**

    <Tabs>
      <Tab title="Design Process">
        ```text theme={null}
        Wireframing: Large grid, low fidelity mode
        Visual design: Pixel grid, high fidelity
        Prototyping: Connection guides, flow mode
        Review: Clean view, comment highlights
        ```
      </Tab>

      <Tab title="Team Role">
        ```text theme={null}
        Designer: Full editing, detailed views
        PM: Overview mode, comment focus
        Developer: Component view, spec mode
        Stakeholder: Presentation mode, guided tour
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Advanced Canvas Features

<CardGroup>
  <Card title="Version Branching" icon="git-branch">
    **Explore alternatives without losing work:**

    * Create design branches for experimentation
    * Merge successful concepts back to main
    * Compare different approaches side-by-side
    * Maintain design history and decision points
  </Card>

  <Card title="Presentation Mode" icon="presentation">
    **Transform canvas into presentation:**

    * Auto-generate slide sequences from canvas areas
    * Guided tours through design evolution
    * Stakeholder-friendly navigation
    * Export presentation-ready materials
  </Card>
</CardGroup>

## Canvas Best Practices

<Steps>
  <Step title="Organization Strategy">
    **Keep your canvas navigable:**

    ```text theme={null}
    ✅ Use consistent spatial relationships
    ✅ Group related concepts together
    ✅ Leave breathing room between major sections
    ✅ Create clear pathways through content
    ✅ Use landmarks for easy navigation
    ```
  </Step>

  <Step title="Collaboration Etiquette">
    **Work well with others:**

    ```text theme={null}
    ✅ Communicate your current focus area
    ✅ Use shared bookmarks for important locations
    ✅ Leave clear notes about work in progress
    ✅ Respect others' workspace organization
    ✅ Clean up experimental work regularly
    ```
  </Step>
</Steps>

***

<Card title="Learn About Design Organization" icon="folder">
  Discover how to organize your iterations and design evolution effectively within the infinite canvas.

  [Organizing Iterations →](/designing/canvas/organizing-iterations)
</Card>


# Organizing Iterations
Source: https://docs.figr.design/designing/canvas/organizing-iterations

Structure your design evolution and iteration cycles for clear progress tracking and decision making.

# Organizing Iterations

Design is iterative by nature. Figr helps you organize design evolution clearly, making it easy to track progress, compare alternatives, and maintain design history.

<tip>
  **Design evolution made visible:** See your design journey from concept to completion, understand what worked, and build on successful patterns.
</tip>

## Iteration Organization Patterns

<Tabs>
  <Tab title="Linear Evolution">
    **Sequential design progression:**

    <Frame>
      <img alt="Canvas showing linear progression from wireframe to final design" />
    </Frame>

    **When to use:**

    * Clear design direction
    * Incremental improvements
    * Client presentation needs
    * Timeline-based development

    **Organization:**

    ```
    v1.0: Initial concept → v1.1: Stakeholder feedback → 
    v1.2: User testing → v2.0: Final design
    ```
  </Tab>

  <Tab title="Branching Exploration">
    **Parallel alternative development:**

    <CardGroup>
      <Card title="Concept Branches" icon="git-branch">
        Explore different approaches simultaneously before converging on the best solution
      </Card>

      <Card title="Feature Variations" icon="layers">
        Test multiple interaction patterns or visual approaches for specific features
      </Card>
    </CardGroup>

    **Organization:**

    ```
    Main concept
    ├── Approach A: Minimal design
    ├── Approach B: Rich interactions  
    └── Approach C: Mobile-first
    ```
  </Tab>

  <Tab title="Cyclical Refinement">
    **Continuous improvement cycles:**

    <Steps>
      <Step title="Design">
        Create initial concept
      </Step>

      <Step title="Test">
        Gather feedback or data
      </Step>

      <Step title="Learn">
        Analyze results
      </Step>

      <Step title="Iterate">
        Refine based on insights
      </Step>
    </Steps>

    **Perfect for:**

    * User testing cycles
    * A/B testing workflows
    * Agile development
    * Continuous product improvement
  </Tab>
</Tabs>

## Iteration Management Tools

<Steps>
  <Step title="Version Control">
    **Track design changes systematically:**

    <AccordionGroup>
      <Accordion title="Automatic Versioning">
        ```yaml theme={null}
        Auto-save points:
        - Significant design changes
        - Before team collaboration
        - Daily work session saves
        - Pre-review snapshots

        Version naming:
        - Semantic versioning (v1.2.3)
        - Date-based (2024-03-15)
        - Feature-based (checkout-v2)
        - Custom naming schemes
        ```
      </Accordion>

      <Accordion title="Manual Checkpoints">
        ```yaml theme={null}
        Create named versions:
        - "Stakeholder review ready"
        - "User testing version"
        - "Developer handoff"
        - "Final approved design"

        Include context:
        - What changed and why
        - Decisions made
        - Feedback incorporated
        - Next steps planned
        ```
      </Accordion>
    </AccordionGroup>
  </Step>

  <Step title="Change Tracking">
    **Visualize design evolution:**

    <Frame>
      <img alt="Interface showing design changes highlighted and annotated" />
    </Frame>

    **Change indicators:**

    ```
    🟢 New elements added
    🔵 Modified existing elements
    🟡 Moved or repositioned items
    🔴 Removed elements
    ⚪ Unchanged from previous version
    ```
  </Step>

  <Step title="Comparison Views">
    **Side-by-side analysis:**

    <Tabs>
      <Tab title="Before/After">
        **Sequential comparison:**

        ```
        Split view: Previous | Current
        Overlay mode: Changes highlighted
        Animation: Morph between versions
        Diff view: Structural changes only
        ```
      </Tab>

      <Tab title="Multi-Version">
        **Compare multiple alternatives:**

        ```
        Grid layout: All versions visible
        Carousel mode: Swipe between options
        Focus mode: One version highlighted
        Matrix view: Feature comparison table
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Iteration Documentation

<CardGroup>
  <Card title="Design Rationale" icon="lightbulb">
    **Document decision reasoning:**

    ```yaml theme={null}
    For each iteration:
    - What problem it solves
    - Why this approach was chosen
    - What alternatives were considered
    - Success metrics defined
    - Testing or validation planned
    ```
  </Card>

  <Card title="Feedback Integration" icon="message-square">
    **Track how feedback shapes design:**

    ```yaml theme={null}
    Feedback sources:
    - Stakeholder reviews
    - User testing sessions
    - Team collaboration
    - Analytics insights
    - Technical constraints
    ```
  </Card>
</CardGroup>

## Collaborative Iteration

<Steps>
  <Step title="Team Iteration Workflows">
    **Structured team collaboration:**

    <Tabs>
      <Tab title="Designer-Led">
        ```yaml theme={null}
        Process:
        1. Designer creates initial concepts
        2. Team provides feedback and requirements
        3. Designer iterates based on input
        4. Review and approval cycle
        5. Handoff to development
        ```
      </Tab>

      <Tab title="Collaborative Design">
        ```yaml theme={null}
        Process:
        1. Team brainstorms together
        2. Multiple people contribute designs
        3. Collaborative refinement
        4. Consensus building
        5. Unified final direction
        ```
      </Tab>

      <Tab title="Review-Driven">
        ```yaml theme={null}
        Process:
        1. Design checkpoint presentations
        2. Structured feedback collection
        3. Prioritized improvement list
        4. Iteration assignments
        5. Follow-up review cycles
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Async Iteration">
    **Work across time zones effectively:**

    ```yaml theme={null}
    Handoff tools:
    - Progress notes on each iteration
    - Clear next steps documentation
    - Priority levels for feedback items
    - Context preservation between sessions
    - Change summaries for quick catch-up
    ```
  </Step>
</Steps>

## Iteration Analytics

<Tabs>
  <Tab title="Design Metrics">
    **Track iteration effectiveness:**

    <AccordionGroup>
      <Accordion title="Progress Indicators">
        ```yaml theme={null}
        Measure iteration success:
        - Time to stakeholder approval
        - Number of revision cycles
        - Feedback resolution rate
        - Team satisfaction scores
        - Design system compliance
        ```
      </Accordion>

      <Accordion title="Quality Metrics">
        ```yaml theme={null}
        Design improvement tracking:
        - Usability test score improvements
        - Accessibility compliance increases
        - Performance optimizations
        - User satisfaction changes
        - Conversion rate impacts
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Process Optimization">
    **Improve iteration workflows:**

    ```yaml theme={null}
    Workflow insights:
    - Which iteration patterns work best
    - Common feedback themes
    - Bottlenecks in approval process
    - Most effective review methods
    - Team collaboration efficiency
    ```
  </Tab>
</Tabs>

## Best Practices for Iteration Organization

<Steps>
  <Step title="Clear Naming Conventions">
    **Consistent iteration labeling:**

    ```
    ✅ Good naming:
    "Dashboard v2.1 - Mobile responsive"
    "Checkout flow - Post user testing"
    "Navigation - Accessibility improvements"

    ❌ Avoid vague names:
    "Design 1", "Latest version", "Final final"
    ```
  </Step>

  <Step title="Strategic Iteration Points">
    **Plan meaningful checkpoints:**

    ```yaml theme={null}
    Natural iteration triggers:
    - After user research sessions
    - Before stakeholder presentations
    - Following technical feasibility reviews
    - Post-accessibility audits
    - After A/B test results
    ```
  </Step>

  <Step title="Archive Management">
    **Keep workspace organized:**

    ```yaml theme={null}
    Organization strategy:
    - Active iterations: Central workspace
    - Recent versions: Nearby reference
    - Archived concepts: Separate area
    - Rejected ideas: Documented but hidden
    - Final approved: Clearly marked
    ```
  </Step>
</Steps>

***

<Card title="Learn About Design Comparison" icon="balance-scale">
  Discover how to effectively compare design alternatives and make informed decisions.

  [Comparing Designs →](/designing/canvas/comparing-designs)
</Card>


# Co-Editing Live
Source: https://docs.figr.design/designing/collaboration/co-editing-live

Enable real-time collaborative editing with live cursors, simultaneous edits, and seamless team coordination features.

# Live Co-Editing

Collaborate in real-time with your team through Figr's live co-editing features. See teammates' cursors, make simultaneous edits, and coordinate design decisions seamlessly.

<success>
  **Real-time magic:** Multiple team members working on the same design simultaneously, with intelligent conflict resolution and seamless synchronization across all devices.
</success>

## Real-Time Collaboration Features

<Steps>
  <Step title="Live Presence Indicators">
    **See who's working on what, when:**

    <Frame>
      <img alt="Interface showing multiple user cursors and real-time editing indicators" />
    </Frame>

    **Presence features:**

    ```yaml theme={null}
    User indicators:
    - Live cursor positions with names
    - User avatar displays
    - Activity status indicators
    - Current tool usage display
    - Selection highlighting

    Activity tracking:
    - Real-time edit notifications
    - Recent action summaries
    - User focus area indicators
    - Collaboration timeline
    - Work session overlap tracking

    Communication tools:
    - Quick emoji reactions
    - Voice note capabilities
    - Screen sharing integration
    - Chat overlay options
    - Video call launching
    ```
  </Step>

  <Step title="Simultaneous Editing">
    **Multiple editors without conflicts:**

    <Tabs>
      <Tab title="Intelligent Merge">
        ```yaml theme={null}
        Conflict resolution system:

        Automatic merging:
        - Non-overlapping edits merge seamlessly
        - Property changes apply in sequence
        - Transform operations reconcile automatically
        - Version vector synchronization
        - Operational transformation algorithms

        Conflict detection:
        - Simultaneous edit identification
        - Overlapping change detection
        - Priority-based resolution
        - User notification systems
        - Manual resolution workflows

        Data consistency:
        - CRDT (Conflict-free Replicated Data Types)
        - Event sourcing for audit trails
        - Eventual consistency guarantees
        - Rollback and recovery mechanisms
        - State synchronization protocols
        ```
      </Tab>

      <Tab title="Element Locking">
        ```yaml theme={null}
        Smart locking mechanisms:

        Soft locking:
        - Visual indicators of active editing
        - Temporary exclusive access
        - Automatic lock release on inactivity
        - Override capabilities for emergencies
        - Lock duration limits

        Collaborative editing:
        - Shared element modification
        - Property-level granular editing
        - Non-blocking collaborative changes
        - Real-time property synchronization
        - Merge preview capabilities

        Lock management:
        - Lock request queuing
        - Priority-based lock assignment
        - Lock transfer mechanisms
        - Emergency override protocols
        - Lock timeout handling
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Communication Integration">
    **Seamless team coordination:**

    <AccordionGroup>
      <Accordion title="In-Context Messaging">
        ```yaml theme={null}
        Design-focused communication:

        Contextual chat:
        - Element-specific discussions
        - Design decision documentation
        - Quick clarification requests
        - Implementation note sharing
        - Feedback and approval workflows

        Rich messaging:
        - Markdown formatting support
        - Code snippet sharing
        - Image and file attachments
        - Link previews and references
        - @mention notifications

        Message organization:
        - Thread-based conversations
        - Topic categorization
        - Search and filter capabilities
        - Message archival
        - Notification management
        ```
      </Accordion>

      <Accordion title="Voice and Video">
        ```yaml theme={null}
        Real-time communication:

        Voice integration:
        - Push-to-talk functionality
        - Voice note recording
        - Ambient audio channels
        - Spatial audio positioning
        - Noise cancellation features

        Video capabilities:
        - Face-to-face design reviews
        - Screen sharing and annotation
        - Presentation mode integration
        - Recording and playback
        - Multi-participant support

        Collaboration modes:
        - Focus mode with minimal distractions
        - Presentation mode for stakeholders
        - Workshop mode for brainstorming
        - Review mode for feedback
        - Implementation mode for handoff
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Collaboration Workflows

<Tabs>
  <Tab title="Design Sprints">
    **Collaborative design sprint facilitation:**

    <CardGroup>
      <Card title="Ideation Sessions" icon="lightbulb">
        **Brainstorming and concept development:**

        * Shared sticky note creation
        * Real-time idea clustering
        * Voting and prioritization
        * Concept sketching together
        * Rapid iteration cycles
      </Card>

      <Card title="Design Reviews" icon="eye">
        **Structured feedback sessions:**

        * Guided review workflows
        * Annotation and markup tools
        * Decision documentation
        * Action item tracking
        * Approval status management
      </Card>
    </CardGroup>

    **Sprint workflow integration:**

    ```yaml theme={null}
    Day 1: Problem definition and user mapping
    - Collaborative problem statement creation
    - User journey mapping together
    - Opportunity identification
    - Goal setting and success metrics

    Day 2: Solution sketching
    - Individual concept development
    - Shared inspiration gathering
    - Rapid sketch sharing
    - Concept explanation sessions

    Day 3: Decision making
    - Collaborative evaluation
    - Voting mechanisms
    - Solution combination
    - Prototype planning

    Day 4: Prototyping
    - Parallel prototype development
    - Asset sharing and reuse
    - Integration and assembly
    - Testing preparation

    Day 5: Testing and validation
    - Observation session facilitation
    - Real-time note taking
    - Insight synthesis
    - Next step planning
    ```
  </Tab>

  <Tab title="Design System Development">
    **Collaborative design system creation:**

    <Frame>
      <img alt="Design system collaboration showing multiple contributors working on components simultaneously" />
    </Frame>

    **Component collaboration:**

    ```yaml theme={null}
    Parallel component development:
    - Multiple designers on different components
    - Shared token and style management
    - Cross-component consistency checking
    - Integration testing workflows
    - Documentation collaboration

    Token management:
    - Real-time token updates
    - Usage impact visualization
    - Collaborative token naming
    - Version control integration
    - Automated consistency checking

    Documentation workflows:
    - Collaborative guideline writing
    - Example creation and maintenance
    - Usage documentation
    - Best practice development
    - Training material creation
    ```
  </Tab>

  <Tab title="Client Collaboration">
    **External stakeholder integration:**

    <Steps>
      <Step title="Controlled Access">
        Set up appropriate permissions and access levels for external collaborators
      </Step>

      <Step title="Guided Workflows">
        Provide structured review and feedback processes for non-designers
      </Step>

      <Step title="Communication Facilitation">
        Enable clear communication channels while maintaining project control
      </Step>
    </Steps>

    **Client collaboration features:**

    ```yaml theme={null}
    Review facilitation:
    - Presentation mode for client reviews
    - Guided tour capabilities
    - Annotation and markup tools
    - Approval workflow integration
    - Version comparison tools

    Feedback management:
    - Structured feedback collection
    - Priority and categorization
    - Response and resolution tracking
    - Client communication tools
    - Decision documentation

    Access control:
    - Time-limited collaboration
    - Feature-restricted access
    - Watermarking and protection
    - Audit trail maintenance
    - Confidentiality controls
    ```
  </Tab>
</Tabs>

## Performance and Scalability

<Steps>
  <Step title="Real-Time Synchronization">
    **Optimized collaboration performance:**

    <Tabs>
      <Tab title="Network Optimization">
        ```yaml theme={null}
        Connection management:
        - WebSocket connections for low latency
        - Automatic reconnection handling
        - Bandwidth adaptation algorithms
        - Regional server deployment
        - CDN integration for assets

        Data optimization:
        - Delta synchronization protocols
        - Compression algorithms
        - Batch operation processing
        - Predictive prefetching
        - Efficient serialization formats

        Offline resilience:
        - Local change buffering
        - Conflict resolution queuing
        - Automatic sync on reconnection
        - Offline mode indicators
        - Recovery mechanisms
        ```
      </Tab>

      <Tab title="Scalability Architecture">
        ```yaml theme={null}
        System scalability:
        - Horizontal scaling capabilities
        - Load balancing algorithms
        - Database sharding strategies
        - Caching layer optimization
        - Microservice architecture

        Performance monitoring:
        - Real-time latency tracking
        - Collaboration session analytics
        - Resource usage monitoring
        - Error rate tracking
        - User experience metrics

        Capacity management:
        - Dynamic resource allocation
        - Auto-scaling mechanisms
        - Peak load handling
        - Resource optimization
        - Cost-effective scaling
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Large Team Support">
    **Collaboration at enterprise scale:**

    <AccordionGroup>
      <Accordion title="Team Size Optimization">
        ```yaml theme={null}
        Scalable collaboration:

        Small teams (2-5 people):
        - Full real-time synchronization
        - Complete presence awareness
        - Unrestricted simultaneous editing
        - Rich communication features
        - Maximum responsiveness

        Medium teams (6-15 people):
        - Selective presence indicators
        - Activity-based notifications
        - Structured communication channels
        - Role-based access patterns
        - Optimized update frequencies

        Large teams (16+ people):
        - Hierarchical presence display
        - Notification prioritization
        - Segmented collaboration areas
        - Performance-optimized updates
        - Structured workflow enforcement
        ```
      </Accordion>

      <Accordion title="Resource Management">
        ```yaml theme={null}
        Efficient resource utilization:

        Bandwidth optimization:
        - Adaptive quality settings
        - Selective synchronization
        - Intelligent batching
        - Compression algorithms
        - Priority-based updates

        CPU optimization:
        - Efficient rendering algorithms
        - Background processing
        - Lazy loading strategies
        - Caching mechanisms
        - Memory management

        Storage optimization:
        - Differential storage
        - Garbage collection
        - Archive management
        - Compression techniques
        - Cleanup automation
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Advanced Collaboration Features

<Tabs>
  <Tab title="AI-Assisted Collaboration">
    **Intelligent collaboration enhancement:**

    <CardGroup>
      <Card title="Smart Suggestions" icon="brain">
        **AI-powered collaboration insights:**

        * Conflict resolution suggestions
        * Design consistency recommendations
        * Workflow optimization hints
        * Best practice guidance
        * Productivity improvements
      </Card>

      <Card title="Automated Coordination" icon="robot">
        **Intelligent workflow automation:**

        * Task assignment suggestions
        * Deadline and milestone tracking
        * Resource allocation optimization
        * Communication facilitation
        * Progress monitoring
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Integration Ecosystem">
    **Third-party tool integration:**

    <Frame>
      <img alt="Integration dashboard showing connections to various collaboration and productivity tools" />
    </Frame>

    **Tool integrations:**

    ```yaml theme={null}
    Communication platforms:
    - Slack workspace integration
    - Microsoft Teams connectivity
    - Discord server integration
    - Zoom meeting integration
    - Google Meet compatibility

    Project management:
    - Jira ticket integration
    - Asana task synchronization
    - Trello board connectivity
    - Monday.com integration
    - Linear issue tracking

    Development tools:
    - GitHub repository integration
    - GitLab project connectivity
    - Bitbucket integration
    - Azure DevOps integration
    - CI/CD pipeline hooks

    Documentation platforms:
    - Notion workspace integration
    - Confluence page embedding
    - GitBook documentation
    - Coda document integration
    - Airtable database connectivity
    ```
  </Tab>
</Tabs>

## Collaboration Analytics

<Steps>
  <Step title="Team Performance Metrics">
    **Collaboration effectiveness measurement:**

    <Tabs>
      <Tab title="Productivity Metrics">
        ```yaml theme={null}
        Collaboration analytics:

        Individual metrics:
        - Design contribution volume
        - Collaboration frequency
        - Review participation rates
        - Response time averages
        - Quality score tracking

        Team metrics:
        - Simultaneous editing efficiency
        - Conflict resolution rates
        - Communication effectiveness
        - Decision-making speed
        - Project completion velocity

        Project metrics:
        - Collaboration session duration
        - Parallel work efficiency
        - Handoff success rates
        - Iteration cycle times
        - Stakeholder satisfaction
        ```
      </Tab>

      <Tab title="Communication Analysis">
        ```yaml theme={null}
        Communication insights:

        Message analytics:
        - Communication volume trends
        - Response time patterns
        - Topic distribution analysis
        - Sentiment tracking
        - Knowledge sharing frequency

        Collaboration patterns:
        - Peak collaboration times
        - Cross-functional interaction
        - Knowledge transfer efficiency
        - Decision-making patterns
        - Conflict resolution effectiveness
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Workflow Optimization">
    **Data-driven collaboration improvement:**

    ```yaml theme={null}
    Optimization opportunities:

    Process improvements:
    - Bottleneck identification
    - Workflow streamlining
    - Communication optimization
    - Tool usage efficiency
    - Resource allocation optimization

    Team development:
    - Skill gap identification
    - Training need assessment
    - Collaboration skill building
    - Tool proficiency improvement
    - Best practice sharing
    ```
  </Step>
</Steps>

## Best Practices for Live Collaboration

<CardGroup>
  <Card title="Effective Coordination" icon="users">
    **Smooth team collaboration:**

    ✅ Establish clear collaboration protocols ✅ Use voice communication for complex discussions ✅ Respect others' focus time and work areas ✅ Document decisions and rationale ✅ Maintain awareness of team activities
  </Card>

  <Card title="Conflict Prevention" icon="shield-check">
    **Minimize collaboration friction:**

    ✅ Communicate intentions before major changes ✅ Use element locking for focused work ✅ Regular saves and version checkpoints ✅ Clear role definitions and responsibilities ✅ Structured review and approval processes
  </Card>
</CardGroup>

## Troubleshooting Collaboration Issues

<AccordionGroup>
  <Accordion title="Synchronization Problems">
    ```yaml theme={null}
    Issue: Changes not appearing for other users
    Solutions:
    - Check network connection stability
    - Refresh browser or restart application
    - Verify user permissions and access
    - Clear cache and reload project
    - Contact support for server issues
    ```
  </Accordion>

  <Accordion title="Performance Issues">
    ```yaml theme={null}
    Issue: Slow response during collaboration
    Solutions:
    - Reduce number of simultaneous editors
    - Close unnecessary browser tabs
    - Check internet bandwidth
    - Use wired connection if possible
    - Optimize design file complexity
    ```
  </Accordion>

  <Accordion title="Conflict Resolution">
    ```yaml theme={null}
    Issue: Conflicting edits causing problems
    Solutions:
    - Use manual conflict resolution tools
    - Communicate with other editors
    - Create version branches for major changes
    - Implement element locking protocols
    - Establish editing conventions
    ```
  </Accordion>
</AccordionGroup>

***

<Card title="Phase 4 Complete!" icon="check-circle">
  **Excellent progress!** You've mastered precise editing, export capabilities, and team collaboration. Ready for account management and legal documentation.

  [Account Management →](/account/credits-usage)
</Card>


# Permissions
Source: https://docs.figr.design/designing/collaboration/permissions

Configure detailed permission systems for team roles, project access, and collaborative workflows in Figr.

# Permissions Management

Set up comprehensive permission systems that align with your team structure and project requirements. Control who can access, edit, and share designs while maintaining security and workflow efficiency.

<shield>
  **Security by design:** Granular permissions that scale from small teams to enterprise organizations, ensuring the right people have the right access at the right time.
</shield>

## Permission Hierarchy

<Steps>
  <Step title="Organization Level">
    **Top-level access control:**

    <Frame>
      <img alt="Diagram showing permission hierarchy from organization to individual project level" />
    </Frame>

    **Organization permissions:**

    ```yaml theme={null}
    Owner permissions:
    - Full organization control
    - Billing and subscription management
    - User invitation and removal
    - Security policy configuration
    - Data export and deletion

    Admin permissions:
    - User role management
    - Project creation and deletion
    - Team structure organization
    - Integration configuration
    - Security setting management

    Member permissions:
    - Project participation
    - Design creation and editing
    - Team collaboration
    - Asset usage and sharing
    - Limited administrative tasks
    ```
  </Step>

  <Step title="Team Level">
    **Department and group access control:**

    <Tabs>
      <Tab title="Design Team">
        ```yaml theme={null}
        Design team structure:

        Design Lead:
        - Full design project access
        - Design system management
        - Team member oversight
        - Client communication
        - Quality assurance control

        Senior Designer:
        - Project leadership capabilities
        - Mentoring permissions
        - Design system contributions
        - Cross-team collaboration
        - Advanced tool access

        Designer:
        - Design creation and editing
        - Team project participation
        - Asset library access
        - Feedback and review
        - Standard tool features

        Design Intern:
        - Supervised design access
        - Learning project participation
        - Feedback submission
        - Basic tool functionality
        - Mentorship program access
        ```
      </Tab>

      <Tab title="Product Team">
        ```yaml theme={null}
        Product team integration:

        Product Manager:
        - Requirements documentation
        - Design review and approval
        - Stakeholder communication
        - Project priority setting
        - Cross-functional coordination

        Product Owner:
        - Feature specification access
        - User story management
        - Acceptance criteria definition
        - Sprint planning participation
        - Design validation

        Business Analyst:
        - Requirements analysis
        - Design impact assessment
        - Stakeholder feedback collection
        - Process documentation
        - Compliance verification
        ```
      </Tab>

      <Tab title="Engineering Team">
        ```yaml theme={null}
        Development team access:

        Tech Lead:
        - Technical feasibility review
        - Implementation planning
        - Resource estimation
        - Team coordination
        - Architecture decisions

        Senior Developer:
        - Design specification access
        - Component implementation
        - Technical feedback provision
        - Code review participation
        - Mentoring responsibilities

        Developer:
        - Implementation-focused access
        - Asset download capabilities
        - Specification viewing
        - Bug reporting access
        - Code generation tools
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Project Level">
    **Granular project access control:**

    <AccordionGroup>
      <Accordion title="Project Roles">
        ```yaml theme={null}
        Project-specific permissions:

        Project Owner:
        - Full project control
        - Permission management
        - External sharing control
        - Archive and deletion rights
        - Budget and resource allocation

        Project Manager:
        - Timeline and milestone management
        - Team coordination
        - Stakeholder communication
        - Progress tracking
        - Resource request capabilities

        Lead Contributor:
        - Design direction setting
        - Quality standard enforcement
        - Team guidance provision
        - Client interaction
        - Final approval authority

        Contributor:
        - Active design participation
        - Collaborative editing
        - Feedback and review
        - Asset creation and modification
        - Documentation contributions

        Reviewer:
        - Design review and approval
        - Feedback provision
        - Comment and annotation
        - Version comparison
        - Quality assurance participation

        Viewer:
        - Read-only project access
        - Design viewing and navigation
        - Basic commenting (if enabled)
        - Export capabilities (if enabled)
        - Progress monitoring
        ```
      </Accordion>

      <Accordion title="Content Permissions">
        ```yaml theme={null}
        Content-specific access:

        Design Files:
        - Create, edit, delete designs
        - Version control access
        - Duplication and templating
        - Cross-project copying
        - Archive management

        Asset Libraries:
        - Asset upload and management
        - Library organization
        - Usage tracking and analytics
        - License management
        - Quality control

        Design Systems:
        - Component creation and editing
        - Token management
        - Pattern library maintenance
        - Documentation updates
        - Distribution control

        Documentation:
        - Specification writing
        - Process documentation
        - Guidelines creation
        - Training material development
        - Knowledge base maintenance
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Advanced Permission Features

<Tabs>
  <Tab title="Conditional Permissions">
    **Context-aware access control:**

    <CardGroup>
      <Card title="Time-Based Access" icon="clock">
        **Temporal permission control:**

        * Business hours restrictions
        * Project phase limitations
        * Deadline-driven access
        * Seasonal adjustments
        * Emergency override protocols
      </Card>

      <Card title="Location-Based Access" icon="map-pin">
        **Geographic permission control:**

        * Office network requirements
        * Regional access restrictions
        * Remote work policies
        * Client site limitations
        * Compliance zone enforcement
      </Card>
    </CardGroup>

    **Conditional access examples:**

    ```yaml theme={null}
    Project phase access:
    Discovery phase: Broad team access
    Design phase: Design team focus
    Review phase: Stakeholder inclusion
    Implementation phase: Developer priority
    Launch phase: Limited access

    Content sensitivity:
    Public designs: Open team access
    Client confidential: Restricted access
    Internal only: Employee limitation
    Executive review: Leadership access
    Legal review: Compliance team access
    ```
  </Tab>

  <Tab title="Dynamic Permissions">
    **Automated permission adjustments:**

    <Frame>
      <img alt="Interface showing dynamic permission rules and automated adjustments" />
    </Frame>

    **Automation triggers:**

    ```yaml theme={null}
    Project lifecycle automation:
    - Automatic role assignments
    - Permission escalation rules
    - Access removal triggers
    - Review cycle permissions
    - Archive access management

    User behavior adaptation:
    - Activity-based access expansion
    - Inactivity-triggered restrictions
    - Quality-based privilege adjustments
    - Collaboration-driven permissions
    - Performance-linked access levels

    Integration-driven changes:
    - Calendar-based access windows
    - Task management integration
    - Approval workflow triggers
    - Notification-driven permissions
    - External tool synchronization
    ```
  </Tab>

  <Tab title="Permission Templates">
    **Standardized permission sets:**

    <AccordionGroup>
      <Accordion title="Role-Based Templates">
        ```yaml theme={null}
        Pre-configured role permissions:

        Design Director Template:
        - Full design system access
        - All project oversight
        - Team management capabilities
        - Client communication rights
        - Strategic planning access

        Junior Designer Template:
        - Supervised design access
        - Learning project participation
        - Peer review capabilities
        - Asset library usage
        - Mentorship program inclusion

        Client Reviewer Template:
        - Project-specific viewing
        - Commenting capabilities
        - Approval workflow participation
        - Export limitations
        - Time-bounded access
        ```
      </Accordion>

      <Accordion title="Project Type Templates">
        ```yaml theme={null}
        Project-specific permission sets:

        Client Project Template:
        - Restricted external sharing
        - Enhanced security measures
        - Audit trail requirements
        - Confidentiality controls
        - Limited download permissions

        Internal Project Template:
        - Open team collaboration
        - Broad sharing capabilities
        - Flexible access controls
        - Standard security measures
        - Enhanced creative freedom

        Open Source Template:
        - Public viewing capabilities
        - Community contribution features
        - Attribution requirements
        - License compliance
        - Version control integration
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Permission Management Workflows

<Steps>
  <Step title="User Onboarding">
    **Streamlined permission assignment:**

    <Tabs>
      <Tab title="Automated Assignment">
        ```yaml theme={null}
        Onboarding automation:

        Role detection:
        - Email domain analysis
        - Department identification
        - Seniority level assessment
        - Team structure mapping
        - Historical pattern matching

        Permission application:
        - Template-based assignment
        - Gradual access provision
        - Probationary limitations
        - Mentorship pairings
        - Training requirement integration
        ```
      </Tab>

      <Tab title="Manual Verification">
        ```yaml theme={null}
        Human oversight process:

        Identity verification:
        - Manager approval requirements
        - HR department confirmation
        - Security clearance validation
        - Contract status verification
        - Compliance training completion

        Access validation:
        - Permission level appropriateness
        - Project relevance assessment
        - Security requirement compliance
        - Business need justification
        - Timeline limitation setting
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Permission Reviews">
    **Regular access auditing:**

    <CardGroup>
      <Card title="Automated Reviews" icon="robot">
        **Systematic permission auditing:**

        * Quarterly access reviews
        * Unused permission detection
        * Over-privileged user identification
        * Compliance violation flagging
        * Risk assessment automation
      </Card>

      <Card title="Manual Reviews" icon="eye">
        **Human-driven validation:**

        * Manager-led team reviews
        * Project-based access audits
        * Security team assessments
        * Compliance officer reviews
        * Executive oversight processes
      </Card>
    </CardGroup>
  </Step>

  <Step title="Permission Changes">
    **Managed access modifications:**

    <AccordionGroup>
      <Accordion title="Elevation Requests">
        ```yaml theme={null}
        Permission increase process:

        Request initiation:
        - Self-service request forms
        - Business justification requirements
        - Timeline specification
        - Risk assessment inclusion
        - Alternative consideration

        Approval workflow:
        - Manager authorization
        - Security team review
        - Business owner approval
        - Risk assessment validation
        - Implementation scheduling
        ```
      </Accordion>

      <Accordion title="Access Revocation">
        ```yaml theme={null}
        Permission removal triggers:

        Immediate revocation:
        - Employment termination
        - Security policy violations
        - Project completion
        - Role changes
        - Compliance requirements

        Gradual reduction:
        - Project phase transitions
        - Responsibility changes
        - Performance-based adjustments
        - Seasonal access patterns
        - Cost optimization measures
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Security and Compliance

<Tabs>
  <Tab title="Enterprise Security">
    **Advanced security features:**

    <Frame>
      <img alt="Enterprise security dashboard showing access controls, audit logs, and compliance metrics" />
    </Frame>

    **Security measures:**

    ```yaml theme={null}
    Access control:
    - Multi-factor authentication
    - Single sign-on integration
    - Session management
    - Device registration
    - Network restrictions

    Monitoring and logging:
    - Real-time access monitoring
    - Permission change tracking
    - Suspicious activity detection
    - Compliance violation alerting
    - Incident response automation

    Data protection:
    - Encryption at rest and transit
    - Data loss prevention
    - Backup and recovery
    - Geographic restrictions
    - Retention policy enforcement
    ```
  </Tab>

  <Tab title="Compliance Frameworks">
    **Industry standard compliance:**

    <AccordionGroup>
      <Accordion title="SOC 2 Compliance">
        ```yaml theme={null}
        SOC 2 Type II requirements:
        - Security principle implementation
        - Availability assurance measures
        - Processing integrity controls
        - Confidentiality protection
        - Privacy safeguard implementation

        Control implementation:
        - Access control procedures
        - Change management processes
        - Monitoring and logging systems
        - Incident response protocols
        - Risk assessment frameworks
        ```
      </Accordion>

      <Accordion title="GDPR Compliance">
        ```yaml theme={null}
        GDPR requirement fulfillment:
        - Lawful basis documentation
        - Consent management systems
        - Data subject rights implementation
        - Privacy by design principles
        - Data breach notification procedures

        Technical measures:
        - Data minimization practices
        - Purpose limitation enforcement
        - Storage limitation controls
        - Accuracy maintenance procedures
        - Security of processing measures
        ```
      </Accordion>

      <Accordion title="Industry-Specific">
        ```yaml theme={null}
        Sector compliance:

        Healthcare (HIPAA):
        - PHI protection measures
        - Access control requirements
        - Audit log maintenance
        - Business associate agreements
        - Risk assessment procedures

        Financial (SOX):
        - Internal control documentation
        - Financial reporting accuracy
        - Change management procedures
        - Access control reviews
        - Segregation of duties

        Government (FedRAMP):
        - Security control implementation
        - Continuous monitoring
        - Incident response procedures
        - Configuration management
        - System and information integrity
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Permission Analytics

<CardGroup>
  <Card title="Usage Analytics" icon="chart-bar">
    **Permission utilization insights:**

    * Access frequency patterns
    * Permission utilization rates
    * User activity correlations
    * Resource usage optimization
    * Cost-benefit analysis
  </Card>

  <Card title="Security Metrics" icon="shield-check">
    **Security posture monitoring:**

    * Permission violation tracking
    * Access anomaly detection
    * Compliance score monitoring
    * Risk exposure assessment
    * Incident response metrics
  </Card>
</CardGroup>

## Best Practices

<Steps>
  <Step title="Principle of Least Privilege">
    **Minimal necessary access:**

    ```
    ✅ Grant minimum required permissions
    ✅ Regular permission reviews and cleanup
    ✅ Time-limited access for temporary needs
    ✅ Role-based rather than individual permissions
    ✅ Clear documentation of permission rationale
    ```
  </Step>

  <Step title="Permission Governance">
    **Systematic permission management:**

    ```
    ✅ Clear permission policies and procedures
    ✅ Regular training on permission best practices
    ✅ Automated permission monitoring and alerting
    ✅ Integration with HR and IT systems
    ✅ Documentation of permission decisions
    ```
  </Step>

  <Step title="User Experience Balance">
    **Security without friction:**

    ```
    ✅ Intuitive permission request processes
    ✅ Clear communication of access limitations
    ✅ Self-service options where appropriate
    ✅ Transparent approval workflows
    ✅ Helpful error messages and guidance
    ```
  </Step>
</Steps>

***

<Card title="Enable Real-Time Collaboration" icon="users-cog">
  Learn how to set up live co-editing and real-time collaboration features for seamless teamwork.

  [Co-Editing Live →](/designing/collaboration/co-editing-live)
</Card>


# Share Links
Source: https://docs.figr.design/designing/collaboration/share-links

Create secure, customizable sharing links for design reviews, stakeholder feedback, and team collaboration.

# Share Links

Share your designs securely with stakeholders, clients, and team members through customizable sharing links. Control access, gather feedback, and maintain design confidentiality.

<info>
  **Secure collaboration:** Share designs with the right people, at the right time, with the right level of access - all while maintaining security and control over your design assets.
</info>

## Sharing Options

<Tabs>
  <Tab title="Public Links">
    **Open sharing for broad collaboration:**

    <Frame>
      <img alt="Interface for creating share links with various access and security options" />
    </Frame>

    **Public link features:**

    ```yaml theme={null}
    Access control:
    - View-only access (default)
    - Comment permissions
    - Download permissions
    - Time-limited access

    Security options:
    - Password protection
    - Domain restrictions
    - Expiration dates
    - Access logging

    Customization:
    - Custom link names
    - Branded sharing pages
    - Welcome messages
    - Usage instructions
    ```
  </Tab>

  <Tab title="Private Links">
    **Secure sharing for sensitive designs:**

    <CardGroup>
      <Card title="Invitation-Only" icon="lock">
        **Controlled access sharing:**

        * Email-based invitations
        * Account requirement for access
        * Revokable permissions
        * Audit trail tracking
      </Card>

      <Card title="Team-Only" icon="users">
        **Internal collaboration:**

        * Organization member access
        * Department-specific sharing
        * Role-based permissions
        * Automatic team sync
      </Card>
    </CardGroup>

    **Private sharing benefits:**

    ```yaml theme={null}
    Enhanced security:
    - No anonymous access
    - User authentication required
    - Activity monitoring
    - Immediate access revocation

    Advanced controls:
    - Granular permission settings
    - Time-based access windows
    - Device restrictions
    - Location-based access
    ```
  </Tab>

  <Tab title="Embedded Links">
    **Integration with existing workflows:**

    <AccordionGroup>
      <Accordion title="Website Embedding">
        ```html theme={null}
        <!-- Embed Figr design in webpage -->
        <iframe 
          src="https://share.figr.design/embed/abc123"
          width="800" 
          height="600"
          frameborder="0"
          allowfullscreen>
        </iframe>

        <!-- Responsive embedding -->
        <div class="figr-embed-container">
          <iframe 
            src="https://share.figr.design/embed/abc123"
            class="figr-embed-responsive">
          </iframe>
        </div>
        ```
      </Accordion>

      <Accordion title="Presentation Integration">
        ```yaml theme={null}
        Presentation platforms:
        - PowerPoint/Keynote embedding
        - Google Slides integration
        - Figma presentation mode
        - Custom presentation tools

        Benefits:
        - Live design updates
        - Interactive prototypes
        - High-resolution display
        - Seamless presentation flow
        ```
      </Accordion>

      <Accordion title="Documentation Integration">
        ```yaml theme={null}
        Documentation platforms:
        - Notion page embedding
        - Confluence integration
        - Wiki page inclusion
        - README file displays

        Use cases:
        - Design specification docs
        - Style guide presentations
        - Process documentation
        - Training materials
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Access Control Management

<Steps>
  <Step title="Permission Levels">
    **Granular access control options:**

    <Tabs>
      <Tab title="Viewer Permissions">
        ```yaml theme={null}
        View-only access includes:
        ✅ Design viewing and navigation
        ✅ Zoom and pan capabilities
        ✅ Layer inspection (if enabled)
        ✅ Measurement tools access
        ✅ Export basic formats (if enabled)

        Restrictions:
        ❌ No editing capabilities
        ❌ No comment creation
        ❌ No asset downloads
        ❌ No sharing permissions
        ❌ No version history access
        ```
      </Tab>

      <Tab title="Commenter Permissions">
        ```yaml theme={null}
        Feedback and review access:
        ✅ All viewer permissions
        ✅ Comment creation and replies
        ✅ Suggestion annotations
        ✅ Approval/rejection marking
        ✅ Thread participation

        Enhanced features:
        ✅ @mention capabilities
        ✅ Comment resolution tracking
        ✅ Feedback categorization
        ✅ Priority level assignment
        ✅ Status update notifications
        ```
      </Tab>

      <Tab title="Collaborator Permissions">
        ```yaml theme={null}
        Advanced collaboration access:
        ✅ All commenter permissions
        ✅ Design element inspection
        ✅ Asset download access
        ✅ High-resolution exports
        ✅ Prototype interaction

        Professional features:
        ✅ Specification viewing
        ✅ Code snippet access
        ✅ Design token inspection
        ✅ Component library access
        ✅ Version comparison tools
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Time-Based Access">
    **Temporary sharing with automatic expiration:**

    <Frame>
      <img alt="Interface showing time-based access controls with expiration settings" />
    </Frame>

    **Temporal access options:**

    ```yaml theme={null}
    Short-term sharing (1-7 days):
    - Client presentations
    - Quick feedback rounds
    - Emergency reviews
    - Time-sensitive approvals

    Medium-term sharing (1-4 weeks):
    - Project development cycles
    - Stakeholder review periods
    - User testing phases
    - Implementation planning

    Long-term sharing (1-6 months):
    - Ongoing project access
    - Client collaboration
    - Documentation reference
    - Style guide maintenance

    Permanent sharing:
    - Public portfolios
    - Open source projects
    - Educational materials
    - Community resources
    ```
  </Step>

  <Step title="Dynamic Access Control">
    **Smart permission management:**

    <AccordionGroup>
      <Accordion title="Conditional Access">
        ```yaml theme={null}
        Smart access rules:

        Time-based conditions:
        - Business hours only access
        - Weekend restriction
        - Timezone-aware permissions
        - Project phase alignment

        User-based conditions:
        - Role-specific access levels
        - Department-based permissions
        - Seniority-based privileges
        - Project involvement level

        Content-based conditions:
        - Sensitivity level restrictions
        - Confidentiality requirements
        - IP protection needs
        - Client-specific access
        ```
      </Accordion>

      <Accordion title="Automatic Adjustments">
        ```yaml theme={null}
        Permission automation:

        Project lifecycle integration:
        - Discovery phase: Broad access
        - Development phase: Team focus
        - Review phase: Stakeholder access
        - Launch phase: Public sharing

        User behavior adaptation:
        - Active users: Extended permissions
        - Inactive users: Reduced access
        - High-value feedback: Enhanced privileges
        - Policy violations: Restricted access
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Feedback Collection

<Tabs>
  <Tab title="Comment System">
    **Structured feedback collection:**

    <CardGroup>
      <Card title="Contextual Comments" icon="message-square">
        **Precise feedback placement:**

        * Pin comments to specific elements
        * Area-based feedback regions
        * Page-level general comments
        * Design-wide suggestions
      </Card>

      <Card title="Comment Threading" icon="message-circle">
        **Organized discussions:**

        * Reply chains and discussions
        * Comment resolution tracking
        * Status updates and follow-ups
        * Decision documentation
      </Card>
    </CardGroup>

    **Comment features:**

    ```yaml theme={null}
    Rich text formatting:
    - Bold, italic, underline text
    - Bullet points and numbering
    - Link insertion and references
    - Code snippet inclusion

    Media attachments:
    - Screenshot annotations
    - Reference image uploads
    - Document attachments
    - Video explanation links

    Categorization:
    - Feedback type tagging
    - Priority level assignment
    - Department categorization
    - Action item identification
    ```
  </Tab>

  <Tab title="Approval Workflows">
    **Structured review processes:**

    <Steps>
      <Step title="Review Assignment">
        Assign specific reviewers with defined responsibilities and deadlines
      </Step>

      <Step title="Feedback Collection">
        Gather structured feedback with approval/rejection decisions
      </Step>

      <Step title="Consensus Building">
        Facilitate discussion and resolution of conflicting feedback
      </Step>

      <Step title="Final Approval">
        Document final decisions and approval for implementation
      </Step>
    </Steps>

    **Workflow automation:**

    ```yaml theme={null}
    Automated notifications:
    - Review assignment alerts
    - Deadline reminders
    - Feedback submission confirmations
    - Approval milestone notifications

    Progress tracking:
    - Review completion status
    - Outstanding feedback items
    - Approval percentage tracking
    - Timeline adherence monitoring
    ```
  </Tab>

  <Tab title="Analytics and Insights">
    **Feedback pattern analysis:**

    <Frame>
      <img alt="Analytics dashboard showing feedback patterns, response times, and collaboration metrics" />
    </Frame>

    **Feedback metrics:**

    ```yaml theme={null}
    Engagement analytics:
    - View duration and frequency
    - Comment volume and quality
    - User participation rates
    - Response time analysis

    Quality indicators:
    - Actionable feedback percentage
    - Resolution rate tracking
    - Stakeholder satisfaction scores
    - Design iteration efficiency

    Collaboration insights:
    - Most active contributors
    - Feedback category distribution
    - Peak collaboration times
    - Cross-functional participation
    ```
  </Tab>
</Tabs>

## Security and Privacy

<Steps>
  <Step title="Data Protection">
    **Comprehensive security measures:**

    <Tabs>
      <Tab title="Encryption">
        ```yaml theme={null}
        Data security:
        - TLS 1.3 for data transmission
        - AES-256 encryption at rest
        - End-to-end encryption for sensitive shares
        - Secure key management

        Access security:
        - Multi-factor authentication support
        - SSO integration capabilities
        - Session management and timeouts
        - Device fingerprinting
        ```
      </Tab>

      <Tab title="Privacy Controls">
        ```yaml theme={null}
        Privacy protection:
        - Anonymous viewing options
        - Personal data minimization
        - GDPR compliance features
        - Data retention controls

        Confidentiality:
        - Watermarking options
        - Screenshot prevention
        - Right-click protection
        - Print restriction capabilities
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Compliance Features">
    **Enterprise-grade compliance:**

    <AccordionGroup>
      <Accordion title="Audit Trails">
        ```yaml theme={null}
        Activity logging:
        - User access tracking
        - Action timestamps
        - IP address logging
        - Device information capture

        Compliance reporting:
        - Access audit reports
        - Data handling documentation
        - Privacy compliance verification
        - Security incident tracking
        ```
      </Accordion>

      <Accordion title="Data Governance">
        ```yaml theme={null}
        Data management:
        - Retention policy enforcement
        - Automatic data purging
        - Export and portability
        - Right to deletion compliance

        Geographic compliance:
        - Data residency controls
        - Cross-border transfer restrictions
        - Regional privacy law compliance
        - Localized data processing
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Advanced Sharing Features

<CardGroup>
  <Card title="Branded Sharing" icon="paintbrush">
    **Custom branded experience:**

    * Company logo integration
    * Custom color schemes
    * Branded domain usage
    * Personalized welcome messages
    * Corporate footer inclusion
  </Card>

  <Card title="Integration Workflows" icon="plug">
    **Tool ecosystem integration:**

    * Slack sharing and notifications
    * Microsoft Teams integration
    * Email client embedding
    * Project management tool sync
    * Calendar meeting integration
  </Card>
</CardGroup>

## Sharing Best Practices

<Steps>
  <Step title="Access Strategy">
    **Plan appropriate access levels:**

    ```
    ✅ Use least privilege principle
    ✅ Set appropriate expiration dates
    ✅ Regular access review and cleanup
    ✅ Clear sharing purpose communication
    ✅ Document sharing decisions
    ```
  </Step>

  <Step title="Feedback Optimization">
    **Maximize feedback quality:**

    ```
    ✅ Provide context and objectives
    ✅ Set clear feedback guidelines
    ✅ Use structured review processes
    ✅ Follow up on action items
    ✅ Acknowledge contributions
    ```
  </Step>

  <Step title="Security Maintenance">
    **Maintain sharing security:**

    ```
    ✅ Regularly audit active shares
    ✅ Revoke unnecessary access
    ✅ Monitor for unusual activity
    ✅ Update security settings
    ✅ Train team on best practices
    ```
  </Step>
</Steps>

## Troubleshooting Common Issues

<AccordionGroup>
  <Accordion title="Access Problems">
    ```yaml theme={null}
    Issue: Users can't access shared designs
    Solutions:
    - Verify link hasn't expired
    - Check permission settings
    - Confirm user authentication
    - Test link functionality
    - Review access restrictions
    ```
  </Accordion>

  <Accordion title="Performance Issues">
    ```yaml theme={null}
    Issue: Slow loading of shared designs
    Solutions:
    - Optimize design file size
    - Check internet connection
    - Use appropriate sharing format
    - Enable progressive loading
    - Consider embedded alternatives
    ```
  </Accordion>

  <Accordion title="Security Concerns">
    ```yaml theme={null}
    Issue: Unauthorized access or sharing
    Solutions:
    - Revoke compromised links
    - Enable additional security measures
    - Review and update permissions
    - Implement stronger authentication
    - Audit access logs
    ```
  </Accordion>
</AccordionGroup>

***

<Card title="Manage Team Permissions" icon="shield">
  Learn how to set up detailed permission systems for different team roles and responsibilities.

  [Permissions →](/designing/collaboration/permissions)
</Card>


# Automatic Matching
Source: https://docs.figr.design/designing/design-system/automatic-matching

Figr automatically identifies and applies your design patterns, ensuring consistency and suggesting improvements across all designs.

# Automatic Matching

Figr's pattern recognition ensures design consistency without manual effort. Learn how automatic matching works and how to leverage it for better design systems.

<tip>
  **Effortless consistency:** Figr automatically identifies your design patterns and applies them consistently, while suggesting improvements to strengthen your design system.
</tip>

## How Automatic Matching Works

<Steps>
  <Step title="Pattern Recognition">
    **Figr analyzes your existing designs:**

    <Frame>
      <img alt="Interface showing Figr analyzing existing designs and identifying common patterns" />
    </Frame>

    **Analysis capabilities:**

    ```yaml theme={null}
    Visual pattern detection:
    - Color usage frequency and combinations
    - Typography hierarchies and relationships
    - Spacing patterns and rhythms
    - Component shapes and styling
    - Layout structures and grids

    Interaction pattern recognition:
    - Button behaviors and states
    - Form validation approaches
    - Navigation interaction models
    - Hover and focus effects
    - Animation and transition styles
    ```
  </Step>

  <Step title="Pattern Classification">
    **Organizing discovered patterns:**

    <Tabs>
      <Tab title="Component Patterns">
        ```yaml theme={null}
        Identified components:

        Button variations:
        - Primary: Blue background, white text
        - Secondary: White background, blue border
        - Danger: Red background, white text
        - Ghost: Transparent background, blue text

        Card patterns:
        - Standard: White background, subtle shadow
        - Elevated: Higher shadow, slight border
        - Flat: No shadow, border only
        - Highlighted: Colored left border accent
        ```
      </Tab>

      <Tab title="Layout Patterns">
        ```yaml theme={null}
        Structural patterns:

        Page layouts:
        - Dashboard: Sidebar + main content + right panel
        - Settings: Vertical navigation + form areas
        - List view: Header + filterable content + pagination
        - Detail view: Breadcrumbs + content + actions

        Component arrangements:
        - Form sections: Label + input + help text
        - Data rows: Icon + primary text + secondary + actions
        - Navigation items: Icon + label + badge/arrow
        ```
      </Tab>

      <Tab title="Content Patterns">
        ```yaml theme={null}
        Information patterns:

        Typography hierarchy:
        - Page titles: 32px, bold, brand color
        - Section headers: 24px, semibold, dark gray
        - Body text: 16px, regular, medium gray
        - Captions: 14px, regular, light gray

        Content organization:
        - Error messages: Icon + text + action button
        - Success states: Checkmark + title + description
        - Empty states: Illustration + headline + call-to-action
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Pattern Application">
    **Automatic pattern matching in new designs:**

    <AccordionGroup>
      <Accordion title="Context-Aware Matching">
        ```yaml theme={null}
        Smart pattern selection:

        Button context matching:
        Form submission → Primary button pattern
        Destructive action → Danger button pattern
        Secondary action → Secondary button pattern
        Navigation link → Ghost button pattern

        Layout context matching:
        User management → Settings layout pattern
        Data visualization → Dashboard layout pattern
        Content browsing → List view pattern
        ```
      </Accordion>

      <Accordion title="Confidence Scoring">
        ```yaml theme={null}
        Pattern match confidence:

        High confidence (90%+):
        - Exact color and typography matches
        - Identical component structures
        - Perfect spacing alignments

        Medium confidence (70-89%):
        - Similar but not identical patterns
        - Minor variations in implementation
        - Close but not exact measurements

        Low confidence (50-69%):
        - Conceptually similar patterns
        - Different implementation approaches
        - Potential pattern variations
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Pattern Enhancement Suggestions

<Tabs>
  <Tab title="Consistency Improvements">
    **Identifying and fixing inconsistencies:**

    <Frame>
      <img alt="Interface showing suggestions for improving design consistency across components" />
    </Frame>

    **Common improvement areas:**

    ```yaml theme={null}
    Color consistency:
    Issue: "Using #1a73e8 and #1976d2 for primary actions"
    Suggestion: "Standardize on single primary blue: #1a73e8"
    Impact: "Affects 23 components across 8 pages"

    Spacing inconsistency:
    Issue: "Card padding varies between 16px, 20px, and 24px"
    Suggestion: "Standardize card padding to 20px"
    Impact: "Creates uniform visual rhythm"

    Typography hierarchy:
    Issue: "Section headers use 22px, 24px, and 26px"
    Suggestion: "Use consistent 24px for all section headers"
    Impact: "Improves content hierarchy clarity"
    ```
  </Tab>

  <Tab title="Pattern Evolution">
    **Suggestions for pattern improvements:**

    <CardGroup>
      <Card title="Accessibility Enhancements" icon="universal-access">
        **Improve pattern accessibility:**

        * Increase color contrast ratios
        * Add focus indicators
        * Improve touch target sizes
        * Enhance keyboard navigation
      </Card>

      <Card title="Modern Pattern Updates" icon="refresh">
        **Evolve patterns with best practices:**

        * Update interaction conventions
        * Improve mobile responsiveness
        * Add loading and error states
        * Enhance visual feedback
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Missing Pattern Detection">
    **Identify gaps in your design system:**

    ```yaml theme={null}
    Common missing patterns:

    State variations:
    Found: Default button state
    Missing: Loading, disabled, hover states
    Recommendation: Complete button state library

    Responsive variations:
    Found: Desktop navigation
    Missing: Mobile navigation pattern
    Recommendation: Mobile-first navigation design

    Error handling:
    Found: Form validation
    Missing: Page-level error patterns
    Recommendation: Comprehensive error state system
    ```
  </Tab>
</Tabs>

## Advanced Matching Features

<Steps>
  <Step title="Semantic Pattern Understanding">
    **Beyond visual matching to purpose recognition:**

    <AccordionGroup>
      <Accordion title="Functional Classification">
        ```yaml theme={null}
        Purpose-based pattern recognition:

        Primary actions: "Get Started", "Save Changes", "Submit"
        Secondary actions: "Cancel", "Back", "Edit"
        Destructive actions: "Delete", "Remove", "Clear"
        Informational actions: "Learn More", "View Details", "Help"

        Context understanding:
        - Form submission buttons (primary style)
        - Navigation buttons (ghost style)
        - Confirmation dialogs (secondary + primary)
        - Error states (danger styling)
        ```
      </Accordion>

      <Accordion title="Content-Aware Matching">
        ```yaml theme={null}
        Content context recognition:

        User-generated content: Flexible containers, overflow handling
        System messages: Consistent alert styling, icon usage
        Marketing content: Brand-forward styling, engaging visuals
        Data displays: Information density, scanning optimization
        ```
      </Accordion>
    </AccordionGroup>
  </Step>

  <Step title="Cross-Platform Pattern Adaptation">
    **Intelligent pattern translation across platforms:**

    <Tabs>
      <Tab title="Web to Mobile">
        ```yaml theme={null}
        Adaptive pattern translation:

        Desktop hover states → Mobile press states
        Click interactions → Touch gestures
        Tooltips → Contextual panels
        Dropdown menus → Bottom sheets
        Multi-column layouts → Stacked layouts
        ```
      </Tab>

      <Tab title="Platform-Specific Patterns">
        ```yaml theme={null}
        Native pattern integration:

        iOS adaptations:
        - Navigation: Back buttons, tab bars
        - Actions: Swipe gestures, long press
        - Feedback: Haptic feedback integration

        Android adaptations:
        - Material Design components
        - Floating action buttons
        - Bottom navigation patterns
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Pattern Performance Optimization">
    **Suggest performance-optimized pattern implementations:**

    ```yaml theme={null}
    Performance improvements:

    Image optimization:
    Pattern: Hero image backgrounds
    Suggestion: WebP format with fallbacks
    Impact: 40% faster page loads

    Animation efficiency:
    Pattern: Button hover effects
    Suggestion: Transform-based animations
    Impact: Smoother 60fps animations

    Layout optimization:
    Pattern: Grid-based layouts
    Suggestion: CSS Grid over flexbox for complex layouts
    Impact: Better rendering performance
    ```
  </Step>
</Steps>

## Customizing Automatic Matching

<Tabs>
  <Tab title="Pattern Priorities">
    **Control which patterns take precedence:**

    <Frame>
      <img alt="Interface for setting pattern matching priorities and preferences" />
    </Frame>

    **Priority configuration:**

    ```yaml theme={null}
    Matching preferences:

    Brand consistency: High priority
    - Always use brand colors over generic
    - Maintain brand typography hierarchy
    - Apply brand-specific spacing

    Accessibility: Critical priority
    - Override patterns that fail accessibility
    - Prioritize WCAG-compliant variations
    - Suggest accessibility improvements

    Platform conventions: Medium priority
    - Follow iOS/Android design guidelines
    - Respect web usability conventions
    - Consider cross-platform consistency
    ```
  </Tab>

  <Tab title="Pattern Exceptions">
    **Define when to break pattern consistency:**

    ```yaml theme={null}
    Exception scenarios:

    Marketing pages:
    - Allow brand expression variations
    - Enable creative layout exploration
    - Permit non-standard color usage

    Error and edge cases:
    - Prioritize clarity over consistency
    - Use attention-grabbing variations
    - Apply emergency state patterns

    Experimental features:
    - Enable pattern innovation
    - Allow testing new approaches
    - Document experimental decisions
    ```
  </Tab>

  <Tab title="Learning Controls">
    **Manage how Figr learns from your designs:**

    <AccordionGroup>
      <Accordion title="Pattern Approval">
        ```yaml theme={null}
        Review and approval workflow:

        New pattern detection:
        1. Figr identifies potential new pattern
        2. Presents pattern for team review
        3. Team approves or rejects pattern
        4. Approved patterns added to library
        5. Rejected patterns marked as exceptions
        ```
      </Accordion>

      <Accordion title="Pattern Deprecation">
        ```yaml theme={null}
        Evolving away from old patterns:

        Deprecation process:
        1. Mark pattern as deprecated
        2. Set replacement pattern
        3. Gradual migration suggestions
        4. Timeline for pattern removal
        5. Impact assessment and team notification
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Pattern Quality Assurance

<Steps>
  <Step title="Automated Pattern Validation">
    **Quality checks for pattern consistency:**

    ```yaml theme={null}
    Validation checks:

    Accessibility compliance:
    - Color contrast ratio verification
    - Touch target size validation
    - Keyboard navigation support
    - Screen reader compatibility

    Visual consistency:
    - Typography scale adherence
    - Color palette compliance
    - Spacing system alignment
    - Component proportion harmony

    Technical feasibility:
    - Implementation complexity assessment
    - Performance impact evaluation
    - Cross-browser compatibility
    - Responsive behavior validation
    ```
  </Step>

  <Step title="Pattern Usage Analytics">
    **Track pattern effectiveness:**

    <CardGroup>
      <Card title="Usage Metrics" icon="chart-bar">
        **Pattern adoption tracking:**

        * Frequency of pattern application
        * Success rate of automatic matching
        * User satisfaction with suggestions
        * Time saved through automation
      </Card>

      <Card title="Performance Impact" icon="zap">
        **Pattern performance analysis:**

        * Loading time impact
        * User interaction success rates
        * Conversion rate improvements
        * Accessibility score improvements
      </Card>
    </CardGroup>
  </Step>

  <Step title="Continuous Improvement">
    **Evolve patterns based on data:**

    ```yaml theme={null}
    Improvement cycle:

    Data collection:
    - User behavior analytics
    - Design system usage patterns
    - Performance monitoring
    - Accessibility audits

    Pattern refinement:
    - Identify underperforming patterns
    - Test pattern variations
    - Update pattern definitions
    - Document improvement rationale
    ```
  </Step>
</Steps>

## Best Practices

<CardGroup>
  <Card title="Pattern Definition" icon="ruler">
    **Create clear, reusable patterns:**

    ✅ Define patterns with specific contexts
    ✅ Document pattern usage guidelines
    ✅ Include accessibility requirements
    ✅ Plan for responsive variations
    ✅ Consider cross-platform adaptations
  </Card>

  <Card title="System Evolution" icon="trending-up">
    **Grow your pattern library strategically:**

    ✅ Regular pattern audits and cleanup
    ✅ Gradual pattern evolution over revolution
    ✅ Team consensus on pattern changes
    ✅ Clear deprecation and migration paths
    ✅ Documentation of pattern decisions
  </Card>
</CardGroup>

***

<Card title="Phase 3 Complete!" icon="check-circle">
  **Congratulations!** You've completed the advanced designing features. Ready to move to precise editing and export capabilities.

  [Precise Edits →](/designing/edits/click-to-refine)
</Card>


# Setting Tokens
Source: https://docs.figr.design/designing/design-system/setting-tokens

Configure design tokens to ensure consistent visual language across all AI-generated designs and team collaboration.

# Setting Tokens

Design tokens are the foundation of consistent design systems. Figr uses your tokens to ensure every generated design matches your visual language perfectly.

<success>
  **Design system automation:** Set your tokens once, and Figr applies them consistently across all designs, maintaining brand integrity and visual consistency automatically.
</success>

## Token Configuration Process

<Steps>
  <Step title="Token Import">
    **Bring your existing design tokens into Figr:**

    <Frame>
      <img alt="Interface showing design token import from various sources like JSON, CSS, and design tools" />
    </Frame>

    **Supported formats:**

    ```yaml theme={null}
    File formats:
    ✅ JSON design tokens (W3C standard)
    ✅ CSS custom properties
    ✅ SCSS/SASS variables
    ✅ Style Dictionary outputs
    ✅ Figma design tokens (via plugin)
    ✅ Sketch shared styles

    Import methods:
    - File upload (drag & drop)
    - URL import from design tools
    - API integration
    - Manual token entry
    - Git repository sync
    ```
  </Step>

  <Step title="Token Organization">
    **Structure tokens for optimal usage:**

    <Tabs>
      <Tab title="Color Tokens">
        ```json theme={null}
        {
          "color": {
            "brand": {
              "primary": "#6366f1",
              "secondary": "#8b5cf6",
              "tertiary": "#06b6d4"
            },
            "semantic": {
              "success": "#10b981",
              "warning": "#f59e0b",
              "error": "#ef4444",
              "info": "#3b82f6"
            },
            "neutral": {
              "50": "#f9fafb",
              "100": "#f3f4f6",
              "500": "#6b7280",
              "900": "#111827"
            }
          }
        }
        ```
      </Tab>

      <Tab title="Typography Tokens">
        ```json theme={null}
        {
          "typography": {
            "font-family": {
              "sans": "Inter, system-ui, sans-serif",
              "serif": "Georgia, serif",
              "mono": "JetBrains Mono, monospace"
            },
            "font-size": {
              "xs": "0.75rem",
              "sm": "0.875rem",
              "base": "1rem",
              "lg": "1.125rem",
              "xl": "1.25rem",
              "2xl": "1.5rem",
              "3xl": "1.875rem"
            },
            "font-weight": {
              "normal": "400",
              "medium": "500",
              "semibold": "600",
              "bold": "700"
            }
          }
        }
        ```
      </Tab>

      <Tab title="Spacing Tokens">
        ```json theme={null}
        {
          "spacing": {
            "xs": "0.25rem",
            "sm": "0.5rem",
            "md": "1rem",
            "lg": "1.5rem",
            "xl": "2rem",
            "2xl": "3rem",
            "3xl": "4rem"
          },
          "border-radius": {
            "none": "0",
            "sm": "0.125rem",
            "md": "0.375rem",
            "lg": "0.5rem",
            "xl": "0.75rem",
            "full": "9999px"
          }
        }
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Token Validation">
    **Ensure token quality and consistency:**

    <AccordionGroup>
      <Accordion title="Automatic Validation">
        ```yaml theme={null}
        Quality checks:
        ✅ Color contrast ratio validation
        ✅ Typography scale consistency
        ✅ Spacing system harmony
        ✅ Naming convention compliance
        ✅ Token relationship verification

        Accessibility validation:
        ✅ WCAG AA compliance checking
        ✅ Color blindness compatibility
        ✅ Minimum touch target sizes
        ✅ Typography readability scores
        ```
      </Accordion>

      <Accordion title="Consistency Analysis">
        ```yaml theme={null}
        System coherence:
        - Mathematical scale relationships
        - Brand color harmony
        - Typography hierarchy logic
        - Component token alignment
        - Cross-platform compatibility
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Token Categories

<Tabs>
  <Tab title="Core Visual Tokens">
    **Fundamental design system elements:**

    <CardGroup>
      <Card title="Color System" icon="palette">
        **Complete color architecture:**

        * Primary brand colors
        * Secondary and accent colors
        * Semantic color meanings
        * Neutral color scales
        * Dark mode variations
        * Accessibility-compliant contrast pairs
      </Card>

      <Card title="Typography System" icon="type">
        **Text styling foundation:**

        * Font family selections
        * Size and scale definitions
        * Weight and style variations
        * Line height relationships
        * Letter spacing values
        * Responsive typography scales
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Layout & Spacing">
    **Structural design elements:**

    <AccordionGroup>
      <Accordion title="Spacing Scale">
        ```yaml theme={null}
        Spacing system design:
        Base unit: 4px (0.25rem)
        Scale progression: Linear or geometric
        Component spacing: Defined relationships
        Layout margins: Consistent application
        Responsive adjustments: Breakpoint-specific values
        ```
      </Accordion>

      <Accordion title="Layout Grids">
        ```yaml theme={null}
        Grid system tokens:
        Column counts: 12, 16, or custom
        Gutter widths: Responsive values
        Container max-widths: Breakpoint definitions
        Margin calculations: Auto or fixed
        Nested grid behaviors: Inheritance rules
        ```
      </Accordion>

      <Accordion title="Border & Shadow">
        ```yaml theme={null}
        Surface design tokens:
        Border radius: Scale from subtle to rounded
        Border widths: Consistent stroke weights
        Shadow depths: Elevation system
        Opacity levels: Transparency standards
        Blur values: Effect intensity scale
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Interactive Elements">
    **Component-specific tokens:**

    ```yaml theme={null}
    Button tokens:
    - Height variations (sm, md, lg)
    - Padding specifications
    - Border radius applications
    - Color state definitions
    - Typography scale assignments

    Form element tokens:
    - Input field sizing
    - Border and focus states
    - Label positioning
    - Error state styling
    - Placeholder text appearance

    Navigation tokens:
    - Menu item spacing
    - Active state indicators
    - Hover effect definitions
    - Breadcrumb separators
    - Mobile navigation patterns
    ```
  </Tab>
</Tabs>

## Advanced Token Management

<Steps>
  <Step title="Token Relationships">
    **Create systematic token dependencies:**

    <Frame>
      <img alt="Diagram showing how design tokens relate to each other in a hierarchical system" />
    </Frame>

    **Relationship types:**

    ```yaml theme={null}
    Alias tokens:
    color-primary: "{color.brand.primary}"
    color-error: "{color.semantic.error}"

    Composite tokens:
    button-primary-bg: "{color.brand.primary}"
    button-primary-text: "{color.neutral.white}"
    button-primary-border: "{color.brand.primary}"

    Calculated tokens:
    spacing-component: "calc({spacing.md} * 1.5)"
    color-primary-hover: "hsl(from {color.brand.primary} h s calc(l * 0.9))"
    ```
  </Step>

  <Step title="Contextual Variations">
    **Handle different contexts and themes:**

    <Tabs>
      <Tab title="Dark Mode">
        ```json theme={null}
        {
          "color": {
            "background": {
              "light": "#ffffff",
              "dark": "#0f0f0f"
            },
            "text": {
              "light": "#1f2937",
              "dark": "#f9fafb"
            }
          }
        }
        ```
      </Tab>

      <Tab title="Platform Variations">
        ```json theme={null}
        {
          "component": {
            "button": {
              "height": {
                "web": "2.5rem",
                "mobile": "3rem",
                "desktop": "2.25rem"
              }
            }
          }
        }
        ```
      </Tab>

      <Tab title="Brand Variations">
        ```json theme={null}
        {
          "theme": {
            "consumer": {
              "primary": "#6366f1",
              "radius": "0.5rem"
            },
            "enterprise": {
              "primary": "#1f2937",
              "radius": "0.25rem"
            }
          }
        }
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Token Documentation">
    **Comprehensive usage guidelines:**

    ```yaml theme={null}
    Documentation elements:

    Token descriptions:
    - Purpose and intended usage
    - Application examples
    - Usage restrictions
    - Accessibility considerations

    Visual examples:
    - Component usage demonstrations
    - Color combination examples
    - Typography scale applications
    - Spacing relationship illustrations

    Code examples:
    - CSS implementation snippets
    - Component library usage
    - Platform-specific applications
    - Integration with frameworks
    ```
  </Step>
</Steps>

## Token Application in Figr

<Tabs>
  <Tab title="Automatic Application">
    **How Figr uses your tokens:**

    <CardGroup>
      <Card title="Design Generation" icon="magic-wand">
        **AI applies tokens automatically:**

        * Color selection from your palette
        * Typography scale adherence
        * Spacing system compliance
        * Component pattern consistency
      </Card>

      <Card title="Design Validation" icon="check-shield">
        **Token compliance checking:**

        * Off-brand color detection
        * Spacing inconsistency alerts
        * Typography scale violations
        * Accessibility compliance warnings
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Design System Evolution">
    **Token updates propagate automatically:**

    <Frame>
      <img alt="Interface showing how token updates automatically update existing designs" />
    </Frame>

    **Update workflows:**

    ```yaml theme={null}
    Global updates:
    1. Import new token values
    2. Review impact assessment
    3. Approve changes
    4. Automatic design updates
    5. Team notification

    Gradual migration:
    1. Add new tokens alongside old
    2. Update designs incrementally
    3. Deprecate old tokens
    4. Remove unused tokens
    5. Clean up token library
    ```
  </Tab>

  <Tab title="Export Integration">
    **Tokens flow to development:**

    ```yaml theme={null}
    Export formats:

    CSS custom properties:
    :root {
      --color-primary: #6366f1;
      --spacing-md: 1rem;
      --font-size-lg: 1.125rem;
    }

    JavaScript tokens:
    export const tokens = {
      color: { primary: '#6366f1' },
      spacing: { md: '1rem' },
      fontSize: { lg: '1.125rem' }
    };

    Platform-specific:
    - iOS: Swift color extensions
    - Android: XML color resources
    - React Native: StyleSheet objects
    - Flutter: Dart theme definitions
    ```
  </Tab>
</Tabs>

## Token Best Practices

<CardGroup>
  <Card title="System Design" icon="cog">
    **Create scalable token systems:**

    ✅ Use mathematical relationships for spacing scales
    ✅ Design color systems with accessibility in mind
    ✅ Create consistent naming conventions
    ✅ Plan for dark mode and themes from start
    ✅ Document usage guidelines thoroughly
  </Card>

  <Card title="Maintenance" icon="wrench">
    **Keep tokens healthy over time:**

    ✅ Regular token audits and cleanup
    ✅ Version control for token changes
    ✅ Impact assessment before updates
    ✅ Team training on token usage
    ✅ Automated validation in workflows
  </Card>
</CardGroup>

## Troubleshooting Common Issues

<AccordionGroup>
  <Accordion title="Token Import Problems">
    **Resolving import issues:**

    ```yaml theme={null}
    Common solutions:
    - Validate JSON syntax before import
    - Check file encoding (UTF-8 recommended)
    - Verify token naming conventions
    - Ensure color values use consistent formats
    - Review file size limits and token count
    ```
  </Accordion>

  <Accordion title="Inconsistent Application">
    **Fixing token usage issues:**

    ```yaml theme={null}
    Resolution steps:
    - Review token relationship definitions
    - Check for naming conflicts
    - Validate token value formats
    - Verify platform-specific mappings
    - Update component library connections
    ```
  </Accordion>

  <Accordion title="Performance Impact">
    **Optimizing token performance:**

    ```yaml theme={null}
    Optimization strategies:
    - Reduce token count through consolidation
    - Use efficient token formats
    - Implement caching strategies
    - Optimize token loading order
    - Consider runtime vs build-time application
    ```
  </Accordion>
</AccordionGroup>

***

<Card title="Automatic Design System Matching" icon="target">
  Learn how Figr automatically matches your design patterns and suggests improvements to maintain consistency.

  [Automatic Matching →](/designing/design-system/automatic-matching)
</Card>


# Click to Refine
Source: https://docs.figr.design/designing/edits/click-to-refine

Make precise adjustments to AI-generated designs through intuitive click-based editing and contextual refinements.

# Click to Refine

Transform AI-generated designs with precise, contextual edits. Figr's click-to-refine system lets you adjust any element while maintaining design system consistency and product context.

<tip>
  **Intelligent editing:** Click any element to see contextual refinement options that understand your design system, user needs, and technical constraints.
</tip>

## How Click-to-Refine Works

<Steps>
  <Step title="Element Selection">
    **Click any design element for instant refinement options:**

    <Frame>
      <img alt="Interface showing contextual editing options when clicking on a button element" />
    </Frame>

    **What you can refine:**

    ```yaml theme={null}
    Visual elements:
    - Colors and backgrounds
    - Typography and text content
    - Spacing and sizing
    - Borders and shadows
    - Images and icons

    Interactive elements:
    - Button states and styling
    - Form inputs and validation
    - Navigation behaviors
    - Link destinations and styling
    - Interactive feedback

    Layout elements:
    - Component positioning
    - Grid and alignment
    - Responsive behavior
    - Content hierarchy
    - Whitespace distribution
    ```
  </Step>

  <Step title="Contextual Suggestions">
    **Smart refinement options based on element context:**

    <Tabs>
      <Tab title="Button Refinements">
        **Context-aware button options:**

        ```yaml theme={null}
        Style variations:
        - Primary → Secondary button style
        - Size: Small → Medium → Large
        - Shape: Square → Rounded → Pill
        - State: Default → Hover → Disabled

        Content adjustments:
        - Text: "Submit" → "Save Changes"
        - Icon: Add checkmark or arrow
        - Loading: Add spinner state
        - Confirmation: Add success state

        Behavioral changes:
        - Action: Form submit → Page navigation
        - Validation: Add form validation trigger
        - Feedback: Success message display
        ```
      </Tab>

      <Tab title="Text Refinements">
        **Typography and content options:**

        ```yaml theme={null}
        Typography adjustments:
        - Size: Follow design system scale
        - Weight: Light → Regular → Bold
        - Color: Brand palette options
        - Alignment: Left → Center → Right

        Content improvements:
        - Clarity: "Click here" → "Download report"
        - Tone: Technical → Conversational
        - Length: Expand or condense text
        - Accessibility: Add alt text, labels

        Hierarchy changes:
        - Heading level: H3 → H2 → H1
        - Emphasis: Regular → Highlighted
        - Supporting text: Add descriptions
        ```
      </Tab>

      <Tab title="Layout Refinements">
        **Spacing and positioning options:**

        ```yaml theme={null}
        Spacing adjustments:
        - Padding: Tight → Comfortable → Spacious
        - Margins: Design system increments
        - Gaps: Between elements optimization
        - Alignment: Grid-based positioning

        Positioning changes:
        - Horizontal: Left → Center → Right
        - Vertical: Top → Middle → Bottom
        - Stacking: Layer order adjustments
        - Responsive: Mobile behavior tuning

        Container adjustments:
        - Width: Fixed → Fluid → Constrained
        - Height: Auto → Fixed → Min/max
        - Overflow: Hidden → Scroll → Visible
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Design System Compliance">
    **Maintain consistency while editing:**

    <AccordionGroup>
      <Accordion title="Automatic Constraint Checking">
        ```yaml theme={null}
        System validation:
        - Color palette compliance
        - Typography scale adherence
        - Spacing system alignment
        - Component pattern consistency
        - Brand guideline compliance

        Suggestions when off-system:
        "Custom color #ff6b35 detected"
        → "Use brand orange: #f59e0b instead?"
        → "Add to design system as new accent color?"
        ```
      </Accordion>

      <Accordion title="Smart Alternatives">
        ```yaml theme={null}
        System-compliant options:

        Color selection:
        - Brand palette priorities
        - Accessibility-compliant combinations
        - Semantic color meanings
        - Dark mode considerations

        Typography choices:
        - Hierarchy-appropriate sizes
        - Weight combinations that work
        - Line height optimization
        - Reading experience improvements
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Editing Modes

<Tabs>
  <Tab title="Quick Adjustments">
    **Instant refinements for common changes:**

    <CardGroup>
      <Card title="One-Click Fixes" icon="zap">
        **Common quick adjustments:**

        * Make button primary/secondary
        * Increase/decrease text size
        * Add/remove element spacing
        * Change color to brand palette
        * Toggle between light/dark variants
      </Card>

      <Card title="Smart Suggestions" icon="lightbulb">
        **AI-powered improvements:**

        * "Make this more accessible"
        * "Optimize for mobile"
        * "Improve visual hierarchy"
        * "Match existing patterns"
        * "Enhance call-to-action"
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Detailed Editing">
    **Precise control for specific adjustments:**

    <Frame>
      <img alt="Detailed editing panel showing precise controls for typography, spacing, and styling" />
    </Frame>

    **Detailed controls:**

    ```yaml theme={null}
    Typography precision:
    - Font size: Exact pixel values or rem units
    - Line height: Optimal reading ratios
    - Letter spacing: Fine-tuned adjustments
    - Text decoration: Underlines, emphasis

    Spacing precision:
    - Margin: Top, right, bottom, left values
    - Padding: Component-specific spacing
    - Gaps: Flexbox and grid spacing
    - Alignment: Pixel-perfect positioning

    Visual effects:
    - Shadows: Depth and direction
    - Borders: Width, style, color
    - Opacity: Transparency levels
    - Transforms: Rotation, scale, position
    ```
  </Tab>

  <Tab title="Bulk Editing">
    **Apply changes to multiple elements:**

    <Steps>
      <Step title="Selection">
        Select multiple similar elements (buttons, text, cards)
      </Step>

      <Step title="Batch Operations">
        Apply consistent changes across selected elements
      </Step>

      <Step title="Pattern Creation">
        Save bulk edits as new component patterns
      </Step>
    </Steps>

    **Bulk edit examples:**

    ```yaml theme={null}
    Multi-element changes:
    - Update all button colors to new brand palette
    - Increase spacing on all form fields
    - Change all icons to outlined style
    - Apply consistent border radius to cards
    - Update typography across similar text elements
    ```
  </Tab>
</Tabs>

## Context-Aware Refinements

<Steps>
  <Step title="User Context Application">
    **Edits informed by your user research:**

    <AccordionGroup>
      <Accordion title="User Behavior Integration">
        ```yaml theme={null}
        Editing suggestions based on user data:

        "Users often miss this button"
        → Increase size and contrast
        → Add icon for better recognition
        → Move to more prominent location

        "Mobile users struggle with this form"
        → Larger touch targets
        → Simplified input methods
        → Better error messaging

        "Users expect this action here"
        → Relocate to standard position
        → Use familiar interaction pattern
        → Add supporting context
        ```
      </Accordion>

      <Accordion title="Accessibility Improvements">
        ```yaml theme={null}
        Automatic accessibility enhancements:

        Color contrast: Suggest WCAG-compliant alternatives
        Touch targets: Ensure 44px minimum size
        Focus indicators: Add visible focus states
        Screen readers: Improve alt text and labels
        Keyboard navigation: Enhance tab order
        ```
      </Accordion>
    </AccordionGroup>
  </Step>

  <Step title="Technical Context Integration">
    **Edits that consider implementation reality:**

    <Tabs>
      <Tab title="Performance Optimization">
        ```yaml theme={null}
        Performance-aware suggestions:

        Image optimization:
        "Large image detected" → "Compress or use WebP format?"

        Animation efficiency:
        "Complex animation" → "Use CSS transforms for better performance?"

        Layout optimization:
        "Nested flexbox" → "Consider CSS Grid for this layout?"
        ```
      </Tab>

      <Tab title="Browser Compatibility">
        ```yaml theme={null}
        Cross-browser considerations:

        Modern features:
        "CSS Grid used" → "Fallback for IE11 needed?"

        Progressive enhancement:
        "Advanced CSS" → "Graceful degradation planned?"

        Feature detection:
        "New API usage" → "Feature detection recommended?"
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Brand Context Maintenance">
    **Keep edits aligned with brand guidelines:**

    ```yaml theme={null}
    Brand consistency checks:

    Color usage:
    "Off-brand color detected"
    → Show nearest brand-compliant alternatives
    → Explain color meaning and usage

    Typography hierarchy:
    "Heading level inconsistent"
    → Suggest proper hierarchy level
    → Show content structure implications

    Component patterns:
    "Custom component created"
    → Check against existing patterns
    → Suggest standardization opportunities
    ```
  </Step>
</Steps>

## Advanced Refinement Features

<Tabs>
  <Tab title="Natural Language Editing">
    **Describe changes in plain English:**

    <Frame>
      <img alt="Interface showing natural language input for design changes" />
    </Frame>

    **Example commands:**

    ```yaml theme={null}
    Content changes:
    "Make this heading larger and blue"
    "Change button text to 'Get Started'"
    "Add an icon to this button"
    "Make this text easier to read"

    Layout adjustments:
    "Move this button to the right"
    "Add more space between these elements"
    "Make this section full width"
    "Stack these elements on mobile"

    Style modifications:
    "Make this look more like our other buttons"
    "Increase the contrast for accessibility"
    "Round the corners more"
    "Add a subtle shadow"
    ```
  </Tab>

  <Tab title="Conditional Refinements">
    **Context-dependent changes:**

    <AccordionGroup>
      <Accordion title="Responsive Variations">
        ```yaml theme={null}
        Device-specific refinements:

        Desktop: Larger spacing, hover effects
        Tablet: Medium spacing, touch-friendly
        Mobile: Compact layout, thumb-accessible

        Conditional logic:
        "On mobile: Stack vertically"
        "On desktop: Show additional details"
        "On touch devices: Larger tap targets"
        ```
      </Accordion>

      <Accordion title="User State Variations">
        ```yaml theme={null}
        Context-aware presentations:

        New users: Simplified interface, more guidance
        Power users: Advanced features, shortcuts
        Mobile users: Optimized for one-handed use
        Enterprise users: Compliance indicators, audit trails

        Dynamic adjustments:
        "For first-time users: Add tooltips"
        "For return visitors: Hide onboarding"
        "For admin users: Show management options"
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="A/B Testing Integration">
    **Create variations for testing:**

    ```yaml theme={null}
    Variation creation:

    Button variations:
    - Version A: Blue primary button
    - Version B: Green primary button
    - Test: Conversion rate comparison

    Layout variations:
    - Version A: Sidebar navigation
    - Version B: Top navigation
    - Test: User task completion rates

    Content variations:
    - Version A: "Sign Up Now"
    - Version B: "Get Started Free"
    - Test: Click-through rates
    ```
  </Tab>
</Tabs>

## Best Practices for Effective Refinement

<CardGroup>
  <Card title="Systematic Editing" icon="list-check">
    **Organized refinement approach:**

    ✅ Start with content and hierarchy
    ✅ Refine layout and spacing
    ✅ Adjust visual styling last
    ✅ Test refinements on different devices
    ✅ Validate against design system
  </Card>

  <Card title="User-Centered Refinements" icon="users">
    **Keep user needs central:**

    ✅ Consider accessibility in every edit
    ✅ Test changes with real users
    ✅ Maintain familiar interaction patterns
    ✅ Optimize for primary user tasks
    ✅ Document refinement reasoning
  </Card>
</CardGroup>

## Common Refinement Scenarios

<AccordionGroup>
  <Accordion title="Improving Button Effectiveness">
    ```yaml theme={null}
    Problem: Low click-through rates on CTA button

    Refinements applied:
    - Color: Changed to high-contrast brand primary
    - Size: Increased to improve visibility
    - Text: Made more action-oriented
    - Position: Moved above the fold
    - Context: Added supporting benefit text

    Result: 23% improvement in conversion
    ```
  </Accordion>

  <Accordion title="Mobile Optimization">
    ```yaml theme={null}
    Problem: Desktop design difficult to use on mobile

    Refinements applied:
    - Touch targets: Increased to 44px minimum
    - Navigation: Simplified to essential items
    - Text: Increased size for readability
    - Spacing: Optimized for thumb navigation
    - Forms: Streamlined input requirements

    Result: 35% reduction in mobile bounce rate
    ```
  </Accordion>

  <Accordion title="Accessibility Enhancement">
    ```yaml theme={null}
    Problem: Design fails accessibility audit

    Refinements applied:
    - Contrast: Improved color contrast ratios
    - Focus: Added visible focus indicators
    - Labels: Enhanced form input labels
    - Structure: Improved heading hierarchy
    - Alt text: Added descriptive image alt text

    Result: WCAG 2.1 AA compliance achieved
    ```
  </Accordion>
</AccordionGroup>

***

<Card title="Explore Micro-Improvements" icon="search-plus">
  Learn how to make small but impactful refinements that significantly enhance user experience.

  [Micro Improvements →](/designing/edits/micro-improvements)
</Card>


# Micro Improvements
Source: https://docs.figr.design/designing/edits/micro-improvements

Make small but impactful design refinements that significantly enhance user experience and interface polish.

# Micro Improvements

Small details create exceptional user experiences. Figr helps you identify and implement micro-improvements that make your interface feel polished, professional, and delightful to use.

<success>
  **Details matter:** Micro-improvements often have outsized impact on user perception and satisfaction. These small refinements separate good interfaces from great ones.
</success>

## Categories of Micro Improvements

<Tabs>
  <Tab title="Visual Polish">
    **Subtle enhancements that improve visual appeal:**

    <Frame>
      <img alt="Before and after comparison showing subtle visual improvements like shadows, spacing, and typography" />
    </Frame>

    **Visual refinement areas:**

    ```yaml theme={null}
    Typography refinements:
    - Line height optimization for readability
    - Letter spacing adjustments for clarity
    - Font weight balancing across hierarchy
    - Improved text color for better contrast

    Spacing improvements:
    - Consistent rhythm between elements
    - Optical alignment over mathematical precision
    - Breathing room around interactive elements
    - Balanced whitespace distribution

    Color enhancements:
    - Subtle gradients instead of flat colors
    - Color temperature consistency
    - Hover state refinements
    - Border color optimization

    Surface treatments:
    - Subtle shadows for depth perception
    - Border radius consistency
    - Surface texture improvements
    - Layering and elevation clarity
    ```
  </Tab>

  <Tab title="Interaction Refinements">
    **Enhance how users interact with elements:**

    <CardGroup>
      <Card title="Hover Effects" icon="mouse-pointer">
        **Subtle feedback improvements:**

        * Smooth color transitions
        * Gentle scale animations
        * Shadow depth changes
        * Cursor type optimization
      </Card>

      <Card title="State Clarity" icon="toggle-on">
        **Clear interaction states:**

        * Active state differentiation
        * Disabled state visibility
        * Loading state elegance
        * Selected state prominence
      </Card>
    </CardGroup>

    **Interaction improvement examples:**

    ```yaml theme={null}
    Button refinements:
    - Hover: Slight scale (1.02x) + shadow increase
    - Active: Brief scale down (0.98x) for tactile feedback
    - Focus: Clear outline that matches brand colors
    - Disabled: Reduced opacity + cursor change

    Form enhancements:
    - Focus rings that complement design
    - Smooth transitions between states
    - Inline validation with gentle animations
    - Clear error states with helpful messaging

    Navigation improvements:
    - Smooth underline animations for links
    - Breadcrumb hover states
    - Active page indicators with subtle backgrounds
    - Menu item transitions with easing
    ```
  </Tab>

  <Tab title="Content Micro-Copy">
    **Small text improvements with big impact:**

    <AccordionGroup>
      <Accordion title="Error Messages">
        ```yaml theme={null}
        Instead of: "Error: Invalid input"
        Improved: "Please enter a valid email address"

        Instead of: "Password incorrect"
        Improved: "Password doesn't match. Try again or reset your password"

        Instead of: "Field required"
        Improved: "We need your email to send you updates"
        ```
      </Accordion>

      <Accordion title="Button Text">
        ```yaml theme={null}
        Instead of: "Submit"
        Improved: "Create Account"

        Instead of: "OK"
        Improved: "Save Changes"

        Instead of: "Click Here"
        Improved: "Download Report"

        Instead of: "Next"
        Improved: "Continue to Payment"
        ```
      </Accordion>

      <Accordion title="Helper Text">
        ```yaml theme={null}
        Form guidance:
        Instead of: "Enter password"
        Improved: "Choose a password with at least 8 characters"

        Process explanation:
        Instead of: "Loading..."
        Improved: "Setting up your workspace..."

        Context help:
        Instead of: "Optional"
        Improved: "We'll use this to personalize your experience"
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## AI-Suggested Micro Improvements

<Steps>
  <Step title="Automatic Detection">
    **Figr identifies improvement opportunities:**

    <Tabs>
      <Tab title="Visual Inconsistencies">
        ```yaml theme={null}
        Detected issues:

        "Button shadows vary between 2px and 4px"
        → Suggestion: "Standardize shadows to 3px for consistency"

        "Text colors use similar but different grays"
        → Suggestion: "Use single gray scale: #6b7280 for all secondary text"

        "Border radius inconsistent: 4px, 6px, 8px used"
        → Suggestion: "Standardize to 6px for medium components"
        ```
      </Tab>

      <Tab title="Accessibility Gaps">
        ```yaml theme={null}
        Identified improvements:

        "Focus indicators barely visible"
        → Suggestion: "Increase focus ring width to 2px with brand color"

        "Clickable elements too close together"
        → Suggestion: "Add 8px spacing for easier touch targeting"

        "Form labels lack clear association"
        → Suggestion: "Strengthen label-input visual connection"
        ```
      </Tab>

      <Tab title="User Experience Friction">
        ```yaml theme={null}
        UX enhancement opportunities:

        "Empty states lack guidance"
        → Suggestion: "Add helpful next steps to empty states"

        "Long forms lack progress indication"
        → Suggestion: "Add progress bar to multi-step forms"

        "Success states disappear too quickly"
        → Suggestion: "Extend success message duration to 4 seconds"
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Context-Aware Suggestions">
    **Improvements tailored to your specific product:**

    <Frame>
      <img alt="Interface showing context-specific improvement suggestions based on product type and user behavior" />
    </Frame>

    **Product context influences:**

    ```yaml theme={null}
    B2B SaaS improvements:
    - Professional color palette refinements
    - Data-dense layout optimizations
    - Keyboard shortcut accessibility
    - Bulk action clarity enhancements

    E-commerce improvements:
    - Product image optimization
    - Trust signal prominence
    - Cart interaction smoothness
    - Checkout flow refinements

    Consumer app improvements:
    - Playful micro-interactions
    - Gesture-friendly touch targets
    - Delightful loading animations
    - Social sharing enhancements
    ```
  </Step>

  <Step title="Priority-Based Recommendations">
    **Focus on high-impact improvements first:**

    <AccordionGroup>
      <Accordion title="High Impact - Low Effort">
        ```yaml theme={null}
        Quick wins:
        - Improve button hover states (15 minutes)
        - Standardize spacing values (30 minutes)
        - Enhance form validation messages (20 minutes)
        - Optimize color contrast (10 minutes)

        Expected impact: Immediate user experience improvement
        ```
      </Accordion>

      <Accordion title="High Impact - Medium Effort">
        ```yaml theme={null}
        Strategic improvements:
        - Redesign empty states with guidance (2 hours)
        - Add loading animations (1 hour)
        - Improve mobile touch targets (1.5 hours)
        - Enhance error recovery flows (3 hours)

        Expected impact: Significant usability gains
        ```
      </Accordion>

      <Accordion title="Medium Impact - Low Effort">
        ```yaml theme={null}
        Polish improvements:
        - Refine icon alignment (30 minutes)
        - Optimize typography line heights (20 minutes)
        - Enhance shadow consistency (25 minutes)
        - Improve border radius harmony (15 minutes)

        Expected impact: Professional polish increase
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Specific Improvement Techniques

<Tabs>
  <Tab title="Typography Micro-Refinements">
    **Small text adjustments with big impact:**

    <CardGroup>
      <Card title="Readability Optimization" icon="eye">
        **Technical improvements:**

        * Line height: 1.4-1.6 for body text
        * Character spacing: -0.02em for headlines
        * Font weight: Optimize for screen rendering
        * Color contrast: Exceed WCAG minimums
      </Card>

      <Card title="Hierarchy Enhancement" icon="layers">
        **Visual organization:**

        * Size relationships: Clear scale jumps
        * Weight contrast: Appropriate emphasis
        * Color coding: Semantic meaning
        * Spacing rhythm: Consistent flow
      </Card>
    </CardGroup>

    **Typography improvement examples:**

    ```yaml theme={null}
    Before: font-size: 16px; line-height: 1.2;
    After: font-size: 16px; line-height: 1.5; letter-spacing: 0.01em;
    Impact: 15% improvement in reading comprehension

    Before: h2 { font-size: 20px; margin: 10px 0; }
    After: h2 { font-size: 24px; margin: 32px 0 16px; font-weight: 600; }
    Impact: Clearer content hierarchy
    ```
  </Tab>

  <Tab title="Animation and Transitions">
    **Smooth interactions that feel natural:**

    <Steps>
      <Step title="Timing Optimization">
        Use appropriate durations for different interaction types
      </Step>

      <Step title="Easing Functions">
        Apply natural motion curves for realistic feel
      </Step>

      <Step title="Performance Consideration">
        Ensure 60fps smoothness across devices
      </Step>
    </Steps>

    **Animation improvements:**

    ```css theme={null}
    /* Button hover - smooth and subtle */
    .button {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .button:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* Form focus - clear feedback */
    .input {
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .input:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    /* Page transitions - smooth navigation */
    .page-transition {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    ```
  </Tab>

  <Tab title="Loading and Feedback">
    **Keep users informed and engaged:**

    <AccordionGroup>
      <Accordion title="Loading State Improvements">
        ```yaml theme={null}
        Instead of: Generic spinner
        Improved: Context-aware loading messages

        Examples:
        "Saving your changes..."
        "Analyzing your data..."
        "Preparing your report..."
        "Almost ready..."

        Visual enhancements:
        - Skeleton screens for content areas
        - Progress bars for known durations
        - Animated placeholders for images
        - Micro-interactions during waits
        ```
      </Accordion>

      <Accordion title="Success Feedback">
        ```yaml theme={null}
        Immediate feedback:
        - Green checkmark with "Saved!" message
        - Subtle highlight of updated content
        - Toast notification with action confirmation
        - Gentle animation to confirm interaction

        Persistence considerations:
        - Auto-dismiss after 3-4 seconds
        - Manual dismiss option available
        - Stack multiple notifications gracefully
        - Clear visual hierarchy for importance
        ```
      </Accordion>

      <Accordion title="Error Prevention">
        ```yaml theme={null}
        Proactive improvements:
        - Real-time form validation
        - Helpful format examples
        - Auto-correction suggestions
        - Clear constraint explanations

        Error recovery:
        - Specific error descriptions
        - Clear resolution steps
        - Preserve user input when possible
        - Offer alternative actions
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Mobile-Specific Micro Improvements

<Steps>
  <Step title="Touch Interaction Optimization">
    **Enhance mobile usability:**

    ```yaml theme={null}
    Touch target improvements:
    - Minimum 44px tap targets
    - Adequate spacing between clickable elements
    - Clear visual feedback on touch
    - Prevent accidental touches

    Gesture enhancements:
    - Smooth scroll momentum
    - Pull-to-refresh implementation
    - Swipe gesture support
    - Pinch-to-zoom where appropriate

    Thumb navigation:
    - Critical actions in thumb reach zone
    - Navigation at bottom for iOS
    - One-handed operation support
    - Comfortable grip considerations
    ```
  </Step>

  <Step title="Mobile-Specific Optimizations">
    **Platform-appropriate improvements:**

    <Tabs>
      <Tab title="iOS Optimizations">
        ```yaml theme={null}
        iOS-specific improvements:
        - Safe area respect for notched devices
        - Native scroll behavior preservation
        - Appropriate haptic feedback integration
        - iOS design pattern compliance
        ```
      </Tab>

      <Tab title="Android Optimizations">
        ```yaml theme={null}
        Android-specific improvements:
        - Material Design component usage
        - Back button behavior optimization
        - Android keyboard integration
        - Notification integration patterns
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Measuring Micro Improvement Impact

<CardGroup>
  <Card title="Quantitative Metrics" icon="chart-line">
    **Measurable impact indicators:**

    * Task completion time reduction
    * Error rate decreases
    * User satisfaction score improvements
    * Conversion rate increases
    * Support ticket reductions
  </Card>

  <Card title="Qualitative Feedback" icon="message-square">
    **User perception improvements:**

    * "Feels more professional"
    * "Easier to use on mobile"
    * "More intuitive navigation"
    * "Clearer next steps"
    * "More responsive interface"
  </Card>
</CardGroup>

## Implementation Best Practices

<Steps>
  <Step title="Progressive Enhancement">
    **Layer improvements thoughtfully:**

    ```
    ✅ Start with functional basics
    ✅ Add accessibility improvements
    ✅ Enhance visual polish
    ✅ Implement delightful details
    ✅ Test across devices and contexts
    ```
  </Step>

  <Step title="Performance Consideration">
    **Balance polish with performance:**

    ```
    ✅ Optimize animations for 60fps
    ✅ Use CSS transforms over position changes
    ✅ Implement lazy loading for heavy effects
    ✅ Provide reduced motion options
    ✅ Test on lower-end devices
    ```
  </Step>

  <Step title="User Testing">
    **Validate improvement impact:**

    ```
    ✅ Test with real users before/after
    ✅ Measure task completion improvements
    ✅ Gather qualitative feedback
    ✅ Monitor analytics for impact
    ✅ Iterate based on data
    ```
  </Step>
</Steps>

***

<Card title="Master Element Control" icon="sliders">
  Learn advanced techniques for precise control over individual design elements and their behaviors.

  [Element Control →](/designing/edits/element-control)
</Card>


# High-Res Images
Source: https://docs.figr.design/designing/export/high-res-images

Export crisp, high-quality images and assets optimized for different platforms, devices, and use cases.

# High-Resolution Image Export

Generate pixel-perfect assets for any platform or use case. Figr's advanced export engine ensures your designs look crisp on every device and at every scale.

<tip>
  **Perfect quality, every time:** Automated optimization for different platforms while maintaining visual fidelity and performance requirements.
</tip>

## Export Formats and Quality

<Tabs>
  <Tab title="Raster Formats">
    **Pixel-based image exports:**

    <Frame>
      <img alt="Grid showing different export formats with quality comparisons" />
    </Frame>

    **Format specifications:**

    ```yaml theme={null}
    PNG (Portable Network Graphics):
    - Best for: UI elements, icons, screenshots
    - Transparency: Full alpha channel support
    - Quality: Lossless compression
    - Use cases: App store screenshots, UI documentation

    JPG/JPEG (Joint Photographic Experts Group):
    - Best for: Photography, complex images
    - Compression: Adjustable quality (60-95%)
    - File size: Smaller than PNG for photos
    - Use cases: Marketing materials, presentations

    WebP (Web Picture format):
    - Best for: Web optimization
    - Features: Better compression than PNG/JPG
    - Browser support: Modern browsers
    - Use cases: Website assets, web applications

    AVIF (AV1 Image File Format):
    - Best for: Next-generation web
    - Compression: Superior to WebP
    - Support: Latest browsers
    - Use cases: Progressive web enhancement
    ```
  </Tab>

  <Tab title="Vector Formats">
    **Scalable graphics exports:**

    <CardGroup>
      <Card title="SVG" icon="vector-square">
        **Scalable Vector Graphics:**

        * Infinite scalability
        * Small file sizes
        * CSS and JavaScript integration
        * Perfect for icons and illustrations
      </Card>

      <Card title="PDF" icon="file-pdf">
        **Portable Document Format:**

        * Print-ready quality
        * Multi-page support
        * Vector and raster combination
        * Professional documentation
      </Card>
    </CardGroup>

    **Vector optimization:**

    ```yaml theme={null}
    SVG optimization:
    - Path simplification
    - Unnecessary metadata removal
    - Color palette optimization
    - Code cleanup and minification

    PDF configuration:
    - Print resolution (300 DPI)
    - Color space selection (RGB/CMYK)
    - Compression settings
    - Font embedding options
    ```
  </Tab>

  <Tab title="Platform-Specific">
    **Optimized for specific platforms:**

    <AccordionGroup>
      <Accordion title="iOS Assets">
        ```yaml theme={null}
        iOS export configuration:

        App icons:
        - Multiple sizes: 20px to 1024px
        - @1x, @2x, @3x density variants
        - Rounded corner handling
        - Safe area considerations

        Interface assets:
        - @1x: Standard resolution
        - @2x: Retina displays
        - @3x: Super Retina displays
        - Dark mode variants

        Format requirements:
        - PNG for transparency
        - No alpha for app icons
        - sRGB color space
        - Optimized file sizes
        ```
      </Accordion>

      <Accordion title="Android Assets">
        ```yaml theme={null}
        Android export configuration:

        Density buckets:
        - ldpi: 0.75x (120 DPI)
        - mdpi: 1x (160 DPI)
        - hdpi: 1.5x (240 DPI)
        - xhdpi: 2x (320 DPI)
        - xxhdpi: 3x (480 DPI)
        - xxxhdpi: 4x (640 DPI)

        Asset types:
        - Launcher icons (adaptive)
        - Notification icons
        - Action bar icons
        - Background images

        Format considerations:
        - WebP for efficiency
        - PNG for transparency
        - Vector drawables (XML)
        ```
      </Accordion>

      <Accordion title="Web Optimization">
        ```yaml theme={null}
        Web-specific exports:

        Responsive images:
        - Multiple breakpoint sizes
        - Device pixel ratio variants
        - Progressive JPEG support
        - WebP with fallbacks

        Performance optimization:
        - Optimized compression
        - Next-gen format support
        - Lazy loading preparation
        - Critical resource prioritization

        SEO considerations:
        - Descriptive filenames
        - Alt text preparation
        - Schema markup ready
        - Social media optimization
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Resolution and Scaling

<Steps>
  <Step title="DPI and Pixel Density">
    **Understanding resolution requirements:**

    <Tabs>
      <Tab title="Standard Resolutions">
        ```yaml theme={null}
        Common DPI standards:

        Web/Screen (72-96 DPI):
        - Standard monitors: 96 DPI
        - Retina displays: 192-288 DPI
        - Mobile devices: 300-500+ DPI
        - Export: @1x, @2x, @3x variants

        Print (300 DPI):
        - High-quality printing
        - Professional publications
        - Marketing materials
        - Large format displays

        Presentation (150 DPI):
        - PowerPoint/Keynote slides
        - Digital presentations
        - Conference displays
        - Document illustrations
        ```
      </Tab>

      <Tab title="Automatic Scaling">
        ```yaml theme={null}
        Smart resolution generation:

        Base size calculation:
        - Analyze design dimensions
        - Determine optimal base resolution
        - Calculate scaling factors
        - Generate required variants

        Quality preservation:
        - Vector elements remain crisp
        - Raster effects properly scaled
        - Text rendering optimization
        - Icon pixel alignment

        File size optimization:
        - Compression level adjustment
        - Format selection by content
        - Progressive enhancement
        - Bandwidth consideration
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Multi-Scale Export">
    **Generate multiple resolutions simultaneously:**

    <Frame>
      <img alt="Interface showing batch export of multiple image sizes and formats" />
    </Frame>

    **Batch export features:**

    ```yaml theme={null}
    Simultaneous generation:
    - All required sizes at once
    - Multiple format variants
    - Platform-specific naming
    - Organized folder structure

    Quality consistency:
    - Proportional scaling algorithms
    - Edge sharpening optimization
    - Color profile preservation
    - Compression standardization

    Automation benefits:
    - Time-saving workflow
    - Human error reduction
    - Consistent output quality
    - Streamlined asset delivery
    ```
  </Step>

  <Step title="Smart Optimization">
    **AI-powered quality enhancement:**

    <AccordionGroup>
      <Accordion title="Content-Aware Optimization">
        ```yaml theme={null}
        Intelligent processing:

        UI elements:
        - Sharp pixel alignment
        - Icon grid snapping
        - Text rendering optimization
        - Interface element clarity

        Photographic content:
        - Noise reduction algorithms
        - Detail preservation
        - Color accuracy maintenance
        - Compression artifact minimization

        Illustrations:
        - Vector path optimization
        - Color gradient smoothness
        - Shape edge refinement
        - Artistic detail preservation
        ```
      </Accordion>

      <Accordion title="Performance Optimization">
        ```yaml theme={null}
        File size reduction:

        Lossless optimization:
        - Metadata removal
        - Color palette optimization
        - Redundant data elimination
        - Encoding efficiency improvements

        Lossy optimization (when appropriate):
        - Perceptual quality maintenance
        - Selective compression areas
        - Detail importance weighting
        - Quality/size balance optimization
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Specialized Export Modes

<Tabs>
  <Tab title="Development Assets">
    **Optimized for development workflow:**

    <CardGroup>
      <Card title="Code Integration" icon="code">
        **Developer-friendly exports:**

        * CSS background-image ready
        * Sprite sheet generation
        * Icon font creation
        * Data URI encoding
      </Card>

      <Card title="Asset Organization" icon="folder">
        **Structured file delivery:**

        * Consistent naming conventions
        * Logical folder hierarchies
        * Platform-specific organization
        * Version control friendly
      </Card>
    </CardGroup>

    **Development export structure:**

    ```
    /assets
    ├── /icons
    │   ├── icon-name@1x.png
    │   ├── icon-name@2x.png
    │   └── icon-name@3x.png
    ├── /images
    │   ├── hero-image.webp
    │   ├── hero-image.jpg (fallback)
    │   └── hero-image@2x.jpg
    └── /graphics
        ├── logo.svg
        └── background-pattern.png
    ```
  </Tab>

  <Tab title="Marketing Materials">
    **High-quality presentation assets:**

    <AccordionGroup>
      <Accordion title="Social Media">
        ```yaml theme={null}
        Platform-specific sizing:

        Instagram:
        - Post: 1080×1080px (square)
        - Story: 1080×1920px (vertical)
        - Reel cover: 1080×1920px

        Twitter/X:
        - Post image: 1200×675px
        - Header: 1500×500px
        - Profile: 400×400px

        LinkedIn:
        - Post: 1200×627px
        - Cover: 1584×396px
        - Company logo: 300×300px

        Facebook:
        - Post: 1200×630px
        - Cover: 851×315px
        - Profile: 180×180px
        ```
      </Accordion>

      <Accordion title="Print Materials">
        ```yaml theme={null}
        Print-ready specifications:

        Business cards:
        - Standard: 3.5×2 inches
        - Resolution: 300 DPI
        - Bleed: 0.125 inch
        - Color mode: CMYK

        Brochures:
        - Tri-fold: 8.5×11 inches
        - Resolution: 300 DPI
        - Color profile: FOGRA39
        - Format: PDF/X-1a

        Posters:
        - Large format ready
        - Vector when possible
        - High-resolution raster
        - Professional color profiles
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="App Store Assets">
    **Store listing optimization:**

    <Steps>
      <Step title="iOS App Store">
        Generate all required iOS app store assets including icons, screenshots, and promotional graphics
      </Step>

      <Step title="Google Play Store">
        Create Android app store assets with proper sizing and quality requirements
      </Step>

      <Step title="Cross-Platform">
        Maintain visual consistency across different app store environments
      </Step>
    </Steps>

    **App store asset requirements:**

    ```yaml theme={null}
    iOS App Store:
    - App icons: 20×20 to 1024×1024
    - Screenshots: Device-specific sizes
    - Promotional graphics: 1024×1024
    - Apple Watch assets: Multiple sizes

    Google Play:
    - Launcher icon: 512×512
    - Screenshots: 16:9 or 9:16 ratio
    - Feature graphic: 1024×500
    - Promotional video thumbnail: 1024×500
    ```
  </Tab>
</Tabs>

## Advanced Export Features

<Steps>
  <Step title="Batch Processing">
    **Efficient bulk export workflows:**

    <Frame>
      <img alt="Batch export interface showing multiple designs being processed simultaneously" />
    </Frame>

    **Batch capabilities:**

    ```yaml theme={null}
    Multi-design export:
    - Select multiple artboards
    - Apply consistent settings
    - Generate variants simultaneously
    - Maintain quality standards

    Template-based export:
    - Save export configurations
    - Apply templates to new designs
    - Standardize team workflows
    - Ensure consistency across projects

    Automated scheduling:
    - Set up recurring exports
    - Version control integration
    - Notification systems
    - Quality assurance checks
    ```
  </Step>

  <Step title="Quality Control">
    **Automated quality assurance:**

    <Tabs>
      <Tab title="Visual Validation">
        ```yaml theme={null}
        Automatic quality checks:
        - Resolution verification
        - Color accuracy validation
        - Edge sharpness assessment
        - Compression artifact detection

        Comparison tools:
        - Before/after quality comparison
        - Zoom inspection capabilities
        - Pixel-level accuracy checking
        - Color difference analysis
        ```
      </Tab>

      <Tab title="Technical Validation">
        ```yaml theme={null}
        File compliance checking:
        - Format specification adherence
        - File size optimization verification
        - Metadata requirement compliance
        - Platform compatibility validation

        Performance analysis:
        - Loading time estimation
        - Bandwidth usage calculation
        - Caching optimization assessment
        - Progressive loading readiness
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Delivery Integration">
    **Streamlined asset delivery:**

    ```yaml theme={null}
    Cloud storage integration:
    - Dropbox, Google Drive, OneDrive
    - Automatic folder organization
    - Team access management
    - Version history preservation

    Development tool integration:
    - Git repository uploads
    - CDN direct uploads
    - CI/CD pipeline integration
    - Asset management systems

    Collaboration features:
    - Stakeholder notification
    - Download link generation
    - Access permission management
    - Usage tracking and analytics
    ```
  </Step>
</Steps>

## Best Practices

<CardGroup>
  <Card title="Quality Optimization" icon="star">
    **Maximize visual quality:**

    ✅ Use vector formats when possible
    ✅ Export at appropriate resolutions
    ✅ Optimize compression settings
    ✅ Maintain color accuracy
    ✅ Test across target devices
  </Card>

  <Card title="Workflow Efficiency" icon="zap">
    **Streamline export processes:**

    ✅ Set up export templates
    ✅ Use batch processing features
    ✅ Organize assets systematically
    ✅ Automate repetitive tasks
    ✅ Integrate with existing tools
  </Card>
</CardGroup>

## Troubleshooting Export Issues

<AccordionGroup>
  <Accordion title="Quality Problems">
    ```yaml theme={null}
    Issue: Exported images appear blurry or pixelated
    Solutions:
    - Increase export resolution
    - Use vector formats when possible
    - Check source design quality
    - Verify scaling algorithms
    ```
  </Accordion>

  <Accordion title="File Size Issues">
    ```yaml theme={null}
    Issue: Exported files are too large
    Solutions:
    - Adjust compression settings
    - Use appropriate formats (WebP, AVIF)
    - Optimize image content
    - Consider progressive loading
    ```
  </Accordion>

  <Accordion title="Color Accuracy">
    ```yaml theme={null}
    Issue: Colors don't match original design
    Solutions:
    - Check color profile settings
    - Verify monitor calibration
    - Use consistent color spaces
    - Test on target devices
    ```
  </Accordion>
</AccordionGroup>

***

<Card title="Ship-Ready Designs" icon="rocket">
  Learn how to prepare complete, production-ready design packages for development teams.

  [Ship-Ready Designs →](/designing/export/ship-ready-designs)
</Card>


# One-Click Figma
Source: https://docs.figr.design/designing/export/one-click-figma

Seamlessly export your Figr designs to Figma with perfect fidelity and maintained component relationships.

# One-Click Figma Export

Bridge your Figr designs to Figma workflow seamlessly. Export with perfect fidelity, maintained component relationships, and design system consistency.

<success>
  **Seamless workflow integration:** Move from Figr's AI-powered design to Figma's collaborative environment without losing any design information or having to recreate components.
</success>

## Export Process

<Steps>
  <Step title="Pre-Export Preparation">
    **Optimize your design for Figma export:**

    <Frame>
      <img alt="Interface showing design preparation checklist before Figma export" />
    </Frame>

    **Preparation checklist:**

    ```yaml theme={null}
    Design validation:
    ✅ All fonts available in Figma
    ✅ Images optimized and accessible
    ✅ Components properly structured
    ✅ Layers appropriately named
    ✅ Design system tokens applied

    Content readiness:
    ✅ Text content finalized
    ✅ Placeholder images replaced
    ✅ Component states defined
    ✅ Responsive behaviors specified
    ✅ Animation notes documented

    Organization cleanup:
    ✅ Unnecessary elements removed
    ✅ Layer hierarchy optimized
    ✅ Artboards properly arranged
    ✅ Style guides included
    ✅ Documentation prepared
    ```
  </Step>

  <Step title="Export Configuration">
    **Configure export settings for optimal results:**

    <Tabs>
      <Tab title="Component Mapping">
        ```yaml theme={null}
        Component translation:

        Figr buttons → Figma button components
        - Maintain all variants (size, style, state)
        - Preserve component properties
        - Map design tokens to Figma variables
        - Retain interaction definitions

        Figr layouts → Figma auto layout
        - Convert spacing systems
        - Maintain responsive behavior
        - Preserve constraints and resizing
        - Map grid systems to layout grids

        Figr text styles → Figma text styles
        - Typography scale mapping
        - Color token application
        - Line height preservation
        - Letter spacing retention
        ```
      </Tab>

      <Tab title="Asset Management">
        ```yaml theme={null}
        Asset handling:

        Images and icons:
        - Vector formats preserved (SVG → Figma vectors)
        - Raster images embedded or linked
        - Icon libraries transferred
        - Image optimization applied

        Colors and effects:
        - Color variables created in Figma
        - Gradient definitions preserved
        - Shadow effects transferred
        - Blend modes maintained

        Design tokens:
        - Spacing values → Figma spacing tokens
        - Color palette → Figma color variables
        - Typography → Figma text styles
        - Effects → Figma effect styles
        ```
      </Tab>

      <Tab title="File Organization">
        ```yaml theme={null}
        Figma file structure:

        Page organization:
        - Design system library page
        - Component documentation page
        - Design screens and flows
        - Archive and exploration pages

        Layer organization:
        - Semantic layer naming
        - Logical grouping and frames
        - Component instance relationships
        - Consistent naming conventions

        Documentation:
        - Component usage guidelines
        - Design decision rationale
        - Implementation notes
        - Responsive behavior specs
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Export Execution">
    **One-click export with progress tracking:**

    <AccordionGroup>
      <Accordion title="Export Process">
        ```yaml theme={null}
        Export workflow:
        1. Design analysis and optimization
        2. Component structure mapping
        3. Asset preparation and conversion
        4. Figma file generation
        5. Quality validation check
        6. File delivery and notification

        Processing time:
        - Simple designs: 30-60 seconds
        - Complex layouts: 2-3 minutes
        - Full design systems: 5-10 minutes
        - Large projects: 10-15 minutes
        ```
      </Accordion>

      <Accordion title="Quality Assurance">
        ```yaml theme={null}
        Automatic validation:
        - Component integrity verification
        - Design token consistency check
        - Typography mapping validation
        - Image quality assessment
        - Responsive behavior preservation

        Issue detection:
        - Missing font warnings
        - Unsupported effect alerts
        - Component structure issues
        - Asset resolution problems
        - Layout constraint conflicts
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Component Fidelity

<Tabs>
  <Tab title="Design System Preservation">
    **Maintain design system integrity in Figma:**

    <CardGroup>
      <Card title="Token Mapping" icon="link">
        **Design tokens → Figma variables:**

        * Color tokens become Figma color variables
        * Spacing tokens map to spacing variables
        * Typography tokens create text styles
        * Effect tokens generate effect styles
      </Card>

      <Card title="Component Hierarchy" icon="hierarchy">
        **Component relationships preserved:**

        * Main components and instances
        * Variant property structures
        * Override capabilities maintained
        * Component descriptions transferred
      </Card>
    </CardGroup>

    **Token mapping example:**

    ```yaml theme={null}
    Figr design tokens:
    - color-primary: #6366f1
    - spacing-md: 16px
    - font-size-lg: 18px
    - shadow-lg: 0 10px 15px rgba(0,0,0,0.1)

    Figma variables:
    - Primary/600: #6366f1 (Color variable)
    - Spacing/Medium: 16 (Number variable)
    - Typography/Large: 18px (Text style)
    - Elevation/Large: Drop shadow effect style
    ```
  </Tab>

  <Tab title="Interactive Elements">
    **Maintain component interactivity:**

    <Frame>
      <img alt="Figma interface showing exported interactive components with preserved states and behaviors" />
    </Frame>

    **Interaction preservation:**

    ```yaml theme={null}
    Button components:
    - Default, hover, active, disabled states
    - Size variants (small, medium, large)
    - Style variants (primary, secondary, outline)
    - Icon placement and sizing

    Form components:
    - Input states (default, focus, error, disabled)
    - Validation message positioning
    - Label and placeholder relationships
    - Help text and error text styling

    Navigation components:
    - Active and inactive states
    - Hover and focus behaviors
    - Dropdown and menu structures
    - Breadcrumb and pagination elements
    ```
  </Tab>

  <Tab title="Layout Systems">
    **Responsive behavior translation:**

    <AccordionGroup>
      <Accordion title="Auto Layout Conversion">
        ```yaml theme={null}
        Figr layouts → Figma auto layout:

        Flexbox containers:
        - Direction (row/column) preserved
        - Alignment settings maintained
        - Gap spacing transferred
        - Wrap behavior documented

        Grid systems:
        - Column and row definitions
        - Gap spacing preserved
        - Alignment rules maintained
        - Responsive breakpoints noted

        Constraints:
        - Resize behavior specified
        - Pin relationships maintained
        - Content scaling rules preserved
        ```
      </Accordion>

      <Accordion title="Responsive Documentation">
        ```yaml theme={null}
        Breakpoint information:
        - Mobile, tablet, desktop variations
        - Content reflow behavior
        - Element visibility changes
        - Interaction adaptations

        Implementation notes:
        - CSS Grid/Flexbox recommendations
        - JavaScript behavior requirements
        - Performance considerations
        - Accessibility implications
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Advanced Export Features

<Steps>
  <Step title="Selective Export">
    **Export specific parts of your design:**

    <Tabs>
      <Tab title="Component Library Only">
        ```yaml theme={null}
        Design system export:
        - All components and variants
        - Design token definitions
        - Usage documentation
        - Style guide examples

        Perfect for:
        - Design system updates
        - Component library sharing
        - Brand guideline distribution
        - Developer handoff preparation
        ```
      </Tab>

      <Tab title="Specific Artboards">
        ```yaml theme={null}
        Targeted screen export:
        - Selected pages or flows
        - Specific user journeys
        - Feature-focused exports
        - Prototype-ready screens

        Use cases:
        - Feature presentation
        - Stakeholder review
        - User testing preparation
        - Implementation planning
        ```
      </Tab>

      <Tab title="Responsive Variants">
        ```yaml theme={null}
        Multi-device export:
        - Desktop, tablet, mobile versions
        - Breakpoint-specific layouts
        - Device-optimized interactions
        - Platform-specific adaptations

        Benefits:
        - Complete responsive coverage
        - Device-specific optimization
        - Cross-platform consistency
        - Comprehensive documentation
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Collaboration Setup">
    **Prepare for team collaboration:**

    <CardGroup>
      <Card title="Team Access" icon="users">
        **Collaboration configuration:**

        * Team member permissions
        * File sharing settings
        * Comment and annotation rights
        * Edit access management
      </Card>

      <Card title="Version Control" icon="git-branch">
        **File organization:**

        * Version naming conventions
        * Branch and iteration tracking
        * Merge conflict prevention
        * History preservation
      </Card>
    </CardGroup>
  </Step>

  <Step title="Integration Workflows">
    **Connect with existing processes:**

    ```yaml theme={null}
    Development integration:
    - Figma Dev Mode preparation
    - Code generation optimization
    - Design token synchronization
    - Component library updates

    Design workflow integration:
    - Figma plugin compatibility
    - Design system maintenance
    - Review and approval processes
    - Stakeholder presentation setup

    Documentation integration:
    - Design specification generation
    - Implementation guide creation
    - Style guide maintenance
    - Change log documentation
    ```
  </Step>
</Steps>

## Post-Export Optimization

<Tabs>
  <Tab title="Figma File Cleanup">
    **Optimize exported files for best performance:**

    <AccordionGroup>
      <Accordion title="Component Organization">
        ```yaml theme={null}
        Component library optimization:
        - Remove unused components
        - Consolidate similar variants
        - Optimize component structures
        - Clean up override hierarchies

        Performance improvements:
        - Reduce file complexity
        - Optimize vector paths
        - Compress large images
        - Minimize layer count
        ```
      </Accordion>

      <Accordion title="Documentation Enhancement">
        ```yaml theme={null}
        Add implementation guidance:
        - Component usage examples
        - Do's and don'ts illustrations
        - Code snippet references
        - Accessibility requirements

        Design rationale:
        - Decision documentation
        - User research references
        - Business requirement links
        - Technical constraint notes
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Team Onboarding">
    **Help team members use exported files effectively:**

    <Steps>
      <Step title="File Structure Tour">
        Provide guided overview of exported file organization and navigation
      </Step>

      <Step title="Component Usage Training">
        Demonstrate proper component usage and override techniques
      </Step>

      <Step title="Design System Guidelines">
        Share design system principles and implementation standards
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Quality Assurance

<CardGroup>
  <Card title="Fidelity Verification" icon="check-circle">
    **Ensure export accuracy:**

    ✅ Visual comparison with original ✅ Component behavior verification ✅ Design token accuracy check ✅ Interactive state validation ✅ Responsive behavior confirmation
  </Card>

  <Card title="Usability Testing" icon="users">
    **Validate exported design usability:**

    ✅ Navigation flow testing ✅ Component interaction verification ✅ Responsive behavior validation ✅ Accessibility feature checking ✅ Performance impact assessment
  </Card>
</CardGroup>

## Troubleshooting Common Issues

<AccordionGroup>
  <Accordion title="Font and Typography Issues">
    ```yaml theme={null}
    Problem: Fonts not displaying correctly in Figma
    Solutions:
    - Ensure fonts are available in Figma
    - Use Google Fonts or Figma font library
    - Provide font files for custom typography
    - Set up appropriate font fallbacks
    ```
  </Accordion>

  <Accordion title="Component Structure Problems">
    ```yaml theme={null}
    Problem: Components not maintaining proper hierarchy
    Solutions:
    - Review component nesting in Figr
    - Optimize component structure before export
    - Use Figma-compatible component patterns
    - Simplify complex component relationships
    ```
  </Accordion>

  <Accordion title="Asset Quality Issues">
    ```yaml theme={null}
    Problem: Images or graphics appear pixelated
    Solutions:
    - Use vector formats when possible
    - Ensure sufficient image resolution
    - Optimize asset compression settings
    - Check Figma import settings
    ```
  </Accordion>
</AccordionGroup>

***

<Card title="Generate High-Resolution Assets" icon="image">
  Learn how to export crisp, high-quality images and assets for various use cases and platforms.

  [High-Res Images →](/designing/export/high-res-images)
</Card>


# Ship-Ready Designs
Source: https://docs.figr.design/designing/export/ship-ready-designs

Export complete, production-ready design packages with specifications, assets, and implementation guidance for seamless developer handoff.

# Ship-Ready Designs

Deliver complete design packages that developers can implement immediately. Figr generates comprehensive handoff materials with specifications, code, and assets that eliminate guesswork.

<success>
  **Zero ambiguity handoffs:** Complete design packages with pixel-perfect specifications, implementation-ready code, and all required assets organized for immediate development.
</success>

## Complete Design Package

<Steps>
  <Step title="Design Specifications">
    **Comprehensive implementation documentation:**

    <Frame>
      <img alt="Complete design package showing specifications, code, and assets organized for development" />
    </Frame>

    **Specification components:**

    ```yaml theme={null}
    Visual specifications:
    - Exact measurements and spacing
    - Color values and opacity settings
    - Typography details and line heights
    - Shadow and effect specifications
    - Border radius and stroke details

    Layout specifications:
    - Component positioning coordinates
    - Responsive behavior definitions
    - Grid and flexbox parameters
    - Breakpoint-specific variations
    - Container constraint definitions

    Interactive specifications:
    - State definitions and transitions
    - Animation timing and easing
    - Hover and focus behaviors
    - Form validation requirements
    - Error and success state designs
    ```
  </Step>

  <Step title="Implementation Code">
    **Production-ready code generation:**

    <Tabs>
      <Tab title="React Components">
        ```jsx theme={null}
        // Button component with all variants and states
        import React from 'react';
        import { cn } from '@/lib/utils';

        interface ButtonProps {
          variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
          size?: 'sm' | 'md' | 'lg';
          disabled?: boolean;
          loading?: boolean;
          children: React.ReactNode;
          onClick?: () => void;
        }

        export const Button: React.FC<ButtonProps> = ({
          variant = 'primary',
          size = 'md',
          disabled = false,
          loading = false,
          children,
          onClick,
          ...props
        }) => {
          return (
            <button
              className={cn(
                'inline-flex items-center justify-center font-medium transition-colors',
                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
                'disabled:pointer-events-none disabled:opacity-50',
                {
                  // Size variants
                  'h-9 px-3 text-sm': size === 'sm',
                  'h-10 px-4 py-2': size === 'md',
                  'h-11 px-8 text-lg': size === 'lg',
                  
                  // Style variants
                  'bg-primary text-primary-foreground hover:bg-primary/90': variant === 'primary',
                  'bg-secondary text-secondary-foreground hover:bg-secondary/80': variant === 'secondary',
                  'border border-input bg-background hover:bg-accent': variant === 'outline',
                  'hover:bg-accent hover:text-accent-foreground': variant === 'ghost',
                }
              )}
              disabled={disabled || loading}
              onClick={onClick}
              {...props}
            >
              {loading && (
                <svg className="mr-2 h-4 w-4 animate-spin" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" strokeDasharray="32" strokeDashoffset="32">
                    <animate attributeName="stroke-dasharray" dur="2s" values="0 64;32 32;64 0;32 32;0 64" repeatCount="indefinite"/>
                  </circle>
                </svg>
              )}
              {children}
            </button>
          );
        };
        ```
      </Tab>

      <Tab title="Vue Components">
        ```vue theme={null}
        <template>
          <button
            :class="buttonClasses"
            :disabled="disabled || loading"
            @click="handleClick"
          >
            <svg
              v-if="loading"
              class="mr-2 h-4 w-4 animate-spin"
              viewBox="0 0 24 24"
            >
              <circle
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                stroke-width="4"
                fill="none"
                stroke-dasharray="32"
                stroke-dashoffset="32"
              />
            </svg>
            <slot />
          </button>
        </template>

        <script setup lang="ts">
        import { computed } from 'vue';

        interface Props {
          variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
          size?: 'sm' | 'md' | 'lg';
          disabled?: boolean;
          loading?: boolean;
        }

        const props = withDefaults(defineProps<Props>(), {
          variant: 'primary',
          size: 'md',
          disabled: false,
          loading: false,
        });

        const emit = defineEmits<{
          click: [event: MouseEvent];
        }>();

        const buttonClasses = computed(() => [
          'inline-flex items-center justify-center font-medium transition-colors',
          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
          'disabled:pointer-events-none disabled:opacity-50',
          
          // Size classes
          {
            'h-9 px-3 text-sm': props.size === 'sm',
            'h-10 px-4 py-2': props.size === 'md',
            'h-11 px-8 text-lg': props.size === 'lg',
          },
          
          // Variant classes
          {
            'bg-primary text-primary-foreground hover:bg-primary/90': props.variant === 'primary',
            'bg-secondary text-secondary-foreground hover:bg-secondary/80': props.variant === 'secondary',
            'border border-input bg-background hover:bg-accent': props.variant === 'outline',
            'hover:bg-accent hover:text-accent-foreground': props.variant === 'ghost',
          }
        ]);

        const handleClick = (event: MouseEvent) => {
          if (!props.disabled && !props.loading) {
            emit('click', event);
          }
        };
        </script>
        ```
      </Tab>

      <Tab title="CSS Styles">
        ```css theme={null}
        /* Complete CSS with design tokens */
        :root {
          /* Design tokens from Figr */
          --color-primary: #6366f1;
          --color-primary-foreground: #ffffff;
          --color-secondary: #f1f5f9;
          --color-secondary-foreground: #0f172a;
          --color-accent: #f8fafc;
          --color-accent-foreground: #0f172a;
          --color-border: #e2e8f0;
          
          --spacing-sm: 0.75rem;
          --spacing-md: 1rem;
          --spacing-lg: 1.5rem;
          
          --border-radius: 0.375rem;
          --font-size-sm: 0.875rem;
          --font-size-md: 1rem;
          --font-size-lg: 1.125rem;
        }

        .button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-weight: 500;
          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
          border-radius: var(--border-radius);
          cursor: pointer;
          border: none;
        }

        .button:focus-visible {
          outline: none;
          box-shadow: 0 0 0 2px var(--color-primary);
        }

        .button:disabled {
          pointer-events: none;
          opacity: 0.5;
        }

        /* Size variants */
        .button--sm {
          height: 2.25rem;
          padding: 0 var(--spacing-sm);
          font-size: var(--font-size-sm);
        }

        .button--md {
          height: 2.5rem;
          padding: 0.5rem var(--spacing-md);
          font-size: var(--font-size-md);
        }

        .button--lg {
          height: 2.75rem;
          padding: 0 var(--spacing-lg);
          font-size: var(--font-size-lg);
        }

        /* Style variants */
        .button--primary {
          background-color: var(--color-primary);
          color: var(--color-primary-foreground);
        }

        .button--primary:hover {
          background-color: hsl(from var(--color-primary) h s calc(l * 0.9));
        }

        .button--secondary {
          background-color: var(--color-secondary);
          color: var(--color-secondary-foreground);
        }

        .button--secondary:hover {
          background-color: hsl(from var(--color-secondary) h s calc(l * 0.8));
        }
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Asset Package">
    **Complete asset delivery:**

    <AccordionGroup>
      <Accordion title="Organized Asset Structure">
        ```
        /design-assets
        ├── /icons
        │   ├── /svg
        │   │   ├── icon-arrow-right.svg
        │   │   ├── icon-user.svg
        │   │   └── icon-settings.svg
        │   └── /png
        │       ├── icon-arrow-right@1x.png
        │       ├── icon-arrow-right@2x.png
        │       └── icon-arrow-right@3x.png
        ├── /images
        │   ├── hero-background.webp
        │   ├── hero-background.jpg
        │   └── hero-background@2x.jpg
        ├── /fonts
        │   ├── Inter-Regular.woff2
        │   ├── Inter-Medium.woff2
        │   └── Inter-Bold.woff2
        └── /components
            ├── button-states.png
            ├── form-elements.png
            └── navigation-examples.png
        ```
      </Accordion>

      <Accordion title="Asset Specifications">
        ```yaml theme={null}
        Icon specifications:
        - Format: SVG (primary), PNG (fallback)
        - Sizes: 16px, 20px, 24px, 32px
        - Stroke width: 1.5px
        - Style: Outline icons
        - Color: Inherit from parent

        Image specifications:
        - Format: WebP (primary), JPG (fallback)
        - Optimization: 85% quality
        - Responsive: @1x, @2x variants
        - Alt text: Descriptive text provided

        Font specifications:
        - Family: Inter
        - Weights: 400 (Regular), 500 (Medium), 700 (Bold)
        - Format: WOFF2 (primary), WOFF (fallback)
        - Preload: Critical font weights
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Implementation Documentation

<Tabs>
  <Tab title="Technical Specifications">
    **Detailed implementation requirements:**

    <Frame>
      <img alt="Technical specification document showing detailed measurements and implementation notes" />
    </Frame>

    **Documentation sections:**

    ```yaml theme={null}
    Layout specifications:
    - Grid system definitions
    - Breakpoint behaviors
    - Container constraints
    - Element positioning
    - Responsive adaptations

    Component specifications:
    - State definitions
    - Interaction behaviors
    - Animation requirements
    - Accessibility features
    - Performance considerations

    Integration requirements:
    - API endpoint connections
    - Data structure expectations
    - Error handling approaches
    - Loading state management
    - Form validation rules
    ```
  </Tab>

  <Tab title="Style Guide">
    **Visual design system documentation:**

    <CardGroup>
      <Card title="Design Tokens" icon="palette">
        **Complete token documentation:**

        * Color palette with hex values
        * Typography scale and usage
        * Spacing system explanations
        * Component pattern library
      </Card>

      <Card title="Usage Guidelines" icon="book">
        **Implementation best practices:**

        * When to use each component
        * Accessibility requirements
        * Responsive behavior guides
        * Brand compliance rules
      </Card>
    </CardGroup>

    **Style guide contents:**

    ```yaml theme={null}
    Brand elements:
    - Logo usage and variations
    - Color psychology and meaning
    - Typography personality
    - Voice and tone guidelines

    Component library:
    - Button variants and states
    - Form element specifications
    - Navigation patterns
    - Data display components

    Layout principles:
    - Grid system usage
    - Spacing methodologies
    - Hierarchy principles
    - White space management
    ```
  </Tab>

  <Tab title="Developer Notes">
    **Implementation-specific guidance:**

    <AccordionGroup>
      <Accordion title="Performance Considerations">
        ```yaml theme={null}
        Optimization requirements:

        Critical rendering path:
        - Above-fold content priority
        - Inline critical CSS
        - Preload essential fonts
        - Optimize largest contentful paint

        Asset optimization:
        - Image lazy loading
        - Icon sprite usage
        - Font display strategies
        - JavaScript code splitting

        Accessibility requirements:
        - Semantic HTML structure
        - ARIA labels and descriptions
        - Keyboard navigation support
        - Screen reader optimization
        ```
      </Accordion>

      <Accordion title="Browser Support">
        ```yaml theme={null}
        Compatibility requirements:

        Supported browsers:
        - Chrome 90+
        - Firefox 88+
        - Safari 14+
        - Edge 90+

        Progressive enhancement:
        - CSS Grid with flexbox fallback
        - WebP images with JPEG fallback
        - Modern CSS with vendor prefixes
        - JavaScript feature detection

        Testing requirements:
        - Cross-browser validation
        - Device testing coverage
        - Accessibility audit compliance
        - Performance benchmark meeting
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Quality Assurance Package

<Steps>
  <Step title="Design Validation">
    **Comprehensive design review checklist:**

    <Tabs>
      <Tab title="Visual Quality">
        ```yaml theme={null}
        Design consistency check:
        ✅ Color usage follows design system
        ✅ Typography hierarchy is clear
        ✅ Spacing follows established patterns
        ✅ Component usage is consistent
        ✅ Brand guidelines are followed

        Visual polish verification:
        ✅ Pixel-perfect alignment
        ✅ Appropriate contrast ratios
        ✅ Consistent border radius usage
        ✅ Proper shadow application
        ✅ Icon style consistency
        ```
      </Tab>

      <Tab title="Functionality">
        ```yaml theme={null}
        Interaction verification:
        ✅ All interactive elements defined
        ✅ State variations documented
        ✅ Error scenarios covered
        ✅ Success states designed
        ✅ Loading states included

        Responsive behavior:
        ✅ Mobile layouts optimized
        ✅ Tablet adaptations defined
        ✅ Desktop experience complete
        ✅ Breakpoint behaviors clear
        ✅ Touch targets appropriately sized
        ```
      </Tab>

      <Tab title="Accessibility">
        ```yaml theme={null}
        Accessibility compliance:
        ✅ WCAG 2.1 AA color contrast
        ✅ Keyboard navigation planned
        ✅ Screen reader compatibility
        ✅ Focus indicators visible
        ✅ Alternative text provided

        Inclusive design features:
        ✅ Reduced motion considerations
        ✅ High contrast mode support
        ✅ Text scaling compatibility
        ✅ Clear visual hierarchy
        ✅ Simple, understandable language
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Implementation Testing">
    **Validation framework for development:**

    <CardGroup>
      <Card title="Automated Testing" icon="robot">
        **Test suite generation:**

        * Visual regression tests
        * Component unit tests
        * Accessibility audit scripts
        * Performance benchmarks
      </Card>

      <Card title="Manual Testing" icon="hand">
        **Human validation checklist:**

        * Cross-browser testing plan
        * Device testing matrix
        * User acceptance criteria
        * Edge case scenarios
      </Card>
    </CardGroup>
  </Step>

  <Step title="Launch Preparation">
    **Pre-launch verification:**

    ```yaml theme={null}
    Pre-launch checklist:

    Technical readiness:
    ✅ All assets optimized and delivered
    ✅ Code reviewed and tested
    ✅ Performance benchmarks met
    ✅ Accessibility standards achieved
    ✅ Cross-browser compatibility verified

    Content readiness:
    ✅ Copy finalized and proofread
    ✅ Images optimized and alt text added
    ✅ Forms tested and validated
    ✅ Error messages defined
    ✅ Success states confirmed

    Business readiness:
    ✅ Stakeholder approval obtained
    ✅ Analytics tracking implemented
    ✅ A/B testing setup (if applicable)
    ✅ Launch timeline confirmed
    ✅ Rollback plan prepared
    ```
  </Step>
</Steps>

## Delivery Formats

<Tabs>
  <Tab title="Development Package">
    **Complete technical handoff:**

    ```yaml theme={null}
    Package contents:

    Code files:
    - Component source code
    - Stylesheet definitions
    - Configuration files
    - Type definitions (TypeScript)

    Asset files:
    - Optimized images
    - Icon libraries
    - Font files
    - Graphics and illustrations

    Documentation:
    - Implementation guide
    - API integration notes
    - Testing requirements
    - Performance guidelines
    ```
  </Tab>

  <Tab title="Design System Update">
    **Design system integration package:**

    ```yaml theme={null}
    System updates:

    Component additions:
    - New component definitions
    - Variant specifications
    - Usage guidelines
    - Code examples

    Token updates:
    - New design tokens
    - Deprecated token migration
    - Usage pattern changes
    - Implementation notes

    Documentation updates:
    - Style guide additions
    - Pattern library updates
    - Best practice guidelines
    - Migration instructions
    ```
  </Tab>

  <Tab title="Stakeholder Package">
    **Executive and client presentation:**

    ```yaml theme={null}
    Presentation materials:

    Visual overview:
    - High-level design presentation
    - Key feature highlights
    - User journey illustrations
    - Before/after comparisons

    Business impact:
    - User experience improvements
    - Conversion optimization notes
    - Accessibility enhancements
    - Performance improvements

    Implementation plan:
    - Development timeline
    - Resource requirements
    - Risk assessment
    - Success metrics
    ```
  </Tab>
</Tabs>

## Best Practices

<CardGroup>
  <Card title="Complete Documentation" icon="file-text">
    **Comprehensive handoff materials:**

    ✅ Every element specified precisely
    ✅ All states and variations documented
    ✅ Responsive behavior clearly defined
    ✅ Accessibility requirements included
    ✅ Performance considerations noted
  </Card>

  <Card title="Developer-Friendly" icon="code">
    **Implementation-ready deliverables:**

    ✅ Clean, semantic code generation
    ✅ Design token integration
    ✅ Component library compatibility
    ✅ Testing framework inclusion
    ✅ Optimization best practices
  </Card>
</CardGroup>

***

<Card title="Enable Team Collaboration" icon="users">
  Learn how to set up effective team collaboration workflows with shared links and permissions.

  [Share Links →](/designing/collaboration/share-links)
</Card>


# Benchmark Competitors
Source: https://docs.figr.design/designing/ideation/benchmark-competitors

Systematically analyze competitor products to identify opportunities and best practices for your design strategy.

# Benchmark Competitors

Competitive analysis fuels better design decisions. Figr helps you systematically analyze competitor products, identify best practices, and discover opportunities for differentiation.

<info>
  **Strategic advantage:** Understanding the competitive landscape helps you design solutions that stand out while meeting user expectations established by industry leaders.
</info>

## Competitive Analysis Framework

<Tabs>
  <Tab title="Competitor Categories">
    **Different types of competitive intelligence:**

    <CardGroup>
      <Card title="Direct Competitors" icon="target">
        Same market, same solutions, same users
      </Card>

      <Card title="Indirect Competitors" icon="circle">
        Different solutions to same user problems
      </Card>

      <Card title="Aspirational Benchmarks" icon="star">
        Best-in-class experiences from any industry
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Analysis Dimensions">
    **What to evaluate in competitor products:**

    <AccordionGroup>
      <Accordion title="User Experience">
        ```yaml theme={null}
        UX evaluation criteria:
        - Onboarding flow effectiveness
        - Core task completion ease
        - Information architecture clarity
        - Navigation intuitiveness
        - Error handling quality
        - Mobile experience parity
        ```
      </Accordion>

      <Accordion title="Visual Design">
        ```yaml theme={null}
        Design assessment:
        - Brand expression and consistency
        - Visual hierarchy clarity
        - Color and typography choices
        - Component design quality
        - Accessibility compliance
        - Cross-platform consistency
        ```
      </Accordion>

      <Accordion title="Feature Comparison">
        ```yaml theme={null}
        Functional analysis:
        - Feature completeness
        - Unique capabilities
        - Integration quality
        - Performance characteristics
        - Innovation level
        - User adoption indicators
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Data Collection Methods">
    **How to gather competitive intelligence:**

    <Steps>
      <Step title="Product Exploration">
        Hands-on testing of competitor products through trials, demos, and public interfaces
      </Step>

      <Step title="Documentation Review">
        Analysis of marketing materials, help documentation, and public case studies
      </Step>

      <Step title="User Feedback Mining">
        Review of app store reviews, support forums, and social media discussions
      </Step>

      <Step title="Industry Research">
        Third-party reports, analyst reviews, and industry benchmarking studies
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Analysis Workflow

<Steps>
  <Step title="Competitor Identification">
    **Build comprehensive competitor list:**

    <Frame>
      <img alt="Competitive landscape map showing direct, indirect, and aspirational competitors" />
    </Frame>

    **Research sources:**

    ```yaml theme={null}
    Discovery methods:
    - Industry reports and analyst research
    - User interview competitor mentions
    - Marketing channel analysis
    - App store category exploration
    - Google search result analysis
    - Social media competitive discussions
    ```
  </Step>

  <Step title="Feature Audit">
    **Systematic feature comparison:**

    <Tabs>
      <Tab title="Feature Matrix">
        ```yaml theme={null}
        Comparison framework:
        Feature categories:
        - Core functionality
        - Advanced features
        - Integration capabilities
        - Platform availability
        - Pricing models

        Rating scale:
        ✅ Excellent implementation
        🟡 Good but with limitations  
        🟠 Basic implementation
        ❌ Missing or poor quality
        ```
      </Tab>

      <Tab title="User Journey Mapping">
        ```yaml theme={null}
        Journey comparison:
        - Sign-up and onboarding
        - Core task completion
        - Feature discovery
        - Support and help
        - Account management

        Evaluation criteria:
        - Steps required
        - Clarity of process
        - Error prevention
        - Success indicators
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Design Pattern Analysis">
    **Extract reusable insights:**

    <AccordionGroup>
      <Accordion title="Interaction Patterns">
        ```yaml theme={null}
        Pattern categories:
        - Navigation structures
        - Form design approaches
        - Data visualization methods
        - Content organization
        - Search and filtering
        - Mobile adaptations
        ```
      </Accordion>

      <Accordion title="Best Practice Identification">
        ```yaml theme={null}
        Excellence indicators:
        - User satisfaction metrics
        - Adoption rate evidence
        - Industry recognition
        - Innovation leadership
        - Accessibility compliance
        - Performance optimization
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Opportunity Identification

<Tabs>
  <Tab title="Gap Analysis">
    **Find unmet user needs:**

    <CardGroup>
      <Card title="Feature Gaps" icon="puzzle-piece">
        **Missing capabilities across competitors:**

        * Functionality that no one provides well
        * Integration opportunities
        * Platform-specific features
        * Advanced user needs
      </Card>

      <Card title="Experience Gaps" icon="frown">
        **Poor user experiences to improve:**

        * Complex onboarding flows
        * Confusing navigation
        * Slow performance
        * Accessibility barriers
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Differentiation Opportunities">
    **Ways to stand out:**

    ```yaml theme={null}
    Differentiation strategies:

    User Experience:
    - Simplify complex workflows
    - Improve mobile experiences
    - Enhance accessibility
    - Optimize performance

    Feature Innovation:
    - Unique functionality combinations
    - Better integration approaches
    - Advanced automation
    - Personalization capabilities

    Market Positioning:
    - Underserved user segments
    - New use case exploration
    - Pricing model innovation
    - Platform-specific advantages
    ```
  </Tab>

  <Tab title="Convergence Patterns">
    **Industry standards to adopt:**

    ```yaml theme={null}
    Standard patterns worth adopting:
    - Widely accepted interaction conventions
    - Proven successful layouts
    - Established mental models
    - Cross-platform consistency patterns
    - Accessibility best practices
    ```
  </Tab>
</Tabs>

## Competitive Intelligence Tools

<Steps>
  <Step title="Structured Documentation">
    **Organize findings systematically:**

    <Frame>
      <img alt="Dashboard showing organized competitive analysis with scores and comparisons" />
    </Frame>

    **Documentation templates:**

    ```yaml theme={null}
    Competitor profile:
    - Company background and positioning
    - Product overview and target users
    - Strengths and weaknesses
    - Design and UX highlights
    - Areas for improvement
    - Lessons for our product
    ```
  </Step>

  <Step title="Visual Benchmarking">
    **Compare designs side-by-side:**

    <Tabs>
      <Tab title="Screenshot Collections">
        ```yaml theme={null}
        Organized visual references:
        - Key interface screenshots
        - User flow documentation
        - Mobile vs desktop comparisons
        - Feature-specific examples
        - Before/after improvements
        ```
      </Tab>

      <Tab title="Pattern Libraries">
        ```yaml theme={null}
        Reusable design patterns:
        - Navigation solutions
        - Form design approaches
        - Content layout strategies
        - Interactive element styles
        - Error handling methods
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Trend Tracking">
    **Monitor competitive evolution:**

    ```yaml theme={null}
    Monitoring systems:
    - Regular competitor audits
    - Feature launch tracking
    - Design update documentation
    - User feedback sentiment analysis
    - Market share movement tracking
    ```
  </Step>
</Steps>

## Analysis Application

<CardGroup>
  <Card title="Design Direction" icon="compass">
    **Inform design strategy:**

    * Set design quality benchmarks
    * Identify must-have features
    * Define differentiation strategy
    * Establish user expectations
    * Plan competitive positioning
  </Card>

  <Card title="Feature Prioritization" icon="list-ordered">
    **Guide product roadmap:**

    * Prioritize table-stakes features
    * Identify innovation opportunities
    * Plan competitive responses
    * Sequence feature development
    * Allocate design resources
  </Card>
</CardGroup>

## Ethical Competitive Analysis

<warning>
  **Responsible research:** Conduct competitive analysis ethically and legally, respecting intellectual property and using only publicly available information.
</warning>

<Steps>
  <Step title="Legal Boundaries">
    **Stay within legal limits:**

    ```yaml theme={null}
    Acceptable practices:
    ✅ Public product testing and screenshots
    ✅ Published marketing materials analysis
    ✅ User review and feedback analysis
    ✅ Industry report references
    ✅ Conference presentation insights

    Avoid:
    ❌ Proprietary information access
    ❌ Terms of service violations
    ❌ Unauthorized account access
    ❌ IP infringement
    ❌ Employee information gathering
    ```
  </Step>

  <Step title="Inspiration vs Copying">
    **Use insights appropriately:**

    ```yaml theme={null}
    Good practice:
    ✅ Learn from successful patterns
    ✅ Understand user expectations
    ✅ Identify improvement opportunities
    ✅ Validate design approaches
    ✅ Build on industry standards

    Avoid:
    ❌ Direct copying of designs
    ❌ Replicating unique innovations
    ❌ Mimicking brand elements
    ❌ Stealing competitive advantages
    ❌ Violating design patents
    ```
  </Step>
</Steps>

## Competitive Analysis Best Practices

<Steps>
  <Step title="Regular Cadence">
    **Maintain current intelligence:**

    ```yaml theme={null}
    Analysis schedule:
    - Quarterly comprehensive reviews
    - Monthly feature update tracking
    - Weekly trend monitoring
    - Ad-hoc analysis for major launches
    - Annual strategic assessments
    ```
  </Step>

  <Step title="Team Collaboration">
    **Share insights across teams:**

    ```yaml theme={null}
    Knowledge sharing:
    - Cross-team analysis sessions
    - Competitive insight briefings
    - Shared analysis repositories
    - Regular presentation updates
    - Strategic planning integration
    ```
  </Step>

  <Step title="Actionable Outputs">
    **Convert analysis to action:**

    ```yaml theme={null}
    Deliverable formats:
    - Design requirement documents
    - Feature gap analyses
    - Strategic recommendation reports
    - Visual pattern libraries
    - Competitive positioning maps
    ```
  </Step>
</Steps>

***

<Card title="Generate Product Requirements" icon="file-text">
  Learn how to draft comprehensive PRDs that translate insights into actionable development plans.

  [Draft PRDs →](/designing/ideation/draft-prds)
</Card>


# Draft PRDs
Source: https://docs.figr.design/designing/ideation/draft-prds

Generate comprehensive product requirement documents from user insights and competitive analysis.

# Draft PRDs

Transform research insights into structured product requirements. Figr helps you create comprehensive PRDs that bridge user needs, business goals, and technical constraints.

<success>
  **From insights to action:** Convert scattered research findings into clear, actionable product requirements that guide development and design decisions.
</success>

## PRD Generation Process

<Steps>
  <Step title="Insight Synthesis">
    **Consolidate research findings:**

    <Frame>
      <img alt="Dashboard showing user research, competitive analysis, and business goals being consolidated" />
    </Frame>

    **Input sources:**

    ```yaml theme={null}
    User Research:
    - Interview findings and pain points
    - Usability testing results
    - Survey data and feedback
    - Analytics and behavior data

    Market Analysis:
    - Competitive feature gaps
    - Industry trends and patterns
    - Market opportunity assessment
    - User expectation benchmarks

    Business Context:
    - Strategic objectives
    - Revenue targets
    - Resource constraints
    - Timeline requirements
    ```
  </Step>

  <Step title="Requirement Extraction">
    **Generate specific requirements:**

    <Tabs>
      <Tab title="Functional Requirements">
        ```yaml theme={null}
        Feature specifications:
        - Core functionality definition
        - User interaction patterns
        - Data processing needs
        - Integration requirements
        - Performance criteria
        ```
      </Tab>

      <Tab title="User Experience Requirements">
        ```yaml theme={null}
        UX specifications:
        - User journey definitions
        - Accessibility requirements
        - Mobile responsiveness needs
        - Error handling approaches
        - Success state definitions
        ```
      </Tab>

      <Tab title="Technical Requirements">
        ```yaml theme={null}
        Implementation specs:
        - Platform compatibility
        - Performance benchmarks
        - Security requirements
        - Scalability considerations
        - Integration constraints
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Structure Generation">
    **Create organized PRD framework:**

    <AccordionGroup>
      <Accordion title="Executive Summary">
        ```yaml theme={null}
        High-level overview:
        - Problem statement
        - Solution approach
        - Success metrics
        - Resource requirements
        - Timeline overview
        ```
      </Accordion>

      <Accordion title="User Stories & Acceptance Criteria">
        ```yaml theme={null}
        Detailed specifications:
        - As a [user type], I want [capability] so that [benefit]
        - Given [context], when [action], then [expected result]
        - Success criteria and edge cases
        - Priority levels and dependencies
        ```
      </Accordion>

      <Accordion title="Technical Specifications">
        ```yaml theme={null}
        Implementation details:
        - API requirements
        - Database schema changes
        - Third-party integrations
        - Performance requirements
        - Security considerations
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## PRD Templates & Frameworks

<Tabs>
  <Tab title="Feature PRD Template">
    **Comprehensive feature documentation:**

    ```markdown theme={null}
    # Feature Name: [Descriptive Title]

    ## Problem Statement
    - User pain point description
    - Business impact assessment
    - Current solution limitations

    ## Solution Overview
    - Proposed feature description
    - Key benefits and outcomes
    - Success metrics definition

    ## User Stories
    ### Primary User Journey
    - Core workflow description
    - Step-by-step user actions
    - Expected outcomes

    ### Edge Cases
    - Alternative scenarios
    - Error handling
    - Edge case management

    ## Technical Requirements
    - Platform specifications
    - Performance criteria
    - Integration needs
    - Security requirements

    ## Design Requirements
    - UI/UX specifications
    - Accessibility standards
    - Responsive design needs
    - Brand compliance

    ## Success Metrics
    - KPI definitions
    - Measurement methods
    - Target benchmarks
    - Timeline for assessment
    ```
  </Tab>

  <Tab title="Epic PRD Template">
    **Large initiative documentation:**

    ```markdown theme={null}
    # Epic: [Initiative Name]

    ## Strategic Context
    - Business objectives alignment
    - Market opportunity size
    - Competitive positioning
    - Resource allocation rationale

    ## Feature Breakdown
    ### Phase 1: Foundation
    - Core functionality requirements
    - MVP feature set
    - Technical infrastructure

    ### Phase 2: Enhancement
    - Advanced features
    - User experience improvements
    - Integration expansions

    ### Phase 3: Optimization
    - Performance improvements
    - Advanced analytics
    - Ecosystem integration

    ## Cross-Functional Requirements
    - Marketing requirements
    - Sales enablement needs
    - Customer support preparation
    - Legal and compliance review
    ```
  </Tab>

  <Tab title="Research-Driven PRD">
    **Evidence-based requirement generation:**

    ```markdown theme={null}
    # Research Insights → Requirements

    ## User Research Findings
    Finding: "Users abandon checkout at shipping cost reveal"
    Requirement: Display shipping estimates on product pages
    Priority: High (affects 40% of conversions)

    ## Competitive Analysis Insights
    Finding: "Competitors lack bulk editing capabilities"
    Requirement: Implement batch operations for admin users
    Priority: Medium (differentiation opportunity)

    ## Analytics Insights
    Finding: "Mobile users prefer single-column layouts"
    Requirement: Redesign mobile interface with vertical flow
    Priority: High (68% mobile traffic)
    ```
  </Tab>
</Tabs>

## AI-Assisted PRD Creation

<CardGroup>
  <Card title="Requirement Generation" icon="brain">
    **AI extracts requirements from research:**

    * Analyze user interview transcripts
    * Identify patterns in feedback data
    * Generate user stories from pain points
    * Suggest acceptance criteria
    * Prioritize based on user impact
  </Card>

  <Card title="Content Structuring" icon="organize">
    **Intelligent document organization:**

    * Auto-categorize requirements by type
    * Generate logical section structure
    * Create cross-references and dependencies
    * Suggest missing requirement areas
    * Maintain consistency across sections
  </Card>
</CardGroup>

## Collaborative PRD Development

<Steps>
  <Step title="Multi-Stakeholder Input">
    **Gather requirements from all perspectives:**

    <Tabs>
      <Tab title="Product Management">
        ```yaml theme={null}
        PM contributions:
        - Business case and market opportunity
        - User journey mapping
        - Feature prioritization
        - Success metrics definition
        - Competitive positioning
        ```
      </Tab>

      <Tab title="Engineering">
        ```yaml theme={null}
        Engineering input:
        - Technical feasibility assessment
        - Implementation complexity estimates
        - Performance requirement validation
        - Security and compliance needs
        - Integration constraint identification
        ```
      </Tab>

      <Tab title="Design">
        ```yaml theme={null}
        Design requirements:
        - User experience specifications
        - Accessibility requirements
        - Visual design constraints
        - Interaction pattern definitions
        - Mobile responsiveness needs
        ```
      </Tab>

      <Tab title="Business Stakeholders">
        ```yaml theme={null}
        Business input:
        - Strategic alignment verification
        - Resource allocation approval
        - Timeline constraint setting
        - Success criteria validation
        - Risk assessment and mitigation
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Iterative Refinement">
    **Collaborative improvement process:**

    ```yaml theme={null}
    Review cycles:
    1. Initial draft creation from research
    2. Stakeholder review and feedback
    3. Technical feasibility validation
    4. Business alignment confirmation
    5. Final approval and sign-off

    Feedback integration:
    - Comment-based suggestion system
    - Version control for changes
    - Decision rationale documentation
    - Conflict resolution processes
    ```
  </Step>

  <Step title="Living Documentation">
    **Keep PRDs current and actionable:**

    ```yaml theme={null}
    Maintenance practices:
    - Regular review and updates
    - Progress tracking integration
    - Scope change documentation
    - Lessons learned capture
    - Post-launch evaluation
    ```
  </Step>
</Steps>

## PRD Quality Assurance

<Tabs>
  <Tab title="Completeness Checking">
    **Ensure comprehensive coverage:**

    <AccordionGroup>
      <Accordion title="Requirement Coverage">
        ```yaml theme={null}
        Essential elements:
        ✅ Clear problem statement
        ✅ Specific solution description
        ✅ User story completeness
        ✅ Acceptance criteria definition
        ✅ Success metrics specification
        ✅ Technical requirement clarity
        ✅ Timeline and milestone definition
        ```
      </Accordion>

      <Accordion title="Stakeholder Alignment">
        ```yaml theme={null}
        Validation checklist:
        ✅ Business objective alignment
        ✅ User need validation
        ✅ Technical feasibility confirmation
        ✅ Resource requirement realism
        ✅ Timeline achievability
        ✅ Success metric measurability
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Clarity & Actionability">
    **Ensure implementation readiness:**

    ```yaml theme={null}
    Quality criteria:

    Clarity:
    - Unambiguous requirement statements
    - Clear success criteria
    - Specific user story formatting
    - Detailed acceptance criteria

    Actionability:
    - Implementation-ready specifications
    - Clear priority levels
    - Dependency identification
    - Resource requirement clarity

    Testability:
    - Measurable success criteria
    - Clear validation methods
    - Specific performance benchmarks
    - User acceptance test scenarios
    ```
  </Tab>
</Tabs>

## Integration with Development Process

<CardGroup>
  <Card title="Agile Integration" icon="repeat">
    **PRDs that support agile development:**

    * Epic and story breakdown
    * Sprint planning readiness
    * Acceptance criteria clarity
    * Definition of done alignment
    * Continuous refinement support
  </Card>

  <Card title="Design Handoff" icon="arrow-right">
    **Seamless PRD to design transition:**

    * Design requirement extraction
    * User journey documentation
    * Constraint specification
    * Success metric definition
    * Validation criteria establishment
  </Card>
</CardGroup>

## PRD Best Practices

<Steps>
  <Step title="User-Centric Focus">
    **Keep user needs central:**

    ```
    ✅ Start with user problems, not solutions
    ✅ Include real user quotes and feedback
    ✅ Validate assumptions with research
    ✅ Consider diverse user scenarios
    ✅ Plan for accessibility from the start
    ```
  </Step>

  <Step title="Evidence-Based Requirements">
    **Ground requirements in data:**

    ```
    ✅ Reference specific research findings
    ✅ Include quantitative supporting data
    ✅ Cite competitive analysis insights
    ✅ Document assumption validation plans
    ✅ Plan success measurement methods
    ```
  </Step>

  <Step title="Implementation Realism">
    **Ensure feasible requirements:**

    ```
    ✅ Validate technical feasibility early
    ✅ Consider resource constraints
    ✅ Plan for realistic timelines
    ✅ Account for dependencies
    ✅ Include risk mitigation strategies
    ```
  </Step>
</Steps>

***

<Card title="Begin Design Exploration" icon="compass">
  Move from requirements to design exploration and concept development.

  [Pre-Design Exploration →](/designing/ideation/pre-design-exploration)
</Card>


# Pre-Design Exploration
Source: https://docs.figr.design/designing/ideation/pre-design-exploration

Explore design concepts and validate ideas before committing to detailed interface design.

# Pre-Design Exploration

Bridge the gap between requirements and design execution. Use Figr's exploration tools to validate concepts, test assumptions, and establish design direction before detailed interface work.

<tip>
  **Design with confidence:** Validate core concepts and user flows before investing time in detailed visual design and component creation.
</tip>

## Exploration Methodology

<Tabs>
  <Tab title="Concept Validation">
    **Test fundamental design assumptions:**

    <Steps>
      <Step title="Mental Model Testing">
        Validate that your proposed solution matches user expectations and mental models
      </Step>

      <Step title="Flow Feasibility">
        Ensure user journeys are logical and achievable within technical constraints
      </Step>

      <Step title="Value Proposition">
        Confirm the design approach delivers on promised user and business value
      </Step>
    </Steps>
  </Tab>

  <Tab title="Information Architecture">
    **Structure content and functionality:**

    <Frame>
      <img alt="Information architecture diagram showing content organization and user flow mapping" />
    </Frame>

    **Key activities:**

    ```yaml theme={null}
    Content organization:
    - Card sorting exercises
    - Content inventory and audit
    - Hierarchy definition
    - Navigation structure planning

    User flow mapping:
    - Primary task flows
    - Alternative path identification
    - Error scenario planning
    - Cross-platform considerations
    ```
  </Tab>

  <Tab title="Interaction Patterns">
    **Define how users engage with features:**

    <AccordionGroup>
      <Accordion title="Input Methods">
        ```yaml theme={null}
        Interaction considerations:
        - Form design approaches
        - Search and filtering patterns
        - Data entry optimization
        - Voice and gesture support
        - Accessibility interaction methods
        ```
      </Accordion>

      <Accordion title="Feedback Systems">
        ```yaml theme={null}
        User feedback patterns:
        - Loading and progress indicators
        - Success and error messaging
        - Real-time validation
        - Confirmation strategies
        - Help and guidance systems
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Rapid Prototyping Tools

<Steps>
  <Step title="Concept Sketching">
    **Quick idea visualization:**

    <CardGroup>
      <Card title="Digital Sketching" icon="pencil">
        **Fast concept capture:**

        * Low-fidelity wireframes
        * User flow diagrams
        * Screen relationship mapping
        * Interaction concept illustration
      </Card>

      <Card title="Collaborative Ideation" icon="users">
        **Team-based exploration:**

        * Real-time collaborative sketching
        * Idea building and iteration
        * Cross-functional input integration
        * Consensus building tools
      </Card>
    </CardGroup>
  </Step>

  <Step title="Interactive Prototypes">
    **Concept validation through interaction:**

    <Tabs>
      <Tab title="Click-Through Prototypes">
        ```yaml theme={null}
        Basic interaction testing:
        - Navigation flow validation
        - Content hierarchy testing
        - User pathway exploration
        - Decision point identification
        ```
      </Tab>

      <Tab title="Functional Prototypes">
        ```yaml theme={null}
        Realistic interaction testing:
        - Form completion simulation
        - Search and filtering behavior
        - Data manipulation testing
        - Multi-step process validation
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Concept Testing">
    **Validate ideas with real users:**

    ```yaml theme={null}
    Testing approaches:

    Concept validation:
    - First-click testing
    - Tree testing for navigation
    - Five-second tests for comprehension
    - Preference testing between alternatives

    Usability assessment:
    - Task completion testing
    - Think-aloud protocols
    - Time-to-completion measurement
    - Error rate analysis
    ```
  </Step>
</Steps>

## Design Direction Establishment

<Tabs>
  <Tab title="Visual Exploration">
    **Establish aesthetic direction:**

    <Frame>
      <img alt="Mood board and visual style exploration showing different design directions" />
    </Frame>

    **Exploration areas:**

    ```yaml theme={null}
    Visual style:
    - Color palette exploration
    - Typography direction testing
    - Layout approach comparison
    - Component style development

    Brand expression:
    - Brand personality translation
    - Visual voice definition
    - Emotional tone setting
    - Differentiation strategy
    ```
  </Tab>

  <Tab title="Pattern Selection">
    **Choose optimal interaction patterns:**

    <AccordionGroup>
      <Accordion title="Navigation Patterns">
        ```yaml theme={null}
        Navigation approaches:
        - Menu structure options
        - Breadcrumb strategies
        - Search integration methods
        - Mobile navigation patterns
        - Cross-platform consistency
        ```
      </Accordion>

      <Accordion title="Content Patterns">
        ```yaml theme={null}
        Content organization:
        - Card vs list layouts
        - Filtering and sorting options
        - Pagination vs infinite scroll
        - Content hierarchy approaches
        - Progressive disclosure strategies
        ```
      </Accordion>

      <Accordion title="Interaction Patterns">
        ```yaml theme={null}
        User interaction design:
        - Form design approaches
        - Button and CTA patterns
        - Modal vs inline editing
        - Drag-and-drop implementations
        - Touch gesture integration
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Technical Validation">
    **Ensure implementation feasibility:**

    ```yaml theme={null}
    Feasibility assessment:

    Performance considerations:
    - Loading time implications
    - Rendering complexity
    - Data processing requirements
    - Bandwidth considerations

    Technical constraints:
    - Platform limitations
    - Browser compatibility
    - Device capability requirements
    - Integration complexity

    Resource requirements:
    - Development time estimates
    - Skill requirement assessment
    - Third-party dependency needs
    - Maintenance considerations
    ```
  </Tab>
</Tabs>

## Stakeholder Alignment

<Steps>
  <Step title="Concept Presentation">
    **Communicate design direction effectively:**

    <Tabs>
      <Tab title="Executive Summary">
        ```yaml theme={null}
        High-level communication:
        - Problem and solution overview
        - Key design decisions rationale
        - Expected user and business impact
        - Implementation timeline and resources
        - Success measurement plan
        ```
      </Tab>

      <Tab title="Detailed Walkthrough">
        ```yaml theme={null}
        Comprehensive review:
        - User journey demonstration
        - Feature interaction examples
        - Design system implications
        - Technical architecture overview
        - Risk assessment and mitigation
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Feedback Integration">
    **Incorporate stakeholder input:**

    <CardGroup>
      <Card title="Structured Feedback" icon="list">
        **Organized input collection:**

        * Specific feedback categories
        * Priority level assignment
        * Impact assessment
        * Resolution planning
      </Card>

      <Card title="Collaborative Refinement" icon="edit">
        **Joint improvement process:**

        * Real-time concept adjustment
        * Alternative exploration
        * Compromise solution development
        * Consensus building
      </Card>
    </CardGroup>
  </Step>

  <Step title="Decision Documentation">
    **Record exploration outcomes:**

    ```yaml theme={null}
    Documentation capture:

    Design decisions:
    - Chosen approaches and rationale
    - Rejected alternatives and reasons
    - Assumption validations
    - Constraint acknowledgments

    Next steps:
    - Detailed design planning
    - Implementation roadmap
    - Testing and validation schedule
    - Success criteria definition
    ```
  </Step>
</Steps>

## Exploration Outputs

<CardGroup>
  <Card title="Design Brief" icon="file-text">
    **Comprehensive design direction:**

    * Problem definition
    * Solution approach
    * Success criteria
    * Implementation plan
  </Card>

  <Card title="Prototype Library" icon="box">
    **Validated concepts:**

    * Tested interaction patterns
    * Proven user flows
    * Visual style direction
    * Component foundations
  </Card>

  <Card title="Research Insights" icon="lightbulb">
    **Validated assumptions:**

    * User preference data
    * Usability test results
    * Stakeholder alignment
    * Technical feasibility
  </Card>
</CardGroup>

## Transition to Detailed Design

<Steps>
  <Step title="Design System Preparation">
    **Ready design foundation:**

    ```yaml theme={null}
    System elements:
    - Color palette finalization
    - Typography scale definition
    - Component pattern specification
    - Layout grid establishment
    - Icon and imagery direction
    ```
  </Step>

  <Step title="Implementation Planning">
    **Prepare for development:**

    ```yaml theme={null}
    Development readiness:
    - Technical specification creation
    - Component prioritization
    - Development phase planning
    - Quality assurance preparation
    - Launch criteria definition
    ```
  </Step>
</Steps>

## Best Practices

<CardGroup>
  <Card title="Iterative Exploration" icon="repeat">
    **Continuous refinement:**

    ✅ Test early and often
    ✅ Embrace rapid iteration
    ✅ Document learning progression
    ✅ Remain open to pivoting
    ✅ Build on validated insights
  </Card>

  <Card title="Evidence-Based Decisions" icon="chart-line">
    **Data-driven direction:**

    ✅ Validate with real user data
    ✅ Reference competitive insights
    ✅ Consider technical constraints
    ✅ Align with business objectives
    ✅ Plan measurable outcomes
  </Card>
</CardGroup>

***

<Card title="Start Interface Design" icon="layout">
  Begin detailed interface design with validated concepts and clear direction.

  [Building on Existing →](/designing/interface/building-on-existing)
</Card>


# Process User Data
Source: https://docs.figr.design/designing/ideation/process-user-data

Transform raw user research and analytics into actionable design insights and requirements.

# Process User Data

Turn user research, analytics, and behavioral data into clear design direction. Figr helps you extract meaningful insights from complex data sources and translate them into specific design requirements.

<success>
  **Data-driven ideation:** Move beyond assumptions to design solutions grounded in real user behavior and validated insights.
</success>

## Data Sources & Input

<Tabs>
  <Tab title="Analytics Data">
    **Quantitative user behavior:**

    <CardGroup>
      <Card title="Usage Analytics" icon="chart-bar">
        * Page views and user flows
        * Feature adoption rates
        * Conversion funnel analysis
        * Time on page metrics
        * Bounce rate patterns
      </Card>

      <Card title="Performance Data" icon="gauge">
        * Load time impacts
        * Error rate tracking
        * Device and browser usage
        * Geographic user distribution
        * Peak usage patterns
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="User Research">
    **Qualitative insights:**

    ```yaml theme={null}
    Research types:
    ✅ User interviews and surveys
    ✅ Usability testing sessions
    ✅ Card sorting exercises
    ✅ Customer support tickets
    ✅ Feedback and reviews
    ✅ Social media mentions
    ✅ Competitive user research
    ```
  </Tab>

  <Tab title="Behavioral Data">
    **User interaction patterns:**

    <AccordionGroup>
      <Accordion title="Heat Maps">
        ```yaml theme={null}
        Click and attention patterns:
        - Where users focus attention
        - Most clicked elements
        - Ignored interface areas
        - Scroll depth analysis
        - Mobile vs desktop differences
        ```
      </Accordion>

      <Accordion title="Session Recordings">
        ```yaml theme={null}
        User journey insights:
        - Common task patterns
        - Points of confusion
        - Error recovery behavior
        - Feature discovery paths
        - Abandonment triggers
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Data Processing Pipeline

<Steps>
  <Step title="Data Ingestion">
    **Import and organize data sources:**

    <Frame>
      <img alt="Interface showing multiple data sources being imported and categorized" />
    </Frame>

    **Supported formats:**

    ```yaml theme={null}
    Analytics: CSV exports, API connections
    Research: PDF reports, video transcripts
    Feedback: Support ticket exports, survey data
    Behavioral: Heat map data, session recordings
    ```
  </Step>

  <Step title="Pattern Recognition">
    **Identify significant insights:**

    <Tabs>
      <Tab title="Automatic Analysis">
        ```yaml theme={null}
        AI-powered insights:
        - Anomaly detection in user behavior
        - Correlation identification
        - Trend analysis over time
        - Segmentation opportunities
        - Priority issue highlighting
        ```
      </Tab>

      <Tab title="Custom Analysis">
        ```yaml theme={null}
        Manual investigation:
        - Hypothesis testing
        - Specific metric drilling
        - Cross-reference data sources
        - Custom segmentation
        - Comparative analysis
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Insight Extraction">
    **Transform data into design requirements:**

    ```yaml theme={null}
    Output examples:

    Data: "Mobile users abandon checkout at shipping step"
    Insight: "Shipping costs surprise mobile users"
    Design requirement: "Show shipping estimate earlier in flow"

    Data: "Help section has 40% bounce rate"
    Insight: "Users can't find relevant help content"
    Design requirement: "Implement contextual help system"
    ```
  </Step>
</Steps>

## Insight Categories

<Tabs>
  <Tab title="User Behavior Patterns">
    **How users actually interact:**

    <AccordionGroup>
      <Accordion title="Navigation Preferences">
        ```yaml theme={null}
        Common patterns:
        - Preferred menu structures
        - Search vs browse behavior
        - Back button usage patterns
        - Deep linking preferences
        - Cross-platform consistency needs
        ```
      </Accordion>

      <Accordion title="Task Completion Strategies">
        ```yaml theme={null}
        User approaches:
        - Linear vs exploratory workflows
        - Information gathering patterns
        - Decision-making processes
        - Error recovery methods
        - Help-seeking behavior
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Pain Points & Friction">
    **Obstacles to user success:**

    <CardGroup>
      <Card title="Interface Issues" icon="x-circle">
        * Confusing navigation
        * Unclear labeling
        * Visual hierarchy problems
        * Interactive element confusion
      </Card>

      <Card title="Process Problems" icon="alert-triangle">
        * Overly complex workflows
        * Missing functionality
        * Performance bottlenecks
        * Information gaps
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Success Indicators">
    **What works well for users:**

    ```yaml theme={null}
    Positive patterns:
    - High-converting interface elements
    - Successful user flow segments
    - Well-adopted features
    - Positive feedback themes
    - Efficient task completion paths
    ```
  </Tab>
</Tabs>

## Design Requirement Generation

<Steps>
  <Step title="Priority Mapping">
    **Rank insights by impact:**

    <Frame>
      <img alt="Matrix showing user impact vs implementation effort for various insights" />
    </Frame>

    **Evaluation criteria:**

    ```yaml theme={null}
    User impact: High/Medium/Low
    Business value: Revenue, retention, satisfaction
    Implementation effort: Technical complexity, time required
    Risk assessment: Potential negative consequences
    ```
  </Step>

  <Step title="Design Opportunity Identification">
    **Convert insights to design opportunities:**

    <Tabs>
      <Tab title="Quick Wins">
        ```yaml theme={null}
        High impact, low effort:
        - Copy and labeling improvements
        - Color and contrast adjustments
        - Micro-interaction enhancements
        - Content reorganization
        ```
      </Tab>

      <Tab title="Strategic Improvements">
        ```yaml theme={null}
        High impact, high effort:
        - Information architecture redesign
        - New feature development
        - Cross-platform consistency
        - Accessibility overhauls
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Requirement Documentation">
    **Create actionable design briefs:**

    ```yaml theme={null}
    Requirement template:
    Problem: User pain point or opportunity
    Evidence: Supporting data and research
    Success criteria: How to measure improvement
    Constraints: Technical, business, timeline limits
    Priority: Relative importance ranking
    ```
  </Step>
</Steps>

## User Persona Development

<CardGroup>
  <Card title="Data-Driven Personas" icon="users">
    **Build personas from real user data:**

    * Behavioral clustering analysis
    * Usage pattern identification
    * Goal and motivation mapping
    * Pain point documentation
    * Demographic correlation
  </Card>

  <Card title="Dynamic Personas" icon="refresh">
    **Update personas as data evolves:**

    * Regular data refresh cycles
    * Behavior change tracking
    * New user segment identification
    * Persona validation through research
    * Cross-platform behavior mapping
  </Card>
</CardGroup>

## Advanced Analytics Integration

<Tabs>
  <Tab title="Real-Time Data Processing">
    **Live insight generation:**

    ```yaml theme={null}
    Real-time capabilities:
    - Live user behavior monitoring
    - Instant anomaly detection
    - Dynamic insight updates
    - Rapid hypothesis testing
    - Immediate design impact measurement
    ```
  </Tab>

  <Tab title="Predictive Analytics">
    **Anticipate user needs:**

    ```yaml theme={null}
    Predictive insights:
    - User behavior forecasting
    - Churn prediction modeling
    - Feature adoption predictions
    - Seasonal usage patterns
    - Market trend analysis
    ```
  </Tab>

  <Tab title="Cohort Analysis">
    **Understand user evolution:**

    ```yaml theme={null}
    Cohort tracking:
    - User onboarding success patterns
    - Feature adoption timelines
    - Retention curve analysis
    - Behavior change over time
    - Segmented user journeys
    ```
  </Tab>
</Tabs>

## Validation & Testing

<Steps>
  <Step title="Hypothesis Formation">
    **Create testable design hypotheses:**

    ```yaml theme={null}
    Hypothesis structure:
    "If we [design change], then [user behavior] will [improve/change] 
    because [user insight/data evidence]"

    Example:
    "If we add shipping cost calculator to product pages, then 
    mobile checkout completion will increase by 15% because 
    analytics show 60% abandon at shipping cost reveal"
    ```
  </Step>

  <Step title="Test Design">
    **Plan validation approach:**

    <CardGroup>
      <Card title="Quantitative Tests" icon="chart-line">
        * A/B testing setup
        * Conversion rate measurement
        * User behavior tracking
        * Statistical significance planning
      </Card>

      <Card title="Qualitative Validation" icon="message-square">
        * User interview planning
        * Usability testing design
        * Feedback collection strategy
        * Observation methodology
      </Card>
    </CardGroup>
  </Step>

  <Step title="Results Integration">
    **Feed results back into insights:**

    ```yaml theme={null}
    Learning cycle:
    - Test results analysis
    - Insight validation or revision
    - New hypothesis generation
    - Design iteration planning
    - Knowledge base updates
    ```
  </Step>
</Steps>

## Best Practices

<CardGroup>
  <Card title="Data Quality" icon="shield-check">
    **Ensure reliable insights:**

    ✅ Verify data source accuracy
    ✅ Check for sampling biases
    ✅ Validate across multiple sources
    ✅ Consider temporal factors
    ✅ Account for external influences
  </Card>

  <Card title="Actionable Insights" icon="target">
    **Generate useful design direction:**

    ✅ Connect data to specific design decisions
    ✅ Prioritize insights by user impact
    ✅ Create testable hypotheses
    ✅ Consider implementation feasibility
    ✅ Plan success measurement
  </Card>
</CardGroup>

***

<Card title="Analyze Competition" icon="search">
  Learn how to systematically analyze competitors and extract design insights for your product.

  [Benchmark Competitors →](/designing/ideation/benchmark-competitors)
</Card>


# CSV Import
Source: https://docs.figr.design/designing/input/csv-excel-import

Import structured data to create realistic, data-driven designs with actual content and user scenarios.

# CSV & Excel Import

Real data creates real designs. Import your actual spreadsheets, user data, and analytics to help Figr understand your content structure and create designs with realistic, representative data.

<tip>
  **Data-driven design:** Designs created with real data look more convincing, reveal layout challenges early, and help stakeholders envision the final product accurately.
</tip>

## Why Real Data Matters

<CardGroup>
  <Card title="Before: Lorem Ipsum Design" icon="file-text">
    **Generic placeholder content leads to:**

    * Unrealistic layout assumptions
    * Missing edge cases (long names, empty states)
    * Stakeholder disconnect from reality
    * Implementation surprises

    **Example:** "John Doe" fits nicely, but "Alexander von Habsburg-Lothringen III" breaks your layout
  </Card>

  <Card title="After: Real Data Design" icon="database">
    **Actual content reveals:**

    * True space requirements
    * Edge cases and data variations
    * Realistic user scenarios
    * Implementation requirements

    **Example:** Real customer names show you need truncation patterns and tooltip expansions
  </Card>
</CardGroup>

## Supported Data Formats

<Tabs>
  <Tab title="Spreadsheet Files">
    **Direct file uploads:**

    ```
    ✅ CSV files (.csv)
    ✅ Excel files (.xlsx, .xls)
    ✅ Google Sheets (via share link)
    ✅ TSV files (.tsv)
    ✅ Apple Numbers (exported as CSV/Excel)
    ```

    **File size limits:**

    * Up to 100MB per file
    * Up to 1 million rows
    * Automatic compression for large datasets

    <Frame>
      <img alt="CSV upload interface showing drag and drop area with file format support" />
    </Frame>
  </Tab>

  <Tab title="Cloud Integration">
    **Connect live data sources:**

    <AccordionGroup>
      <Accordion title="Google Sheets">
        ```
        Connection: OAuth authentication
        Sync: Real-time or scheduled updates
        Permissions: Read-only access
        Use case: Live dashboards, dynamic content
        ```
      </Accordion>

      <Accordion title="Airtable">
        ```
        Connection: API key authentication
        Sync: Webhook-triggered updates
        Permissions: Base-level access
        Use case: CRM data, project management
        ```
      </Accordion>

      <Accordion title="Notion Databases">
        ```
        Connection: Integration token
        Sync: Manual refresh or scheduled
        Permissions: Database-specific access
        Use case: Content management, documentation
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Database Exports">
    **Common database export formats:**

    ```
    Analytics Data:
    ✅ Google Analytics exports
    ✅ Mixpanel data exports
    ✅ Adobe Analytics CSV
    ✅ Custom dashboard exports

    CRM Data:
    ✅ Salesforce reports
    ✅ HubSpot exports
    ✅ Pipedrive data
    ✅ Custom CRM exports

    E-commerce Data:
    ✅ Shopify order exports
    ✅ WooCommerce data
    ✅ Product catalog CSVs
    ✅ Customer behavior data
    ```
  </Tab>
</Tabs>

## Data Import Process

<Steps>
  <Step title="Upload Your Data">
    **Choose your import method:**

    <Frame>
      <img alt="Data import interface showing different upload methods and connection options" />
    </Frame>

    **Quick upload:**

    * Drag and drop CSV/Excel files
    * Paste Google Sheets share link
    * Connect cloud data source
    * Import from URL endpoint
  </Step>

  <Step title="Data Preview & Validation">
    **Figr analyzes your data structure:**

    <Tabs>
      <Tab title="Column Detection">
        **Automatic identification:**

        ```
        Detected columns:
        📧 email_address (Email type)
        👤 full_name (Person name)
        📅 signup_date (Date)
        💰 subscription_value (Currency)
        📊 usage_score (Numeric)
        🏷️ user_type (Category)
        ```
      </Tab>

      <Tab title="Data Quality Check">
        **Issues and recommendations:**

        ```
        ✅ 1,247 valid rows detected
        ⚠️ 23 rows with missing email addresses
        ⚠️ 5 duplicate entries found
        ✅ Date formats consistent
        ⚠️ Some currency values missing $ symbol
        ```
      </Tab>

      <Tab title="Sample Data">
        **Representative examples:**

        ```
        Sample entries (showing data variety):

        John Smith, john@company.com, Free Plan
        María González-López, maria@startup.io, Pro Plan  
        Dr. Alexander Chen, alex.chen@enterprise.com, Enterprise
        Sarah Johnson-Williams, s.johnson@agency.co.uk, Pro Plan
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Map Data to Design Context">
    **Tell Figr how to use your data:**

    <AccordionGroup>
      <Accordion title="Design Context Mapping">
        **Map columns to UI elements:**

        ```
        full_name → User profile displays, table headers
        email_address → Contact information, login references
        user_type → Access level indicators, feature availability
        usage_score → Progress bars, analytics visualizations
        signup_date → Timeline displays, cohort analysis
        ```
      </Accordion>

      <Accordion title="Scenario Creation">
        **Define realistic usage scenarios:**

        ```
        Scenario 1: Dashboard for high-usage enterprise customer
        Data filter: user_type = "Enterprise" AND usage_score > 80

        Scenario 2: Onboarding flow for new free users
        Data filter: user_type = "Free" AND signup_date < 7 days ago

        Scenario 3: Admin view with diverse user types
        Data filter: Mixed sample across all user types
        ```
      </Accordion>

      <Accordion title="Edge Case Identification">
        **Figr identifies potential design challenges:**

        ```
        Long names: "Dr. Alexander Hamilton-Richardson III"
        Special characters: "José María Fernández-O'Brien"
        Empty values: Some users without profile photos
        Extreme values: Usage scores of 0 or 100+
        Date variations: Different signup patterns
        ```
      </Accordion>
    </AccordionGroup>
  </Step>

  <Step title="Data Integration Confirmation">
    **Review how data will be used:**

    ```yaml theme={null}
    Data Usage Summary:

    Primary Dataset: Customer data (1,247 records)
    Design Applications:
      - User tables and lists
      - Profile displays
      - Dashboard metrics
      - Analytics visualizations

    Privacy Settings: Anonymize emails, blur sensitive data
    Update Frequency: Static import (refresh manually)
    Retention: 90 days (configurable)
    ```
  </Step>
</Steps>

## Data-Driven Design Applications

<Tabs>
  <Tab title="Tables & Lists">
    **Realistic data tables:**

    <Frame>
      <img alt="Table design showing real customer data with varied name lengths and content" />
    </Frame>

    **What Figr considers:**

    * Column width requirements for real content
    * Sorting and filtering needs based on data types
    * Pagination requirements for large datasets
    * Responsive behavior with actual content lengths

    **Example improvements:**

    ```
    Generic design: Equal column widths
    Data-driven design: Email column wider, status column narrow

    Generic design: "Show 10 items"
    Data-driven design: "Show 25 items" (based on typical usage)
    ```
  </Tab>

  <Tab title="Dashboards & Analytics">
    **Real metrics and KPIs:**

    <CardGroup>
      <Card title="Metric Visualization" icon="chart-bar">
        **Based on actual data ranges:**

        * Chart scales reflect real value ranges
        * Trend lines show actual patterns
        * Anomalies and outliers included
        * Seasonal patterns represented
      </Card>

      <Card title="Performance Indicators" icon="gauge">
        **Realistic KPI displays:**

        * Progress bars with actual percentages
        * Status indicators based on real thresholds
        * Alert states triggered by actual conditions
        * Comparison baselines from historical data
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="User Profiles & Cards">
    **Varied user representations:**

    ```
    Real user profile variations:

    👤 Standard User
    Name: Sarah Johnson
    Role: Marketing Manager
    Company: TechStartup Inc.

    👤 Executive User  
    Name: Dr. Alexander Chen
    Title: Chief Technology Officer
    Company: Fortune 500 Enterprise Solutions

    👤 International User
    Name: María José Fernández-González
    Location: Barcelona, Spain
    Language: Español
    ```

    **Design considerations revealed:**

    * Name truncation strategies
    * Multi-language support needs
    * Profile photo fallback patterns
    * Contact information display variations
  </Tab>

  <Tab title="Forms & Input Fields">
    **Realistic form validation:**

    <AccordionGroup>
      <Accordion title="Input Field Sizing">
        **Based on actual data patterns:**

        ```
        Company name field: 15-85 characters (real range)
        Email field: 8-45 characters (typical range)
        Phone field: Various international formats
        Address field: Country-specific variations
        ```
      </Accordion>

      <Accordion title="Validation Rules">
        **Informed by real data issues:**

        ```
        Email validation: Catches actual common mistakes
        Name validation: Handles international characters
        Phone validation: Supports global formats
        Date validation: Considers realistic date ranges
        ```
      </Accordion>

      <Accordion title="Auto-complete Suggestions">
        **Based on existing data patterns:**

        ```
        Company suggestions: From existing customer list
        Location suggestions: Based on user geography
        Category suggestions: From actual usage patterns
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Privacy & Security

<shield>
  **Data protection:** Figr treats your data with enterprise-grade security and gives you complete control over privacy settings.
</shield>

<Steps>
  <Step title="Data Anonymization">
    **Automatic privacy protection:**

    <Tabs>
      <Tab title="Personal Information">
        ```
        Original: john.smith@company.com
        Anonymized: j***@company.com

        Original: 555-123-4567
        Anonymized: 555-***-***7

        Original: 123 Main Street, Apt 4B
        Anonymized: [Address]
        ```
      </Tab>

      <Tab title="Sensitive Data">
        ```
        Financial data: $XX,XXX (preserves magnitude)
        ID numbers: XXX-XX-1234 (pattern preserved)
        Medical info: [Protected Health Information]
        ```
      </Tab>

      <Tab title="Custom Rules">
        ```yaml theme={null}
        Anonymization Rules:

        email: "mask_middle"
        phone: "mask_except_last_4"  
        ssn: "full_mask"
        credit_card: "mask_except_last_4"
        custom_field: "hash_value"
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Access Controls">
    **Granular data permissions:**

    ```yaml theme={null}
    Team Member Access:

    Designers: Anonymized data only
    Product Managers: Full data access (with consent)
    Developers: Structure only, no personal data
    Stakeholders: Aggregated metrics only
    ```
  </Step>

  <Step title="Data Retention">
    **Configurable retention policies:**

    ```
    Import Data Retention:
    - Design context: Permanent (anonymized)
    - Raw data: 90 days (configurable)
    - Aggregated insights: 2 years
    - Personal identifiers: 30 days maximum
    ```
  </Step>
</Steps>

## Advanced Data Features

<Tabs>
  <Tab title="Data Relationships">
    **Connect related datasets:**

    <Frame>
      <img alt="Interface showing how to connect customer data with order data and analytics" />
    </Frame>

    **Example relationships:**

    ```
    Customer Data + Order History:
    - Customer profiles with purchase patterns
    - Lifetime value calculations
    - Behavior-based segmentation

    User Data + Analytics:
    - Activity-based user profiles
    - Feature usage patterns
    - Engagement scoring
    ```
  </Tab>

  <Tab title="Dynamic Data Updates">
    **Keep designs current with live data:**

    <AccordionGroup>
      <Accordion title="Scheduled Refresh">
        ```yaml theme={null}
        Update Schedule:
        - Daily: Critical business metrics
        - Weekly: User behavior data
        - Monthly: Demographic data
        - On-demand: Campaign or event data
        ```
      </Accordion>

      <Accordion title="Webhook Integration">
        ```yaml theme={null}
        Trigger Events:
        - New data available in source system
        - Significant data changes detected
        - Manual refresh requested
        - Design iteration created
        ```
      </Accordion>

      <Accordion title="Version Control">
        **Track data changes over time:**

        ```
        Data Version 1.0: Launch baseline (1,000 users)
        Data Version 1.1: Post-marketing campaign (1,500 users)
        Data Version 1.2: Feature release impact (1,800 users)
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Data Synthesis">
    **Generate additional realistic data:**

    ```
    When your dataset is limited, Figr can:

    ✅ Generate similar synthetic records
    ✅ Create variations of existing patterns
    ✅ Add realistic edge cases
    ✅ Expand datasets for testing layouts
    ✅ Create multi-language versions

    Example: 50 real customers → 500 synthetic customers
    with similar patterns for stress-testing designs
    ```
  </Tab>
</Tabs>

## Best Practices for Data Import

<CardGroup>
  <Card title="Data Quality" icon="shield-check">
    **Prepare quality data:**

    ✅ **Clean data** before import (remove duplicates, fix errors)
    ✅ **Representative sample** (include edge cases and variations)
    ✅ **Current data** (recent enough to be relevant)
    ✅ **Complete records** (minimal missing values)
    ✅ **Diverse examples** (different user types, scenarios)
  </Card>

  <Card title="Privacy First" icon="lock">
    **Protect sensitive information:**

    ✅ **Remove unnecessary PII** before upload
    ✅ **Use test/demo data** when possible
    ✅ **Enable anonymization** for real data
    ✅ **Check team permissions** before sharing
    ✅ **Review data retention** settings regularly
  </Card>
</CardGroup>

***

<Card title="Explore Document Processing" icon="file-pdf">
  Learn how to import PDFs, design specs, and other documents to build comprehensive product context.

  [PDF Processing →](/designing/input/pdf-processing)
</Card>


# Links & Notes
Source: https://docs.figr.design/designing/input/links-and-notes

Add contextual links and notes to provide Figr with comprehensive product understanding and design guidance.

# Links & Notes

Enhance Figr's product understanding with contextual links and detailed notes. Share references, document decisions, and provide ongoing guidance that shapes every design.

<info>
  **Contextual intelligence:** Links and notes create a rich knowledge base that Figr references when making design decisions, ensuring consistency and context-awareness.
</info>

## Types of Contextual Information

<Tabs>
  <Tab title="Reference Links">
    **External resources that inform design:**

    <CardGroup>
      <Card title="Product References" icon="external-link">
        * Live product URLs (staging/production)
        * Competitor websites and apps
        * Industry best practices
        * Design inspiration sources
        * Documentation sites
      </Card>

      <Card title="Research Resources" icon="search">
        * User testing videos
        * Analytics dashboards
        * Survey results
        * Case studies
        * Academic research
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Design Notes">
    **Contextual guidance and decisions:**

    ```
    Decision Notes:
    "We use blue for primary actions because user testing 
    showed 23% better click-through rates vs. green"

    Constraint Notes:
    "Mobile layouts must work with one-handed usage - 
    primary actions in thumb reach zone"

    Pattern Notes:
    "Error messages appear below form fields, not above, 
    based on eye-tracking studies"
    ```
  </Tab>

  <Tab title="Team Knowledge">
    **Institutional memory and learnings:**

    * Design rationale and reasoning
    * A/B test results and insights
    * User feedback themes
    * Technical implementation notes
    * Stakeholder preferences and requirements
  </Tab>
</Tabs>

## Adding Links and References

<Steps>
  <Step title="Link Categories">
    **Organize references by purpose:**

    <AccordionGroup>
      <Accordion title="Product Context">
        ```
        🔗 Production app: https://app.yourproduct.com
        🔗 Staging environment: https://staging.yourproduct.com
        🔗 Design system: https://design.yourcompany.com
        🔗 Component library: https://storybook.yourproduct.com
        ```
      </Accordion>

      <Accordion title="Research & Analytics">
        ```
        📊 Google Analytics: dashboard.google.com/analytics
        🎥 User testing videos: loom.com/share/user-research
        📋 Survey results: typeform.com/results/user-survey
        📈 Mixpanel dashboard: mixpanel.com/project/insights
        ```
      </Accordion>

      <Accordion title="Inspiration & Benchmarks">
        ```
        🎨 Design inspiration: dribbble.com/shots/saved
        🏆 Best practices: nngroup.com/articles/mobile-ux
        🔍 Competitor analysis: competitor.com/feature-name
        📱 Mobile patterns: mobbin.design/patterns
        ```
      </Accordion>
    </AccordionGroup>
  </Step>

  <Step title="Contextual Notes">
    **Add detailed context and reasoning:**

    <Frame>
      <img alt="Interface for adding contextual notes with rich text formatting" />
    </Frame>

    **Note types:**

    ```
    📝 Design Decisions: Why certain choices were made
    ⚠️ Constraints: Technical or business limitations
    💡 Insights: User research findings
    🎯 Goals: Success metrics and objectives
    🔄 Iterations: What was tried and why it changed
    ```
  </Step>

  <Step title="Smart Tagging">
    **Automatic context organization:**

    ```yaml theme={null}
    Auto-tags based on content:
    - #accessibility (WCAG, screen readers)
    - #mobile-first (responsive, touch)
    - #performance (load times, optimization)
    - #conversion (CTAs, funnels)
    - #enterprise (B2B, admin features)
    - #onboarding (new user experience)
    ```
  </Step>
</Steps>

## Note-Taking Best Practices

<CardGroup>
  <Card title="Effective Notes" icon="pencil">
    **Write notes that inform future designs:**

    ✅ **Specific and actionable**
    "Users expect save button top-right in admin interfaces"

    ✅ **Include reasoning**
    "Single-column mobile layout because 68% of users are one-handed"

    ✅ **Reference data**
    "Blue CTAs convert 15% better than green (A/B test July 2024)"
  </Card>

  <Card title="Context Hierarchy" icon="list">
    **Organize information by importance:**

    🔴 **Critical constraints** (must follow)
    🟡 **Strong preferences** (should follow)
    🟢 **Nice to have** (consider when possible)

    **Example:**
    🔴 "WCAG AA compliance required for government contract"
    🟡 "Users prefer minimal form fields"
    🟢 "Consider animation to delight users"
  </Card>
</CardGroup>

## Link Processing & Integration

<Tabs>
  <Tab title="Automatic Analysis">
    **Figr analyzes linked content:**

    ```
    When you add: https://competitor.com/dashboard

    Figr extracts:
    ✅ Visual design patterns
    ✅ Layout structures
    ✅ Color schemes and typography
    ✅ Interactive elements
    ✅ Content organization

    Application:
    "Referenced competitor uses sidebar navigation 
    with collapsible sections - consider for enterprise users"
    ```
  </Tab>

  <Tab title="Content Monitoring">
    **Track changes in referenced content:**

    <CardGroup>
      <Card title="Update Notifications" icon="bell">
        * Competitor feature changes
        * Design system updates
        * Documentation changes
        * Research report updates
      </Card>

      <Card title="Relevance Scoring" icon="star">
        * High relevance: Direct feature comparisons
        * Medium relevance: Similar user flows
        * Low relevance: General inspiration
        * Outdated: No longer applicable
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Smart Suggestions">
    **Figr suggests relevant links:**

    ```
    When designing checkout flow:
    "Consider reviewing the Stripe checkout pattern you bookmarked"

    When creating mobile layout:
    "Reference the thumb-zone research from NN Group"

    When adding error states:
    "Check the error message guidelines in your design system"
    ```
  </Tab>
</Tabs>

## Collaborative Notes

<Steps>
  <Step title="Team Contributions">
    **Everyone adds their expertise:**

    ```yaml theme={null}
    Product Manager notes:
    - Business requirements and constraints
    - User feedback and feature requests
    - Market research and competitive insights

    Designer notes:
    - Visual design decisions and rationale
    - Usability insights and best practices
    - Accessibility considerations

    Engineer notes:
    - Technical constraints and possibilities
    - Performance implications
    - Implementation complexity
    ```
  </Step>

  <Step title="Note Threading">
    **Connected conversations:**

    <Frame>
      <img alt="Interface showing threaded notes and discussions around design decisions" />
    </Frame>

    **Discussion flow:**

    * Initial note with context
    * Team member responses and questions
    * Resolution and final decision
    * Reference in future designs
  </Step>

  <Step title="Knowledge Building">
    **Cumulative team intelligence:**

    ```
    Month 1: Basic product context
    Month 3: Pattern recognition and preferences
    Month 6: Deep user understanding and edge cases
    Month 12: Institutional knowledge and design wisdom
    ```
  </Step>
</Steps>

## Advanced Features

<AccordionGroup>
  <Accordion title="Smart Linking">
    **Automatic relationship detection:**

    ```
    When you mention "mobile navigation" in notes,
    Figr suggests relevant:
    - Mobile design pattern links
    - Competitor mobile examples
    - Touch interaction guidelines
    - Accessibility mobile standards
    ```
  </Accordion>

  <Accordion title="Note Analytics">
    **Understand knowledge usage:**

    ```
    Most referenced notes:
    1. Mobile interaction guidelines
    2. Brand color usage rules
    3. Enterprise user requirements
    4. Performance constraints

    Insight: Mobile guidelines heavily used → 
    Suggests mobile-first design approach
    ```
  </Accordion>

  <Accordion title="Export & Sharing">
    **Transform notes into documentation:**

    ```
    Export options:
    ✅ Design decision log (PDF)
    ✅ Knowledge base (Markdown)
    ✅ Team wiki pages (HTML)
    ✅ Reference library (JSON)
    ```
  </Accordion>
</AccordionGroup>

## Integration with Design Process

<success>
  **Contextual design:** Notes and links become active participants in the design process, not just static documentation.
</success>

<Tabs>
  <Tab title="Design Generation">
    **Notes influence AI suggestions:**

    ```
    Note: "Enterprise users need bulk actions"
    Design output: Tables include checkboxes and bulk operation toolbar

    Link: Mobile navigation best practices
    Design output: Thumb-friendly navigation with clear touch targets
    ```
  </Tab>

  <Tab title="Validation">
    **Automatic compliance checking:**

    ```
    Constraint note: "Buttons must be minimum 44px for accessibility"
    Figr check: ✅ All buttons meet minimum size requirement

    Reference link: Brand guidelines
    Figr check: ✅ Colors match brand palette
    ```
  </Tab>

  <Tab title="Iteration">
    **Context-aware improvements:**

    ```
    Previous note: "Users confused by icon-only navigation"
    Design suggestion: Add text labels to navigation icons

    Research link: Form completion study
    Design suggestion: Reduce form fields based on completion data
    ```
  </Tab>
</Tabs>

***

<Card title="Explore Screen Sharing" icon="screen-share">
  Learn how to share your screen with Figr for the deepest product understanding possible.

  [Screen Sharing →](/designing/input/screen-sharing)
</Card>


# PDF Processing
Source: https://docs.figr.design/designing/input/pdf-processing

Import PDFs, design specs, and documents to build comprehensive product context for Figr's AI.

# PDF Processing

Transform your existing documents into actionable design context. Figr extracts insights from PDFs, design specifications, user research reports, and brand guidelines to understand your product deeply.

<tip>
  **Document intelligence:** Upload your PRDs, brand guidelines, and research reports once. Figr references them in every design decision.
</tip>

## Supported Document Types

<Tabs>
  <Tab title="Product Documents">
    **Product requirements and specifications:**

    <CardGroup>
      <Card title="PRDs & Specs" icon="file-text">
        * Product requirement documents
        * Technical specifications
        * Feature documentation
        * API documentation
        * User story collections
      </Card>

      <Card title="Research Reports" icon="search">
        * User research findings
        * Usability test reports
        * Analytics reports
        * Market research
        * Competitive analysis
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Design Resources">
    **Visual and brand documentation:**

    ```
    ✅ Brand guideline PDFs
    ✅ Design system documentation
    ✅ Style guide exports
    ✅ Wireframe collections
    ✅ Design review presentations
    ✅ Component library documentation
    ```
  </Tab>

  <Tab title="Business Context">
    **Strategic and business documents:**

    ```
    ✅ Business plan excerpts
    ✅ Go-to-market strategies
    ✅ Customer journey maps
    ✅ Persona documentation
    ✅ Compliance requirements
    ✅ Accessibility guidelines
    ```
  </Tab>
</Tabs>

## Document Processing Pipeline

<Steps>
  <Step title="Upload & Recognition">
    **Intelligent document parsing:**

    <Frame>
      <img alt="PDF upload interface with automatic content recognition" />
    </Frame>

    **What Figr extracts:**

    * Text content and structure
    * Images, diagrams, and screenshots
    * Tables and data structures
    * Visual design elements
    * Document metadata and context
  </Step>

  <Step title="Content Analysis">
    **Figr understands document purpose:**

    <AccordionGroup>
      <Accordion title="Document Classification">
        ```
        📋 Product Requirements → Feature constraints and goals
        🎨 Design Guidelines → Visual standards and patterns
        👥 User Research → Behavior insights and pain points
        📊 Analytics Reports → Performance data and metrics
        🏢 Brand Guidelines → Visual identity and voice
        ```
      </Accordion>

      <Accordion title="Key Information Extraction">
        ```yaml theme={null}
        From PRDs:
        - User stories and acceptance criteria
        - Technical constraints
        - Success metrics
        - Timeline requirements

        From Research:
        - User pain points
        - Behavioral patterns
        - Preference insights
        - Usability issues
        ```
      </Accordion>
    </AccordionGroup>
  </Step>

  <Step title="Knowledge Integration">
    **Document insights become design context:**

    ```
    Example: User Research PDF

    Finding: "Users abandon checkout when seeing shipping costs"
    Design Application: Figr suggests early shipping cost display

    Finding: "Mobile users prefer single-column layouts"
    Design Application: Figr prioritizes mobile-first patterns
    ```
  </Step>
</Steps>

## Document Types & Applications

<Tabs>
  <Tab title="Brand Guidelines">
    **Visual identity documentation:**

    <Frame>
      <img alt="Brand guidelines PDF being processed to extract colors, fonts, and logo usage" />
    </Frame>

    **Extracted elements:**

    ```yaml theme={null}
    Colors: Primary, secondary, accent palettes
    Typography: Font families, weights, sizing scales
    Logos: Usage rules, variations, spacing
    Photography: Style guidelines, treatment examples
    Voice & Tone: Language preferences, writing style
    ```

    **Design application:**

    * Automatic brand compliance in all designs
    * Consistent color and typography usage
    * Appropriate logo placement and sizing
    * Brand-aligned visual hierarchy
  </Tab>

  <Tab title="User Research">
    **Research insights into design decisions:**

    ```
    Research Finding: "Enterprise users need bulk actions"
    Figr Application: Suggests batch operations in table designs

    Research Finding: "Users scan before reading"
    Figr Application: Emphasizes scannable layouts and clear hierarchy

    Research Finding: "Mobile users are task-focused"
    Figr Application: Prioritizes primary actions on mobile
    ```

    **Key extractions:**

    * User pain points and frustrations
    * Successful interaction patterns
    * Device and context preferences
    * Task completion strategies
  </Tab>

  <Tab title="Technical Specifications">
    **Implementation constraints and requirements:**

    <AccordionGroup>
      <Accordion title="Performance Requirements">
        ```
        Page load: < 2 seconds
        Image optimization: WebP preferred
        Bundle size: < 1MB JavaScript
        Accessibility: WCAG 2.1 AA compliance
        ```
      </Accordion>

      <Accordion title="Technical Constraints">
        ```
        Browser support: IE11+ (affects CSS choices)
        Framework: React + TypeScript
        Component library: Material-UI based
        API limitations: 50 items per page max
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Advanced Processing Features

<CardGroup>
  <Card title="Multi-language Support" icon="globe">
    **International document processing:**

    * Extract content from documents in 50+ languages
    * Understand cultural design preferences
    * Translate insights across languages
    * Maintain context across translations
  </Card>

  <Card title="Version Tracking" icon="history">
    **Document evolution management:**

    * Track changes across document versions
    * Compare insights between versions
    * Maintain design consistency during updates
    * Archive outdated information appropriately
  </Card>
</CardGroup>

## Document Management

<Steps>
  <Step title="Organization">
    **Smart document categorization:**

    ```
    📁 Current Standards
    ├── Brand Guidelines v3.2
    ├── Design System Docs
    └── Accessibility Requirements

    📁 Research & Insights
    ├── Q4 User Research Report
    ├── Mobile Usability Study
    └── Competitor Analysis

    📁 Product Requirements
    ├── Feature Spec - Dashboard
    ├── API Documentation
    └── Performance Requirements
    ```
  </Step>

  <Step title="Search & Reference">
    **Find relevant information quickly:**

    ```
    Search examples:
    "accessibility requirements for forms"
    "brand color usage guidelines"
    "mobile user behavior insights"
    "API response time constraints"
    ```
  </Step>

  <Step title="Update Management">
    **Keep information current:**

    * Automatic notifications for document updates
    * Version comparison tools
    * Impact assessment for changes
    * Seamless context updates in active designs
  </Step>
</Steps>

## Privacy & Security

<shield>
  **Enterprise-grade document security:** Your sensitive documents are processed with bank-level security and never shared outside your organization.
</shield>

<Tabs>
  <Tab title="Processing Security">
    ```yaml theme={null}
    Encryption: AES-256 in transit and at rest
    Access: Role-based document permissions
    Processing: Isolated per organization
    Retention: Configurable document lifecycle
    ```
  </Tab>

  <Tab title="Content Redaction">
    **Automatic sensitive information protection:**

    ```
    Automatically redacted:
    - Social security numbers
    - Credit card information
    - Email addresses (optional)
    - Phone numbers (optional)
    - Custom sensitive patterns
    ```
  </Tab>
</Tabs>

***

<Card title="Learn About Links & Notes" icon="link">
  Discover how to add contextual information and reference materials to enhance Figr's understanding.

  [Links & Notes →](/designing/input/links-and-notes)
</Card>


# Screen Sharing
Source: https://docs.figr.design/designing/input/screen-sharing

Share your screen with Figr to provide the deepest possible product understanding through live product demonstration.

# Screen Sharing

Screen sharing is Figr's most powerful context-building feature. Show Figr your actual product in action to build comprehensive understanding that no document or screenshot can match.

<tip>
  **The game changer:** 15 minutes of screen sharing teaches Figr more about your product than hours of documentation. It sees how things actually work, not just how they're supposed to work.
</tip>

## Why Screen Sharing Works

<CardGroup>
  <Card title="Static Context" icon="image">
    **Screenshots and docs show:**

    * How interfaces look
    * Individual page states
    * Design system components
    * Documented workflows

    **Missing:** Flow, interaction, real usage patterns
  </Card>

  <Card title="Live Context" icon="video">
    **Screen sharing reveals:**

    * How users actually navigate
    * Real interaction patterns
    * Edge cases and error states
    * Performance and loading behavior

    **Result:** Complete product understanding
  </Card>
</CardGroup>

## Screen Sharing Setup

<Steps>
  <Step title="Prepare Your Demo">
    **Before starting the session:**

    ```yaml theme={null}
    Environment Setup:
    ✅ Use staging or demo environment
    ✅ Prepare realistic test data
    ✅ Close sensitive tabs/applications
    ✅ Test screen sharing permissions
    ✅ Plan 3-4 key user flows to demonstrate
    ```

    <warning>
      **Privacy first:** Only share demo environments with test data. Figr doesn't record sessions, but practice good security hygiene.
    </warning>
  </Step>

  <Step title="Start Screen Sharing">
    **Initiate from Figr project:**

    <Frame>
      <img alt="Figr interface showing screen sharing initiation button and setup options" />
    </Frame>

    **Sharing options:**

    * **Entire screen:** Best for comprehensive demos
    * **Application window:** Focus on specific app
    * **Browser tab:** Web application demos
    * **Mobile device:** Via USB debugging or simulator
  </Step>

  <Step title="Guided Navigation">
    **What to show Figr:**

    <Tabs>
      <Tab title="Core Workflows">
        **Primary user journeys:**

        ```
        1. User login and dashboard arrival
        2. Primary task completion (e.g., create project)
        3. Data entry and form interactions
        4. Navigation between major sections
        5. Settings and account management
        ```
      </Tab>

      <Tab title="Edge Cases">
        **Important variations:**

        ```
        1. Empty states (new user, no data)
        2. Error scenarios (validation, network issues)
        3. Loading states (slow connections, large datasets)
        4. Different user types (admin vs. regular user)
        5. Mobile responsive behavior
        ```
      </Tab>

      <Tab title="Interaction Details">
        **How things actually work:**

        ```
        1. Form validation timing and messages
        2. Search and filtering behavior
        3. Drag-and-drop interactions
        4. Modal and overlay patterns
        5. Navigation and breadcrumb behavior
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## What Figr Learns from Screen Sharing

<Tabs>
  <Tab title="Navigation Patterns">
    **How users move through your product:**

    <AccordionGroup>
      <Accordion title="Information Architecture">
        ```
        Observed patterns:
        - Main navigation structure and hierarchy
        - Breadcrumb usage and paths
        - Back button behavior
        - Deep linking and URL patterns
        - Cross-section navigation flows
        ```
      </Accordion>

      <Accordion title="User Behavior">
        ```
        Real usage insights:
        - Where users typically start tasks
        - Common path variations
        - Points of confusion or hesitation
        - Shortcuts and power user patterns
        - Mobile vs. desktop differences
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Interaction Design">
    **How your interface actually behaves:**

    ```yaml theme={null}
    Form Patterns:
    - Validation timing (on blur, on submit, real-time)
    - Error message placement and styling
    - Success feedback and confirmations
    - Auto-save behavior and indicators

    Data Display:
    - Table sorting and filtering patterns
    - Pagination vs. infinite scroll
    - Loading states and skeleton screens
    - Empty state handling and CTAs

    Navigation:
    - Menu collapse/expand behavior
    - Active state indicators
    - Hover effects and micro-interactions
    - Mobile navigation patterns
    ```
  </Tab>

  <Tab title="Performance Reality">
    **Real-world performance characteristics:**

    <CardGroup>
      <Card title="Loading Behavior" icon="clock">
        * Actual page load times
        * Data fetching patterns
        * Progressive loading strategies
        * User perception of speed
      </Card>

      <Card title="Responsiveness" icon="mobile">
        * Touch interaction responsiveness
        * Animation performance
        * Scroll behavior and smoothness
        * Cross-device consistency
      </Card>
    </CardGroup>
  </Tab>
</Tabs>

## Effective Screen Sharing Techniques

<Steps>
  <Step title="Narrate Your Actions">
    **Provide context as you navigate:**

    ```
    Good narration:
    "I'm clicking on Projects because that's where users 
    typically start their workflow. Notice how the sidebar 
    stays collapsed on tablet sizes..."

    "This error message appears because we validate email 
    addresses in real-time. Users often miss this if 
    they're typing quickly..."

    "The dashboard loads slowly with lots of data, so we 
    show these skeleton components to maintain the illusion 
    of speed..."
    ```
  </Step>

  <Step title="Show Multiple User Types">
    **Demonstrate different perspectives:**

    <Tabs>
      <Tab title="Admin Users">
        ```
        Admin-specific flows:
        - User management interfaces
        - System configuration options
        - Bulk operations and data management
        - Analytics and reporting views
        ```
      </Tab>

      <Tab title="Regular Users">
        ```
        Standard user experience:
        - Core feature usage patterns
        - Self-service options
        - Limited permission interfaces
        - Simplified navigation
        ```
      </Tab>

      <Tab title="New Users">
        ```
        Onboarding experience:
        - First-time user flows
        - Progressive disclosure
        - Help and guidance elements
        - Setup and configuration steps
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Demonstrate Edge Cases">
    **Show what happens when things go wrong:**

    ```yaml theme={null}
    Error Scenarios:
    - Network connectivity issues
    - Server errors and downtime
    - Invalid data entry
    - Permission denied states
    - Timeout and session expiry

    Data Variations:
    - Empty states and first-time use
    - Maximum data scenarios (full tables, long lists)
    - International content (different languages)
    - Special characters and edge case data
    ```
  </Step>
</Steps>

## Screen Sharing for Different Products

<Tabs>
  <Tab title="Web Applications">
    **Browser-based product demos:**

    <Frame>
      <img alt="Screen sharing interface showing web application demo with multiple browser tabs" />
    </Frame>

    **Focus areas:**

    * Responsive behavior across screen sizes
    * Browser compatibility differences
    * Progressive web app features
    * Cross-tab synchronization
  </Tab>

  <Tab title="Mobile Applications">
    **Native mobile app demonstrations:**

    ```yaml theme={null}
    Demo methods:
    - iOS Simulator (via macOS screen sharing)
    - Android Emulator (via desktop screen sharing)
    - Physical device (via USB debugging)
    - Mobile browser (for web apps)

    Key demonstrations:
    - Touch interactions and gestures
    - Orientation changes
    - Push notification handling
    - Offline behavior
    ```
  </Tab>

  <Tab title="Desktop Applications">
    **Native desktop software:**

    ```
    Important aspects:
    ✅ Window management and resizing
    ✅ Keyboard shortcuts and accessibility
    ✅ File system integration
    ✅ Multi-monitor support
    ✅ Operating system integration
    ```
  </Tab>
</Tabs>

## Advanced Screen Sharing Features

<CardGroup>
  <Card title="Multi-Device Sessions" icon="devices">
    **Show cross-platform consistency:**

    * Desktop → tablet → mobile progression
    * Sync behavior across devices
    * Responsive breakpoint demonstrations
    * Platform-specific patterns
  </Card>

  <Card title="Collaborative Sessions" icon="users">
    **Team-based demonstrations:**

    * Multiple team members showing different aspects
    * Real-time collaboration features
    * User testing session recordings
    * Stakeholder-guided tours
  </Card>
</CardGroup>

## Screen Sharing Security

<shield>
  **Privacy protection:** Figr's screen sharing is designed for security-conscious teams with enterprise-grade privacy controls.
</shield>

<AccordionGroup>
  <Accordion title="Data Protection">
    ```yaml theme={null}
    Security measures:
    - No session recording or storage
    - Real-time processing only
    - Encrypted transmission
    - Automatic session termination
    - No personal data capture
    ```
  </Accordion>

  <Accordion title="Access Controls">
    ```yaml theme={null}
    Team permissions:
    - Who can initiate screen sharing
    - Who can view shared sessions
    - Session duration limits
    - Approval workflows for sensitive demos
    ```
  </Accordion>

  <Accordion title="Compliance">
    ```yaml theme={null}
    Enterprise features:
    - SOC 2 Type II compliance
    - GDPR data handling
    - HIPAA-compatible sessions
    - Custom security policies
    ```
  </Accordion>
</AccordionGroup>

## Troubleshooting Screen Sharing

<CardGroup>
  <Card title="Connection Issues" icon="wifi">
    **Common problems and solutions:**

    ❌ **Can't start sharing**
    ✅ Check browser permissions
    ✅ Try incognito/private mode
    ✅ Disable VPN temporarily

    ❌ **Poor quality/lag**
    ✅ Close unnecessary applications
    ✅ Use wired internet connection
    ✅ Reduce shared screen resolution
  </Card>

  <Card title="Browser Compatibility" icon="browser">
    **Supported browsers and features:**

    ✅ **Chrome:** Full feature support
    ✅ **Firefox:** Standard screen sharing
    ✅ **Safari:** macOS native support
    ✅ **Edge:** Windows integration

    **Note:** Chrome recommended for best experience
  </Card>
</CardGroup>

***

<Card title="Explore Canvas Features" icon="canvas">
  Learn how to organize and work with your designs in Figr's infinite canvas workspace.

  [Infinite Workspace →](/designing/canvas/infinite-workspace)
</Card>


# Screenshots & Images
Source: https://docs.figr.design/designing/input/screenshots-images

Upload screenshots and images to build Figr's visual understanding of your product and design context.

# Screenshots & Images

Visual context is crucial for product-aware design. Screenshots and images help Figr understand your existing product, design patterns, and visual brand language.

<tip>
  **Visual learning:** A few well-chosen screenshots often teach Figr more about your product than pages of written description.
</tip>

## Types of Visual Assets

<Tabs>
  <Tab title="Product Screenshots">
    **Most valuable for product context:**

    <AccordionGroup>
      <Accordion title="Interface Screenshots">
        **What to capture:**

        ```
        ✅ Main dashboard or home screen
        ✅ Primary user workflows (login → core task → completion)
        ✅ Navigation patterns and menu structures
        ✅ Form layouts and input patterns
        ✅ Data visualization and content layouts
        ✅ Mobile responsive views
        ```

        **Why these matter:** Figr learns your actual design patterns, not just design system documentation

        <Frame>
          <img alt="Examples of effective product screenshots showing navigation, forms, and data layouts" />
        </Frame>
      </Accordion>

      <Accordion title="State Variations">
        **Capture different interface states:**

        ```
        ✅ Empty states (no data, new user experience)
        ✅ Loading states (spinners, skeleton screens)
        ✅ Error states (validation errors, system errors)
        ✅ Success states (confirmations, completed actions)
        ✅ High-data states (full tables, long lists)
        ✅ Different user permission levels
        ```

        **Learning value:** Figr understands your complete interaction design system
      </Accordion>

      <Accordion title="User Journey Screenshots">
        **Show complete workflows:**

        ```
        Example: E-commerce Purchase Flow
        1. Product browsing page
        2. Product detail view  
        3. Add to cart confirmation
        4. Shopping cart review
        5. Checkout form
        6. Payment processing
        7. Order confirmation
        ```

        **Context gained:** How your users actually move through your product
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Design System Assets">
    **Visual design system documentation:**

    <CardGroup>
      <Card title="Component Libraries" icon="puzzle-piece">
        **Upload images of:**

        * Button variations and states
        * Form component examples
        * Navigation pattern screenshots
        * Card and layout components
        * Typography scale examples
        * Icon library grids

        **Value:** Figr learns your actual component usage, not just specs
      </Card>

      <Card title="Brand Guidelines" icon="palette">
        **Upload images of:**

        * Color palette examples
        * Logo usage guidelines
        * Typography in context
        * Photography style examples
        * Illustration style guides
        * Brand application examples

        **Value:** Figr understands your visual brand language
      </Card>
    </CardGroup>

    <info>
      **Pro tip:** Screenshots of components in actual use are more valuable than isolated component documentation. They show Figr how components work together.
    </info>
  </Tab>

  <Tab title="Reference Materials">
    **Inspiration and competitive context:**

    <AccordionGroup>
      <Accordion title="Competitive Analysis">
        **Screenshots from competitors showing:**

        * Features you want to match or exceed
        * Interaction patterns that work well
        * Design approaches to avoid
        * Industry standard patterns

        **Usage by Figr:** Understands your competitive context and industry norms
      </Accordion>

      <Accordion title="Design Inspiration">
        **Visual references for:**

        * Layout ideas and patterns
        * Visual design directions
        * Interaction concepts
        * Animation and motion examples

        **Usage by Figr:** Expands design vocabulary while staying true to your brand
      </Accordion>

      <Accordion title="User Research Visuals">
        **Screenshots from research:**

        * User testing session recordings
        * Heat map visualizations
        * Analytics dashboard screenshots
        * Survey result visualizations

        **Usage by Figr:** Understands actual user behavior and preferences
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Upload Methods

<Steps>
  <Step title="Drag & Drop Upload">
    **Fastest method for multiple images:**

    <Frame>
      <img alt="Figr interface showing drag and drop area for uploading multiple images" />
    </Frame>

    **Supported formats:**

    ```
    ✅ PNG (best for UI screenshots)
    ✅ JPG (good for photographs, smaller files)
    ✅ SVG (perfect for logos and icons)
    ✅ WebP (modern format, great compression)
    ✅ GIF (for simple animations)
    ```

    **Tips for best results:**

    * Use PNG for crisp UI screenshots
    * Compress large images before upload
    * Group related screenshots in one upload session
  </Step>

  <Step title="URL Import">
    **Pull images directly from web sources:**

    ```
    Supported sources:
    ✅ Direct image URLs (.png, .jpg, etc.)
    ✅ Figma shared prototypes
    ✅ InVision prototype links
    ✅ Adobe XD share links
    ✅ Sketch Cloud sharing links
    ✅ Public design portfolio pages
    ```

    **Perfect for:**

    * Importing from existing design tools
    * Sharing competitive analysis screenshots
    * Pulling from design inspiration sites
  </Step>

  <Step title="Browser Extension">
    **Capture screenshots directly:**

    <success>
      **Coming soon:** Figr browser extension for one-click screenshot capture with automatic context tagging.
    </success>

    **Planned features:**

    * Full page screenshots
    * Element-specific captures
    * Automatic annotation with page context
    * Direct upload to your Figr project
  </Step>

  <Step title="Mobile App Sync">
    **Import from mobile devices:**

    ```
    Methods:
    ✅ AirDrop (iOS to Mac)
    ✅ Google Photos sync
    ✅ Dropbox/Drive integration
    ✅ Email screenshots to project
    ✅ QR code upload link
    ```

    **Use cases:**

    * Mobile app screenshots
    * In-context user testing photos
    * Real-world usage documentation
  </Step>
</Steps>

## Image Organization & Tagging

<Tabs>
  <Tab title="Automatic Categorization">
    **Figr intelligently organizes uploaded images:**

    <AccordionGroup>
      <Accordion title="Content Recognition">
        **Automatic detection:**

        ```
        📱 Mobile interface screenshots
        💻 Desktop application views
        📊 Data visualization and charts
        📝 Form and input interfaces
        🎨 Design system components
        🏢 Brand and marketing materials
        ```

        **Smart tagging:** Figr adds relevant tags based on visual content analysis
      </Accordion>

      <Accordion title="Context Grouping">
        **Related images grouped by:**

        * Similar visual elements (color schemes, layouts)
        * Sequential workflow steps
        * Product area or feature category
        * Upload session and date
        * Device type and screen size

        **Benefit:** Easy to find related examples when designing
      </Accordion>

      <Accordion title="Quality Assessment">
        **Figr evaluates image usefulness:**

        ```
        🟢 High quality: Clear, relevant, good resolution
        🟡 Medium quality: Useful but some limitations
        🔴 Low quality: Blurry, irrelevant, or poor resolution
        ```

        **Suggestions:** Figr recommends better alternatives when available
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Manual Organization">
    **Custom organization options:**

    <CardGroup>
      <Card title="Custom Tags" icon="tag">
        **Organize by purpose:**

        ```
        #current-product
        #competitor-analysis  
        #design-inspiration
        #user-research
        #mobile-specific
        #desktop-only
        #accessibility-example
        #error-state
        ```
      </Card>

      <Card title="Project Folders" icon="folder">
        **Group by project or feature:**

        ```
        📁 Dashboard Redesign
        📁 Mobile App Launch
        📁 Checkout Optimization
        📁 Design System V2
        ```
      </Card>
    </CardGroup>

    **Batch operations:**

    * Tag multiple images at once
    * Move groups to different projects
    * Bulk export or archive
    * Mass annotation updates
  </Tab>

  <Tab title="Search & Discovery">
    **Find images quickly:**

    ```
    Search examples:
    "mobile checkout flow"
    "error state with red styling"
    "dashboard with sidebar navigation"
    "form validation examples"
    "competitor login page"
    ```

    **Advanced search:**

    * Visual similarity search
    * Color-based filtering
    * Device type filtering
    * Date range search
    * Project-specific search
  </Tab>
</Tabs>

## Image Analysis & Learning

<info>
  **Visual intelligence:** Figr analyzes your images to understand design patterns, extract design tokens, and learn your visual language.
</info>

<Steps>
  <Step title="Design Pattern Recognition">
    **What Figr extracts from screenshots:**

    <AccordionGroup>
      <Accordion title="Layout Patterns">
        ```
        ✅ Grid systems and spacing
        ✅ Navigation placement and structure
        ✅ Content hierarchy and organization
        ✅ Responsive breakpoint behaviors
        ✅ Component arrangement patterns
        ```
      </Accordion>

      <Accordion title="Visual Design Elements">
        ```
        ✅ Color palette usage and patterns
        ✅ Typography scales and hierarchies
        ✅ Border radius and shadow patterns
        ✅ Icon style and usage conventions
        ✅ Photography and illustration styles
        ```
      </Accordion>

      <Accordion title="Interaction Cues">
        ```
        ✅ Button styles and states
        ✅ Link styling and hover effects
        ✅ Form input designs and validation
        ✅ Loading and progress indicators
        ✅ Call-to-action prominence patterns
        ```
      </Accordion>
    </AccordionGroup>
  </Step>

  <Step title="Design Token Extraction">
    **Automatic design system detection:**

    <Frame>
      <img alt="Interface showing how Figr extracts colors, fonts, and spacing from uploaded screenshots" />
    </Frame>

    **Extracted tokens:**

    ```css theme={null}
    /* Colors found in screenshots */
    --primary-blue: #2563eb;
    --success-green: #10b981;
    --warning-orange: #f59e0b;

    /* Typography patterns */
    --heading-font: "Inter", sans-serif;
    --body-font: "Inter", sans-serif;
    --heading-scale: 1.25;

    /* Spacing patterns */
    --space-unit: 8px;
    --component-padding: 16px;
    --section-gap: 32px;
    ```
  </Step>

  <Step title="Contextual Understanding">
    **Learning from image context:**

    <Tabs>
      <Tab title="User Behavior Insights">
        **From user testing screenshots:**

        * Where users look first (attention patterns)
        * Common interaction mistakes
        * Successful task completion flows
        * Device and context usage patterns
      </Tab>

      <Tab title="Business Context">
        **From product screenshots:**

        * Feature prominence and hierarchy
        * Content organization principles
        * User type differences
        * Conversion-focused design elements
      </Tab>

      <Tab title="Technical Constraints">
        **From implementation screenshots:**

        * Component reuse patterns
        * Performance optimization choices
        * Responsive design approaches
        * Accessibility implementation examples
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Best Practices for Screenshot Success

<CardGroup>
  <Card title="Quality Guidelines" icon="star">
    **For maximum learning value:**

    ✅ **High resolution** (at least 1920px wide for desktop)
    ✅ **Clean screenshots** (close dev tools, hide personal info)
    ✅ **Representative data** (realistic content, not Lorem ipsum)
    ✅ **Multiple devices** (desktop, tablet, mobile views)
    ✅ **Complete flows** (beginning to end of user journeys)
  </Card>

  <Card title="Context Enhancement" icon="message-square">
    **Add helpful annotations:**

    ✅ **Describe the purpose** ("Main dashboard for marketing managers")
    ✅ **Note special conditions** ("Peak usage state", "Error scenario")
    ✅ **Explain variations** ("Enterprise vs. standard user view")
    ✅ **Highlight key elements** ("Primary CTA", "Navigation pattern")
    ✅ **Document constraints** ("Must work on IE11", "508 compliant")
  </Card>
</CardGroup>

### Common Screenshot Mistakes

<AccordionGroup>
  <Accordion title="Too Generic">
    **Problem:** Screenshots of empty states or demo data
    **Solution:** Use realistic, representative content that shows actual usage patterns

    **Bad:** Empty dashboard with placeholder text
    **Good:** Dashboard with realistic data showing typical user scenarios
  </Accordion>

  <Accordion title="Inconsistent Context">
    **Problem:** Screenshots from different product versions or contexts
    **Solution:** Organize by product version and clearly label context

    **Bad:** Mixing old and new interface versions
    **Good:** Clear labeling: "Current production", "Beta version", "Proposed redesign"
  </Accordion>

  <Accordion title="Missing Key States">
    **Problem:** Only showing happy path screenshots
    **Solution:** Include error states, loading states, and edge cases

    **Bad:** Only success scenarios
    **Good:** Complete state coverage including errors and empty states
  </Accordion>
</AccordionGroup>

## Integration with Other Input Methods

<success>
  **Combined power:** Screenshots work best when combined with other Figr input methods for complete product context.
</success>

<Steps>
  <Step title="Screenshots + Screen Sharing">
    Use screenshots for reference, screen sharing for understanding workflows and interactions
  </Step>

  <Step title="Screenshots + CSV Data">
    Combine interface screenshots with actual data structures for realistic designs
  </Step>

  <Step title="Screenshots + Documentation">
    Pair visual examples with written specifications for complete context
  </Step>
</Steps>

***

<Card title="Learn About Data Integration" icon="table">
  Discover how to import structured data to make your designs more realistic and contextually accurate.

  [CSV & Excel Import →](/designing/input/csv-excel-import)
</Card>


# Building on Existing
Source: https://docs.figr.design/designing/interface/building-on-existing

Extend and enhance your current product interfaces while maintaining consistency and user familiarity.

# Building on Existing

Enhance your product without breaking user expectations. Figr understands your existing interface patterns and helps you extend them naturally for new features and improvements.

<success>
  **Seamless evolution:** Add new capabilities that feel like they've always been part of your product, maintaining user confidence and reducing learning curves.
</success>

## Understanding Your Current Product

<Steps>
  <Step title="Interface Pattern Analysis">
    **Figr analyzes your existing design patterns:**

    <Frame>
      <img alt="Dashboard showing analysis of existing interface patterns and design elements" />
    </Frame>

    **Pattern recognition:**

    ```yaml theme={null}
    Navigation patterns:
    - Menu structures and hierarchies
    - Breadcrumb usage and styling
    - Link behaviors and states
    - Mobile navigation approaches

    Layout conventions:
    - Page structure consistency
    - Content organization methods
    - Spacing and alignment rules
    - Responsive behavior patterns

    Component usage:
    - Button styles and variations
    - Form input patterns
    - Card and container designs
    - Data table approaches
    ```
  </Step>

  <Step title="User Behavior Mapping">
    **How users currently interact with your product:**

    <Tabs>
      <Tab title="Navigation Preferences">
        ```yaml theme={null}
        User flow analysis:
        - Most common user pathways
        - Preferred feature access methods
        - Search vs browse behavior
        - Mobile vs desktop usage patterns
        ```
      </Tab>

      <Tab title="Interaction Expectations">
        ```yaml theme={null}
        Established behaviors:
        - Click target expectations
        - Form completion patterns
        - Error recovery methods
        - Help-seeking behaviors
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Consistency Assessment">
    **Identify existing design debt and opportunities:**

    <AccordionGroup>
      <Accordion title="Strong Patterns">
        ```yaml theme={null}
        Successful design elements to preserve:
        - Well-adopted navigation structures
        - Efficient user workflows
        - Clear information hierarchies
        - Effective visual feedback systems
        ```
      </Accordion>

      <Accordion title="Inconsistencies">
        ```yaml theme={null}
        Areas needing alignment:
        - Mixed button styles across pages
        - Inconsistent form layouts
        - Varying spacing patterns
        - Different error message approaches
        ```
      </Accordion>

      <Accordion title="Missing Patterns">
        ```yaml theme={null}
        Gaps to address:
        - Undefined edge case handling
        - Missing accessibility patterns
        - Incomplete responsive behaviors
        - Absent loading state designs
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Extension Strategies

<Tabs>
  <Tab title="Natural Evolution">
    **Extend existing patterns logically:**

    <CardGroup>
      <Card title="Pattern Expansion" icon="expand">
        **Grow existing design systems:**

        * Add new component variants
        * Extend interaction patterns
        * Scale layout approaches
        * Develop pattern variations
      </Card>

      <Card title="Feature Integration" icon="puzzle-piece">
        **Seamlessly add new capabilities:**

        * Match existing navigation logic
        * Follow established workflows
        * Use familiar interaction methods
        * Maintain visual consistency
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Progressive Enhancement">
    **Improve while maintaining familiarity:**

    <Steps>
      <Step title="Identify Improvement Opportunities">
        Find areas where small changes create big user experience gains
      </Step>

      <Step title="Test Enhancement Impact">
        Validate that improvements don't disrupt existing user workflows
      </Step>

      <Step title="Gradual Implementation">
        Roll out enhancements that feel natural to existing users
      </Step>
    </Steps>
  </Tab>

  <Tab title="Contextual Addition">
    **Add features where users expect them:**

    ```yaml theme={null}
    Strategic placement:

    Expected locations:
    - Settings in consistent menu locations
    - Actions near related content
    - Help where users encounter difficulties
    - Advanced features in logical progressions

    User mental model alignment:
    - Group related functionality together
    - Follow established information architecture
    - Maintain predictable navigation paths
    - Use familiar terminology and concepts
    ```
  </Tab>
</Tabs>

## Design Consistency Maintenance

<Steps>
  <Step title="Visual Consistency">
    **Maintain design system integrity:**

    <Frame>
      <img alt="Interface showing how existing design system components are extended for new features" />
    </Frame>

    **Consistency checkpoints:**

    ```yaml theme={null}
    Color usage:
    - Primary action colors consistent
    - Status colors follow established patterns
    - Brand colors used appropriately
    - Contrast ratios maintained

    Typography:
    - Heading hierarchy preserved
    - Body text consistency maintained
    - Link styling follows patterns
    - Label and helper text alignment

    Spacing:
    - Component padding consistent
    - Layout margins follow grid
    - Element relationships preserved
    - White space usage patterns
    ```
  </Step>

  <Step title="Interaction Consistency">
    **Preserve user expectations:**

    <Tabs>
      <Tab title="Navigation Behavior">
        ```yaml theme={null}
        Consistent interactions:
        - Link behaviors and styling
        - Back button functionality
        - Breadcrumb interactions
        - Menu hover and click states
        ```
      </Tab>

      <Tab title="Form Interactions">
        ```yaml theme={null}
        Input consistency:
        - Validation timing and messaging
        - Error state styling and behavior
        - Success feedback patterns
        - Auto-save and draft behaviors
        ```
      </Tab>

      <Tab title="Feedback Systems">
        ```yaml theme={null}
        User feedback patterns:
        - Loading indicator styles
        - Progress communication methods
        - Error message formatting
        - Success confirmation approaches
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Content Strategy Alignment">
    **Maintain voice and information architecture:**

    ```yaml theme={null}
    Content consistency:

    Voice and tone:
    - Writing style preservation
    - Terminology consistency
    - Help text approaches
    - Error message voice

    Information architecture:
    - Content categorization logic
    - Labeling conventions
    - Hierarchy preservation
    - Cross-referencing patterns
    ```
  </Step>
</Steps>

## Common Extension Scenarios

<Tabs>
  <Tab title="Feature Addition">
    **Adding new capabilities to existing areas:**

    <AccordionGroup>
      <Accordion title="Dashboard Enhancements">
        ```yaml theme={null}
        Common additions:
        - New metric widgets following existing card patterns
        - Additional filter options using established controls
        - Export functionality matching current button styles
        - Refresh mechanisms consistent with existing patterns

        Integration approach:
        - Use existing widget framework
        - Follow established data visualization patterns
        - Maintain consistent spacing and alignment
        - Preserve familiar interaction methods
        ```
      </Accordion>

      <Accordion title="Settings Expansion">
        ```yaml theme={null}
        New configuration options:
        - Additional preference categories
        - New user management features
        - Integration configuration panels
        - Security and privacy controls

        Design approach:
        - Extend existing settings navigation
        - Use established form patterns
        - Follow current validation approaches
        - Maintain help text conventions
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Workflow Enhancement">
    **Improving existing user journeys:**

    <CardGroup>
      <Card title="Process Streamlining" icon="fast-forward">
        **Reduce steps while maintaining familiarity:**

        * Combine related actions logically
        * Add shortcuts for power users
        * Implement smart defaults
        * Provide progress indicators
      </Card>

      <Card title="Error Prevention" icon="shield">
        **Improve user success rates:**

        * Add validation at appropriate points
        * Provide clearer guidance
        * Implement auto-save features
        * Create better error recovery
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Platform Extension">
    **Extending to new platforms or devices:**

    ```yaml theme={null}
    Cross-platform considerations:

    Mobile adaptation:
    - Touch-friendly interaction scaling
    - Navigation pattern adaptation
    - Content prioritization for small screens
    - Platform-specific conventions integration

    Tablet optimization:
    - Intermediate layout approaches
    - Hybrid interaction patterns
    - Optimal information density
    - Split-screen and multitasking support

    Desktop enhancement:
    - Advanced keyboard shortcuts
    - Multi-window workflows
    - Drag-and-drop functionality
    - Right-click context menus
    ```
  </Tab>
</Tabs>

## Validation and Testing

<Steps>
  <Step title="User Familiarity Testing">
    **Ensure changes feel natural:**

    ```yaml theme={null}
    Testing approaches:

    Findability tests:
    - Can users locate new features?
    - Do new features appear where expected?
    - Are new interactions discoverable?

    Learnability assessment:
    - How quickly do users adapt to changes?
    - Do existing users need retraining?
    - Are new patterns intuitive?

    Satisfaction measurement:
    - Do users prefer enhanced workflows?
    - Are new features perceived as valuable?
    - Does overall satisfaction improve?
    ```
  </Step>

  <Step title="Consistency Validation">
    **Verify design system integrity:**

    <CardGroup>
      <Card title="Automated Checking" icon="check-circle">
        **Systematic consistency verification:**

        * Color usage validation
        * Typography consistency checks
        * Spacing pattern verification
        * Component usage auditing
      </Card>

      <Card title="Manual Review" icon="eye">
        **Human assessment of coherence:**

        * Visual flow evaluation
        * Interaction pattern assessment
        * Content strategy alignment
        * Brand expression consistency
      </Card>
    </CardGroup>
  </Step>

  <Step title="Performance Impact">
    **Ensure enhancements don't degrade experience:**

    ```yaml theme={null}
    Performance monitoring:
    - Load time impact assessment
    - Interaction responsiveness testing
    - Memory usage evaluation
    - Mobile performance validation
    ```
  </Step>
</Steps>

## Best Practices for Building on Existing

<CardGroup>
  <Card title="Respect User Investment" icon="heart">
    **Honor existing user knowledge:**

    ✅ Preserve familiar workflows
    ✅ Maintain muscle memory patterns
    ✅ Keep successful shortcuts
    ✅ Respect user customizations
    ✅ Provide migration paths for changes
  </Card>

  <Card title="Strategic Enhancement" icon="target">
    **Improve thoughtfully:**

    ✅ Focus on high-impact improvements
    ✅ Address actual user pain points
    ✅ Build on successful patterns
    ✅ Test changes with real users
    ✅ Plan for iterative refinement
  </Card>
</CardGroup>

***

<Card title="Create New Interfaces" icon="plus-square">
  Learn how to design completely new interface areas while maintaining product consistency.

  [Creating New UI →](/designing/interface/creating-new-ui)
</Card>


# Creating New UI
Source: https://docs.figr.design/designing/interface/creating-new-ui

Design completely new interface areas that feel cohesive with your existing product while serving new user needs.

# Creating New UI

Design fresh interfaces that expand your product's capabilities while maintaining the coherent experience users expect. Figr helps you innovate within your established design language.

<info>
  **Innovation within consistency:** Create new interface areas that feel familiar yet fresh, expanding your product's capabilities without fragmenting the user experience.
</info>

## New UI Design Process

<Steps>
  <Step title="Requirements Analysis">
    **Understand what you're building and why:**

    <Tabs>
      <Tab title="User Needs Assessment">
        ```yaml theme={null}
        User research insights:
        - New user scenarios and use cases
        - Unmet needs in current product
        - User workflow gaps
        - Feature request patterns
        - Competitive capability gaps
        ```
      </Tab>

      <Tab title="Technical Considerations">
        ```yaml theme={null}
        Implementation context:
        - Platform capabilities and constraints
        - Performance requirements
        - Integration points with existing features
        - Data structure implications
        - Security and privacy needs
        ```
      </Tab>

      <Tab title="Business Objectives">
        ```yaml theme={null}
        Strategic alignment:
        - Revenue impact goals
        - User engagement targets
        - Market positioning benefits
        - Competitive advantage creation
        - Resource allocation justification
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Design Foundation">
    **Establish the framework for new interfaces:**

    <Frame>
      <img alt="Design system foundation showing how existing patterns inform new interface creation" />
    </Frame>

    **Foundation elements:**

    ```yaml theme={null}
    Design system application:
    - Core color palette usage
    - Typography hierarchy application
    - Spacing and layout principles
    - Component pattern adaptation
    - Brand expression consistency

    Information architecture:
    - Content organization strategy
    - Navigation integration approach
    - User flow planning
    - Feature discoverability design
    - Cross-feature relationship mapping
    ```
  </Step>

  <Step title="Pattern Innovation">
    **Create new patterns that extend your design language:**

    <AccordionGroup>
      <Accordion title="Component Evolution">
        ```yaml theme={null}
        New component needs:
        - Extend existing component families
        - Create pattern variations for new contexts
        - Design specialized interaction elements
        - Develop content-specific components
        - Build cross-platform component adaptations
        ```
      </Accordion>

      <Accordion title="Interaction Innovation">
        ```yaml theme={null}
        New interaction patterns:
        - Novel user input methods
        - Advanced data manipulation interfaces
        - Real-time collaboration features
        - Progressive disclosure strategies
        - Mobile-specific interaction patterns
        ```
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

## Design Strategy Approaches

<Tabs>
  <Tab title="Modular Expansion">
    **Build new areas as cohesive modules:**

    <CardGroup>
      <Card title="Self-Contained Areas" icon="box">
        **Complete feature sections:**

        * Independent workflow areas
        * Specialized tool interfaces
        * Admin and configuration panels
        * Reporting and analytics dashboards
      </Card>

      <Card title="Integrated Modules" icon="puzzle-piece">
        **Connected feature expansions:**

        * Cross-feature functionality
        * Workflow enhancement tools
        * Collaboration interfaces
        * Automation and settings panels
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Progressive Disclosure">
    **Reveal complexity gradually:**

    <Steps>
      <Step title="Simple Entry Points">
        Design approachable interfaces that don't overwhelm new users
      </Step>

      <Step title="Advanced Capabilities">
        Provide power user features that don't clutter basic workflows
      </Step>

      <Step title="Expert Shortcuts">
        Enable efficient workflows for experienced users
      </Step>
    </Steps>
  </Tab>

  <Tab title="Platform-Specific Design">
    **Optimize for specific platforms and contexts:**

    ```yaml theme={null}
    Platform considerations:

    Web application:
    - Rich interaction capabilities
    - Keyboard shortcut integration
    - Multi-window workflows
    - Drag-and-drop functionality
    - Advanced data visualization

    Mobile application:
    - Touch-first interaction design
    - Gesture-based navigation
    - Thumb-friendly interface layout
    - Offline capability planning
    - Platform-specific conventions

    Tablet interface:
    - Hybrid interaction patterns
    - Split-screen functionality
    - Apple Pencil or stylus support
    - Landscape and portrait optimization
    - Productivity-focused workflows
    ```
  </Tab>
</Tabs>

## User Experience Innovation

<Steps>
  <Step title="Workflow Design">
    **Create efficient new user journeys:**

    <Frame>
      <img alt="User journey map showing new workflow integration with existing product flows" />
    </Frame>

    **Workflow considerations:**

    ```yaml theme={null}
    User journey mapping:
    - Entry point identification
    - Task completion optimization
    - Error prevention and recovery
    - Success state definition
    - Integration with existing workflows

    Efficiency optimization:
    - Step reduction strategies
    - Smart default implementation
    - Batch operation capabilities
    - Automation opportunities
    - Personalization features
    ```
  </Step>

  <Step title="Information Design">
    **Present complex information clearly:**

    <Tabs>
      <Tab title="Data Visualization">
        ```yaml theme={null}
        Effective data presentation:
        - Chart and graph selection
        - Interactive exploration features
        - Real-time data updating
        - Export and sharing capabilities
        - Mobile-optimized visualizations
        ```
      </Tab>

      <Tab title="Content Organization">
        ```yaml theme={null}
        Information architecture:
        - Logical content grouping
        - Scannable layout design
        - Search and filtering integration
        - Progressive information disclosure
        - Cross-reference and linking
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Accessibility Innovation">
    **Design inclusive experiences from the start:**

    ```yaml theme={null}
    Accessibility considerations:

    Universal design principles:
    - Keyboard navigation optimization
    - Screen reader compatibility
    - Color contrast compliance
    - Text scaling support
    - Motor accessibility features

    Inclusive interaction design:
    - Multiple input method support
    - Customizable interface density
    - Reduced motion options
    - High contrast mode support
    - Voice control compatibility
    ```
  </Step>
</Steps>

## Integration with Existing Product

<Tabs>
  <Tab title="Navigation Integration">
    **Seamlessly connect new areas:**

    <AccordionGroup>
      <Accordion title="Menu Structure Evolution">
        ```yaml theme={null}
        Navigation planning:
        - Main navigation expansion strategies
        - Secondary navigation creation
        - Breadcrumb trail extension
        - Search result integration
        - Cross-linking opportunities
        ```
      </Accordion>

      <Accordion title="Discovery Mechanisms">
        ```yaml theme={null}
        Feature discoverability:
        - Onboarding flow integration
        - In-context feature promotion
        - Help system expansion
        - Tutorial and guidance design
        - Progressive feature revelation
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Data Integration">
    **Connect information across features:**

    <CardGroup>
      <Card title="Cross-Feature Data" icon="share">
        **Shared information systems:**

        * User profile integration
        * Settings synchronization
        * Activity history connection
        * Notification system extension
      </Card>

      <Card title="Workflow Connections" icon="link">
        **Process integration:**

        * Task handoff between features
        * Shared collaboration tools
        * Unified search across areas
        * Consistent data export
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Performance Integration">
    **Maintain system performance:**

    ```yaml theme={null}
    Performance considerations:

    Resource management:
    - Memory usage optimization
    - Network request efficiency
    - Caching strategy implementation
    - Progressive loading design

    User experience preservation:
    - Consistent response times
    - Smooth transition animations
    - Reliable offline functionality
    - Graceful error handling
    ```
  </Tab>
</Tabs>

## Design Validation

<Steps>
  <Step title="Prototype Testing">
    **Validate concepts before full implementation:**

    <Tabs>
      <Tab title="Usability Testing">
        ```yaml theme={null}
        Test methodology:
        - Task completion assessment
        - Learning curve evaluation
        - Error rate measurement
        - User satisfaction scoring
        - Comparative analysis with alternatives
        ```
      </Tab>

      <Tab title="Integration Testing">
        ```yaml theme={null}
        Workflow validation:
        - Cross-feature navigation testing
        - Data sharing verification
        - Performance impact assessment
        - Accessibility compliance checking
        - Mobile experience validation
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Stakeholder Review">
    **Ensure alignment with business goals:**

    ```yaml theme={null}
    Review criteria:

    Business alignment:
    - Strategic objective fulfillment
    - User value proposition clarity
    - Market positioning impact
    - Resource utilization efficiency

    Technical feasibility:
    - Implementation complexity assessment
    - Integration effort estimation
    - Performance impact evaluation
    - Maintenance requirement planning
    ```
  </Step>

  <Step title="Iterative Refinement">
    **Improve based on feedback:**

    <CardGroup>
      <Card title="User Feedback Integration" icon="message-square">
        **Continuous improvement:**

        * User testing insight application
        * Beta user feedback incorporation
        * Analytics data interpretation
        * Support ticket analysis
      </Card>

      <Card title="Design System Evolution" icon="refresh">
        **Pattern refinement:**

        * Component pattern updates
        * Interaction model improvements
        * Visual consistency enhancements
        * Accessibility pattern advancement
      </Card>
    </CardGroup>
  </Step>
</Steps>

## Launch Preparation

<Steps>
  <Step title="Documentation Creation">
    **Prepare comprehensive implementation guides:**

    ```yaml theme={null}
    Documentation needs:

    Design specifications:
    - Component usage guidelines
    - Interaction behavior definitions
    - Visual styling specifications
    - Responsive behavior documentation

    Implementation guides:
    - Technical integration requirements
    - API usage documentation
    - Performance optimization guidelines
    - Testing and validation procedures
    ```
  </Step>

  <Step title="User Education">
    **Help users discover and adopt new features:**

    ```yaml theme={null}
    Education strategy:
    - Feature announcement planning
    - Tutorial content creation
    - Help documentation updates
    - Onboarding flow modifications
    - Support team preparation
    ```
  </Step>
</Steps>

## Best Practices

<CardGroup>
  <Card title="Cohesive Innovation" icon="lightbulb">
    **Balance new with familiar:**

    ✅ Extend existing design patterns logically
    ✅ Introduce complexity gradually
    ✅ Maintain visual and interaction consistency
    ✅ Test integration thoroughly
    ✅ Plan for user education
  </Card>

  <Card title="User-Centered Design" icon="users">
    **Keep user needs central:**

    ✅ Validate assumptions with real users
    ✅ Design for accessibility from start
    ✅ Consider mobile-first approaches
    ✅ Plan for diverse skill levels
    ✅ Measure success with user metrics
  </Card>
</CardGroup>

***

<Card title="Apply Product Context" icon="database">
  Learn how to leverage Figr's deep product understanding for contextually perfect interface design.

  [Product Context →](/designing/interface/product-context)
</Card>


# Product Context
Source: https://docs.figr.design/designing/interface/product-context

Leverage Figr's deep product understanding to create interfaces that perfectly fit your specific users, constraints, and business objectives.

# Product Context

Figr's product context awareness is what makes AI-generated designs feel native to your specific product. Learn how to leverage this deep understanding for better design outcomes.

<success>
  **Context-aware design:** Every design decision informed by your specific users, business constraints, technical limitations, and product history.
</success>

## How Product Context Works

<Tabs>
  <Tab title="Contextual Intelligence">
    **Multi-layered product understanding:**

    <Frame>
      <img alt="Diagram showing layers of product context from user data to technical constraints" />
    </Frame>

    **Context layers:**

    ```yaml theme={null}
    User context:
    - Persona characteristics and behaviors
    - Skill levels and technical proficiency
    - Device and platform preferences
    - Geographic and cultural considerations

    Business context:
    - Strategic objectives and KPIs
    - Market positioning and differentiation
    - Revenue models and monetization
    - Compliance and regulatory requirements

    Technical context:
    - Platform capabilities and limitations
    - Performance requirements and constraints
    - Integration points and dependencies
    - Security and privacy requirements

    Design context:
    - Existing design system and patterns
    - Brand guidelines and visual identity
    - Accessibility standards and requirements
    - Cross-platform consistency needs
    ```
  </Tab>

  <Tab title="Context Application">
    **How context influences design decisions:**

    <AccordionGroup>
      <Accordion title="Layout Decisions">
        ```yaml theme={null}
        Context-driven layout choices:

        Mobile-first users → Vertical layouts prioritized
        Data-heavy workflows → Table-dense interfaces
        Creative professionals → Visual-first layouts
        Enterprise users → Information-dense designs
        Accessibility needs → Clear hierarchy and contrast
        ```
      </Accordion>

      <Accordion title="Interaction Patterns">
        ```yaml theme={null}
        Context-informed interactions:

        Touch-primary users → Larger touch targets
        Keyboard-heavy workflows → Shortcut integration
        Multi-tasking contexts → Efficient state management
        Error-prone processes → Extensive validation
        Time-critical tasks → Streamlined interactions
        ```
      </Accordion>

      <Accordion title="Content Strategy">
        ```yaml theme={null}
        Context-aware content decisions:

        Technical users → Detailed specifications
        Business users → High-level summaries
        International users → Localization considerations
        Compliance-heavy industries → Audit trail emphasis
        Fast-paced environments → Scannable information
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Dynamic Adaptation">
    **Context evolves with your product:**

    <CardGroup>
      <Card title="Learning from Usage" icon="chart-line">
        **Continuous context refinement:**

        * User behavior pattern analysis
        * Feature adoption tracking
        * Performance metric monitoring
        * Feedback sentiment analysis
      </Card>

      <Card title="Contextual Updates" icon="refresh">
        **Keeping context current:**

        * Product evolution tracking
        * Market condition changes
        * User base evolution
        * Technology advancement impact
      </Card>
    </CardGroup>
  </Tab>
</Tabs>

## Context Categories

<Steps>
  <Step title="User Context Deep Dive">
    **Understanding your specific users:**

    <Tabs>
      <Tab title="User Personas">
        ```yaml theme={null}
        Detailed user understanding:

        Primary persona: Marketing Manager
        - Technical proficiency: Intermediate
        - Primary tasks: Campaign creation, performance analysis
        - Pain points: Complex reporting, time-consuming setup
        - Success metrics: Campaign ROI, time to launch
        - Device usage: 60% desktop, 40% mobile

        Secondary persona: Campaign Specialist
        - Technical proficiency: Advanced
        - Primary tasks: Detail optimization, A/B testing
        - Pain points: Limited automation, manual processes
        - Success metrics: Conversion optimization, efficiency
        - Device usage: 90% desktop, 10% mobile
        ```
      </Tab>

      <Tab title="Behavioral Patterns">
        ```yaml theme={null}
        User behavior insights:

        Navigation preferences:
        - 70% use search vs 30% browse menus
        - Average session: 15 minutes
        - Multi-tab usage: 85% of power users
        - Mobile sessions: Shorter, task-focused

        Task completion patterns:
        - Prefer saving drafts frequently
        - Complete complex tasks in multiple sessions
        - Heavy use of keyboard shortcuts
        - Collaborate via shared links and comments
        ```
      </Tab>

      <Tab title="Context Switching">
        ```yaml theme={null}
        Multi-context usage:

        Work environments:
        - Office: Large screens, keyboard+mouse
        - Remote: Varied setups, video calls
        - Travel: Mobile-first, limited time
        - Commute: Quick checks, mobile only

        Urgency levels:
        - Routine tasks: Efficiency-focused
        - Urgent issues: Error-prevention critical
        - Exploratory work: Discovery-friendly
        - Presentations: Visual clarity essential
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Business Context Integration">
    **Aligning design with business objectives:**

    <AccordionGroup>
      <Accordion title="Strategic Objectives">
        ```yaml theme={null}
        Business goal influence on design:

        Revenue growth → Conversion optimization focus
        User retention → Engagement feature emphasis
        Market expansion → Localization considerations
        Competitive differentiation → Unique feature highlighting
        Cost reduction → Efficiency workflow prioritization
        ```
      </Accordion>

      <Accordion title="Market Positioning">
        ```yaml theme={null}
        Brand positioning impact:

        Premium positioning → Sophisticated, clean design
        Value positioning → Efficiency and functionality focus
        Innovation leader → Cutting-edge interaction patterns
        Trust-focused → Conservative, reliable patterns
        Accessibility leader → Inclusive design prioritization
        ```
      </Accordion>

      <Accordion title="Regulatory Context">
        ```yaml theme={null}
        Compliance requirements:

        Healthcare (HIPAA) → Privacy-first design patterns
        Finance (SOX) → Audit trail emphasis
        Education (FERPA) → Student data protection
        European markets (GDPR) → Consent management
        Accessibility (WCAG) → Inclusive interaction design
        ```
      </Accordion>
    </AccordionGroup>
  </Step>

  <Step title="Technical Context Application">
    **Design within technical reality:**

    <Tabs>
      <Tab title="Performance Constraints">
        ```yaml theme={null}
        Technical limitation awareness:

        Mobile performance → Lightweight interactions
        Legacy browser support → Progressive enhancement
        Slow networks → Offline-first design
        Limited bandwidth → Image optimization priority
        Battery life → Animation and processing limits
        ```
      </Tab>

      <Tab title="Platform Capabilities">
        ```yaml theme={null}
        Platform-specific optimizations:

        Web application → Rich interactions, keyboard shortcuts
        iOS app → Native gestures, system integration
        Android app → Material design patterns
        Desktop app → Window management, file system
        Progressive web app → Offline capability, installation
        ```
      </Tab>

      <Tab title="Integration Requirements">
        ```yaml theme={null}
        System connectivity needs:

        CRM integration → Contact data synchronization
        Analytics platform → Event tracking design
        Payment systems → Security pattern compliance
        Email services → Template and automation design
        API limitations → Rate limiting consideration
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Context-Driven Design Examples

<Tabs>
  <Tab title="Dashboard Design">
    **Context shapes dashboard priorities:**

    <Frame>
      <img alt="Two dashboard designs showing how different user contexts create different layouts" />
    </Frame>

    **Executive user context:**

    ```yaml theme={null}
    Design implications:
    - High-level metrics prominently displayed
    - Trend visualization over detailed data
    - One-click drill-down capabilities
    - Mobile-optimized for on-the-go access
    - Clean, presentation-ready layouts
    ```

    **Analyst user context:**

    ```yaml theme={null}
    Design implications:
    - Detailed data tables with sorting/filtering
    - Advanced chart customization options
    - Export functionality in multiple formats
    - Real-time data refresh controls
    - Desktop-optimized for extended sessions
    ```
  </Tab>

  <Tab title="E-commerce Checkout">
    **Purchase context variations:**

    <AccordionGroup>
      <Accordion title="B2B Context">
        ```yaml theme={null}
        Business purchase considerations:
        - Multi-step approval workflow design
        - Purchase order number integration
        - Tax exemption handling
        - Bulk quantity optimization
        - Invoice and payment term options
        ```
      </Accordion>

      <Accordion title="B2C Context">
        ```yaml theme={null}
        Consumer purchase optimization:
        - Guest checkout prioritization
        - Social login integration
        - Mobile payment method support
        - Shipping option clarity
        - Trust signal prominence
        ```
      </Accordion>

      <Accordion title="Subscription Context">
        ```yaml theme={null}
        Recurring payment design:
        - Trial period clarity
        - Cancellation policy transparency
        - Billing cycle visualization
        - Plan comparison integration
        - Upgrade/downgrade pathways
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Admin Interface">
    **Administrative context adaptation:**

    ```yaml theme={null}
    Context-aware admin design:

    Small team context:
    - Simplified role management
    - Quick configuration options
    - Essential features prioritized
    - Minimal training requirements

    Enterprise context:
    - Advanced permission systems
    - Bulk operation capabilities
    - Audit log prominence
    - Integration management tools
    - Compliance reporting features
    ```
  </Tab>
</Tabs>

## Leveraging Context for Better Designs

<Steps>
  <Step title="Context Query Optimization">
    **Ask better questions to get better results:**

    <CardGroup>
      <Card title="Generic Request" icon="circle">
        **Less effective:**
        "Create a user settings page"

        **Result:** Generic settings layout
      </Card>

      <Card title="Context-Rich Request" icon="target">
        **More effective:**
        "Create user settings for marketing managers who need quick access to notification preferences and team collaboration settings"

        **Result:** Prioritized layout with relevant features
      </Card>
    </CardGroup>
  </Step>

  <Step title="Context Validation">
    **Ensure context accuracy:**

    ```yaml theme={null}
    Context verification methods:

    User research validation:
    - Interview findings alignment
    - Survey data correlation
    - Usability testing confirmation
    - Analytics pattern verification

    Business requirement checking:
    - Strategic objective alignment
    - KPI impact assessment
    - Stakeholder expectation matching
    - Market positioning consistency

    Technical constraint verification:
    - Performance requirement feasibility
    - Integration capability confirmation
    - Security standard compliance
    - Platform limitation acknowledgment
    ```
  </Step>

  <Step title="Context Evolution Management">
    **Keep context current and relevant:**

    <Tabs>
      <Tab title="Regular Updates">
        ```yaml theme={null}
        Context maintenance schedule:
        - Quarterly user research integration
        - Monthly analytics review
        - Weekly feedback incorporation
        - Daily usage pattern monitoring
        ```
      </Tab>

      <Tab title="Change Detection">
        ```yaml theme={null}
        Context drift indicators:
        - User behavior pattern changes
        - Business objective shifts
        - Technical capability evolution
        - Market condition changes
        - Competitive landscape shifts
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Advanced Context Features

<CardGroup>
  <Card title="Predictive Context" icon="crystal-ball">
    **Anticipate future needs:**

    * User behavior prediction
    * Seasonal usage pattern awareness
    * Growth-stage design adaptation
    * Market trend incorporation
    * Technology evolution preparation
  </Card>

  <Card title="Multi-Context Design" icon="layers">
    **Handle complex context combinations:**

    * Cross-persona design optimization
    * Multi-platform context balancing
    * Regional variation management
    * Industry-specific customization
    * Accessibility context integration
  </Card>
</CardGroup>

## Best Practices

<Steps>
  <Step title="Context Accuracy">
    **Maintain high-quality context:**

    ```
    ✅ Validate context with real user research
    ✅ Update context regularly as product evolves
    ✅ Consider edge cases and minority users
    ✅ Balance multiple context sources
    ✅ Document context assumptions clearly
    ```
  </Step>

  <Step title="Context Application">
    **Use context effectively in design:**

    ```
    ✅ Reference specific context in design requests
    ✅ Validate design decisions against context
    ✅ Consider context trade-offs explicitly
    ✅ Test designs with contextual users
    ✅ Iterate based on context-specific feedback
    ```
  </Step>
</Steps>

***

<Card title="Configure Design Systems" icon="settings">
  Learn how to set up and manage design tokens for consistent, scalable design systems in Figr.

  [Setting Tokens →](/designing/design-system/setting-tokens)
</Card>


# Assets & Retention
Source: https://docs.figr.design/designing/memory/assets-retention

Manage how Figr stores, organizes, and retains your design assets and product knowledge over time.

# Assets & Retention

Figr's asset retention system ensures your product knowledge grows stronger over time while giving you complete control over what's stored, how long it's kept, and who can access it.

<info>
  **Smart retention:** Figr automatically manages your assets for optimal performance while respecting your data governance requirements and storage preferences.
</info>

## Asset Categories

<Tabs>
  <Tab title="Core Assets">
    **Permanently retained for product memory:**

    <AccordionGroup>
      <Accordion title="Design System Components">
        **What's stored:**

        ```json theme={null}
        {
          "designTokens": "Color palettes, typography, spacing",
          "componentLibrary": "Button styles, form patterns, navigation",
          "brandAssets": "Logos, icons, imagery guidelines",
          "layoutPatterns": "Grid systems, breakpoints, containers"
        }
        ```

        **Retention:** Permanent (until manually deleted)
        **Why:** Foundation for all future designs
      </Accordion>

      <Accordion title="Product Context">
        **What's stored:**

        ```json theme={null}
        {
          "userPersonas": "Detailed user profiles and behaviors",
          "workflows": "Key user journeys and task flows",
          "constraints": "Technical, business, and regulatory limits",
          "analytics": "Performance data and usage patterns"
        }
        ```

        **Retention:** Permanent with version control
        **Why:** Context improves design relevance
      </Accordion>

      <Accordion title="Design Decisions">
        **What's stored:**

        ```json theme={null}
        {
          "patternRationale": "Why certain designs work",
          "testResults": "A/B test outcomes and learnings",
          "userFeedback": "Research insights and usability findings",
          "iterationHistory": "How designs evolved and why"
        }
        ```

        **Retention:** 2 years by default (configurable)
        **Why:** Institutional knowledge and learning
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Working Assets">
    **Temporary assets for active projects:**

    <CardGroup>
      <Card title="Draft Designs" icon="edit">
        **Content:** Work-in-progress designs, experiments, iterations

        **Retention:** 90 days after last edit

        **Purpose:** Collaboration and review during development
      </Card>

      <Card title="Reference Materials" icon="image">
        **Content:** Screenshots, inspiration images, competitive analysis

        **Retention:** 1 year or until project completion

        **Purpose:** Context during design process
      </Card>
    </CardGroup>

    <tip>
      **Promotion to permanent:** Any working asset can be promoted to permanent storage if it becomes part of your core product knowledge.
    </tip>
  </Tab>

  <Tab title="Cached Assets">
    **Temporary performance optimization:**

    ```
    Generated Images: 30 days
    Export Files: 7 days  
    Thumbnail Previews: 60 days
    API Responses: 24 hours
    ```

    **Purpose:** Speed up Figr performance
    **Management:** Automatic cleanup, no user action needed
  </Tab>
</Tabs>

## Retention Policies

<Steps>
  <Step title="Default Retention">
    **Out-of-the-box settings:**

    ```yaml theme={null}
    Design System Assets: Permanent
    Product Context: Permanent  
    User Research: 3 years
    Design History: 2 years
    Draft Designs: 90 days
    Reference Images: 1 year
    Export Files: 7 days
    ```

    **Rationale:** Balances memory effectiveness with storage efficiency
  </Step>

  <Step title="Custom Policies">
    **Adjust based on your needs:**

    <Tabs>
      <Tab title="Startup/Small Team">
        ```yaml theme={null}
        Focus: Maximize learning, minimize costs

        Core Assets: Permanent
        Design History: 1 year
        Reference Materials: 6 months
        Drafts: 30 days
        ```

        **Good for:** Fast iteration, limited storage budget
      </Tab>

      <Tab title="Enterprise/Regulated">
        ```yaml theme={null}
        Focus: Compliance and audit trails

        Core Assets: Permanent + versioned
        Design History: 7 years  
        User Research: 5 years
        All Changes: Audited and retained
        ```

        **Good for:** Regulated industries, large organizations
      </Tab>

      <Tab title="Agency/Consultancy">
        ```yaml theme={null}
        Focus: Client data separation

        Client Assets: Per project retention
        Cross-Client Learning: Anonymized patterns only
        Project Completion: Archive after 2 years
        ```

        **Good for:** Multiple client projects, confidentiality
      </Tab>
    </Tabs>
  </Step>

  <Step title="Automated Cleanup">
    **Smart asset management:**

    <Frame>
      <img alt="Timeline showing how different assets are retained and cleaned up automatically" />
    </Frame>

    **Cleanup process:**

    1. **30 days before expiration:** Notification sent
    2. **7 days before expiration:** Final warning with easy extension
    3. **Expiration day:** Asset moved to recycle bin
    4. **30 days in recycle bin:** Permanent deletion
  </Step>
</Steps>

## Asset Organization

<Tabs>
  <Tab title="Automatic Categorization">
    **Figr intelligently organizes your assets:**

    <AccordionGroup>
      <Accordion title="By Asset Type">
        ```
        📁 Design System
        ├── 🎨 Colors & Typography
        ├── 🧩 Components
        ├── 📐 Layout Patterns
        └── 🖼️ Brand Assets

        📁 Product Knowledge
        ├── 👥 User Research
        ├── 🔄 Workflows
        ├── ⚙️ Technical Constraints
        └── 📊 Analytics Data
        ```
      </Accordion>

      <Accordion title="By Project Context">
        ```
        📁 Mobile App Design
        ├── 📱 iOS Patterns
        ├── 🤖 Android Adaptations
        └── 🔄 Cross-Platform Consistency

        📁 Web Platform
        ├── 💻 Desktop Layouts
        ├── 📲 Mobile Responsive
        └── ♿ Accessibility Specs
        ```
      </Accordion>

      <Accordion title="By Usage Frequency">
        ```
        ⭐ Frequently Used (quick access)
        📌 Recently Updated (fresh context)
        📚 Reference Library (archived but searchable)
        🗑️ Scheduled for Cleanup (review needed)
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Manual Organization">
    **Custom organization options:**

    <CardGroup>
      <Card title="Tags & Labels" icon="tag">
        ```
        #design-system
        #user-research
        #mobile-specific
        #accessibility
        #high-priority
        #deprecated
        ```

        **Use for:** Custom categorization and filtering
      </Card>

      <Card title="Folders & Projects" icon="folder">
        ```
        📁 Q4 Redesign
        📁 Mobile App Launch
        📁 Accessibility Upgrade
        📁 Design System V2
        ```

        **Use for:** Project-based organization
      </Card>
    </CardGroup>

    **Smart suggestions:**
    Figr suggests tags and organization based on content analysis and usage patterns.
  </Tab>

  <Tab title="Search & Discovery">
    **Find assets quickly:**

    ```
    Search examples:
    "blue button component from Q3"
    "mobile checkout flow user research"
    "accessibility patterns for forms"
    "dashboard layout with sidebar navigation"
    ```

    **Search capabilities:**

    * Full-text search across all asset content
    * Visual similarity search for images
    * Semantic search for concepts and patterns
    * Filter by date, type, project, or usage
  </Tab>
</Tabs>

## Data Export & Backup

<success>
  **Your data, your control:** Complete export capabilities ensure you never lose access to your product knowledge and design assets.
</success>

<Steps>
  <Step title="Individual Asset Export">
    **Export specific assets:**

    <Tabs>
      <Tab title="Design Files">
        ```
        Available formats:
        ✅ Figma (.fig)
        ✅ Sketch (.sketch)  
        ✅ Adobe XD (.xd)
        ✅ PNG/SVG (images)
        ✅ PDF (presentations)
        ```
      </Tab>

      <Tab title="Code & Tokens">
        ```
        Available formats:
        ✅ JSON (design tokens)
        ✅ CSS/SCSS (stylesheets)
        ✅ React/Vue (components)
        ✅ Flutter (mobile code)
        ✅ HTML/CSS (static)
        ```
      </Tab>

      <Tab title="Documentation">
        ```
        Available formats:
        ✅ Markdown (documentation)
        ✅ PDF (specifications)
        ✅ CSV (data tables)
        ✅ JSON (structured data)
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Bulk Export">
    **Export entire knowledge base:**

    ```yaml theme={null}
    Export Package Contents:

    📁 design-system/
    ├── tokens.json
    ├── components/
    └── documentation.md

    📁 user-research/
    ├── personas.json
    ├── analytics-data.csv
    └── research-findings.pdf

    📁 design-history/
    ├── decisions.json
    ├── iterations/
    └── test-results.json
    ```

    **Delivery methods:**

    * Direct download (ZIP file)
    * Cloud storage sync (Dropbox, Google Drive)
    * API integration (automated backups)
    * Email delivery (for small exports)
  </Step>

  <Step title="Automated Backups">
    **Enterprise backup options:**

    <CardGroup>
      <Card title="Scheduled Exports" icon="calendar">
        ```
        Frequency: Daily/Weekly/Monthly
        Scope: Full/Incremental/Changes only
        Destination: Your cloud storage
        Format: Choose optimal for your workflow
        ```
      </Card>

      <Card title="Real-time Sync" icon="refresh">
        ```
        Trigger: Every asset change
        Method: API webhooks
        Destination: Your systems
        Format: JSON + files
        ```
      </Card>
    </CardGroup>
  </Step>
</Steps>

## Storage Management

<Tabs>
  <Tab title="Usage Monitoring">
    **Track your storage usage:**

    <Frame>
      <img alt="Storage usage dashboard showing breakdown by asset type and growth over time" />
    </Frame>

    **Usage breakdown:**

    ```
    Design System Assets: 45% (2.1 GB)
    Product Context: 25% (1.2 GB)  
    Design History: 20% (950 MB)
    Working Files: 10% (480 MB)
    ```
  </Tab>

  <Tab title="Optimization Suggestions">
    **Figr helps optimize storage:**

    <AccordionGroup>
      <Accordion title="Automatic Optimizations">
        ```
        ✅ Compress uploaded images without quality loss
        ✅ Remove duplicate assets automatically
        ✅ Archive unused reference materials
        ✅ Optimize export files for size
        ```
      </Accordion>

      <Accordion title="Manual Optimizations">
        ```
        📊 Review large assets (>50MB each)
        🗑️ Clean up old drafts and experiments
        📁 Archive completed projects
        🔄 Update retention policies for old projects
        ```
      </Accordion>

      <Accordion title="Smart Suggestions">
        Figr analyzes your usage patterns and suggests:

        * Which assets can be safely archived
        * Duplicate assets that can be consolidated
        * Outdated materials that may need updating
        * Storage policy adjustments based on team size
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Enterprise Storage">
    **Advanced storage options:**

    ```yaml theme={null}
    On-Premise Storage:
    - Host Figr memory on your infrastructure
    - Complete data sovereignty
    - Custom retention and backup policies
    - Integration with existing storage systems

    Hybrid Cloud:
    - Critical assets on-premise
    - Working files in Figr cloud
    - Automatic synchronization
    - Compliance with data residency requirements
    ```
  </Tab>
</Tabs>

## Compliance & Governance

<shield>
  **Enterprise-grade compliance:** Figr's retention system supports the most stringent data governance requirements while maintaining design workflow efficiency.
</shield>

<AccordionGroup>
  <Accordion title="GDPR Compliance">
    **European data protection compliance:**

    ```
    ✅ Right to access: Export all user-related data
    ✅ Right to rectification: Edit or correct stored data
    ✅ Right to erasure: Delete data on request
    ✅ Data portability: Export in machine-readable formats
    ✅ Privacy by design: Minimal data collection
    ✅ Consent management: Clear data usage agreements
    ```
  </Accordion>

  <Accordion title="Industry-Specific Requirements">
    **Specialized compliance support:**

    ```yaml theme={null}
    Healthcare (HIPAA):
    - Encrypted storage at rest and in transit
    - Access logging and audit trails
    - Business associate agreements
    - Patient data segregation

    Financial (SOX):
    - Immutable audit logs
    - Change tracking and approval workflows
    - Data retention for regulatory periods
    - Secure deletion verification

    Government (FedRAMP):
    - Authorized cloud infrastructure
    - Security control implementation
    - Continuous monitoring
    - Incident response procedures
    ```
  </Accordion>

  <Accordion title="Custom Governance">
    **Tailor retention to your policies:**

    ```
    Policy Examples:

    "Design decisions must be retained for 5 years 
     for patent and intellectual property protection"

    "User research data expires after 2 years 
     unless participants provide extended consent"

    "Competitive analysis materials archived after 
     product launch to prevent accidental disclosure"
    ```
  </Accordion>
</AccordionGroup>

***

<success>
  **Asset management mastered:** You now understand how Figr intelligently manages your design assets and product knowledge for optimal performance and compliance.
</success>

<Card title="Explore Input Methods" icon="upload">
  Learn how to efficiently add context and assets to Figr through various input methods.

  [Screenshots & Images →](/designing/input/screenshots-images)
</Card>


# How Global Memory Works
Source: https://docs.figr.design/designing/memory/how-global-memory-works

Understand Figr's persistent memory system that learns and remembers your product context across all projects and sessions.

# How Global Memory Works

Figr's memory system is what makes product-aware design possible. Unlike other AI tools that forget everything between sessions, Figr builds a permanent understanding of your product, team, and users.

<success>
  **The game changer:** Upload your design system once, explain your constraints once, show your product once. Figr remembers forever and applies this knowledge to every new design.
</success>

## What Makes Figr's Memory Different

<CardGroup>
  <Card title="Traditional AI Tools" icon="refresh">
    **Session-based memory:**

    * Forgets everything when you close the tool
    * Requires re-explaining context every time
    * Can't build on previous design decisions
    * Generic outputs that ignore your product reality

    **Result:** Constant repetition and generic designs
  </Card>

  <Card title="Figr's Global Memory" icon="database">
    **Persistent product understanding:**

    * Remembers context permanently across sessions
    * Builds cumulative knowledge over time
    * References past decisions and learnings
    * Creates increasingly accurate designs

    **Result:** Designs that improve and feel more native over time
  </Card>
</CardGroup>

## Memory Architecture

<Tabs>
  <Tab title="Product Knowledge Layer">
    **What Figr permanently stores about your product:**

    <AccordionGroup>
      <Accordion title="Design System Knowledge">
        ```json theme={null}
        {
          "colorPalette": {
            "primary": "#6366f1",
            "semantic": {
              "success": "#10b981",
              "warning": "#f59e0b",
              "error": "#ef4444"
            }
          },
          "typography": {
            "headings": "Inter, sans-serif",
            "body": "Inter, sans-serif",
            "scale": "1.25 (Major Third)"
          },
          "components": {
            "button": "rounded corners, 12px padding",
            "cards": "subtle shadow, 8px radius",
            "forms": "outline style, error states below"
          }
        }
        ```
      </Accordion>

      <Accordion title="User Context">
        ```json theme={null}
        {
          "primaryUsers": [
            {
              "type": "marketing_manager",
              "painPoints": ["time-consuming reporting", "data silos"],
              "goals": ["quick insights", "campaign optimization"],
              "techSavviness": "intermediate"
            }
          ],
          "workflows": [
            {
              "name": "campaign_creation",
              "steps": ["audience_selection", "content_creation", "scheduling"],
              "painPoints": ["audience_overlap_confusion"]
            }
          ]
        }
        ```
      </Accordion>

      <Accordion title="Technical Constraints">
        ```json theme={null}
        {
          "platform": "web_responsive",
          "frameworks": ["React", "TypeScript"],
          "browsers": ["Chrome", "Safari", "Firefox"],
          "accessibility": "WCAG_2.1_AA",
          "performance": {
            "maxLoadTime": "2s",
            "imageOptimization": true
          }
        }
        ```
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Experience Layer">
    **What Figr learns from your product usage:**

    <Frame>
      <img alt="Diagram showing how Figr learns from user interactions and builds experience" />
    </Frame>

    **Continuous learning sources:**

    * Screen sharing sessions that show actual user behavior
    * Design feedback and iteration patterns
    * A/B test results and performance data
    * User research findings and usability studies
    * Analytics data about feature usage and conversion
  </Tab>

  <Tab title="Decision Layer">
    **How Figr remembers design reasoning:**

    ```
    Design Decision: "Use inline validation for forms"
    Reasoning: "User research shows 23% better completion rates"
    Context: "Applied to signup, checkout, and profile editing"
    Results: "Reduced support tickets by 31%"

    Future Application: Figr automatically suggests inline 
    validation for new forms based on this proven success.
    ```

    **Pattern recognition:**

    * What design solutions work for your specific users
    * Which interaction patterns reduce friction
    * How different user types prefer different approaches
    * When to break conventions vs. follow them
  </Tab>
</Tabs>

## How Memory Builds Over Time

<Steps>
  <Step title="Initial Setup">
    **Day 1: Foundation building**

    When you first set up Figr:

    * Upload design system assets
    * Share your screen to show product
    * Provide user research and context
    * Define technical and business constraints

    **Memory strength:** 60% - Good foundation
  </Step>

  <Step title="Early Usage">
    **Weeks 1-2: Pattern recognition**

    As you create designs and provide feedback:

    * Figr learns your design preferences
    * Understands which suggestions you accept/reject
    * Builds patterns from your specific use cases
    * Refines understanding of your user needs

    **Memory strength:** 80% - Strong context awareness
  </Step>

  <Step title="Deep Integration">
    **Month 1+: Institutional knowledge**

    With continued use and team collaboration:

    * Comprehensive understanding of your product ecosystem
    * Nuanced grasp of edge cases and exceptions
    * Predictive insights about user needs
    * Anticipation of design requirements

    **Memory strength:** 95% - Near-human product understanding
  </Step>
</Steps>

## Memory in Action: Real Examples

<AccordionGroup>
  <Accordion title="SaaS Dashboard Design">
    **Memory Context:**

    * Product: B2B analytics platform
    * Users: Marketing managers (non-technical)
    * Key insight: Users need quick scanning, not deep analysis

    **Month 1 Design:** Standard dashboard with detailed charts
    **Month 6 Design:** Scannable cards with key metrics highlighted, drill-down on demand

    **Why the difference:** Figr learned that users prefer overview → detail pattern from usage analytics and user feedback
  </Accordion>

  <Accordion title="E-commerce Mobile Flow">
    **Memory Context:**

    * Product: Fashion e-commerce app
    * Users: Mobile-first, visual browsers
    * Key insight: Purchase decisions driven by social proof

    **Initial Design:** Product page with standard description
    **Evolved Design:** Social proof prominent (reviews, photos), purchase path streamlined

    **Learning source:** User session recordings showing how customers actually browse and buy
  </Accordion>

  <Accordion title="Enterprise Admin Panel">
    **Memory Context:**

    * Product: HR management system
    * Users: HR administrators (expert users)
    * Key insight: Efficiency over simplicity

    **Early Design:** Simplified interface with guided workflows
    **Mature Design:** Information-dense layout with keyboard shortcuts and bulk actions

    **Memory evolution:** Learned that expert users value speed over hand-holding
  </Accordion>
</AccordionGroup>

## Managing Your Memory

<Tabs>
  <Tab title="Memory Dashboard">
    **View and manage what Figr knows:**

    <Frame>
      <img alt="Figr memory dashboard showing stored knowledge categories and strength indicators" />
    </Frame>

    **Memory categories:**

    * **Design System** (95% complete)
    * **User Research** (78% complete)
    * **Product Context** (89% complete)
    * **Technical Constraints** (67% complete)
    * **Brand Guidelines** (92% complete)
  </Tab>

  <Tab title="Adding Context">
    **Continuously improve memory:**

    <CardGroup>
      <Card title="Upload New Assets" icon="upload">
        * Updated design tokens
        * New user research findings
        * Fresh analytics data
        * Additional product screenshots
      </Card>

      <Card title="Provide Feedback" icon="message-square">
        * Correct design suggestions
        * Explain design decisions
        * Share results from implemented designs
        * Document edge cases and exceptions
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Memory Sharing">
    **Team memory synchronization:**

    When team members contribute:

    * Individual knowledge becomes shared understanding
    * Different perspectives enrich product context
    * Collective wisdom improves design quality
    * Onboarding new team members preserves knowledge

    <tip>
      **Pro tip:** Encourage all team members to add their unique insights. A PM's user understanding + designer's interaction expertise + engineer's technical knowledge = comprehensive product memory.
    </tip>
  </Tab>
</Tabs>

## Memory Security & Privacy

<info>
  **Your data, your control:** Figr's memory system is designed with enterprise-grade security and complete data ownership.
</info>

<AccordionGroup>
  <Accordion title="Data Ownership">
    **You own all memory data:**

    * Export complete memory snapshot anytime
    * Delete specific memory components
    * Transfer memory between accounts
    * Maintain control over sensitive information
  </Accordion>

  <Accordion title="Privacy Controls">
    **Granular privacy settings:**

    ```
    Memory Component: Design System
    Sharing: Team only

    Memory Component: User Research
    Sharing: Designers + PMs only

    Memory Component: Technical Constraints  
    Sharing: Full team access
    ```
  </Accordion>

  <Accordion title="Enterprise Features">
    **For organizations with strict requirements:**

    * On-premise memory storage
    * Custom retention policies
    * Audit logs for memory access
    * Integration with existing security systems
  </Accordion>
</AccordionGroup>

## Troubleshooting Memory Issues

<CardGroup>
  <Card title="Memory Seems Incomplete" icon="alert-triangle">
    **Symptoms:**

    * Designs don't match your product style
    * Missing key constraints or requirements
    * Generic outputs despite uploaded context

    **Solutions:**

    * Check memory dashboard completeness
    * Upload additional reference materials
    * Provide more detailed product walkthroughs
    * Use feedback system to correct misunderstandings
  </Card>

  <Card title="Conflicting Information" icon="x-circle">
    **Symptoms:**

    * Inconsistent design suggestions
    * Figr seems confused about requirements
    * Mixing patterns from different contexts

    **Solutions:**

    * Review uploaded materials for conflicts
    * Clarify which guidelines take priority
    * Update outdated context information
    * Use memory management to resolve conflicts
  </Card>
</CardGroup>

***

<success>
  **Memory mastery unlocked:** You now understand how Figr builds and maintains deep product knowledge that improves every design.
</success>

<Card title="Learn About Memory Persistence" icon="save">
  Discover how your assets and context are retained and managed across projects and time.

  [Assets & Retention →](/designing/memory/assets-retention)
</Card>


# Figr MCP
Source: https://docs.figr.design/docs/design-intelligence/figr-mcp

Connect Figr to AI coding assistants like Claude, Cursor, and others. Access your designs, artifacts, and project context directly from your development environment.

## [​](#what-is-figr-mcp)What is Figr MCP

MCP (Model Context Protocol) lets AI assistants access external tools and data. Figr MCP connects your Figr projects to AI coding environments, so you can reference designs, extract code, and understand design decisions without leaving your editor.

With Figr MCP you can:

* Access artifact code from your IDE
* Read design decisions and context
* Search across project files
* Explore project structure
* Get design-to-code context for implementation

## Setup an MCP client

<Tabs>
  <Tab title="Cursor">
    1. Open Cursor → Settings → Cursor Settings
    2. Click on Tools & Integrations
    3. Under MCP Tools, click + to add a custom MCP server
    4. Paste the code snippet into the mcp.json file and save

    ```json theme={null}
    {
      "mcpServers": {
        "figr": {
          "type": "http",
          "url": "https://mcp.figr.design/mcp"
        }
      }
    }
    ```
  </Tab>

  <Tab title="Claude Code">
    Open your terminal and run:

    ```text theme={null}
    claude mcp add figr --transport http https://mcp.figr.design/mcp
    ```
  </Tab>

  <Tab title="Google Antigravity">
    1. Open the MCP store via the "..." dropdown at the top of the editor's agent panel.
    2. Click on "Manage MCP Servers"
    3. Click on "View raw config"
    4. Modify the mcp\_config.json with Figr's custom MCP server configuration.

    ```json theme={null}
    {
        "mcpServers": {
            "figr": {
                "command": "npx",
                "args": [
                    "-y",
                    "mcp-remote",
                    "https://mcp.figr.design/mcp"
                ],
                "env": {}
            }
        }
    }
    ```
  </Tab>

  <Tab title="Other Editors">
    1. Other code editors and tools that support HTTP (StreamableHTTP) can also connect to the Figma MCP server
    2. Check your editor's documentation to confirm it supports HTTP-based communication
    3. If it does, you can manually add the Figma MCP server using this configuration:

    ```json theme={null}
    {
      "mcpServers": {
        "figr": {
          "type": "http",
          "url": "https://mcp.figr.design/mcp"
        }
      }
    }
    ```
  </Tab>
</Tabs>

### Connect the MCP server to your editor

Follow instructions for your specific editor to connect to the Figr MCP server,

| **Client**             | **Support** |
| :--------------------- | :---------: |
| **Android Studio**     |      ✓      |
| **Claude Code**        |      ✓      |
| **Codex by OpenAI**    |      ✓      |
| **Cursor**             |      ✓      |
| **Google Antigravity** |      ✓      |
| **Kiro**               |      ✓      |
| **Replit**             |      ✓      |
| **VS Code**            |      ✓      |
| **Warp**               |      ✓      |

***

## Prompt your MCP Server

To use Figr MCP, share your project link first. This tells the AI which Figr project to look at.

```text theme={null}
"Here's my Figr project: https://app.figr.design/..."
```

Once connected, you can explore everything in that project.

***

## What You Can Do

* **See what's in your project** Ask to see all your designs, past conversations, and files.
* **Read any design** Open any artifact to see the code and how it was built.
* **Understand why something was designed that way** Get the full story behind a design, including the decisions and reasoning from your conversations with Figr.
* **Search across everything** Find specific elements, patterns, or text across all your designs at once.
* **Check file details** See when something was created, modified, or get other details about any file.

***

## Use Cases

* **Implementing designs:** Get design context → understand decisions → implement with full context
* **Finding patterns:** Search across artifacts → read relevant files → apply consistent patterns
* **Extracting code:** Read artifact → copy component code → adapt to your codebase


# Legal for Enterprise
Source: https://docs.figr.design/docs/security-and-legal/enterprise-legal



# **MASTER SUBSCRIPTION AGREEMENT**

This Master Subscription Agreement (the "Agreement") is entered into between the Customer and **FigrFast Systems Private Limited ("Figr")**.

By accepting this Agreement or by using or accessing the Platform, the Customer agrees to be bound by the following terms and conditions:

### **1. DEFINITIONS**

1. Affiliate: Any entity that controls, is controlled by, or is under common control with a party, where "control" means direct or indirect ownership of more than 50% of the voting interests.
2. Confidential Information: Any information disclosed by one party to the other, marked as confidential or that should reasonably be understood to be confidential, including business, technical, or financial information.
3. Credits: Units of platform usage that measure processing and output generation. Credit consumption varies based on task complexity. One Credit approximates one hour of a designer's time for typical tasks. Detailed credit usage is available at docs.figr.design/account/credits-usage.
4. Customer Data: All data submitted by or on behalf of the Customer to Figr's Services, including but not limited to design systems, screen recordings, product context, and uploaded files.
5. Design System Data: \*\*Customer's design tokens, components, styles, and related assets imported via the Figr Figma Plugin or other integration methods, which may be stored on Figr's servers to enable the Services.
6. \*\*Order Form: \*\*The document specifying the Services to be provided, pricing, Credit allocation, and Subscription Term, executed by both parties.
7. \*\*Platform: \*\*The Figr AI-powered design platform accessible via web application, Chrome extension, and Figma Plugin.
8. \*\*Services: \*\*The proprietary software-as-a-service (SaaS) products made available by Figr to the Customer under this Agreement, including the AI-powered design platform, Chrome extension, Figma Plugin integration, and related outputs such as prototypes, PRDs, user flows, diagrams, and text-based deliverables.
9. \*\*Subscription Term: \*\*The period during which the Customer is granted access to the Services, as set forth in the applicable Order Form.
10. \*\*Third-Party Software: \*\*Any third-party software that interoperates with the Services upon Customer's instruction, including but not limited to Figma.
11. \*\*End User: \*\*Any natural person authorized by Customer to use the Services under Customer's account.
12. \*\*Feedback: \*\*Any suggestions, comments, or other feedback relating to the Services provided by Customer.

### **2. ACCESS AND USE**

1. Grant of Rights: Figr grants Customer a limited, non-exclusive, non-transferable right to access and use the Services during the Subscription Term solely for Customer's internal business purposes, subject to Credit availability.
2. Credit Allocation and Rollover: Customer shall receive Credits as specified in the Order Form. Unused Credits roll over to the following month, up to a maximum of the Customer's monthly allocation amount. Credits exceeding this cap expire at month-end.
3. Access Credentials: Customer shall maintain the confidentiality of all access credentials and notify Figr immediately of any unauthorized use.
4. Usage Restrictions: Customer shall not:
   * Reverse engineer or create derivative works of the Services.
   * Use the Services to transmit unlawful or malicious content.
   * Allow third parties to access the Services except as authorized in writing by Figr.
   * Engage in spam activities or impersonation while using the Services.

### **3. FIGR RESPONSIBILITIES**

1. Service Availability: Figr shall make the Services available 24/7, except for planned maintenance or events beyond Figr's reasonable control (e.g., force majeure).
2. Support: Figr shall provide technical support as described in the applicable Service Level Agreement (SLA).
3. Compliance: Figr shall comply with all applicable laws, including data protection regulations.
4. Right to Modify Services: Figr may modify, enhance, or upgrade the Services. New features or modules may incur additional fees, and notifications will be provided in advance.
5. Benchmarking and Data Usage: Figr may collect anonymized and aggregated Customer Data for benchmarking and publishing performance studies, without identifying Customers or End Users.

### **4. CUSTOMER RESPONSIBILITIES**

1. Integration: Customer shall integrate any required software development kits (SDKs), APIs, browser extensions, or Figma Plugins as necessary to access the Services.
2. End-User Compliance: Customer shall ensure that its End Users comply with the terms of this Agreement.
3. Data Input: Customer voluntarily provides data including design systems, product context, and screen recordings to enhance the quality of outputs. Customer is responsible for ensuring it has the rights to share such data with Figr.
4. Prohibited Activities: Customer shall not:
   * Upload or share content that infringes intellectual property rights.
   * Use the Services to store or transmit malicious code.
   * Submit any restricted or sensitive information unless explicitly agreed upon in the Order Form.

### **5. FEES AND PAYMENT TERMS**

1. Fees: Customer shall pay all fees specified in the Order Form. Fees are non-cancellable and non-refundable.
2. Payment Terms: Fees are due within 30 days of invoice. Late payments may incur interest based on the rate allowed by law.
3. Taxes: Fees exclude applicable taxes, which will be invoiced and paid by the Customer.
4. Fee Adjustments: Figr reserves the right to adjust fees in response to changes in third-party service costs, with a 30-day prior notice to the Customer.

### **6. DATA PRIVACY AND PROCESSING**

Customer Data is provided voluntarily by Customer to refine and enhance the outputs generated by the Services. Figr stores Customer Data, including Design System Data imported via the Figma Plugin, on its servers to enable service functionality and for later reference.

1. No AI Training on Customer Data: Customer Data is strictly isolated and is NOT used to train Figr's AI models. Customer Data remains confidential and is used solely to provide the Services to that Customer.
2. Data Processing: Figr shall process Customer Data in compliance with applicable data protection laws and the Data Protection Addendum (DPA), if applicable.
3. Security Measures: Figr shall implement administrative, physical, and technical safeguards to protect Customer Data.
4. Restricted Information: Customer shall not submit sensitive or restricted information such as health or payment data unless explicitly agreed upon in the Order Form.
5. Data Aggregation for Benchmarking: Figr may use anonymized and aggregated data to benchmark system performance and publish performance studies, without identifying individual Customers.

### **7. ANTI-CORRUPTION**

1. Compliance: Neither party shall engage in bribery, kickbacks, or other corrupt practices in connection with this Agreement.
2. Reporting Violations: Customer shall report any violations to the Figr legal department immediately.

### **8. INDEMNIFICATION**

1. Indemnification by Figr: Figr shall defend and indemnify the Customer and its Affiliates against any third-party claims (a) that the use of the Platform by the Customer as per this Agreement infringes any of its valid patents or copyrights; (b) on breach of confidentiality obligation by Figr as per Section 9. Figr shall have the sole control over the defense and/or settlement of such claim and shall pay all losses, damages and expenses (including reasonable attorneys' fees) finally awarded. For infringement claims, Figr may, at its sole option and expense, (i) procure for the Customer the right to continue use of the Platform and/or (ii) modify the Platform or its source code so that they no longer infringe or (iii) obtain a license for Customer's continued use of the Platform. If the above options are not possible, Figr shall terminate the Agreement and refund the Customer any prepaid fees for the remainder of the Term. This indemnity does not apply to any infringement or misappropriation claim that arises from (i) modifications to the Platform by anyone other than Figr, (ii) modifications to the Platform based upon specifications furnished by the Customer, (iii) Customer's use of the Platform other than as specified in this Agreement, (iv) use of the Platform in conjunction with third-party software not approved by Figr, or (v) any combination of the foregoing.
2. Indemnification by Customer: The Customer shall defend, indemnify and hold Figr and its Affiliates harmless from and against all third-party claims, suits, actions, damages, settlements, losses, liabilities, costs (including reasonable attorney's fees) and expenses resulting from or arising out of (a) violation of any applicable law arising from Customer's use of the Platform; (b) Customer Data infringing the Intellectual Property Rights of a third party; (c) a breach by the Customer of its confidentiality obligations under Section 9 hereof.
3. Notice and Cooperation: The indemnified Party shall promptly notify the indemnifying Party in writing of any Claim. The indemnifying Party shall bear full responsibility for, and shall have the right to solely control, the defense (including any settlements) of any Claim. The indemnifying Party shall not settle any such Claim in a manner that does not unconditionally release the indemnified Party without the indemnified Party's written consent.
4. Exclusive Remedy: THIS SECTION 8 SETS FORTH EACH PARTY'S ENTIRE LIABILITY AND OBLIGATION, AND EACH PARTY'S SOLE REMEDY FOR ANY CLAIM OF INFRINGEMENT OR MISAPPROPRIATION OF ANY INTELLECTUAL PROPERTY RIGHTS.

### **9. INTELLECTUAL PROPERTY**

**9.1 Figr’s Intellectual Property**

9.1.1 The Services, including all software, designs, text, graphics, logos, and other content provided by Figr, are owned by Figr or its licensors and are protected by intellectual property laws. You are granted a limited, non-exclusive, non-transferable license to use the Services in accordance with these Terms.

9.1.2 You may not copy, modify, distribute, sell, or lease any part of the Services, nor may you reverse engineer or attempt to extract the source code of any software, except as permitted by law or with our prior written consent.

**9.2 Your Intellectual Property**

9.2.1 You retain all ownership rights in Your Data and any content you create using the Services. Figr claims no ownership over outputs generated by the Services based on Your Data.

**9.3 Feedback**

9.3.1 If you provide us with feedback, suggestions, or ideas regarding the Services, you grant us a perpetual, irrevocable, worldwide, royalty-free license to use such feedback for any purpose without compensation or attribution to you.

**9.4 Third-Party Trademarks**

9.4.1 All trademarks of third-party applications or companies displayed within the Services belong to their respective owners. Figr displays these for reference purposes only. Users who utilize third-party trademarks in their outputs do so at their own risk and are advised against commercial use without obtaining permission from the trademark owner.

### **10. CONFIDENTIALITY**

1. Nondisclosure: Each Party (each a "Receiving Party") agrees that it (i) shall use and reproduce the Confidential Information of the other Party (the "Disclosing Party") only for purposes of exercising its rights and performing its obligations under this Agreement and only to the extent necessary for such purposes, (ii) shall restrict disclosure of such Confidential Information to the Receiving Party's employees, consultants, or advisors who have a bona fide need to know for such purposes, and (iii) shall not disclose such Confidential Information to any third party without the prior written approval of the Disclosing Party. The foregoing obligations shall be satisfied by the Receiving Party through the exercise of at least the same degree of care used to restrict disclosure and use of its own information of like importance, but not less than reasonable care.
2. Exceptions: Neither Party shall be liable for using or disclosing information that such Party can prove: (i) was in the public domain at the time it was disclosed or has entered the public domain through no fault of the Receiving Party; (ii) was rightfully known to the Receiving Party without restriction prior to disclosure; (iii) was independently developed by the Receiving Party without use of the Confidential Information; or (iv) was required to be disclosed by law or court order, provided that the Receiving Party gives the Disclosing Party prior notice and reasonable assistance to permit the Disclosing Party a reasonable opportunity to object.

### **11. LIMITATION OF LIABILITY**

1. Exclusion of Indirect Damages: Neither party shall be liable for indirect, consequential, or punitive damages.
2. Liability Cap: Figr's total liability shall not exceed the fees paid by Customer in the 12 months preceding the claim.

### **12. DISPUTE RESOLUTION AND GOVERNING LAW**

1. Resolution: Parties shall resolve disputes through good faith negotiations. If unresolved, disputes shall be subject to the exclusive jurisdiction of the courts in Bengaluru, Karnataka, India.
2. Governing Law: This Agreement shall be governed by and construed in accordance with the laws of India.

### **13. TERM AND TERMINATION**

1. Term: This Agreement remains in effect until all Order Forms have expired or been terminated.
2. Termination for Cause: Either party may terminate for material breach, provided the breach is not remedied within 30 days of notice.
3. Termination Without Cause: Termination without cause is not allowed unless mutually agreed upon by both parties.

### **14. GENERAL PROVISIONS**

1. Assignment: Neither party may assign this Agreement without the other's written consent, except in connection with a merger or acquisition.
2. Entire Agreement: This Agreement, including all Order Forms and appendices, constitutes the entire agreement between the parties.
3. Force Majeure: Neither party shall be liable for failure or delay due to causes beyond their reasonable control, including natural disasters and cyberattacks.
4. Feedback Usage: Figr may use Customer's Feedback to improve its Services without obligation to Customer.
5. Severability: If any provision is found unenforceable, the remaining provisions shall remain in full force and effect.
6. Waiver: No failure or delay in exercising any right under this Agreement shall constitute a waiver of that right.


# Copy and Download
Source: https://docs.figr.design/export/copy-download

Copy a node as an image, export a high-resolution PNG, or download its front-end code.

Figr gives you a few ways to take a node's output out of the canvas. Copy it as an image, export a high-resolution image, or download its front-end code.

## Copy as Image

Copy as Image copies a rendered output to your clipboard and shows a confirmation once it is copied. The copy is a PNG. Use it for Slack updates, internal docs, presentations, quick review, or a static snapshot.

## High-resolution image export

High-resolution export gives you polished static assets as a PNG download. Use it when you need polished static assets for decks, specs, stakeholder updates, product reviews, documentation, or async design critique.

## Download Code

You can download a node's front-end output for implementation reference or prototyping.

<Frame>
  <img alt="Download Code option on a generated node" />

  <img alt="Download Code option on a generated node" />

  <img alt="Download Code option on a generated node" />

  <img alt="Download Code option on a generated node" />
</Frame>

Use it when you need code as a starting point, you want to inspect structure, you want to hand off a prototype direction, or you are moving from Figr into development. Do not send vague ideas to engineering. Use Figr to clarify the flow, states, and design direction first, then hand off.


# Export to Figma
Source: https://docs.figr.design/export/figma

Send any Figr prototype to Figma as editable layers, with its real variables attached.

Export to Figma pushes any Figr prototype back into Figma as editable layers, with its real variables attached. It runs through the same Figr AI - Figma Sync plugin you use for Figma input, so the design lands on the Figma canvas ready to refine, hand off, or fold into your library. It closes the loop: you design in Figr with your real system, then send the finished work back so designers can polish it where they already work. Generate fast in Figr, refine in Figma, hand off as usual.

## Before you start

You need the Figr AI - Figma Sync plugin installed and connected. If you set it up for [Figma input](/input-research/figma-input), you are ready. Connect once, export anytime.

## Export a prototype

<Steps>
  <Step title="Select a prototype node">
    Click the node on the canvas. A floating toolbar appears above it with Select & edit, Full screen, Tell Figr about this, Export, and Publish.
  </Step>

  <Step title="Open Export, then Export to Figma">
    A setup modal opens with step-by-step instructions and an Open Plugin in Figma link.
  </Step>

  <Step title="Run the plugin in your target Figma file">
    Open it from the modal's link, in the file where you want the design to land.
  </Step>

  <Step title="Wait for the transfer">
    A progress bar shows "Adding variables to your design," then "Exporting to Figma."
  </Step>

  <Step title="Confirm it landed">
    A green "Design sent to Figma" toast appears. Your frame is on the Figma canvas with its variables attached.
  </Step>
</Steps>

## What comes across

* The frame: your prototype's layout, rendered as Figma layers.
* Variables: design values transfer as Figma variables, not flattened styles.

## Current limitations

* One frame per export. Each export carries the single frame you triggered it from, not every screen or state. Export additional frames one at a time.
* No Auto Layout yet. Frames arrive as plain groups; re-apply Figma Auto Layout manually.
* One-directional. The handoff happens per action. There is no live, continuous sync between a Figr node and its Figma copy. The single-frame and Auto Layout limits are both in active development.

## Other ways to hand off

Export to Figma is one option in the Export dropdown. Depending on where the work goes next:

| Option          | Best for                                              |
| --------------- | ----------------------------------------------------- |
| Export to Figma | Handing off to a designer to refine in Figma          |
| Copy as image   | Dropping a quick visual into a doc, deck, or message  |
| Use MCP server  | Pulling the design into an IDE like VS Code or Cursor |
| Download code   | Getting the full front-end package as a ZIP           |

## Best practices

* Export the frame you want, not the whole flow. Trigger export from the specific node, and repeat per frame for multi-screen work.
* Plan to re-apply Auto Layout once frames land, so they behave responsively in Figma.
* Confirm the plugin is connected before exporting, to avoid a failed transfer.
* Use Copy as image when you only need a static visual. It is instant and needs no plugin.

## Troubleshooting

| Issue                              | Fix                                                                 |
| ---------------------------------- | ------------------------------------------------------------------- |
| Export modal can't find the plugin | Run Figr AI - Figma Sync in your target Figma file, then retry      |
| Only one frame came across         | Expected. Export each frame separately                              |
| Frame has no Auto Layout           | Expected. Re-apply it manually in Figma                             |
| Export stalls on the progress bar  | Confirm the plugin shows Connected, close the modal, and re-trigger |

## Related

<CardGroup>
  <Card title="Figma input" href="/input-research/figma-input">
    Bring Figma frames and your design system into Figr.
  </Card>

  <Card title="Design system intelligence" href="/product-intelligence/design-system">
    How Figr learns and applies your tokens and components.
  </Card>

  <Card title="Figr MCP" href="/export/mcp">
    Pull a design into an IDE instead of Figma.
  </Card>

  <Card title="Download code" href="/export/copy-download">
    Get the front-end package for implementation.
  </Card>
</CardGroup>


# Figr MCP
Source: https://docs.figr.design/export/mcp

Give AI coding assistants the context behind your designs, not just the pixels.

Figr MCP gives AI coding assistants the real design behind your screens: its structure, values, artifacts, and the reasoning that shaped it, not a screenshot. MCP (Model Context Protocol) is an open standard that lets AI tools read external sources. Figr's server exposes your projects and board nodes to any MCP-compatible IDE, so your assistant builds from the actual design instead of a guess at a picture. Use it when you move from design into implementation.

## What you can do

<CardGroup>
  <Card title="See what's in your project">
    List every design, past conversation, and file in the project.
  </Card>

  <Card title="Read any design">
    Open any artifact to see its code and how it was built.
  </Card>

  <Card title="Understand the why">
    Pull the reasoning behind a design from your conversations with Figr.
  </Card>

  <Card title="Search across everything">
    Find elements, patterns, or text across all designs at once.
  </Card>

  <Card title="Check file details">
    See when something was created or modified, and other file metadata.
  </Card>
</CardGroup>

## Two ways to connect

* **From a node**: hand one design off to your IDE from the Export menu. Fast, specific.
* **As a connector**: register the Figr MCP server once so any tool reaches your whole workspace. Persistent.

## From a node

Send one design straight from the canvas.

<Steps>
  <Step title="Select a prototype node">
    Click the node on the canvas. The floating toolbar appears.
  </Step>

  <Step title="Open Export, then Use MCP server">
    A dialog opens with integration options for VS Code and Cursor, plus two copy buttons.
  </Step>

  <Step title="Copy the link you need">
    Project link for the whole project, or Board node link for this one design.
  </Step>

  <Step title="Paste it into your IDE's MCP configuration">
    Your assistant can now read the design's real layout, structure, and values.
  </Step>
</Steps>

<Frame>
  <img alt="The Use MCP Server dialog with VS Code and Cursor options and copy buttons for Project link and Board node link" title="Use MCP Server" />

  <img alt="The Use MCP Server dialog with VS Code and Cursor options and copy buttons for Project link and Board node link" title="Use MCP Server" />
</Frame>

| Link            | Scope              | Use when                                                  |
| --------------- | ------------------ | --------------------------------------------------------- |
| Project link    | The entire project | The assistant should see every screen and how they relate |
| Board node link | One specific node  | You are implementing a single screen or component         |

## As a connector

Register the Figr MCP server once so any project is reachable, instead of copying a link per node. The server URL is the same for everyone: `https://mcp.figr.design/mcp`.

### Through a connectors page

<Steps>
  <Step title="Open the Connectors page and click + Add custom" />

  <Step title="Enter a name and the server URL">
    Name it (for example, Figr mcp) and use `https://mcp.figr.design/mcp`.
  </Step>

  <Step title="Save, then Connect">
    Complete the OAuth consent to grant workspace and project read access.
  </Step>

  <Step title="Wait for the connector to turn green">
    Your tools can now reach Figr live. Share a project or node link in your assistant to focus it.
  </Step>
</Steps>

### Through your editor's config

Some editors register the server through a config file instead of a connectors page.

<Tabs>
  <Tab title="Cursor">
    1. Open **Cursor → Settings → Cursor Settings**.
    2. Click **Tools & Integrations**.
    3. Under **MCP Tools**, click **+** to add a custom MCP server.
    4. Paste this into `mcp.json` and save.

    ```json theme={null}
            {
              "mcpServers": {
                "figr": {
                  "type": "http",
                  "url": "https://mcp.figr.design/mcp"
                }
              }
            }
    ```
  </Tab>

  <Tab title="Claude Code">
    Open your terminal and run:

    ```bash theme={null}
            claude mcp add figr --transport http https://mcp.figr.design/mcp
    ```
  </Tab>

  <Tab title="Google Antigravity">
    1. Open the MCP store via the **...** dropdown at the top of the agent panel.
    2. Click **Manage MCP Servers**, then **View raw config**.
    3. Add the Figr server to `mcp_config.json`.

    ```json theme={null}
            {
              "mcpServers": {
                "figr": {
                  "command": "npx",
                  "args": ["-y", "mcp-remote", "https://mcp.figr.design/mcp"],
                  "env": {}
                }
              }
            }
    ```
  </Tab>

  <Tab title="Other editors">
    Any editor with HTTP (StreamableHTTP) transport can connect. Confirm HTTP support in your editor's docs, then add the server manually:

    ```json theme={null}
            {
              "mcpServers": {
                "figr": {
                  "type": "http",
                  "url": "https://mcp.figr.design/mcp"
                }
              }
            }
    ```
  </Tab>
</Tabs>

## Supported clients

| Client             | Supported |
| :----------------- | :-------: |
| Android Studio     |     ✓     |
| Claude Code        |     ✓     |
| Codex by OpenAI    |     ✓     |
| Cursor             |     ✓     |
| Google Antigravity |     ✓     |
| Kiro               |     ✓     |
| Replit             |     ✓     |
| VS Code            |     ✓     |
| Warp               |     ✓     |

## Why it matters

Handing a design to a developer usually means lossy translation: a screenshot, a spec doc, a guess at spacing. MCP removes that gap.

| Without MCP                                   | With the Figr MCP server                    |
| --------------------------------------------- | ------------------------------------------- |
| Screenshot the design, describe it to your AI | The IDE reads the real design directly      |
| The assistant guesses layout and spacing      | The assistant builds from actual structure  |
| Re-explain context every session              | The project stays connected as live context |
| Manual copy-paste between tools               | One link, persistent access                 |

## Best practices

* Use a Board node link for focused work. Pointing the assistant at one screen keeps its context tight and its output accurate.
* Use a Project link for broader builds, when the assistant needs to see how screens relate.
* Register the connector once if you work in your IDE daily, instead of copying a node link each time.
* Review the OAuth scopes before authorizing, so you know what workspace access you are granting.

## Troubleshooting

| Issue                                        | Fix                                                             |
| -------------------------------------------- | --------------------------------------------------------------- |
| IDE can't reach the server                   | Confirm the URL is exact: `https://mcp.figr.design/mcp`         |
| Connector stuck on "Requires authentication" | Click Connect and finish the OAuth consent flow                 |
| Assistant can't see a design                 | Check the scope. A Board node link points at one node only      |
| Access revoked unexpectedly                  | Re-run OAuth from the Connectors page to refresh the connection |

## Related

<CardGroup>
  <Card title="Export options" href="/export/options">
    Other ways to hand off a design.
  </Card>

  <Card title="Download code" href="/export/copy-download">
    A front-end starting point for implementation.
  </Card>
</CardGroup>


# Export Options
Source: https://docs.figr.design/export/options

Export is a handoff decision, not one final button.

<Frame>
  <img alt="The full export options menu in Figr" />

  <img alt="The full export options menu in Figr" />
</Frame>

Export is a handoff decision. Ask where the work goes next, design, review, engineering, or approval, then pick the path:

* A designer needs to polish it, **export to Figma**.
* Stakeholders need to review it, **publish or share a prototype URL**.
* Engineering is ready to build, move toward **code or MCP**.

<CardGroup>
  <Card title="Export to Figma" href="/export/figma">
    Editable frames for a designer to continue.
  </Card>

  <Card title="Publish and Share" href="/export/publish">
    A public link for review, or full project access.
  </Card>

  <Card title="Download code" href="/export/copy-download">
    A front-end starting point for implementation.
  </Card>

  <Card title="Figr MCP" href="/export/mcp">
    Project context for an AI coding assistant.
  </Card>
</CardGroup>

Figr's job is to make sure what you hand off has real product context behind it, not just pixels.


# Publish and Share
Source: https://docs.figr.design/export/publish

Share one artifact publicly, or give your team access to the full project.

Publish and Share is how people see your work outside your Canvas. Publish one artifact as a public page, or share the whole project with your team.

<Frame>
  <img alt="Publish panel showing public URL, status, and password option" />

  <img alt="Publish panel showing public URL, status, and password option" />
</Frame>

## Publish an artifact

Turn one item into a public page so someone can review a single prototype, design direction, or artifact without seeing the full Canvas. For example: share a prototype with a stakeholder, send a direction to a client, or post a public review link. Published artifacts open through a public URL. Depending on your settings, you may also be able to add password protection.

<Frame>
  <img alt="A published artifact page opened through its public URL" />

  <img alt="A published artifact page opened through its public URL" />
</Frame>

## Share a project

Give someone access to the full project, not just one public artifact. Use it when a teammate needs to view, edit, or collaborate on the whole Canvas: a designer refining outputs, a PM reviewing flows and PRDs, or an engineer inspecting implementation context.

<Frame>
  <img alt="Project Share modal showing access settings and roles" />

  <img alt="Project Share modal showing access settings and roles" />
</Frame>

## Related

<CardGroup>
  <Card title="Export Options" href="/designing/export/one-click-figma">
    Choose the right handoff path.
  </Card>
</CardGroup>

<CardGroup>
  <Card title="Export Options" href="/designing/export/one-click-figma">
    Choose the right handoff path.
  </Card>
</CardGroup>


# Frequently Asked Questions
Source: https://docs.figr.design/faqs

Common questions about Figr's features, pricing, and usage answered by our team.

## Getting Started

<AccordionGroup>
  <Accordion title="What makes Figr different from other AI design tools?">
    Figr builds permanent product memory that learns your specific product, users, and constraints. Figr deeply understands your your design system, user research, and product patterns to create designs that feel native to your product from day one. Figr AI is built pecifically for teams to help build on top of their existing product.
  </Accordion>

  <Accordion title="How long does it take to set up Figr for my product?">
    For teams, working on a live product[ book a quick call with us](https://cal.com/moksh-figr/figr-ai-onboard) to get yourself onboarded. Initial setup takes 20 minutes. For complex products with multiple deeper context, setup may take up to an hour but delivers immediate value.\
    \
    You provide 4-5 product screenshots, your Figma tokens, CSS files or documented design system. Figr also auto-explores your product flows and sets up your design system from the backend. \
    \
    This one-time investment saves hours on every future design project as Figr applies your product knowledge automatically.\
    \
    While working on day-to day you can upload screenshots, share your screen to show your product, URLs, PDFs, CSVs and provide  context of your UX problem.
  </Accordion>

  <Accordion title="Do I need design experience to use Figr?">
    No. Figr guides you through the design process with questions and recommendations, making design decisions accessible to anyone who understands user problems and business requirements. PMs actually use Figr more than designers because it solves higher-level problems like flow architecture and pattern selection.
  </Accordion>

  <Accordion title="Can Figr work with my existing design tools?">
    Yes. Figr exports to Figma. You can also export  code  that uses your existing design tokens and component library.
  </Accordion>
</AccordionGroup>

## Features & Capabilities

<AccordionGroup>
  <Accordion title="How does Figr's memory system work?">
    Figr builds a persistent understanding of your product through four context layers: your existing flows (auto-explored), design system (tokens and components), user feedback (from uploads), and industry benchmarks. Unlike chat-based tools that forget between sessions, Figr gets smarter about your organization over time and maintains context across conversations.

    When you create new designs, Figr references this knowledge automatically. The memory builds over time, making designs increasingly accurate and context-aware.
  </Accordion>

  <Accordion title="What types of data can I import into Figr?">
    You can import user research (PDFs, videos), analytics data (CSV exports), design screenshots, and documentation (PRDs, email threads, screenshots). Figr also supports screen sharing to learn your product directly.
  </Accordion>

  <Accordion title="Can multiple team members collaborate in Figr?">
    Yes. Figr supports real-time collaboration with role-based permissions. Team members can co-edit designs, create sub-teams and contribute to the shared product knowledge base.
  </Accordion>

  <Accordion title="Does Figr work for mobile app design?">
    Absolutely. Figr creates responsive designs and can adapt patterns across platforms.
  </Accordion>
</AccordionGroup>

## Pricing & Plans

<AccordionGroup>
  <Accordion title="What does the free plan include?">
    The free plan includes 20 one-time credits, basic memory system, standard exports, and community support. It's designed to help you evaluate if Figr fits your team's workflow before committing to a paid plan.
  </Accordion>

  <Accordion title="How does Pro plan pricing work?">
    Pro starts at \$99/month per team for 200 credits. We do not charge per seat, unlimited  team members can use Figr with the same work email. Everyone shares a common credit pool. You can upgrade your monthly credits allowance at any point. The monthly allocated credits rollover to next month.\
    \
    We focus on team-level licensing rather than per-user pricing to encourage collaboration and shared context building across your organizati
  </Accordion>

  <Accordion title="Do you offer enterprise plans?">
    Yes. Enterprise plans include SSO, advanced security, private cloud options, custom integrations, dedicated support, and training. Contact [hi@figr.design](mailto:hi@figr.design) for custom pricing or [book a call with founder here](https://cal.com/moksh-figr/figr-ai-contact).
  </Accordion>

  <Accordion title="Can I cancel anytime?">
    Yes, you can cancel your subscription anytime. You'll retain access until your current billing period ends. All your design data remains accessible for export.
  </Accordion>
</AccordionGroup>

## Technical Questions

<AccordionGroup>
  <Accordion title="What browsers does Figr support?">
    Figr works in all modern browsers including Chrome, Firefox, Safari, and Edge. The web interface is optimized for desktop use given the collaborative nature of design work.
  </Accordion>

  <Accordion title="How secure is my data in Figr?">
    We use AES-256 encryption, SOC 2 compliance, and enterprise-grade security practices. You maintain complete ownership of your data and can export everything anytime.

    Your design data, product screenshots, and context information are encrypted in transit and at rest. We don't share your proprietary information with other customers or use it to train models for competitors. Enterprise plans include additional security features like SSO integration and data residency options.
  </Accordion>

  <Accordion title="How does screen sharing work technically?">
    Screen sharing uses secure browser-based technology (similar to Zoom or Meet) that lets our AI see your current design context in real-time. This helps Figr better understand complex problems you're explaining verbally.
  </Accordion>
</AccordionGroup>

## Design Process

<AccordionGroup>
  <Accordion title="How accurate are Figr's AI-generated designs?">
    Figr's accuracy depends on the context you provide. With proper design system setup and product context, teams report 50% less time fixing outputs compared to other AI tools. The designs respect your tokens, components, and existing patterns while suggesting improvements based on successful app benchmarks.

    Initial designs typically need minor adjustments, but after a few weeks of use, designs often ship with minimal changes. The more Figr knows about your product, the better the results.
  </Accordion>

  <Accordion title="Can I modify AI-generated designs?">
    Yes. Figr provides both AI assistance and export to Figma. You can edit any element, adjust layouts, modify colors, and make detailed refinements to get exactly what you need.\
    \
    Figr outputs production-ready frames that your designers can refine, extend, or use as starting points.
  </Accordion>

  <Accordion title="How does Figr handle design systems?">
    Figr reads your Figma tokens and maintains design system compliance across all outputs. It can switch between different product contexts  while applying the correct styles and components. For enterprise customers, we provide complete design system setup and auditing to ensure consistency across your organization.
  </Accordion>

  <Accordion title="What if Figr creates something I don't like?">
    Simply provide feedback and ask for alternatives. Figr can generate multiple variations, explain its reasoning, or iterate based on your specific concerns. The more context you provide about what's not working, the better Figr becomes at understanding your preferences and organizational design standards.
  </Accordion>
</AccordionGroup>

## Support & Resources

<AccordionGroup>
  <Accordion title="How do I get help if I'm stuck?">
    Check our documentation first, then email [hi@figr.design](mailto:hi@figr.design). \
    (Less than 24 hours response time)\
    \
    Enterprise customers get priority support with dedicated success managers. We also provide screen sharing sessions where our team can walk through your specific use case and help optimize your setup for better results.
  </Accordion>

  <Accordion title="Do you provide onboarding or training?">
    Yes. All users get access to tutorial videos and documentation. Pro Teams and Enterprise customers get dedicated training sessions for your team, best practices workshops, and ongoing success management to ensure you're getting maximum value from Figr.
  </Accordion>

  <Accordion title="How often do you add new features?">
    We ship new features weekly and major updates monthly. Follow our changelog and blog for the latest updates. User feedback heavily influences our development priorities.
  </Accordion>

  <Accordion title="Can I request specific features?">
    Absolutely.[ Email us your feature requests](mailto:hi@figr.design).

    We prioritize feature requests from active customers, especially enterprise teams. Share your needs through email or during customer calls. Many of our current features like screen sharing and deep product context came directly from customer requests and collaborative development sessions.
  </Accordion>
</AccordionGroup>

***

<Card title="Still have questions?" icon="question" href="https://figr.design/contact">
  [Reach out to us](mailto:hi@figr.design) or [book a call](https://cal.com/moksh-figr/figr-ai-contact).
</Card>


# Add Product Context
Source: https://docs.figr.design/getting-started/setup/add-product-context



Your first setup decides the quality of everything Figr generates. Give it real product context, how your product works and how it looks, before you ask for a single screen.

## 1. Setup Context Pods

Context Pods and walkthroughs teach Figr how your product works.

### Create context Pod

Start with a Context Pod for the product or feature area you want Figr to understand. Good examples:

* "Cal.com booking flow"
* "Billing and plans"
* "Admin permissions"
* "Workspace onboarding"
* "Analytics dashboard" Keep it focused. One Context Pod should cover a single product area, workflow, or feature set, so Figr can understand and reuse it later.

<img alt="Create Context Pod screen" title="Create Context Pod screen" />

<img alt="Create Context Pod screen" title="Create Context Pod screen" />

### Add a walkthrough

Add a screen recording or product walkthrough to the Context Pod. Walk through the area like you are explaining it to a teammate: what it does, who uses it, what they are trying to complete, where the friction is, what should not change, and which states matter. A recording beats a screenshot. Figr follows the real sequence, clicks, movement, dropdowns, and transitions.

## 2. Setup Design Language

This is where Figr learns how your product should look. Connect your Figma frames, add design tokens, upload CSS or JSON, or let Figr learn from your live product. The goal is for Figr to design inside your system, not approximate it. No design system yet? You can build one directly in Figr.

<img alt="Design language or Figma setup" title="Design language or Figma setup" />

<img alt="Design language or Figma setup" title="Design language or Figma setup" />

## Start with lighter tasks

With context and design language in place, do not jump straight to a high-fidelity design. Start with something lighter first: a review, a flow, an edge-case map, or a PRD breakdown. This lets Figr reason through the problem before it generates screens. Good first prompts:

* "Review this onboarding flow and identify where users may get stuck."
* "Map the edge cases for this billing upgrade flow."
* "Create a user flow from this product walkthrough."
* "Turn this rough PRD into a flow and key states."

## Generate later

Generate the design once the direction is clear. By now Figr knows how your product looks and behaves, the area you are working in, and the design language to follow.


# Add product context
Source: https://docs.figr.design/getting-started/setup/add-product-contextt

Give Figr your product context: Context Pods for how your product works and a design system for how it looks.

Your first setup decides the quality of everything Figr generates. Give it real product context, how your product works and how it looks, before you ask for a single screen.

## 1. Setup Context Pods

Context Pods and walkthroughs teach Figr how your product works.

### Create context Pod

Start with a Context Pod for the product or feature area you want Figr to understand. Good examples:

* "Cal.com booking flow"
* "Billing and plans"
* "Admin permissions"
* "Workspace onboarding"
* "Analytics dashboard" Keep it focused. One Context Pod should cover a single product area, workflow, or feature set, so Figr can understand and reuse it later.

<img alt="Create Context Pod screen" title="Create Context Pod screen" />

<img alt="Create Context Pod screen" title="Create Context Pod screen" />

### Add a walkthrough

Add a screen recording or product walkthrough to the Context Pod. Walk through the area like you are explaining it to a teammate: what it does, who uses it, what they are trying to complete, where the friction is, what should not change, and which states matter. A recording beats a screenshot. Figr follows the real sequence, clicks, movement, dropdowns, and transitions.

## 2. Setup Design Language

This is where Figr learns how your product should look. Connect your Figma frames, add design tokens, upload CSS or JSON, or let Figr learn from your live product. The goal is for Figr to design inside your system, not approximate it. No design system yet? You can build one directly in Figr.

<img alt="Design language or Figma setup" title="Design language or Figma setup" />

<img alt="Design language or Figma setup" title="Design language or Figma setup" />

## Start with lighter tasks

With context and design language in place, do not jump straight to a high-fidelity design. Start with something lighter first: a review, a flow, an edge-case map, or a PRD breakdown. This lets Figr reason through the problem before it generates screens. Good first prompts:

* "Review this onboarding flow and identify where users may get stuck."
* "Map the edge cases for this billing upgrade flow."
* "Create a user flow from this product walkthrough."
* "Turn this rough PRD into a flow and key states."

## Generate later

Generate the design once the direction is clear. By now Figr knows how your product looks and behaves, the area you are working in, and the design language to follow.


# Quickstart
Source: https://docs.figr.design/getting-started/setup/creating-your-account

Go from signup to your first Figr prototype in a few minutes.

Quick path from signup to a generated prototype. For the full setup, see [Add product context](/design-intelligence/product-context).

<iframe title="Figr quickstart walkthrough" />

<Steps>
  <Step title="Create your account">
    Sign up at [figr.design](https://figr.design) and create a new project.

    <Frame>
      <img alt="Signup and new project screen" />
    </Frame>
  </Step>

  <Step title="Add a little product context">
    Bring in one screen, recording, doc, or link so Figr understands your product. A single source already makes the output feel like your product instead of a blank-slate prompt. The full setup lives in [Add product context](/design-intelligence/product-context).

    <Frame>
      <img alt="Adding product context to a project" />
    </Frame>
  </Step>

  <Step title="Describe what you want">
    Write a short prompt for the screen or flow you need, and attach any context. Keep it simple here; for ready-made prompts see the [Prompt Library](/prompt-library).

    <Frame>
      <img alt="Prompt box with attachment options" />
    </Frame>
  </Step>

  <Step title="Let Figr design">
    Figr reasons through the flow and generates a high-fidelity prototype that follows your design language.\\

    <Frame>
      <img alt="High Fidelity Prototype" />
    </Frame>
  </Step>

  <Step title="Review and refine">
    Edit specific parts without regenerating the whole screen. See [Edit without regenerating](/designing/edits/click-to-refine).

    <Frame>
      <img alt="Reviewing and refining a generated screen" />
    </Frame>
  </Step>

  <Step title="Export or share">
    Hand off to Figma, a shareable link, an image, or code. See [Export to Figma](/designing/export/one-click-figma).

    <Frame>
      <img alt="Export to Figma, link, image, or code" />

      <img alt="Export to Figma, link, image, or code" />
    </Frame>
  </Step>
</Steps>

<Tip>
  The more product context you add, the closer the output matches your product. Once you have run through this, set up your full product context and [design system](/design-intelligence/design-system).
</Tip>

## Next

<CardGroup>
  <Card title="Add product context" href="/design-intelligence/product-context">
    The full setup that makes Figr product-aware.
  </Card>

  <Card title="Export to Figma" href="/designing/export/one-click-figma">
    Take your prototype into Figma for handoff.
  </Card>
</CardGroup>


# Invite Team
Source: https://docs.figr.design/getting-started/setup/invite-team



Working with your team is better than working alone. **Here's how to bring them in.**

## Open organization settings

Click your profile icon at the bottom left. You'll see your email and credit balance.

**Click "Settings" → "Members and Roles".** This opens your team management dashboard.

## Invite team members

You'll see an invite section at the top. **Enter email addresses** of people you want to add.

Pick their role:

* **Admin** — Full control over settings, billing, and members
* **Member** — Can create and edit canvases, but can't manage the team

**Click "Send invites."** They'll get an email with a link to join your organization.

## What happens next

Your teammates will receive an invitation email. When they click the link, they'll join your organization automatically. No approval needed from you.

They'll see all shared canvases, context pods and design languages right away. And they can start creating their own.

## Switch between organizations

Part of multiple teams? Click your profile icon and select "Switch organisation." You'll see all organizations you're part of.


# Team Invitations
Source: https://docs.figr.design/getting-started/setup/invite-team12

Add team members to your Figr project and set up collaborative workflows.

Working with your team is better than working alone. **Here's how to bring them in.**

## Open organization settings

Click your profile icon at the bottom left. You'll see your email and credit balance.

**Click "Settings" → "Members and Roles".** This opens your team management dashboard.

## Invite team members

You'll see an invite section at the top. **Enter email addresses** of people you want to add.

Pick their role:

* **Admin** — Full control over settings, billing, and members
* **Member** — Can create and edit canvases, but can't manage the team

**Click "Send invites."** They'll get an email with a link to join your organization.

## What happens next

Your teammates will receive an invitation email. When they click the link, they'll join your organization automatically. No approval needed from you.

They'll see all shared canvases, context pods and design languages right away. And they can start creating their own.

## Switch between organizations

Part of multiple teams? Click your profile icon and select "Switch organisation." You'll see all organizations you're part of.


# Earn More Credits
Source: https://docs.figr.design/getting-started/setup/referral



Credits power every generation in Figr. Open **Earn more credits** at the bottom of the left sidebar to see your tasks and claim rewards.

<Frame>
  <img alt="Earn Credits" />
</Frame>

## Ways to earn

| Task                         | What you do                                              | Reward    |
| ---------------------------- | -------------------------------------------------------- | --------- |
| Set up your design system    | Connect Figma or upload files so Figr learns your tokens | 5 credits |
| Install the Chrome extension | Capture live products from the web as input              | 5 credits |
| Review on G2 or Product Hunt | Share honest feedback about Figr                         | 5 credits |
| Share on X or LinkedIn       | Post about Figr and claim your credits                   | 5 credits |

Each task credits your balance once. Set up your design system from the [Design Language](/product-intelligence/design-system) page; the rest are one click from the Earn more credits panel.

## Affiliate program

Refer PMs, designers, and SaaS teams and earn 20% recurring commission for as long as they stay subscribed. Your referral link, commissions, and payouts live in Rewardful. [Become an affiliate](https://figr.design/affiliate-program).


# Earn free credits
Source: https://docs.figr.design/getting-started/setup/referral12

Add credits to your balance without upgrading, by setting up Figr, installing the extension, reviewing, sharing, or referring.

Credits power every generation in Figr. Open **Earn more credits** at the bottom of the left sidebar to see your tasks and claim rewards.

<Frame>
  <img alt="Earn Credits" />
</Frame>

## Ways to earn

| Task                         | What you do                                              | Reward    |
| ---------------------------- | -------------------------------------------------------- | --------- |
| Set up your design system    | Connect Figma or upload files so Figr learns your tokens | 5 credits |
| Install the Chrome extension | Capture live products from the web as input              | 5 credits |
| Review on G2 or Product Hunt | Share honest feedback about Figr                         | 5 credits |
| Share on X or LinkedIn       | Post about Figr and claim your credits                   | 5 credits |

Each task credits your balance once. Set up your design system from the [Design Language](/product-intelligence/design-system) page; the rest are one click from the Earn more credits panel.

## Affiliate program

Refer PMs, designers, and SaaS teams and earn 20% recurring commission for as long as they stay subscribed. Your referral link, commissions, and payouts live in Rewardful. [Become an affiliate](https://figr.design/affiliate-program).


# Team Invitations
Source: https://docs.figr.design/getting-started/setup/team-invitations

Add team members to your Figr project and set up collaborative workflows.

Working with your team is betterx than working alone. **Here's how to bring them in.**

## Open organization settings

Click your profile icon at the bottom left. You'll see your email and credit balance.

<img alt="Accountmanagement04 Pn" title="Accountmanagement04 Pn" />

**Click "Organization settings."** This opens your team management dashboard.

## Invite team members

You'll see an invite section at the top. **Enter email addresses** of people you want to add. You can invite multiple people at once—just separate emails with commas.

Pick their role:

* **Admin** — Full control over settings, billing, and members
* **Member** — Can create and edit canvases, but can't manage the team

**Click "Send invites."** They'll get an email with a link to join your organization.

## What happens next

Your teammates will receive an invitation email. When they click the link, they'll join your organization automatically. No approval needed from you.

They'll see all shared canvases right away. And they can start creating their own.

## Switch between organizations

Part of multiple teams? Click your profile icon and select "Switch organisation." You'll see all organizations you're part of.


# Brainstorming Ideas
Source: https://docs.figr.design/getting-started/tutorial/brainstorm



<img alt="Brainstorm output with options, trade-offs, and a flow diagram" title="Brainstorm output" />

<img alt="Brainstorm output with options, trade-offs, and a flow diagram" title="Brainstorm output" />

Use Brainstorm when you are still deciding:

* What the user journey should be
* Which UX approach makes sense
* What edge cases matter
* What the screen should include
* How to structure a product flow
* What trade-offs exist
* What assumptions need to be checked

Good Brainstorm prompts:

* "What are the edge cases for a guest checkout flow?"
* "Compare three onboarding approaches for a B2B analytics tool."
* "Given this PRD, what requirements are unclear from a UX perspective?"
* "Review this feature idea and suggest the safest MVP flow."

Brainstorm outputs can include structured options, trade-off breakdowns, product notes, flow diagrams, PRD-style artifacts, UX risks, and edge case lists.

Use Brainstorm before Design when the problem is unclear.


# Brainstorm ideas
Source: https://docs.figr.design/getting-started/tutorial/brainstorm1

Brainstorm for product thinking before pixels: options, trade-offs, and edge cases.

<img alt="Brainstorm output with options, trade-offs, and a flow diagram" title="Brainstorm output" />

<img alt="Brainstorm output with options, trade-offs, and a flow diagram" title="Brainstorm output" />

Use Brainstorm when you are still deciding:

* What the user journey should be
* Which UX approach makes sense
* What edge cases matter
* What the screen should include
* How to structure a product flow
* What trade-offs exist
* What assumptions need to be checked

Good Brainstorm prompts:

* "What are the edge cases for a guest checkout flow?"
* "Compare three onboarding approaches for a B2B analytics tool."
* "Given this PRD, what requirements are unclear from a UX perspective?"
* "Review this feature idea and suggest the safest MVP flow."

Brainstorm outputs can include structured options, trade-off breakdowns, product notes, flow diagrams, PRD-style artifacts, UX risks, and edge case lists.

Use Brainstorm before Design when the problem is unclear.


# Create PRDs
Source: https://docs.figr.design/getting-started/tutorial/create-prds



PM handoff isn't only a doc, and it isn't only a screen. From one rough problem, Figr generates the full chain of artifacts a real handoff needs, and keeps them connected on a single canvas.

<img alt="PRD, user stories, acceptance criteria, test cases, flow, and prototype connected on the canvas" title="PRD chain on the canvas" />

<img alt="PRD, user stories, acceptance criteria, test cases, flow, and prototype connected on the canvas" title="PRD chain on the canvas" />

From a single problem, Figr can produce:

* PRD and requirements
* User stories and acceptance criteria
* Edge case maps and key states
* Test cases
* User flow

High-fidelity prototype and design direction Start with a rough problem statement. It does not need to be polished. Include:

* What you want to improve
* Who it is for
* Which constraints matter
* Which product context Figr should use Then ask for the first artifact:
  * "Turn this rough product problem into a structured PRD. Use the attached product context, existing screens, design system, analytics notes, and previous decisions, then flag missing requirements and edge cases." From there, generate the rest of the chain: user stories, acceptance criteria, test cases, a user flow, key states, and a prototype. The PRD should not sit alone in a doc. It is the base for your UX work, and the chain stays live: if the flow reveals a missing state, update the PRD; if the prototype exposes a confusing interaction, update the flow.


# Create PRDs
Source: https://docs.figr.design/getting-started/tutorial/create-prds12

Turn a rough problem into a PRD, flow, states, and a prototype that stay connected.

PM handoff isn't only a doc, and it isn't only a screen. From one rough problem, Figr generates the full chain of artifacts a real handoff needs, and keeps them connected on a single canvas.

<img alt="PRD, user stories, acceptance criteria, test cases, flow, and prototype connected on the canvas" title="PRD chain on the canvas" />

<img alt="PRD, user stories, acceptance criteria, test cases, flow, and prototype connected on the canvas" title="PRD chain on the canvas" />

From a single problem, Figr can produce:

* PRD and requirements
* User stories and acceptance criteria
* Edge case maps and key states
* Test cases
* User flow

High-fidelity prototype and design direction Start with a rough problem statement. It does not need to be polished. Include:

* What you want to improve
* Who it is for
* Which constraints matter
* Which product context Figr should use Then ask for the first artifact:
  * "Turn this rough product problem into a structured PRD. Use the attached product context, existing screens, design system, analytics notes, and previous decisions, then flag missing requirements and edge cases." From there, generate the rest of the chain: user stories, acceptance criteria, test cases, a user flow, key states, and a prototype. The PRD should not sit alone in a doc. It is the base for your UX work, and the chain stays live: if the flow reveals a missing state, update the PRD; if the prototype exposes a confusing interaction, update the flow.


# Map Edge Cases
Source: https://docs.figr.design/getting-started/tutorial/map-edge-cases



<Frame>
  <img alt="Happy path versus a full edge-case map" />

  <img alt="Happy path versus a full edge-case map" />
</Frame>

The happy path is the easy part. Figr maps the states that actually break products:

* **Input and data**: empty, loading, partial data, validation errors
* **Access and session**: permission states, access changes, session expiry
* **System and network**: error states, retries, network failures, offline or slow connections
* **Money and destructive actions**: payment failures, confirmation steps, destructive actions

## Example prompts

* "Map the file upload flow, including file too large, unsupported type, network failure, storage limit, and access revoked."
* "Map the billing upgrade flow, including payment failure, expired card, permission restriction, invoice loading, and downgrade impact."
* "Map the password reset flow, including invalid email, expired link, used link, rate limit, and success."

Edge cases are not nice to have. They are the product.

When Figr maps the flow visually, your team aligns before any screen is polished. Designers see which states to build, engineers see the behavior to expect, and PMs get a sharper spec.


# Map edge cases
Source: https://docs.figr.design/getting-started/tutorial/map-edge-cases1

Map the happy path and everything else: empty, error, permission, and failure states.

<Frame>
  <img alt="Happy path versus a full edge-case map" />
</Frame>

The happy path is the easy part. Figr maps the states that actually break products:

* **Input and data**: empty, loading, partial data, validation errors
* **Access and session**: permission states, access changes, session expiry
* **System and network**: error states, retries, network failures, offline or slow connections
* **Money and destructive actions**: payment failures, confirmation steps, destructive actions

## Example prompts

* "Map the file upload flow, including file too large, unsupported type, network failure, storage limit, and access revoked."
* "Map the billing upgrade flow, including payment failure, expired card, permission restriction, invoice loading, and downgrade impact."
* "Map the password reset flow, including invalid email, expired link, used link, rate limit, and success."

Edge cases are not nice to have. They are the product.

When Figr maps the flow visually, your team aligns before any screen is polished. Designers see which states to build, engineers see the behavior to expect, and PMs get a sharper spec.


# High Fidelity Prototypes
Source: https://docs.figr.design/getting-started/tutorial/prototypes



Prototype turns a clear product direction into a high-fidelity screen in your design system. Because Figr already holds your product context and design language, the output uses your existing patterns, components, spacing, typography, and interaction rules. It is Figma-ready and product-native, not a generic mockup you have to clean up.

<img alt="Generated high-fidelity prototype node on the canvas" title="Generated prototype on the canvas" />

<img alt="Generated high-fidelity prototype node on the canvas" title="Generated prototype on the canvas" />

Real high-fidelity prototypes built with Figr, each in the product's own design system:

<CardGroup>
  <Card title="Linear" href="https://app.figr.design/artifacts/b335e350-401c-4b76-8dc3-fb645a594908">
    A "Since You Left" digest.
  </Card>

  <Card title="X" href="https://app.figr.design/artifacts/ecc60243-b998-4739-875f-ce0c0405517d">
    A feed soft-mute control.
  </Card>

  <Card title="Gmail" href="https://app.figr.design/artifacts/8d169f5c-044e-4a60-929e-9ae0107f3b23">
    An AI draft with tone control.
  </Card>
</CardGroup>

Show it internally, test it externally, hand off to engineering. Days, not weeks. Use Prototype when:

* The product problem is clear
* The key flow is mapped
* Important states are known
* Product context is available
* Design language is added
* Your team needs a visual direction to review Good prototype prompts:
  * "Design a customer success dashboard showing account health, open risks, upcoming renewals, and expansion opportunities. Use the attached design system and product context."
  * "Generate a billing settings page with plan details, invoices, payment method, and team usage. Follow the existing settings layout and component patterns."
  * "Create the empty, loading, and error states for this activity feed using the current product design language."


# High-fidelity prototype
Source: https://docs.figr.design/getting-started/tutorial/prototypes1

Turn a clear direction into a design-system-aware prototype that fits your product.

Prototype turns a clear product direction into a high-fidelity screen in your design system. Because Figr already holds your product context and design language, the output uses your existing patterns, components, spacing, typography, and interaction rules. It is Figma-ready and product-native, not a generic mockup you have to clean up.

<img alt="Generated high-fidelity prototype node on the canvas" title="Generated prototype on the canvas" />

<img alt="Generated high-fidelity prototype node on the canvas" title="Generated prototype on the canvas" />

Real high-fidelity prototypes built with Figr, each in the product's own design system:

<CardGroup>
  <Card title="Linear" href="https://app.figr.design/artifacts/b335e350-401c-4b76-8dc3-fb645a594908">
    A "Since You Left" digest.
  </Card>

  <Card title="X" href="https://app.figr.design/artifacts/ecc60243-b998-4739-875f-ce0c0405517d">
    A feed soft-mute control.
  </Card>

  <Card title="Gmail" href="https://app.figr.design/artifacts/8d169f5c-044e-4a60-929e-9ae0107f3b23">
    An AI draft with tone control.
  </Card>
</CardGroup>

Show it internally, test it externally, hand off to engineering. Days, not weeks. Use Prototype when:

* The product problem is clear
* The key flow is mapped
* Important states are known
* Product context is available
* Design language is added
* Your team needs a visual direction to review Good prototype prompts:
  * "Design a customer success dashboard showing account health, open risks, upcoming renewals, and expansion opportunities. Use the attached design system and product context."
  * "Generate a billing settings page with plan details, invoices, payment method, and team usage. Follow the existing settings layout and component patterns."
  * "Create the empty, loading, and error states for this activity feed using the current product design language."


# UX Review
Source: https://docs.figr.design/getting-started/tutorial/review



You don't need a meeting or a senior reviewer on call. Point Figr at a screen, flow, or prototype and it returns a prioritized list of UX issues, each pinned to the exact spot and paired with a concrete fix.

## Open a review

Ask Figr to review a screen or flow in chat. When it finishes, it drops a visual feedback card into the conversation. Click **View Review** on that card to open the review.

<Frame>
  <img alt="03 04 Review Ux (1)" />
</Frame>

The review opens with every issue pinned to the exact spot on the screen, ranked by priority. Click any pin or list item to read the potential issue and the suggested fix.

<Frame>
  <img alt="Figr Design Review panel with prioritized, pinned UX issues" />
</Frame>

## What Figr flags

* Friction points and places the flow might break
* Unclear hierarchy and confusing copy
* Missing states
* Accessibility risks
* Product logic gaps and patterns that miss user intent

## Example prompts

* "Review this screen for UX friction and prioritize the top issues."
* "Audit this onboarding flow and identify where users may drop off."
* "Review this flow for missing states, unclear hierarchy, and accessibility risks."
* "Compare this screen with the competitor reference and explain the trade-offs."

Review first, redesign later. It is a low-risk entry point for teams skeptical of AI design: you are not asking Figr to build anything, only to review, so you decide what changes.


# Review UX
Source: https://docs.figr.design/getting-started/tutorial/review12

Get a sharp first-pass UX review before you redesign anything.

You don't need a meeting or a senior reviewer on call. Point Figr at a screen, flow, or prototype and it returns a prioritized list of UX issues, each pinned to the exact spot and paired with a concrete fix.

## Open a review

Ask Figr to review a screen or flow in chat. When it finishes, it drops a visual feedback card into the conversation. Click **View Review** on that card to open the review.

<Frame>
  <img alt="03 04 Review Ux (1)" />
</Frame>

The review opens with every issue pinned to the exact spot on the screen, ranked by priority. Click any pin or list item to read the potential issue and the suggested fix.

<Frame>
  <img alt="Figr Design Review panel with prioritized, pinned UX issues" />
</Frame>

## What Figr flags

* Friction points and places the flow might break
* Unclear hierarchy and confusing copy
* Missing states
* Accessibility risks
* Product logic gaps and patterns that miss user intent

## Example prompts

* "Review this screen for UX friction and prioritize the top issues."
* "Audit this onboarding flow and identify where users may drop off."
* "Review this flow for missing states, unclear hierarchy, and accessibility risks."
* "Compare this screen with the competitor reference and explain the trade-offs."

Review first, redesign later. It is a low-risk entry point for teams skeptical of AI design: you are not asking Figr to build anything, only to review, so you decide what changes.


# Understanding Workflow
Source: https://docs.figr.design/getting-started/tutorial/understanding-workflow



Go straight to screens and you get surface-level design. \
Think through the product first and the design has a reason to exist.

A strong Figr workflow usually looks like this:

1. [Set up product context](/product-intelligence/context-pods)
2. [Add product inputs](/input-research/input-guide)
3. [Set up design language](/product-intelligence/design-system)
4. [Ask for a UX review](/getting-started/tutorial/review)
5. [Map user flows and edge cases](getting-started/tutorial/map-edge-cases)
6. [Create product artifacts](/getting-started/tutorial/create-prds)
7. [Generate the prototype](/product-thinking/prototype)
8. [Refine with Select & Edit](getting-started/tutorial/high-fidelity-prototypes)
9. [Export, publish, or hand off](/export/options)

Use this workflow especially when working inside an existing product.


# Workflow order
Source: https://docs.figr.design/getting-started/tutorial/understanding-workflow1

The best way to use Figr is NOT prompt → screen. It is product context → UX reasoning → product artifacts → design → refinement → handoff.

Go straight to screens and you get surface-level design. \
Think through the product first and the design has a reason to exist.

A strong Figr workflow usually looks like this:

1. [Set up product context](/product-intelligence/context-pods)
2. [Add product inputs](input-research/input-guide)
3. [Set up design language](/product-intelligence/design-system)
4. [Ask for a UX review](/product-thinking/review-design)
5. [Map user flows and edge cases](/product-thinking/user-flow)
6. [Create product artifacts](/getting-started/tutorial/create-prds)
7. [Generate the prototype](/getting-started/tutorial/prototypes)
8. [Refine with Select & Edit](/getting-started/tutorial/untitled-page-5)
9. [Export](/designing/export/one-click-figma) , [publish, or handoff](/export/publish)

Use this workflow especially when working inside an existing product.


# Edit Without Regenerating
Source: https://docs.figr.design/getting-started/tutorial/untitled-page-5



Select & Edit changes one part of a screen, a section, component, layout area, or piece of copy, and leaves the rest exactly as it was. Most AI tools regenerate the whole screen for one small change, so fixing the button shifts the layout and improving the copy breaks the spacing. To use it, select the part you want to change on the canvas, then describe the edit. Figr applies it to that selection only. Reach for full regeneration when the direction itself is wrong, and Select & Edit when the direction is right but the details need work.

<iframe title="Select and Edit demo with before and after" />

Good refinement prompts:

* "Make this warning clearer."
* "Use the side panel pattern from this reference."
* "Add the empty state for users with no integrations."
* "Make only this table section more compact."
* "Change the hierarchy in this card without changing the rest of the page."


# Multi-Edit without regenerating
Source: https://docs.figr.design/getting-started/tutorial/untitled-page-55

Use Select & Edit to change one part of a screen without redoing the whole thing.

Select & Edit changes one part of a screen, a section, component, layout area, or piece of copy, and leaves the rest exactly as it was. Most AI tools regenerate the whole screen for one small change, so fixing the button shifts the layout and improving the copy breaks the spacing. To use it, select the part you want to change on the canvas, then describe the edit. Figr applies it to that selection only. Reach for full regeneration when the direction itself is wrong, and Select & Edit when the direction is right but the details need work.

<iframe title="Select and Edit demo with before and after" />

Good refinement prompts:

* "Make this warning clearer."
* "Use the side panel pattern from this reference."
* "Add the empty state for users with no integrations."
* "Make only this table section more compact."
* "Change the hierarchy in this card without changing the rest of the page."


# What Figr Creates
Source: https://docs.figr.design/getting-started/tutorial/what-figr-creates



Because Figr understands your product context, it creates the artifacts product teams need before, during, and after design, and keeps them connected on one infinite canvas.

<img alt="PRD, user stories, acceptance criteria, test cases, user flow, and prototype connected on the canvas" title="Artifacts connected on the canvas" />

<img alt="PRD, user stories, acceptance criteria, test cases, user flow, and prototype connected on the canvas" title="Artifacts connected on the canvas" />

You can use Figr to create:

* UX reviews
* PRDs
* Product documentation
* User stories
* Acceptance criteria
* Test cases
* User flows
* Edge case maps
* State checklists
* High-fidelity prototypes
* Figma-ready design directions

<Card title="See real product UX problems solved with Figr" href="https://figr.design/gallery">
  Browse the gallery of real-world examples.
</Card>


# What Figr creates
Source: https://docs.figr.design/getting-started/tutorial/what-figr-creates12

Figr creates more than screens. Generate UX reviews, PRDs, flows, edge cases, and prototypes, all connected.

Because Figr understands your product context, it creates the artifacts product teams need before, during, and after design, and keeps them connected on one infinite canvas.

<img alt="PRD, user stories, acceptance criteria, test cases, user flow, and prototype connected on the canvas" title="Artifacts connected on the canvas" />

<img alt="PRD, user stories, acceptance criteria, test cases, user flow, and prototype connected on the canvas" title="Artifacts connected on the canvas" />

You can use Figr to create:

* UX reviews
* PRDs
* Product documentation
* User stories
* Acceptance criteria
* Test cases
* User flows
* Edge case maps
* State checklists
* High-fidelity prototypes
* Figma-ready design directions

<Card title="See real product UX problems solved with Figr" href="https://figr.design/gallery">
  Browse the gallery of real-world examples.
</Card>


# Difference
Source: https://docs.figr.design/getting-started/welcome/difference



<Info>
  Figr doesn't just generate screens. It reasons through your product's UX, then designs interfaces that match what you have built.
</Info>

Most AI design tools work like autocomplete: prompt in, screen out. Figr works like a senior designer who already knows your flows, constraints, and design system.

## Product-aware designing

Other tools start from a blank prompt every time, so you re-explain everything and hope the model gets it. Give Figr your real inputs and it designs from them:

* Product specs, so Figr knows your user personas
* A screen share of your app, so Figr learns your navigation patterns
* Your design tokens, so Figr uses your real color palette
* Your analytics, so Figr knows which flows convert

## Memory that compounds

Traditional AI forgets between sessions. Figr keeps your context permanently and gets sharper with every project.

<AccordionGroup>
  <Accordion title="Design system and components">
    Your color tokens, typography scales, spacing, and component library. Figr uses your actual design system in every new design.
  </Accordion>

  <Accordion title="Product context">
    User personas, business goals, technical constraints, and roadmap. Figr designs for your situation, not generic best practices.
  </Accordion>

  <Accordion title="User behavior data">
    Analytics, heatmaps, and research findings. Figr weighs decisions against how people actually use your product.
  </Accordion>

  <Accordion title="Past design decisions">
    Which patterns were chosen, what was tested, and what worked. Figr builds on what already succeeded instead of repeating experiments.
  </Accordion>
</AccordionGroup>

## Production-ready output

<Tabs>
  <Tab title="Component-mapped">
    Figr exports your actual React components, not generic divs, so engineers recognize the code immediately.

    ```jsx theme={null}
        <Button variant="primary" size="large">
          Get Started
        </Button>
    ```

    Not random CSS:

    ```css theme={null}
        .button-1234 { background: #0066cc; padding: 12px 24px; }
    ```
  </Tab>

  <Tab title="Token-mapped">
    Uses your design tokens:

    ```jsx theme={null}
        color: $color-primary-600
        spacing: $spacing-lg
        typography: $text-heading-sm
    ```

    Instead of hardcoded values:

    ```css theme={null}
        color: #1a73e8; margin: 24px; font-size: 18px;
    ```
  </Tab>

  <Tab title="Accessible by default">
    Every design ships with semantic HTML, ARIA labels, and WCAG-compliant patterns, learned from your existing accessible components.
  </Tab>
</Tabs>

## How Figr thinks

Traditional AI takes "generate a login form" at face value. Figr reads it as "a login form for a B2B SaaS product with enterprise SSO, matching your dashboard's navigation, your checkout flow's error handling, and the progressive disclosure from your research."

<Steps>
  <Step title="Understands your product">
    Analyzes your product, design system, research, and business context.

    <Frame>
      <img alt="Figr analyzing the team's product, design system, and research" />

      <img alt="Figr analyzing the team's product, design system, and research" />
    </Frame>
  </Step>

  <Step title="Applies your context">
    Ties every design decision to your constraints, users, and goals.

    <Frame>
      <img alt="Figr mapping design decisions to product constraints and goals" />

      <img alt="Figr mapping design decisions to product constraints and goals" />
    </Frame>
  </Step>

  <Step title="Produces production-ready designs">
    Outputs your components and tokens, so handoff is seamless.

    <Frame>
      <img alt="A production-ready screen using the team's components and design tokens" />

      <img alt="A production-ready screen using the team's components and design tokens" />
    </Frame>
  </Step>

  <Step title="Learns and improves">
    Remembers what works and applies it to future designs.

    <Frame>
      <img alt="Image" />
    </Frame>
  </Step>
</Steps>

## What a screen share teaches Figr

Show Figr your product once and it learns your information architecture, interaction patterns, error states, and flows. No PRD required. It picks up how your navigation actually works, where users get stuck, the patterns you have already set, and the edge cases hiding in your flows.

### What product managers want

| What you need             | Figr                                                 | Other AI tools                          |
| ------------------------- | ---------------------------------------------------- | --------------------------------------- |
| Catch edge cases early    | Flags gaps before the design cycle                   | Build only what you explicitly ask for  |
| Think through UX first    | UX review and pattern matching across 200,000+ flows | Generic suggestions, no product context |
| Expert feedback on demand | Built-in UX audit and accessibility checks           | Not available                           |
| Remember your product     | Persistent memory, so you never explain twice        | Start fresh every conversation          |

### What designers get

| What Figr does                                      | Your benefit                  |
| --------------------------------------------------- | ----------------------------- |
| UX review, edge cases, and information architecture | Fewer "we missed this" cycles |
| A high-fidelity starting point inside Figma         | Refine from 95%, not 0%       |
| Design-system compliance                            | Nothing to fix afterward      |

<Card title="See the difference" href="getting-started/welcome/product-aware-designing">
  Try product-aware designing in your first session.
</Card>


# What Makes Figr Different
Source: https://docs.figr.design/getting-started/welcome/differencee

How Figr's product context and memory set it apart from prompt-based AI design tools.

<Info>
  Figr doesn't just generate screens. It reasons through your product's UX, then designs interfaces that match what you have built.
</Info>

Most AI design tools work like autocomplete: prompt in, screen out. Figr works like a senior designer who already knows your flows, constraints, and design system.

## Product-aware designing

Other tools start from a blank prompt every time, so you re-explain everything and hope the model gets it. Give Figr your real inputs and it designs from them:

* Product specs, so Figr knows your user personas
* A screen share of your app, so Figr learns your navigation patterns
* Your design tokens, so Figr uses your real color palette
* Your analytics, so Figr knows which flows convert

## Memory that compounds

Traditional AI forgets between sessions. Figr keeps your context permanently and gets sharper with every project.

<AccordionGroup>
  <Accordion title="Design system and components">
    Your color tokens, typography scales, spacing, and component library. Figr uses your actual design system in every new design.
  </Accordion>

  <Accordion title="Product context">
    User personas, business goals, technical constraints, and roadmap. Figr designs for your situation, not generic best practices.
  </Accordion>

  <Accordion title="User behavior data">
    Analytics, heatmaps, and research findings. Figr weighs decisions against how people actually use your product.
  </Accordion>

  <Accordion title="Past design decisions">
    Which patterns were chosen, what was tested, and what worked. Figr builds on what already succeeded instead of repeating experiments.
  </Accordion>
</AccordionGroup>

## Production-ready output

<Tabs>
  <Tab title="Component-mapped">
    Figr exports your actual React components, not generic divs, so engineers recognize the code immediately.

    ```jsx theme={null}
        <Button variant="primary" size="large">
          Get Started
        </Button>
    ```

    Not random CSS:

    ```css theme={null}
        .button-1234 { background: #0066cc; padding: 12px 24px; }
    ```
  </Tab>

  <Tab title="Token-mapped">
    Uses your design tokens:

    ```jsx theme={null}
        color: $color-primary-600
        spacing: $spacing-lg
        typography: $text-heading-sm
    ```

    Instead of hardcoded values:

    ```css theme={null}
        color: #1a73e8; margin: 24px; font-size: 18px;
    ```
  </Tab>

  <Tab title="Accessible by default">
    Every design ships with semantic HTML, ARIA labels, and WCAG-compliant patterns, learned from your existing accessible components.
  </Tab>
</Tabs>

## How Figr thinks

Traditional AI takes "generate a login form" at face value. Figr reads it as "a login form for a B2B SaaS product with enterprise SSO, matching your dashboard's navigation, your checkout flow's error handling, and the progressive disclosure from your research."

<Steps>
  <Step title="Understands your product">
    Analyzes your product, design system, research, and business context.

    <Frame>
      <img alt="Figr analyzing the team's product, design system, and research" />

      <img alt="Figr analyzing the team's product, design system, and research" />
    </Frame>
  </Step>

  <Step title="Applies your context">
    Ties every design decision to your constraints, users, and goals.

    <Frame>
      <img alt="Figr mapping design decisions to product constraints and goals" />

      <img alt="Figr mapping design decisions to product constraints and goals" />
    </Frame>
  </Step>

  <Step title="Produces production-ready designs">
    Outputs your components and tokens, so handoff is seamless.

    <Frame>
      <img alt="A production-ready screen using the team's components and design tokens" />

      <img alt="A production-ready screen using the team's components and design tokens" />
    </Frame>
  </Step>

  <Step title="Learns and improves">
    Remembers what works and applies it to future designs.

    <Frame>
      <img alt="Image" />
    </Frame>
  </Step>
</Steps>

## What a screen share teaches Figr

Show Figr your product once and it learns your information architecture, interaction patterns, error states, and flows. No PRD required. It picks up how your navigation actually works, where users get stuck, the patterns you have already set, and the edge cases hiding in your flows.

### What product managers want

| What you need             | Figr                                                 | Other AI tools                          |
| ------------------------- | ---------------------------------------------------- | --------------------------------------- |
| Catch edge cases early    | Flags gaps before the design cycle                   | Build only what you explicitly ask for  |
| Think through UX first    | UX review and pattern matching across 200,000+ flows | Generic suggestions, no product context |
| Expert feedback on demand | Built-in UX audit and accessibility checks           | Not available                           |
| Remember your product     | Persistent memory, so you never explain twice        | Start fresh every conversation          |

### What designers get

| What Figr does                                      | Your benefit                  |
| --------------------------------------------------- | ----------------------------- |
| UX review, edge cases, and information architecture | Fewer "we missed this" cycles |
| A high-fidelity starting point inside Figma         | Refine from 95%, not 0%       |
| Design-system compliance                            | Nothing to fix afterward      |

<Card title="See the difference" href="/getting-started/tutorial/first-design-5-minutes">
  Try product-aware designing in your first session.
</Card>


# Product Aware Designing
Source: https://docs.figr.design/getting-started/welcome/product-aware-designing



<Frame>
  <img alt="Figr generating designs that match an existing product" />

  <img alt="Figr generating designs that match an existing product" />
</Frame>

Product-aware means Figr designs around your specific product, not a generic idea of what an app should look like. Three parts make that possible, and they work together:

<CardGroup>
  <Card title="Context Pod" href="/product-intelligence/context-pods">
    Your product knowledge graph: recordings, docs, links, specs, and design system.
  </Card>

  <Card title="Design Language" href="/product-intelligence/design-system">
    Components, patterns, typography, spacing, and your product's visual rules.
  </Card>

  <Card title="Infinite Canvas" href="/canvas/canvas-overview">
    Screens, flows, reviews, prototypes, and iterations in one workspace.
  </Card>
</CardGroup>

## Why the combination matters

A Context Pod tells Figr what your product is and what you are building. Your Design Language tells it how the product looks and behaves. The Canvas is where you brainstorm, review and refine. The result is design grounded in your product, not a generic guess.

<Frame>
  <img alt="Figr learns your product before generating UI" />

  <img alt="Figr learns your product before generating UI" />
</Frame>

<Frame>
  <img alt="Output respects your design system" />

  <img alt="Output respects your design system" />
</Frame>

## Next

<CardGroup>
  <Card title="Set up a Context Pod" href="/product-intelligence/context-pods">
    The most important setup step, reused across every project.
  </Card>

  <Card title="See the workflow" href="/getting-started/tutorial/understanding-workflow">
    How context becomes flows, artifacts, and a finished design.
  </Card>
</CardGroup>


# Product-aware designing
Source: https://docs.figr.design/getting-started/welcome/product-aware-designingg

Context Pods, Design Language, and the Canvas combine so Figr designs from your real product context.

<Frame>
  <img alt="Figr generating designs that match an existing product" />

  <img alt="Figr generating designs that match an existing product" />
</Frame>

Product-aware means Figr designs around your specific product, not a generic idea of what an app should look like. Three parts make that possible, and they work together:

<CardGroup>
  <Card title="Context Pod" href="/product-intelligence/context-pods">
    Your product knowledge graph: recordings, docs, links, specs, and design system.
  </Card>

  <Card title="Design Language" href="/product-intelligence/design-system">
    Components, patterns, typography, spacing, and your product's visual rules.
  </Card>

  <Card title="Infinite Canvas" href="/canvas/canvas-overview">
    Screens, flows, reviews, prototypes, and iterations in one workspace.
  </Card>
</CardGroup>

## Why the combination matters

A Context Pod tells Figr what your product is and what you are building. Your Design Language tells it how the product looks and behaves. The Canvas is where you brainstorm, review and refine. The result is design grounded in your product, not a generic guess.

<Frame>
  <img alt="Figr learns your product before generating UI" />

  <img alt="Figr learns your product before generating UI" />
</Frame>

<Frame>
  <img alt="Output respects your design system" />

  <img alt="Output respects your design system" />
</Frame>

## Next

<CardGroup>
  <Card title="Set up a Context Pod" href="/product-intelligence/context-pods">
    The most important setup step, reused across every project.
  </Card>

  <Card title="See the workflow" href="/getting-started/tutorial/understanding-workflow">
    How context becomes flows, artifacts, and a finished design.
  </Card>
</CardGroup>


# What is Figr
Source: https://docs.figr.design/getting-started/welcome/what-is-figrr

Figr is an AI product design agent that turns your real product context into design-system-ready UI.

<iframe title="Complete product walkthrough" />

Figr is an AI product design agent. It reads the context that already defines your product, your screens, recordings, docs, links, and design system, and uses it to design new flows and screens that fit what you have already built. Most AI tools jump straight from a prompt to a screen. Figr works the way a senior product team does. It starts from context, reasons through the UX, produces the product artifacts behind a good design, and only then generates a high-fidelity, Figma-ready result.

<Note>
  Figr is built for working inside existing products, not only for zero-to-one mockups. The more product context you give it, the more your output looks like your product instead of a generic template.
</Note>

## What you can do with Figr

<CardGroup>
  <Card title="Add product context" icon="layer-group" href="/getting-started/setup/add-product-context">
    Bring in screens, recordings, docs, and links so Figr understands your product.
  </Card>

  <Card title="Design product-aware UI" icon="pen-ruler" href="/getting-started/welcome/product-aware-designing">
    Generate flows and screens grounded in your design system and real context.
  </Card>

  <Card title="Work on an infinite canvas" icon="grip" href="/canvas/canvas-overview">
    Keep inputs, reviews, flows, PRDs, and prototypes together in one space.
  </Card>

  <Card title="Hand off to Figma and code" icon="arrow-up-right-from-square" href="/export/figma">
    Export to Figma (auto layout, tokens, components), publish and get code
  </Card>
</CardGroup>

## Where to start

<CardGroup>
  <Card title="Quickstart" icon="rocket" href="/getting-started/setup/creating-your-account">
    The fastest path from signup to your first generated prototype.
  </Card>

  <Card title="Understand the workflow" icon="diagram-project" href="/tutorial/understanding-workflow">
    See the full path from context to a refined, exported design.
  </Card>
</CardGroup>


# Who Should Use Figr
Source: https://docs.figr.design/getting-started/welcome/who-should-use-figr



<Frame>
  <img alt="Who Should Use Figr Personas 1" title="Who Should Use Figr Personas 1" />
</Frame>

Figr is built for the people who shape a product and need design that reflects it. It is product-first, so you do not need to be a designer to get a usable, on-brand result.

<Tabs>
  <Tab title="Product managers">
    Move from product thinking to design direction without waiting on a designer.

    Use Figr to:

    * Turn rough ideas and PRDs into user flows and screens
    * Audit flows for missing states and edge cases
    * Produce handoff that is part PRD, part flow, part prototype
  </Tab>

  <Tab title="Designers">
    Speed up exploration, review, and refinement without giving up judgment.

    Use Figr to:

    * Explore multiple directions quickly
    * Check whether a design follows your existing system
    * Generate Figma ready design exports with auto-layouts, components and tokens
  </Tab>

  <Tab title="Founders and small teams">
    Design product-aware screens without a dedicated design team, using the context and product you already have.

    Use Figr to:

    * Turn product ideas into early flows and concept screens
    * Build investor or customer demos
    * Test whether an idea works before committing engineering time
  </Tab>
</Tabs>

<Note>
  Engineers get a context-rich handoff: \
  a Figma file, a shared link, or code, with the product reasoning behind it.
</Note>

## Where to go next

<CardGroup>
  <Card title="Quickstart" icon="rocket" href="/getting-started/setup/creating-your-account">
    Generate your first prototype in a few minutes.
  </Card>

  <Card title="Create PRDs" icon="file-lines" href="/getting-started/tutorial/create-prds">
    Go from a product problem to a structured PRD and prototype.
  </Card>
</CardGroup>


# Who Should Use Figr
Source: https://docs.figr.design/getting-started/welcome/who-should-use-figr1

Discover if Figr is right for your team and use case.

<Frame>
  <img alt="Who Should Use Figr Personas 1" title="Who Should Use Figr Personas 1" />
</Frame>

Figr is built for the people who shape a product and need design that reflects it. It is product-first, so you do not need to be a designer to get a usable, on-brand result.

<Tabs>
  <Tab title="Product managers">
    Move from product thinking to design direction without waiting on a designer.

    Use Figr to:

    * Turn rough ideas and PRDs into user flows and screens
    * Audit flows for missing states and edge cases
    * Produce handoff that is part PRD, part flow, part prototype
  </Tab>

  <Tab title="Designers">
    Speed up exploration, review, and refinement without giving up judgment.

    Use Figr to:

    * Explore multiple directions quickly
    * Check whether a design follows your existing system
    * Generate Figma ready design exports with auto-layouts, components and tokens
  </Tab>

  <Tab title="Founders and small teams">
    Design product-aware screens without a dedicated design team, using the context and product you already have.

    Use Figr to:

    * Turn product ideas into early flows and concept screens
    * Build investor or customer demos
    * Test whether an idea works before committing engineering time
  </Tab>
</Tabs>

<Note>
  Engineers get a context-rich handoff: \
  a Figma file, a shared link, or code, with the product reasoning behind it.
</Note>

## Where to go next

<CardGroup>
  <Card title="Quickstart" icon="rocket" href="/getting-started/setup/creating-your-account">
    Generate your first prototype in a few minutes.
  </Card>

  <Card title="Create PRDs" icon="file-lines" href="/getting-started/tutorial/create-prds">
    Go from a product problem to a structured PRD and prototype.
  </Card>
</CardGroup>


# What Is Figr
Source: https://docs.figr.design/index



<iframe title="Complete product walkthrough" />

Figr is an AI product design agent. It reads the context that already defines your product, your screens, recordings, docs, links, and design system, and uses it to design new flows and screens that fit what you have already built. Most AI tools jump straight from a prompt to a screen. Figr works the way a senior product team does. It starts from context, reasons through the UX, produces the product artifacts behind a good design, and only then generates a high-fidelity, Figma-ready result.

<Note>
  Figr is built for working inside existing products, not only for zero-to-one mockups. The more product context you give it, the more your output looks like your product instead of a generic template.
</Note>

## What you can do with Figr

<CardGroup>
  <Card title="Add product context" icon="layer-group" href="/getting-started/setup/add-product-context">
    Bring in screens, recordings, docs, and links so Figr understands your product.
  </Card>

  <Card title="Design product-aware UI" icon="pen-ruler" href="/getting-started/welcome/product-aware-designing">
    Generate flows and screens grounded in your design system and real context.
  </Card>

  <Card title="Work on an infinite canvas" icon="grip" href="/canvas/canvas-overview">
    Keep inputs, reviews, flows, PRDs, and prototypes together in one space.
  </Card>

  <Card title="Hand off to Figma and code" icon="arrow-up-right-from-square" href="/export/figma">
    Export to Figma (auto layout, tokens, components), publish and get code
  </Card>
</CardGroup>

## Where to start

<CardGroup>
  <Card title="Quickstart" icon="rocket" href="/getting-started/setup/creating-your-account">
    The fastest path from signup to your first generated prototype.
  </Card>

  <Card title="Understand the workflow" icon="diagram-project" href="/getting-started/tutorial/understanding-workflow">
    See the full path from context to a refined, exported design.
  </Card>
</CardGroup>


# Chrome Extension
Source: https://docs.figr.design/input-research/chrome-extension

Parse live web apps to give Figr deep understanding of your product's structure, components, and patterns.

## [​](#getting-started)Getting Started

### Install the Extension

1. Visit the [Chrome Web Store](https://chromewebstore.google.com/detail/figr-capture/bejnddahceggaeogmedenhaccoiikjmj) and search "Figr AI"
2. Click **Add to Chrome**
3. Pin the extension to your toolbar for quick access

## [​](#capture-modes)Capture Modes

### Entire Page Capture

<iframe title="YouTube video player" />

1. Navigate to any page in your product
2. Click the Figr extension icon
3. Select "Capture This Page"
4. Copy the captures
5. Paste the capture directly into Figr to start using

<Tip>
  **Capture works on staging, production, or localhost. Use whatever environment has the most realistic data.**
</Tip>

### Capture selections

<iframe title="YouTube video player" />

1. Navigate to any page in your product
2. Click the Figr extension icon
3. Select "Make selection"
4. Select the area you want to capture
5. Capture as many areas as required

### Capture Across Multiple Websites

Build context (sort of a moodboard) from multiple sources in a single session. Useful for competitor analysis, gathering inspiration, or combining patterns from best-in-class products. Multi-site workflow:

1. Open your Figr project
2. Navigate to first website → Capture
3. Open new tab, navigate to second website → Capture
4. Repeat for additional sites
5. All captures feed into the same project context

***

## Using Captures in Figr

Once captured, your product context flows into every conversation.

<AccordionGroup>
  <Accordion title="Reference in Prompts">
    Example prompts that leverage captures:

    * "Design a settings page that matches the navigation pattern from my dashboard capture"
    * "Create a form using the same validation approach I showed you in the checkout flow"
    * "Build a table component following the patterns from my existing data views"
  </Accordion>

  <Accordion title="Build on Existing">
    Figr uses captures to extend your product, not create something generic.

    | **Design prompt**           | **Without capture**           | **With capture**                                                                                                          |
    | --------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
    | "Add a notification center" | Generic notification dropdown | Notification center that matches your nav style, uses your button variants, follows your spacing system, and fits your IA |
  </Accordion>

  <Accordion title="Market & competitive research">
    | **Competitor benchmarking**                                                                                                  | **Pattern library building**                                                                                                    | **Feature research**                                                                                                              |
    | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
    | Capture checkout flows from Stripe, Shopify, and Square. Ask Figr to design yours incorporating the best patterns from each. | Capture dashboard designs from Linear, Notion, and Figma. Build a reference set Figr can draw from for your own dashboard work. | Capture how 5 different products handle user onboarding. Ask Figr to analyze patterns and recommend an approach for your product. |
  </Accordion>
</AccordionGroup>

***

## Why Chrome Extension Works

Most design AI asks you to describe your product. **Figr sees your actual product.**

The Chrome extension captures the real HTML structure, component hierarchy, and visual layout of any web app. Not screenshots. Not descriptions. The actual thing.

| **Traditional Input**                       | **Figr Chrome Extension**                  |
| ------------------------------------------- | ------------------------------------------ |
| Screenshot uploads lose interaction context | Captures live HTML structure and hierarchy |
| Text descriptions miss visual patterns      | Understands component relationships        |
| Manual specification takes hours            | Reads styling patterns and tokens          |
| Context gets lost in translation            | Sees what you actually built               |

***


# Figma Input
Source: https://docs.figr.design/input-research/figma-input

Connect Figma to Figr with the Figma Sync plugin: pull real frames, tokens, and components into your prompts, and push finished designs back.

Figr's Figma integration runs through one community plugin, Figr AI Figma Sync. Install it once and it works both ways:

* **Figma to Figr**: select frames in Figma and reference them live in Figr's chat.
* **Figr to Figma**: push a Figr prototype back into Figma as editable frames.

This replaces the old "paste a frame link" flow. Selection now happens inside Figma, and Figr reads it automatically.

## First-time setup

You do this once per account.

<Steps>
  <Step title="Open Connectors in Figr">
    In the chat composer, open the Connectors menu and select **Figma**. This opens the Figr AI Figma Sync page on the Figma Community.
  </Step>

  <Step title="Load the plugin">
    Click **Open in** and load the plugin into any Figma file, then run it. A panel appears with a **Connect to Figr** button.
  </Step>

  <Step title="Authorize">
    Click **Connect to Figr**. A browser tab opens for a quick authorization. When you see "Plugin connected successfully," return to Figma.
  </Step>
</Steps>

Once connected, the plugin shows a persistent status: Connected, Online, your email, and a Logout option.

<Frame>
  <img alt="Figr AI Figma Sync plugin panel showing a connected status" />

  <img alt="Figr AI Figma Sync plugin panel showing a connected status" />
</Frame>

## What Figr can access

Figr can read the frames, tokens, and components you select, process that selection as design input, and paste frames you export from Figr back into Figma.

Figr cannot edit or delete your existing Figma work, and cannot access files you have not opened the plugin in. You control the connection from the plugin and can log out anytime.

## Bring designs in

<Steps>
  <Step title="Select frames in Figma">
    Click one or more frames on the canvas. The plugin updates live to show how many are tracked, for example "12 Selected for sync."
  </Step>

  <Step title="Toggle the Figma connector in Figr">
    In the composer, turn the Figma connector on. It references whatever you currently have selected in Figma, with no copying or links.
  </Step>

  <Step title="Write your prompt and submit">
    Figr imports the layout, captures a screenshot of each frame, and reads the real design values behind them.
  </Step>
</Steps>

The selection is live: change what is selected in Figma and the count updates instantly. Select one frame to refine a single screen, or a dozen to give Figr a full surface to work from.

<Frame>
  <img alt="Figma connector toggled on in the Figr prompt composer" />

  <img alt="Figma connector toggled on in the Figr prompt composer" />
</Frame>

When you pull frames in, Figr reads more than the picture:

* **Frames and layout**: structure, hierarchy, and arrangement
* **Tokens and variables**: exact colors, spacing, and type values
* **Components and variants**: your real building blocks, not lookalikes

## Push designs back

<Steps>
  <Step title="Export from Figr">
    On a Figr prototype, open the export dropdown and choose **Export to Figma**. This copies the frame data to your clipboard.
  </Step>

  <Step title="Run the plugin in Figma">
    Open the Figr AI Figma Sync plugin in the file you want the frame in.
  </Step>

  <Step title="Paste">
    The frame materializes on your Figma canvas as editable layers, ready to refine.
  </Step>
</Steps>

<Warning>
  The export direction has two limits today. Each export carries only the one frame you triggered it from, so move multiple frames one at a time. Pasted frames arrive as plain groups, so reapply Figma Auto Layout manually. Both are in active development; the handoff is one-shot in each direction, not a live round-trip.
</Warning>

## Why Figma input beats a screenshot

When Figr analyzes an image, it estimates colors, guesses spacing, and approximates radius. Figma frames give it the real values instead.

| Screenshot input              | Figma frame input          |
| ----------------------------- | -------------------------- |
| Colors estimated from pixels  | Exact values, like #6366F1 |
| Spacing approximated visually | Precise spacing, like 24px |
| Border radius guessed         | Actual radius, like 8px    |
| Typography inferred           | Real typography settings   |
| Font weights assumed          | Correct weights and sizes  |

## When to use which

| Use Figma frames                         | A screenshot is fine                            |
| ---------------------------------------- | ----------------------------------------------- |
| Your own product designs                 | Competitor analysis, since you lack their Figma |
| Design system components                 | Quick inspiration                               |
| Screens you want to match exactly        | External reference designs                      |
| Building on or maintaining existing work | Live product captures                           |

## Best practices

<Tip>
  * Select the relevant frames, not the whole file. A tighter selection is a clearer signal.
  * Always pair frames with a prompt. The selection tells Figr what to look at; the prompt tells it what to do.
  * Set your design language with high-value frames: a style guide or tokens page, component library frames, pattern docs, and recent approved designs.
</Tip>

Example prompts:

```text theme={null}
Match this dashboard style but create a settings page with these sections.
```

```text theme={null}
Use the card component from this frame for a feature announcement layout.
```

```text theme={null}
Keep this navigation pattern but redesign the content area for data viz.
```

## Manage your connection

Your status lives in the plugin window in Figma. Click **Logout** to revoke access immediately. To switch accounts, log out and reconnect with a different account. To reconnect, run the plugin and click **Connect to Figr** again anytime.

## Troubleshooting

| Issue                                    | Fix                                                                    |
| ---------------------------------------- | ---------------------------------------------------------------------- |
| Plugin shows "0 Selected for sync"       | Click directly on a frame in Figma; the count updates live             |
| Figr connector will not reference frames | Confirm the plugin shows Connected, then re-toggle the Figma connector |
| Exported frame has no Auto Layout        | Expected; reapply Auto Layout in Figma                                 |
| Only one frame came through on export    | Expected; export each frame separately                                 |

## Related

<CardGroup>
  <Card title="Context Pods" href="/product-intelligence/context-pods">
    Attach synced frames so Figr reuses them across the project.
  </Card>

  <Card title="Export to Figma" href="/export/figma">
    More on sending finished designs back to your Figma workflow.
  </Card>

  <Card title="Item Actions" href="/canvas/action-items">
    Where the export dropdown lives on a selected prototype.
  </Card>
</CardGroup>


# Files and Research
Source: https://docs.figr.design/input-research/files-research

Use context that lives outside the product screen: PRDs, CSVs, research, and the web.

Use files and research when your context lives outside the product screen. You can upload files such as screenshots, PDFs, PRDs, product specs, research docs, CSVs, analytics exports, customer feedback, and design references. Good file examples:

* Upload a PRD and ask Figr to find missing requirements
* Upload an analytics CSV and ask Figr to identify UX opportunities
* Upload screenshots and ask Figr to audit the current flow
* Upload research notes and ask Figr to suggest product directions

## Research before designing

You can also ask Figr to use research and web context when you want to study patterns before designing. Use research to compare product patterns, study competitors, understand common UX approaches, ground a design in proven patterns, and explore options before generating screens. Good research prompts:

```text theme={null}
Research how top B2B SaaS tools handle team permissions, then suggest a better IA for our permissions page.
```

```text theme={null}
Compare onboarding flows from similar products and suggest what we should learn before redesigning ours.
```

```text theme={null}
Find common patterns for analytics dashboards and turn them into a design direction for our product.
```

<Frame>
  <img alt="Research output shown next to a generated design direction" />

  <img alt="Research output shown next to a generated design direction" />
</Frame>


# Input Guide
Source: https://docs.figr.design/input-research/input-guide

Choose the right input based on what you want Figr to understand.

Pick inputs that match what you want Figr to understand. The closer the match, the less generic the output.

| Goal                            | Use these inputs                                                | Best for                                                       |
| ------------------------------- | --------------------------------------------------------------- | -------------------------------------------------------------- |
| Understand an existing product  | Screen recordings, Chrome extension, screenshots, Figma frames  | Redesigns, UX audits, existing product improvements            |
| Follow your design system       | Figma input, design files, component examples, tokens           | Matching visual language, creating Figma-ready outputs         |
| Understand requirements         | PRDs, docs, PDFs, pasted text, product briefs                   | PRD-to-design workflows, feature planning, requirements review |
| Reason from user behavior       | Analytics, CSVs, support tickets, research notes, user feedback | Funnel improvement, activation flows, product discovery        |
| Study a live page or competitor | Chrome extension, URL input, website capture, screenshots       | Landing page analysis, competitor research, web app audits     |

## Pick an input

<CardGroup>
  <Card title="Screen recordings" href="/input-research/screen-recording">
    Teach Figr a flow that one screenshot cannot explain.
  </Card>

  <Card title="Chrome extension" href="/input-research/chrome-extension">
    Capture live product pages with structure, not just a flat image.
  </Card>

  <Card title="Figma input" href="/input-research/figma-input">
    Bring in components, layout, and variants from existing design work.
  </Card>

  <Card title="Files and Research" href="/input-research/files-research">
    Use PRDs, CSVs, research, and web context that live outside the screen.
  </Card>
</CardGroup>


# Screen Recordings
Source: https://docs.figr.design/input-research/screen-recording

One of the best ways to teach Figr how your product actually works.

<iframe title="Screen recording walkthrough" />

Screen recordings teach Figr how your product actually works. Reach for one when a single screenshot cannot capture the experience: user flows, click paths, navigation, transitions, states, behavior, and your spoken context.

<Tip>
  **Best practices**

  * Record one flow at a time and keep it focused
  * Narrate what you are doing and why
  * Use realistic data and show the states that matter
  * Skip long, unrelated sessions
</Tip>

## What to record

* "How a user upgrades their plan."
* "The current onboarding flow."
* "Where users get stuck in setup."
* "How admins manage permissions."

<Steps>
  <Step title="Record one flow">
    Capture a single flow end to end, narrating the user, the goal, and where the friction is.
  </Step>

  <Step title="Upload it to Figr">
    Add the recording to your prompt, or attach it to a Context Pod so Figr can reuse it later.
  </Step>

  <Step title="Ask Figr to reason first">
    Have Figr understand the flow before it designs anything.

    ```text theme={null}
        Use this recording to understand the current onboarding flow. Identify UX friction, missing states, and unclear moments. Then suggest a better flow before designing screens.
    ```
  </Step>
</Steps>


# Figma Input
Source: https://docs.figr.design/inputs/figma-input

Connect Figma and paste frame links directly into Figr. Get exact design values instead of assumptions from screenshots.

## Connecting Figma

<iframe title="YouTube video player" />

### First-Time Setup

1. Click the Figma icon in the query box, or paste a Figma link
2. The **Connect to Figma** modal appears
3. Click **Connect to Figma** (purple button)
4. You'll be redirected to Figma's authentication page
5. Authorize Figr to access your files
6. Return to Figr with your account connected

### What Figr Accesses

```
Permissions:
✅ Read-only access to your files
✅ Process frames as input only
❌ Cannot edit your Figma files
❌ Cannot delete anything
❌ Cannot access files you don't share
```

<Tip>
  Figr only accesses connection data with your permission. You can revoke access anytime.
</Tip>

## [​](#using-figma-frames)Using Figma Frames

### Paste a Frame Link

1. Open your Figma file
2. Select the frame you want to share
3. Copy the link (right-click → Copy link, or ⌘L)
4. Paste directly into the Figr query box (⌘V)
5. Figr automatically detects and attaches the frame

## Why Figma Input Matters

Screenshots lose information. When Figr analyzes an image, it estimates colors, guesses spacing, approximates radius values. Close, but not exact. Figma frames give Figr the real data.

Exact hex values. Precise spacing in pixels. Actual border radius. Real typography settings. No guessing, no approximation. Figr reads your design file directly and uses the true values.

| **Screenshot input**               | **Figma frame input**                            |
| ---------------------------------- | ------------------------------------------------ |
| Colors estimated from image pixels | Exact color values (`#6366F1`, not "purple-ish") |
| Spacing approximated visually      | Precise spacing (`24px`, not "about 24")         |
| Border radius guessed              | Actual border radius (`8px`)                     |
| Typography inferred                | Real typography settings                         |
| Font weights assumed               | Correct font weights and sizes                   |

***

## Figma vs Screenshots

| **When to use Figma frames**      | **When screenshots are fine**                    |
| --------------------------------- | ------------------------------------------------ |
| Your own product designs          | Competitor analysis (you don't have their Figma) |
| Design system components          | Quick inspiration                                |
| Screens you want to match exactly | External reference designs                       |
| Building on existing work         | Live product captures                            |
| Maintaining design consistency    |                                                  |

***

## Managing Your Connection

### Check Connection Status

Your Figma connection status shows the linked email and an option to unlink.

```
Figma account connected
your-email@company.com     [Unlink]
```

### Unlink Figma

<iframe title="YouTube video player" />

To disconnect your Figma account:

1. Click **Unlink** next to your connected email
2. Confirm the disconnection
3. Your Figma access is revoked immediately

<Tip>
  You can reconnect anytime by pasting a Figma link or clicking the Figma icon.
</Tip>

### Switch Accounts

To connect a different Figma account:

1. Unlink current account
2. Paste a new Figma link
3. Authenticate with the new account

***

## Best Practices

<AccordionGroup>
  <Accordion title="Share Specific Frames">
    Don't paste entire file links. Select the relevant frame.

    * Link to specific dashboard frame
    * Link to component you want to match
    * Link to the exact screen you're extending

    **Avoid:**

    * Entire file links without context
    * Page links with dozens of frames
    * Outdated frames that don't reflect current design
  </Accordion>

  <Accordion title="Combine with prompts">
    Frame alone doesn't tell Figr what you want. Add context.

    ```
    Good prompts with Figma frames:

    "Match this dashboard style but create a 
    settings page with these sections..."

    "Use the card component from this frame 
    for a new feature announcement layout"

    "Keep this navigation pattern but redesign 
    the content area for data visualization"
    ```
  </Accordion>

  <Accordion title="Use for Design System Setup">
    Figma frames are ideal for setting up your design language. High-value frames to share:

    * Style guide or design tokens page
    * Component library frames
    * Pattern documentation
    * Recent approved designs
  </Accordion>
</AccordionGroup>


# Screen Recording
Source: https://docs.figr.design/inputs/screen-recording

Capture real-time interactions and user flows to give Figr deep understanding of how your product actually works in motion.

## Getting Started

<iframe title="YouTube video player" />

1. Open your Figr project
2. Click the **New Screen Share** button in the input panel
3. Select which screen or window to share
4. Click through your product naturally
5. Talk about the product and interactions
6. Stop recording when done

<Tip>
  **Narrate as you record.** Figr captures your voice and uses it as additional context. "Now I'm clicking here because users typically want to..." gives Figr intent, not just actions.
</Tip>

***

## [​](#why-screen-recording-works)Why Screen Recording Works

Static screenshots show what your product looks like. Screen recordings show how it behaves.

Figr watches you click through flows, sees transitions, notices loading states, and understands the rhythm of your product. It's the difference between seeing a photo of a car and watching someone drive it.

| **Static Inputs**                        | **Screen Recording**                             |
| ---------------------------------------- | ------------------------------------------------ |
| Screenshots miss interaction patterns    | Captures actual click sequences and paths        |
| Descriptions can't capture timing        | Sees loading states, transitions, animations     |
| Flow diagrams oversimplify real behavior | Records real user flow timing                    |
| Edge cases get forgotten                 | Catches the interactions you'd forget to mention |

***

## [​](#recording-best-practices) Best Practices

<AccordionGroup>
  <Accordion title="Narrate your Actions">
    Talk while you record. Figr uses your commentary as context.

    ```text theme={null}
    Good narration:
    "I'm clicking Projects because that's where users 
    typically start. Notice how the sidebar collapses 
    on smaller screens..."

    "This error appears because we validate emails 
    in real-time. Users often miss it if they're 
    typing quickly..."

    "The dashboard loads slowly with lots of data, 
    so we show skeleton components here..."
    ```
  </Accordion>

  <Accordion title="Show, Don't Tell">
    Instead of describing what you want, show Figr examples.

    ```text theme={null}
    Less effective:
    "I want a form with inline validation"

    More effective:
    Record yourself filling out a form, triggering 
    validation errors, and correcting them. Figr 
    sees exactly how it should work.
    ```
  </Accordion>

  <Accordion title="Record Real Data">
    Demo environments with realistic content give better results.

    ```text theme={null}
    Before recording:
    ✅ Populate with realistic test data
    ✅ Create multiple items to show list/table behavior
    ✅ Set up different user states to demonstrate
    ✅ Prepare error scenarios you can trigger
    ```
  </Accordion>

  <Accordion title="Keep Recordings Focused">
    Shorter, focused recordings beat long rambling ones.

    | **Recommended appraoch**       | **Avoid**                                 |
    | ------------------------------ | ----------------------------------------- |
    | One flow per recording         | 10+ minute recordings covering everything |
    | 1-3 minutes typical length     | Jumping between unrelated features        |
    | Clear start and end points     | Excessive pauses or hesitation            |
    | Pause between distinct actions | Sensitive data on screen                  |
  </Accordion>
</AccordionGroup>


# Upload From Computer
Source: https://docs.figr.design/inputs/upload-from-computer

Drag and drop files from your computer. Screenshots, documents, spreadsheets, PDFs. Figr extracts context from whatever you share.

## How to Upload

<iframe title="YouTube video player" />

### Click to Attach

1. Click the attachment icon (📎) in the query box
2. Browse your files
3. Select one or multiple files
4. Files attach to your query

### Paste from Clipboard

1. Copy any file from your finder or file explorer
2. Paste directly into the query box (⌘V)
3. Image attaches automatically

## [​](#supported-file-types)Supported File Types

* **Images & video.** Screenshots, mockups, and visual references. Supported formats: PNG, JPG / JPEG, GIF, WebP, SVG, MP4, AVI
* **Documents**. PRDs, specs, and written context. Supported formats: PDF, DOCX / DOC, TXT, Markdown (.md)
* **Spreadsheets**. Data, analytics, and structured information. Supported formats: CSV, XLSX / XLS

## What to Upload

<AccordionGroup>
  <Accordion title="Product Screenshots">
    Capture your existing product for reference. Valuable screenshots:

    * Current screens you want to extend
    * Competitor interfaces for inspiration
    * Patterns you want to match
    * States you need to handle (empty, error, loading)
  </Accordion>

  <Accordion title="PRDs and Specs">
    Give Figr the requirements directly. Document content that helps:

    * Feature requirements
    * User stories
    * Acceptance criteria
    * Business constraints
    * Technical limitations
  </Accordion>

  <Accordion title="Analytics Data">
    Real data makes designs more realistic. Useful data files:

    * User behavior analytics (CSV exports)
    * Survey results
    * Engagement metrics
    * Conversion funnels
    * A/B test results
  </Accordion>

  <Accordion title="User Research">
    Insights that shape design decisions. Research files to share:

    * Interview transcripts
    * Usability test findings
    * Survey responses
    * Persona documents
    * Journey maps
  </Accordion>
</AccordionGroup>


# Data Protection
Source: https://docs.figr.design/legal/data-protection

Figr is committed to protecting your data through robust security measures, transparent practices, and compliance with global privacy regulations. Learn how we safeguard your information and design assets.

## Your data belongs to you

**Simple as that.**

Everything you create in Figr—your designs, product context, user flows—it's all yours. We don't sell it. We don't train our AI models on your proprietary designs to make someone else's experience better.

Your competitive edge stays yours.

<Info>
  **Security first:** Every aspect of Figr is designed with data protection in mind, from our infrastructure architecture to our development practices and employee training.
</Info>

## What we don't do with your data

<AccordionGroup>
  <Accordion title="We don't train on your designs">
    Your proprietary designs never become training data for models serving other customers. **Model isolation is strict.** What you build in Figr stays in your account.
  </Accordion>

  <Accordion title="We don't sell your data">
    Never have. Never will. Your customer information, analytics, design systems—none of it gets sold to third parties.
  </Accordion>

  <Accordion title="We don't share designs across accounts">
    Generated designs remain private to your workspace. Other Figr users can't see what you're building. AI interactions are logged only for your audit trail.
  </Accordion>
</AccordionGroup>

## How we protect your data

### Encryption everywhere

All your data is encrypted both in transit and at rest. We use **AES-256 encryption** for storage and **TLS/HSTS** for everything moving between you and our servers.

### Access controls

Only team members who absolutely need access get it. And even then:

* Multi-factor authentication (MFA) required
* Every access is logged and monitored
* Least privilege principle enforced
* Automated revocation when someone leaves

### You control everything

You decide who sees what. You can:

* Set granular permissions across your org
* Export your data anytime
* Delete it whenever you want
* Track every change through audit logs

## Security infrastructure

<CardGroup>
  <Card title="Where we host" icon="server">
    U.S.based AWS facilities with 24/7 physical security and access monitoring.
  </Card>

  <Card title="Compliance" icon="shield-check">
    SOC 2 Type II certified. Annual audits plus quarterly internal assessments and penetration testing.
  </Card>

  <Card title="Development security" icon="code">
    Every code change is peer-reviewed, tracked in GitHub, and passes security review before production.
  </Card>

  <Card title="Incident response" icon="bell">
    Documented procedures with defined SLAs. You're notified within 72 hours of any confirmed incident.
  </Card>
</CardGroup>

## For enterprise teams

Need more control? We've got you covered.

<Tabs>
  <Tab title="Identity management">
    **SAML 2.0 integration** with Okta, Azure AD, and Google Workspace.

    Single sign-on means your team uses the same credentials they already know.
  </Tab>

  <Tab title="Audit trails">
    **Immutable logging** of all design activities, user access, and admin changes.

    Track everything. Go back months to see exactly what happened.
  </Tab>

  <Tab title="Custom security">
    Configure IP allowlists, data residency requirements, and custom retention policies.

    Make Figr work within your security framework.
  </Tab>

  <Tab title="Private deployment">
    Need on-premise? We offer private deployment options for teams with specific compliance requirements.

    [Contact us](mailto:hi@figr.design) to discuss your needs.
  </Tab>
</Tabs>

## Want the full security picture?

<CardGroup>
  <Card title="Security overview" icon="lock" href="https://figr.design/security">
    Complete details on our infrastructure, compliance, and security practices.
  </Card>

  <Card title="Privacy policy" icon="file-shield" href="https://docs.figr.design/legal/privacy">
    How we handle your data, your rights, and our commitments.
  </Card>
</CardGroup>

<Info>
  **Enterprise customers:** Request our security package including SOC 2 report, security questionnaire responses, and technical architecture overview.
</Info>

## Questions?

If you need specific security documentation or have compliance questions, reach out to our security team at [**hi@figr.design**](mailto:hi@figr.design).


# Privacy Policy
Source: https://docs.figr.design/legal/privacy

How Figr collects, uses, and protects your personal information and design data.

*Last Updated: December 12, 2025*

Figrfast Systems Pvt. Ltd. (and/or its affiliates) ("Company" or "we" or "us") respects your privacy, and we are committed to protecting it through this privacy policy ("Privacy Policy"), and our compliance with all applicable laws and related regulations.

We have created this Privacy Policy to inform you of our policies regarding the collection, processing, management and disclosure of personal information ("Personal Information" or "Personal Data"), as well as the rights and choices you may have in relation to our use of your Personal Information.

The information on this page applies to the Personal Information we collect about your interactions, use, and experience with our website at '[www.figr.design](http://www.figr.design)', and our proprietary platform called 'Figr' (collectively, the "Platform").

### **About Our Services**

We are engaged in the business of providing certain services through the Platform, including but not limited to AI-powered design services that help our Customers maximize their product development efficiency through intelligent design prototyping, UX pattern analysis, and design system compliance ("Services").

### **About Our Privacy Policy**

The Platform gathers certain information with prior consent from the following: the users utilizing the Platform to avail Services, i.e., companies and brands ("Customers"), and any other visitors of the Platform, with or without the intent of availing our Services (collectively "Users" or "You").

This Privacy Policy is meant to help Users understand what information we collect, why we collect it, what information we disclose, and how Users can update, manage, export, and delete their information collected by us, including Personal Information. This Privacy Policy shall be read in conjunction with our terms of service and/or the relevant service agreement or order form signed between the Company and any person on whose behalf you will avail the Services, and applicable laws.

### **Your Consent**

Our Services are intended for adults who have achieved the age of majority. You hereby confirm that you have read, understood, and agreed to the terms outlined in this Privacy Policy.

By accessing or using the Platform, or by availing the Services, or by providing your consent when prompted, you hereby agree and acknowledge that you have read, understood and agreed to the terms as provided in this Privacy Policy. **By granting your assent to this Privacy Policy, you provide consent to the processing, use, collection and disclosure of Personal Information in the manner prescribed in this Privacy Policy.**

We reserve the right to update or change our Privacy Policy at any time, and you are encouraged to review this Privacy Policy periodically. To inform you of any material changes to the manner in which we collect or process your information, including changes to this Privacy Policy, we will post the updated version on the Platform, with the revision date clearly indicated at the top. We will also make reasonable efforts to notify you of any such material changes.

### **Personal Information Collected**

All information collected or used by the Company, including Personal Information, is with the Users' consent or has been provided to the Company by a third-party on whose behalf the Users avail the Services. The Company may also use information available in the public domain. When Users use or sign-up for the Platform, the Users may provide the Company with certain information, including Personal Information, voluntarily, depending on the nature of the Services being availed on the Platform.

### **Information We Automatically Collect**

We may also collect certain technical information by automatic means when you visit our website, such as IP address, browser type and operating system, referring URLs, your use of our website, and other clickstream data. We collect this information automatically through the use of various technologies, such as cookies.

### **User Information Collected**

User information collected by us may include (without limitation) the following:

* Name
* Email ID
* Phone number
* Nationality, geolocation and time zone
* Referral source
* Marketing preferences, service communication preferences, and notification preferences
* Financial information (including billing address and limited information regarding payments)
* Details about payments made between you and us; details of Services purchased from us
* Metrics on system or Platform feature use, including but not limited to the date of sign-up, number of logins, and last login
* IP address, browser type, operating systems, URLs
* Digital media including photos, videos, design files, if required
* Data and Personal Information that you may choose to upload and/or feed into the Platform

### **Incorrect Information**

If we have reasons to suspect that the information provided by any User is misleading, inaccurate, obsolete or incomplete, we reserve the right to refuse provision of the Services to such User at our sole discretion, and without incurring any liability to Users or any third-party in this regard.

### **Use of Personal Information**

Personal Information of Users is primarily used for providing the Services, billing and payment processing. We may also use such information for the following purposes:

* To communicate with you about Services that you have signed up for and availed, changes to this Privacy Policy, changes to our terms of service, or important notices
* To keep you posted on new Services, upcoming events, offers, promotions and other information that we think will be of interest to you, in accordance with your marketing and notification preferences
* To ask you to participate in surveys, or to solicit feedback on the Services provided by us
* To set up and maintain your account, and to do all other things required for providing our Services, such as enabling collaboration, providing website and hosting, and backing up and restoring your data
* To understand how Users use our Services, to monitor and prevent issues, and to improve our Services
* To provide User support, and to analyse and improve our interactions with Users
* To detect and prevent fraudulent transactions and other illegal activities, to report spam, and to protect the rights and interests of the Company, its Users, third parties and the public at large
* To update, expand and analyse our records, identify new Users, and provide Services that may be of interest to you
* To analyse trends, administer the Platform, and track visitor navigations on the Platform
* To improve and enable you to avail our Services, increasing efficiency of existing features, and developing new features
* To tackle issues relating to troubleshooting, quality control, and analytics
* To maintain records and provide you with an efficient, safe and customized experience while using the Services
* To comply with the applicable legal and regulatory requirements
* As we believe to be necessary or appropriate under applicable law: (a) to comply with legal process; (b) to respond to requests from government authorities; (c) to protect our operations; or (d) to protect our rights, privacy, safety or property
* We may use Personal Information of the Users to create non-identifiable and anonymized aggregate data for the purposes of marketing, research and analytical purposes

**Please note that we do not sell or trade your Personal Information to third parties.**

### **Data Processed on Behalf of Customers**

In providing our Services, we may process data, including Personal Information, on behalf of our Customers, who act as data controllers. This data is referred to as "Service Data" and may include design files, prototypes, user research data, and other content that Customers upload or create using our Platform.

We process Service Data strictly in accordance with our agreements with Customers and applicable data protection laws. Service Data remains the property of our Customers, and we act solely as a data processor with respect to such data.

If your data has been submitted to us by a Customer and you wish to exercise any data protection rights, please contact the Customer directly. We will cooperate with Customers to fulfill any data subject requests in accordance with applicable law.

### **Data Residency and Hosting**

All data, including Personal Information and Service Data, is hosted on secure servers located in India and/or the United States, as applicable. We use cloud service providers including Amazon Web Services (AWS) for data hosting, and all such providers are contractually obligated to adhere to strict data protection and security standards.

For enterprise Customers with specific data residency requirements, we may offer data hosting in specific regions upon request. Please contact us at [hi@figr.design](mailto:hi@figr.design) for more information about data residency options.

### **Sub-Processors**

We may engage trusted third-party service providers (sub-processors) to help us provide and support our Services. These sub-processors may have access to Personal Information solely for the purpose of performing their functions and are contractually obligated to maintain its confidentiality and security.

Our current sub-processors include:

* Amplitude - Analytics and user behavior tracking
* Microsoft Clarity - Session recording and heatmaps
* Mixpanel - Product analytics
* Amazon Web Services (AWS) - Cloud infrastructure and hosting
* Anthropic - AI model provider (Claude API)
* Stripe - Payment processing

We maintain a current list of sub-processors and will provide reasonable notice before engaging new sub-processors that process Personal Information. Enterprise Customers may request to be notified of sub-processor changes.

### **Third-Party Integrations**

Our Platform may include integrations with third-party services, including but not limited to:

* Figma - Design file import and export
* Social media login services (Google, etc.)
* Payment gateways
* Browser extensions for web app parsing

Your interactions with these third-party services are governed by their respective privacy policies. We do not control, and are not responsible for, the privacy practices of such third-party service providers. We encourage you to review the privacy policies of any third-party services you access through our Platform.

### **Behavioral Advertising**

We may partner with third-party advertising networks to display advertisements on our Platform or manage our advertising on other sites. These partners may use cookies or similar tracking technologies to collect information about your activities on our Platform and other websites to provide you with targeted advertising based on your browsing behavior and interests.

You can opt out of receiving targeted advertisements by adjusting your browser settings to decline cookies, or by using industry opt-out mechanisms such as those provided by the Digital Advertising Alliance (DAA) or Network Advertising Initiative (NAI).

### **Cookies**

Cookies are small files that a site or its service provider transfers to your computer's hard drive through your web browser, only if you allow, that enables the sites or service providers' systems to recognize your browser and capture and remember certain information.

We use cookies to understand and save your preferences for future visits, to advertise to you on other sites, and to compile aggregate data about site traffic and site interaction so that we can offer better site experiences and tools in the future.

You have the ability to accept or decline cookies. Most web browsers automatically accept cookies, but you can usually modify your browser setting to decline cookies. If you delete or decline cookies, some features of our website or platform and our Services may not work or may not work as designed.

A banner asking you to accept our cookies policy will be displayed upon the first visit to the Platform (or the first visit after you delete your cookies). Unless you have adjusted your web browser setting so that it will refuse cookies and/or you have not accepted our cookies policy, our system will issue cookies when you visit our website or platform.

### **Retention of Personal Information**

We retain your Personal Information, as managed by this Privacy Policy, for as long as you continue to use the Platform, have an account with us, for as long as is necessary to fulfil the purposes outlined in this Privacy Policy, and for as long as is necessary for compliance with applicable laws. You can ask us to close your account by contacting us at [hi@figr.design](mailto:hi@figr.design), and we will delete your Personal Information on request.

We may, however, retain Personal Information for an additional period as is permitted or required under applicable laws, for legal, tax, or regulatory reasons, or for legitimate and lawful business purposes of the Company.

### **Protection and Safety of Personal Information**

The security of your Personal Information is important and we have implemented reasonably sufficient means to protect the same, including access controls and data encryption. However, no method of transmission over the internet, or method of electronic storage, is 100% secure, and we cannot guarantee its absolute security.

We have implemented best industry practices and security policies, rules and technical measures to protect all information collected and processed by us and in our control, including Personal Information, from unauthorised access, improper use or disclosure, unauthorised modification and unlawful destruction or accidental loss.

Notwithstanding anything contained in this Privacy Policy, we shall not be held liable for any loss whatsoever incurred by the Users or any third-party for any data loss or theft due to unauthorized access to the Users' electronic devices through which the Users avail the Services, or through reasons solely attributable to the Users.

### **Storage and Transfer of Personal Information**

All information collected by the Company, including Personal Information, shall be processed and stored in India and/or the United States, as applicable. By using our Services, you consent to the transfer of your Personal Information to these jurisdictions, which may have different data protection laws than your country of residence.

Where we transfer Personal Information outside of the European Economic Area (EEA), we ensure appropriate safeguards are in place, including Standard Contractual Clauses approved by the European Commission.

### **User Rights**

As a User, the Company grants you complete control of the information submitted by you. The rights pertaining thereto are enumerated below:

**Right to Access**\
You have a right to request that we provide you with a copy of your Personal Information that we hold, and you have the right to be informed of: (a) a summary of your Personal Information which is being processed by us; (b) the processing activities undertaken by us with respect to your Personal Information; (c) the data controller's identity; and (d) the entities or categories of entities to whom your Personal Information may be transferred.

**Right of Rectification**\
You have a right to rectify your information in the profile section of the Platform, or request that we rectify inaccurate Personal Information, complete the incomplete Personal Information or update such Personal Information. We may seek to verify the accuracy of the Personal Information before rectifying it.

**Right to Erasure**\
You can request that we erase your Personal Information in limited circumstances where: (a) it is no longer needed for the purposes for which it was collected; (b) you have withdrawn your consent (where the data processing was based on consent); (c) following a successful right to object; (d) it has been processed unlawfully; or (e) to comply with any legal obligations of the Company.

Please note, we are not required to comply with your request to erase Personal Information if the processing of your Personal Information is necessary: (a) for compliance with a legal obligation; or (b) for the establishment, exercise or defence of legal claims.

**Right to Withdraw Consent**\
Users have the right to withdraw their consent at any time, when consent is given pertaining to Personal Information. Withdrawal of consent shall not affect the lawfulness of processing based on consent before its withdrawal.

**Right to Data Portability**\
You have the right to receive your Personal Information in a structured, commonly used, and machine-readable format, and to transmit that data to another controller where technically feasible.

**Right to Object**\
You have the right to object to processing of your Personal Information where we are relying on a legitimate interest, and you believe your fundamental rights and freedoms outweigh our legitimate interests.

**Right to be Informed**\
Users have the right to be informed about third parties with whom their Personal Information has been shared.

**Right to Lodge a Complaint**\
You have a right to lodge a complaint with the Data Protection Board of India or other applicable supervisory authority if you have concerns about how we process your Personal Information. However, we ask that you attempt to resolve any issues with us first.

**Right to Unsubscribe**\
You have the option of opting-out of receiving future e-mails and newsletters from the Company at all times. To opt-out, you can send us a message at [hi@figr.design](mailto:hi@figr.design) or use the unsubscribe features provided in the communication. Please note that you generally cannot opt-out of Service-related announcements.

### **Controlling Your Data**

**Freedom of Choice:** In choosing to provide us with your personal details, you acknowledge that we will gather, retain, utilize, and share your data in compliance with this Privacy Policy. It's not mandatory to offer us your personal information. However, refusing to do so may limit your interaction with our Platform, including the products and Services we offer.

**Data from Third Parties:** If we obtain your information from a third party, we ensure its safety as outlined in this Privacy Policy. If you are a third party providing information about someone else, you declare and guarantee that you have obtained the appropriate consent to share this information with us.

\*\*Consent for Marketing: \*\*If you have previously given your consent to use your personal data for our marketing initiatives, you have the right to withdraw this consent anytime by contacting us. If required by law, we will seek your consent before using your Personal Information for any marketing endeavors.

**Non-discrimination Commitment:** We are committed to not discriminating against you for exercising any of your rights over your personal data. If you request to access, correct, amend, or delete your personal data, we assure you that it will not result in denial of our Services, or a change in the quality or cost of our Services.

**Data Breach Notification:** We adhere to all applicable laws concerning data breaches. In case of a data breach, we will inform you if we believe your Personal Information may have been compromised, and provide guidance on recommended actions.

**Filing Complaints:** If you feel that we have violated a relevant data protection law and wish to lodge a complaint, please contact us with full details of the alleged breach. We will promptly investigate your complaint and respond to you in writing, explaining the results of our investigation and the steps we will take to address your complaint.

### **Specific Privacy Rights of California Residents**

This Section for California residents supplements this Policy to comply with the California Consumer Privacy Act of 2018 ("CCPA") and the California Privacy Rights Act ("CPRA") of 2023.

The CCPA and the CPRA are California laws that provide its residents with certain rights over information about them, including notice about the categories of Personal Information we have collected from them in the preceding 12 (twelve) months and the purposes for which the information is used or disclosed, and correction of Personal Information.

### **Categories of Personal Information Collected**

In the preceding 12 (twelve) months, we may have collected the following categories of Personal Information (as defined under Cal. Civ. Code §1798.140(v)(1)):

* Identifiers, such as your name, address, unique personal identifier, email, phone number, or similar identifiers
* Commercial information, such as information relating to transactions with us involving you
* Internet or other electronic network activity information, such as technical information, including the IP address, browser type and version, time zone setting, browser plug-in types and versions, operating system and platform, click-stream data, locale preferences, and system configuration information
* Geolocation data, to the extent you have configured your device to permit us to collect such information
* Professional or employment-related information, if provided in connection with your use of our Services

### **Additional Privacy Rights for California Residents**

In addition to the rights provided under the User Rights section above, California residents are also entitled to the following rights:

Right to Know: You have the right to request that we disclose certain information about our collection and use of your Personal Information over the past 12 months, including the categories of Personal Information collected, the sources from which we collected it, the business or commercial purpose for collecting it, and the categories of third parties with whom we share it.

Right to Delete: You have the right to request that we delete any of your Personal Information that we collected from you, subject to certain exceptions.

Right to Correct: You have the right to request that we correct inaccurate Personal Information that we maintain about you.

Right to Opt-Out of Sale/Sharing: You have the right to opt out of the sale or sharing of your Personal Information for cross-context behavioral advertising. Please note that we do not sell Personal Information, nor do we share Personal Information for cross-context behavioral advertising purposes.

Right to Limit Use of Sensitive Personal Information: If we collect sensitive personal information, you have the right to limit our use and disclosure of such information to uses necessary to perform our Services.

Non-Discrimination: We will not discriminate against you for exercising any of your CCPA/CPRA rights.

### **Authorized Agent**

Only you, or someone legally authorized to act on your behalf, may make a verifiable consumer request related to your Personal Information. You may also make a verifiable consumer request on behalf of your minor children. To designate an authorized agent, please contact us at [hi@figr.design](mailto:hi@figr.design) and provide written authorization signed by you and your designated agent.

### **Verification**

To protect your privacy, we will take steps to verify your identity before fulfilling your request. When you make a request, we will ask you to provide sufficient information that allows us to reasonably verify that you are the person about whom we collected Personal Information or an authorized representative.

### **California "Shine the Light" Law**

California's "Shine the Light" law (California Civil Code Section 1798.83) permits Users of our Services who are California residents to request and obtain from us, once a year and free of charge, a list of third parties with whom we have shared any Personal Information for their marketing purposes. To make such a request, please contact us at [hi@figr.design](mailto:hi@figr.design).

### **Do Not Track**

As per California law, CalOPPA (California Business & Professions Code Section 22575(a)), we are required to let you know how we respond to web browser Do Not Track ("DNT") signals. DNT is a privacy preference that Users may set in their web browsers. Please acknowledge that we do not currently respond to DNT signals.

### **Response Timing**

We are required to respond to any verifiable consumer request within 45 (forty-five) days. Should we be unable to comply within 45 (forty-five) days, we will contact you and let you know whether we can complete your request or whether we need more time to complete your request with reason. Any disclosure we provide will only cover the 12-month period preceding the verifiable consumer request's receipt.

### **Specific Rights in Other Jurisdictions**

In addition to the rights above, you may also be entitled to other data protection and privacy rights under the laws applicable in your jurisdiction, including but not limited to:

* European Union / European Economic Area (GDPR): Rights to access, rectification, erasure, restriction of processing, data portability, and to object to processing
* United Kingdom (UK GDPR): Similar rights as under EU GDPR
* Other US States: Various state privacy laws may provide additional rights similar to CCPA/CPRA

You can exercise any of your rights by contacting us at [hi@figr.design](mailto:hi@figr.design). Subject to legal and other permissible considerations, we will make every reasonable effort to honor your request promptly or inform you if we require further information in order to fulfill your request.

### **Disclaimers**

The Platform may contain links to other websites. Please note that when Users click on one of these links, they are entering another website over which we have no control and for which we will bear no responsibility. We encourage and recommend Users to read the privacy policies of all such websites before engaging and/or feeding in their Personal Information.

You may also provide information to be published or displayed on publicly accessible areas of our Platform, or transmitted to other users of our Services or third-parties (collectively, "Contributions"). Your Contributions are posted on and transmitted to others at your own risk. We cannot control the actions of other Users with whom you may choose to share your Contributions. Therefore, we cannot and do not guarantee that your Contributions will not be viewed by unauthorized persons.

### **Children's Privacy**

Our Service does not address anyone under the age of 13 ("Children"). We do not knowingly collect personally identifiable information from anyone under the age of 13. If you are a parent or guardian and you are aware that your child has provided us with personal data, please contact us. If we become aware that we have collected Personal Data from children without verification of parental consent, we take steps to remove that information from our servers.

### **Business Transfers**

If Figrfast Systems Pvt. Ltd., or substantially all of its assets were acquired, or in the unlikely event that Figrfast Systems Pvt. Ltd. goes out of business or enters bankruptcy, user information would be one of the assets that is transferred or acquired by a third party. You acknowledge that such transfers may occur, and that any acquirer of Figrfast Systems Pvt. Ltd. may continue to use your personal information as set forth in this policy.

### **Changes to This Policy**

We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page and, for material changes, by sending you an email notification or displaying a prominent notice on our Platform. You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.

Your continued use of our Platform will be regarded as acceptance of our practices around privacy and personal information.

### **Grievance Officer**

In accordance with Information Technology Act 2000 and rules made there under, the name and contact details of the Grievance Officer are provided below:

**Name:** Mr. Moksh Garg

**Email:** [moksh@figr.design](mailto:moksh@figr.design)

### **Contact Us**

If there are any questions regarding this Privacy Policy, you may contact us at:

[hi@figr.design](mailto:hi@figr.design)

[moksh@figr.design](mailto:moksh@figr.design)

HD-301, WeWork Embassy TechVillage, Bellandur, Bengaluru, Karnataka 560103

*This policy is effective as of January 2, 2026.*

***

<Info>
  **Privacy by Choice**

  We believe privacy should be your choice, not our decision.

  We've built Figr to respect your privacy while providing powerful design tools. If you have questions about how we handle your data, we're here to help.
</Info>


# Terms of Service
Source: https://docs.figr.design/legal/terms

Terms and conditions for using Figr's AI-powered design platform and services.

*Last Updated: December 12, 2025*

***

### 1. Introduction and Acceptance

1.1 These Terms of Service ("Terms") govern your access to and use of the Figr website, applications, and services (collectively, the "Services") operated by the applicable Figr entity as described in Section 16 (the "Company," "we," "us," or "our"). By accessing or using the Services, you agree to be bound by these Terms.

1.2 If you are using the Services on behalf of an organization, you represent and warrant that you have the authority to bind that organization to these Terms, and "you" refers to both you individually and that organization.

1.3 If you do not agree to these Terms, you must not access or use the Services.

***

### 2. Contracting Entity

Your agreement is with the following entity based on your location:

2.1 If you are located in the United States: Figr Design Inc., a Delaware corporation, with offices at 16192 Coastal Highway, Lewes, Delaware 19958, County of Sussex, USA.

2.2 If you are located outside the United States: Figrfast Systems Private Limited, a company registered in India, with offices at HD-301, WeWork Embassy TechVillage, Bellandur, Bengaluru, Karnataka 560103, India.

2.3 References to "Figr," "Company," "we," "us," or "our" in these Terms refer to the applicable contracting entity based on your location.

***

### 3. Eligibility

3.1 You must be at least 18 years of age to use the Services. By using the Services, you represent and warrant that you are at least 18 years old and have the legal capacity to enter into these Terms.

3.2 If you are using the Services on behalf of a legal entity, you represent and warrant that you have the authority to bind that entity to these Terms.

***

### 4. Description of Services

4.1 Figr provides an AI-powered design platform that helps product teams create prototypes, PRDs, user flows, diagrams, and other design outputs. The Services include:

* Web application accessible at [figr.design](http://figr.design)
* Chrome browser extension for capturing web interfaces
* Figma Plugin for importing/creating design systems
* AI-generated outputs including prototypes, PRDs, user flows, and diagrams
* Third-party integrations (including current and future integrations with tools such as Notion, Jira, Slack, and others)

4.2 Figr reserves the right to modify, suspend, or discontinue any part of the Services at any time, with or without notice. We will make reasonable efforts to notify users of material changes.

***

### 5. Account Registration

5.1 To access certain features of the Services, you must create an account. You agree to provide accurate, current, and complete information during registration and to update such information to keep it accurate, current, and complete.

5.2 You are responsible for maintaining the confidentiality of your account credentials and for all activities that occur under your account. You agree to notify us immediately at [hi@figr.design](mailto:hi@figr.design) of any unauthorized use of your account.

5.3 You may not share your account credentials with others or allow others to access your account, except as expressly permitted under your subscription plan for authorized team members.

***

### 6. Subscription Plans and Credits

### 6.1 Plan Types

Figr offers the following types of plans:

* Free Plan: Limited access to the Services with restricted features and usage limits.
* Paid Plans: Enhanced access to the Services with additional features and higher usage limits.
* Enterprise Plans: Custom plans for organizations with specific requirements, including dedicated support and custom terms.

### 6.2 Credits

6.2.1 The Services operate on a credit-based usage model. Credits are units of platform usage that measure processing and output generation. Credit consumption varies based on task complexity. One Credit approximates one hour of a designer's time for typical tasks.

6.2.2 Each plan includes a monthly allocation of Credits as specified at the time of purchase or as displayed in your account dashboard.

6.2.3 Unused Credits roll over to the following month, up to a maximum of your monthly allocation amount. Credits exceeding this cap expire at the end of each billing period and are not refundable.

6.2.4 Detailed information about Credit usage is available at \
docs.figr.design/account/credits-usage.

### 6.3 Billing and Payment

6.3.1 Paid subscriptions are billed in advance on a monthly or annual basis, depending on the plan selected. Payment is processed through our third-party payment processors.

6.3.2 All fees are non-refundable except as expressly set forth in these Terms or as required by applicable law.

6.3.3 We reserve the right to change our pricing at any time. Price changes for existing subscribers will take effect at the next renewal period, and we will provide at least 30 days' notice of any price increase.

### 6.4 Automatic Renewal

6.4.1 Paid subscriptions automatically renew for successive periods equal to your initial subscription period unless you cancel before the renewal date. You authorize us to charge your payment method on file for each renewal period.

6.4.2 You may cancel your subscription at any time through your account settings. Cancellation will take effect at the end of the current billing period, and you will retain access to paid features until that date.

6.4.3 FOR USERS IN CALIFORNIA AND OTHER JURISDICTIONS WITH AUTO-RENEWAL LAWS: By subscribing to a paid plan, you acknowledge and agree that your subscription will automatically renew and you authorize us to charge your payment method for each renewal period until you cancel. You may cancel at any time to stop future charges.

***

### 7. Your Data and Privacy

### 7.1 Data You Provide

7.1.1 You may voluntarily provide data to the Services to enhance the quality of outputs, including but not limited to: design systems imported via the Figma Plugin, screen recordings, product context, uploaded files, and other inputs ("Your Data").

7.1.2 You retain all ownership rights in Your Data. By providing Your Data to the Services, you grant Figr a limited, non-exclusive license to use, process, and store Your Data solely for the purpose of providing the Services to you.

### 7.2 No AI Training on Your Data

We want to be absolutely clear about how we handle Your Data:

* Your Data is NOT used to train our AI models.
* Your Data is NOT sold to third parties.
* Your Data is NOT shared with other users or customers.
* Your Data is NOT traded or exchanged with any external parties.

7.2.1 Your Data is strictly isolated and used solely to provide the Services to you. We implement appropriate technical and organizational measures to maintain this isolation.

### 7.3 Third-Party Integrations

7.3.1 When you connect third-party services to Figr (such as Figma, Notion, Jira, Slack, or other integrations), you authorize us to access and process data from those services as necessary to provide the integrated functionality. Your use of third-party services is subject to their respective terms and privacy policies.

7.3.2 Data obtained through third-party integrations is treated with the same protections as Your Data and is not used for AI training, sold, shared, or traded.

### 7.4 Data Retention and Deletion

7.4.1 We retain Your Data for as long as your account is active or as needed to provide the Services. Upon account deletion, Figr may retain Your Data for up to 60 days before permanent deletion, unless longer retention is required by law.

7.4.2 You may request export of Your Data at any time by contacting us at [hi@figr.design](mailto:hi@figr.design). We will provide your data in a reasonable format and timeframe.

### 7.5 Anonymized and Aggregated Data

7.5.1 We may collect and use anonymized and aggregated data that does not identify you or any individual user for purposes such as improving the Services, conducting research, and publishing performance benchmarks. Such anonymized data is not considered Your Data.

***

### 8. Acceptable Use

8.1 You may use the Services for your internal business purposes in accordance with these Terms. You agree not to:

* Use the Services to violate any applicable law or regulation.
* Use the Services to infringe the intellectual property rights of any third party.
* Reverse engineer, decompile, disassemble, or otherwise attempt to derive the source code of the Services.
* Use the Services to transmit malware, viruses, or other malicious code.
* Attempt to gain unauthorized access to the Services or related systems.
* Use automated means (bots, scrapers, etc.) to access the Services except as expressly permitted.
* Resell, redistribute, or sublicense access to the Services without our prior written consent.
* Use the Services in any manner that could damage, disable, overburden, or impair the Services.
* Use outputs generated by the Services to directly compete with Figr's business.

8.2 You are responsible for all content and data you submit to the Services and for ensuring you have all necessary rights and permissions to use such content.

***

### 9. Intellectual Property

### 9.1 Figr's Intellectual Property

9.1.1 The Services, including all software, designs, text, graphics, logos, and other content provided by Figr, are owned by Figr or its licensors and are protected by intellectual property laws. You are granted a limited, non-exclusive, non-transferable license to use the Services in accordance with these Terms.

9.1.2 You may not copy, modify, distribute, sell, or lease any part of the Services, nor may you reverse engineer or attempt to extract the source code of any software, except as permitted by law or with our prior written consent.

### 9.2 Your Intellectual Property

9.2.1 You retain all ownership rights in Your Data and any content you create using the Services. Figr claims no ownership over outputs generated by the Services based on Your Data.

### 9.3 Feedback

9.3.1 If you provide us with feedback, suggestions, or ideas regarding the Services, you grant us a perpetual, irrevocable, worldwide, royalty-free license to use such feedback for any purpose without compensation or attribution to you.

### 9.4 Third-Party Trademarks

9.4.1 All trademarks of third-party applications or companies displayed within the Services belong to their respective owners. Figr displays these for reference purposes only. Users who utilize third-party trademarks in their outputs do so at their own risk and are advised against commercial use without obtaining permission from the trademark owner.

***

### 10. AI-Generated Outputs

10.1 The Services use artificial intelligence to generate design outputs, including prototypes, PRDs, user flows, diagrams, and other content ("AI Outputs"). You acknowledge and agree that:

* AI Outputs may contain errors, inaccuracies, or inconsistencies. You are solely responsible for reviewing, validating, and verifying all AI Outputs before use.
* AI Outputs are provided as tools to assist your work, not as professional design, legal, or business advice.
* Figr does not guarantee that AI Outputs will meet specific requirements, be error-free, or be suitable for any particular purpose.
* Figr does not guarantee that AI Outputs will comply with accessibility standards (such as WCAG), legal requirements, or industry regulations. You are responsible for ensuring compliance.
* Similar inputs may produce different outputs at different times due to the nature of AI systems.

10.2 You assume all risk associated with your use of AI Outputs, including any decisions made or actions taken based on such outputs.

***

### 11. Disclaimer of Warranties

11.1 THE SERVICES ARE PROVIDED "AS IS" AND "AS AVAILABLE" WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE, AND NON-INFRINGEMENT.

11.2 FIGR DOES NOT WARRANT THAT THE SERVICES WILL BE UNINTERRUPTED, ERROR-FREE, SECURE, OR FREE OF VIRUSES OR OTHER HARMFUL COMPONENTS. FIGR DOES NOT WARRANT THAT THE SERVICES WILL MEET YOUR SPECIFIC REQUIREMENTS OR EXPECTATIONS.

11.3 FIGR MAKES NO REPRESENTATIONS OR WARRANTIES REGARDING THE ACCURACY, RELIABILITY, OR COMPLETENESS OF ANY CONTENT OR AI OUTPUTS GENERATED THROUGH THE SERVICES.

11.4 SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES, SO SOME OF THE ABOVE EXCLUSIONS MAY NOT APPLY TO YOU. IN SUCH JURISDICTIONS, FIGR'S WARRANTIES ARE LIMITED TO THE MAXIMUM EXTENT PERMITTED BY LAW.

***

## 12. Limitation of Liability

12.1 TO THE MAXIMUM EXTENT PERMITTED BY LAW, FIGR SHALL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES, INCLUDING BUT NOT LIMITED TO LOSS OF PROFITS, DATA, USE, GOODWILL, OR OTHER INTANGIBLE LOSSES, ARISING OUT OF OR RELATED TO YOUR USE OF OR INABILITY TO USE THE SERVICES.

12.2 FIGR'S TOTAL LIABILITY ARISING OUT OF OR RELATED TO THESE TERMS OR THE SERVICES SHALL NOT EXCEED THE GREATER OF: (A) THE AMOUNTS YOU PAID TO FIGR IN THE TWELVE (12) MONTHS PRECEDING THE CLAIM, OR (B) ONE HUNDRED US DOLLARS (\$100).

12.3 THE LIMITATIONS IN THIS SECTION APPLY REGARDLESS OF THE THEORY OF LIABILITY (CONTRACT, TORT, STRICT LIABILITY, OR OTHERWISE) AND EVEN IF FIGR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

12.4 SOME JURISDICTIONS DO NOT ALLOW THE LIMITATION OR EXCLUSION OF LIABILITY FOR CERTAIN DAMAGES, SO SOME OF THE ABOVE LIMITATIONS MAY NOT APPLY TO YOU.

***

### 13. Indemnification

13.1 You agree to indemnify, defend, and hold harmless Figr and its officers, directors, employees, agents, and affiliates from and against any and all claims, damages, losses, liabilities, costs, and expenses (including reasonable attorneys' fees) arising out of or related to:

* Your breach of these Terms.
* Your use of the Services.
* Your violation of any applicable law or regulation.
* Your infringement of any third-party rights, including intellectual property rights.
* Your Data or any content you submit to the Services.

13.2 Figr reserves the right, at your expense, to assume the exclusive defense and control of any matter for which you are required to indemnify us, and you agree to cooperate with our defense of such claims.

***

### 14. Termination

14.1 You may terminate your account at any time by contacting us at [hi@figr.design](mailto:hi@figr.design) or through your account settings. Termination will take effect at the end of your current billing period for paid subscriptions.

14.2 Figr may suspend or terminate your access to the Services at any time, with or without cause, and with or without notice. Reasons for termination may include, but are not limited to, violation of these Terms, fraudulent or illegal activity, or non-payment.

14.3 Upon termination, your right to use the Services will immediately cease. Sections of these Terms that by their nature should survive termination will survive, including but not limited to Sections 7 (Your Data and Privacy), 9 (Intellectual Property), 11 (Disclaimer of Warranties), 12 (Limitation of Liability), 13 (Indemnification), and 16 (Governing Law and Dispute Resolution).

14.4 In cases of termination by Figr without cause, Figr will provide a prorated refund for any prepaid fees for the remaining subscription period. In cases of termination for cause due to your breach of these Terms, no refund will be provided.

***

### 15. Modifications to Terms

15.1 Figr reserves the right to modify these Terms at any time. We will notify registered users of material changes by email or through the Services at least 14 days before the changes take effect.

15.2 For users with active subscriptions, modified Terms will apply from the next renewal date following the effective date of the changes.

15.3 Your continued use of the Services after the effective date of any modifications constitutes your acceptance of the modified Terms. If you do not agree to the modified Terms, you must stop using the Services and cancel your subscription.

15.4 Non-registered users should review these Terms regularly, as the most current version will apply to their use of the Services.

***

### 16. Governing Law and Dispute Resolution

### 16.1 For Users Contracting with Figr Design Inc. (United States)

16.1.1 These Terms shall be governed by and construed in accordance with the laws of the State of Delaware, United States, without regard to its conflict of law principles.

16.1.2 Any disputes arising out of or relating to these Terms or the Services shall be resolved through binding arbitration in accordance with the rules of the American Arbitration Association. The arbitration shall take place in Delaware, and the language of the arbitration shall be English.

16.1.3 Notwithstanding the foregoing, either party may seek injunctive or other equitable relief in any court of competent jurisdiction to protect its intellectual property rights.

### 16.2 For Users Contracting with Figrfast Systems Private Limited (Outside United States)

16.2.1 These Terms shall be governed by and construed in accordance with the laws of India.

16.2.2 The parties shall attempt to resolve any disputes through good faith negotiations. If unresolved, disputes shall be subject to the exclusive jurisdiction of the courts in Bengaluru, Karnataka, India.

***

### 17. General Provisions

17.1 **Entire Agreement:** These Terms, together with any Order Forms or other agreements incorporated by reference, constitute the entire agreement between you and Figr regarding the Services and supersede all prior agreements and understandings.

17.2 **Severability:** If any provision of these Terms is found to be unenforceable, the remaining provisions will remain in full force and effect, and the unenforceable provision will be modified to the minimum extent necessary to make it enforceable.

17.3 **Waiver:** Figr's failure to enforce any right or provision of these Terms shall not constitute a waiver of such right or provision.

17.4 **Assignment:** You may not assign or transfer these Terms or your rights under these Terms without Figr's prior written consent. Figr may assign these Terms without restriction.

17.5 **Force Majeure:** Neither party shall be liable for any failure or delay in performance due to causes beyond its reasonable control, including but not limited to natural disasters, acts of government, internet or telecommunications failures, or cyberattacks.

17.6 **Language:** These Terms are written in English. Any translations are provided for convenience only, and the English version shall control in case of any conflict.

***

### 18. Contact Information

For questions, concerns, or notices regarding these Terms, please contact us at:

**General Inquiries:** [hi@figr.design](mailto:hi@figr.design)

**Grievance Officer:** [moksh@figr.design](mailto:moksh@figr.design)

**United States Office:** Figr Design Inc. 16192 Coastal Highway Lewes, Delaware 19958 County of Sussex, USA

**India Office:** Figrfast Systems Private Limited HD-301, WeWork Embassy TechVillage Bellandur, Bengaluru Karnataka 560103, India

***

*© 2025 Figr. All rights reserved.*


# Usage and Credits
Source: https://docs.figr.design/page1

Track credits across activities, and spend them on reasoning before pixels.

Credits track product usage across activities. The usage page is where you see what you have, what is left, and where it went.

<Frame>
  ![Credit usage log and usage summary](https://placehold.co/1600x900/EEEEEE/31343C?text=08-04-usage-credits.png)
</Frame>

| What you see             | Why it matters                           |
| ------------------------ | ---------------------------------------- |
| Total credits            | Your allowance for the current period    |
| Remaining credits        | What is left to spend                    |
| Queries or generations   | Activity that consumed credits           |
| Activity-level usage     | Where credits are going                  |
| Workspace usage patterns | How the team is spending across projects |

Honest advice: do not burn credits by asking for final designs too early. Use lighter workflows first.

* [Review the UX](/product-design-flow/review-ux) and map the flow
* Clarify edge cases
* Use [Brainstorm](/product-design-flow/brainstorm-ideas) while still thinking
* Generate [high-fidelity prototypes](/product-design-flow/high-fidelity-prototype) once the direction is clear

Good credit habits: use richer context to reduce repeated prompting, ask for reasoning before generating many design variations, refine focused parts instead of regenerating entire screens, and use Context Pods for repeated product context. See plans and pricing at [figr.design/pricing](https://figr.design/pricing).

<Note>
  \[VERIFY: confirm how credits are calculated, and whether any credit-to-time comparison is approved language before adding it.]
</Note>


# Account Settings
Source: https://docs.figr.design/page2

Manage your profile, account preferences, and Refer & Earn.

Account Settings is where you manage your personal profile and account preferences.

<Frame>
  ![Account Settings page with profile, account, and Refer & Earn options](https://placehold.co/1600x900/EEEEEE/31343C?text=08-01-account-settings.png)
</Frame>

From Account Settings, you can update or review your profile details, login or account information, workspace access, notification preferences, and Refer & Earn options.

Use **Refer & Earn** to invite others to Figr through your referral link or affiliate program.

<Note>
  \[VERIFY: confirm the exact Account Settings fields, where Refer & Earn lives, the program terms, and the reward structure.]
</Note>


# Members and Roles
Source: https://docs.figr.design/page3

Control who can access your workspace and what they can do.

Members and roles control who can access your workspace and what they can do.

<Frame>
  ![Members and roles settings with workspace members](https://placehold.co/1600x900/EEEEEE/31343C?text=08-05-members-roles.png)
</Frame>

At a high level: admins manage workspace settings, members create and edit projects, viewers review work without editing, and external collaborators may have limited access.

<Info>
  The full, authoritative role matrix lives in [Roles and permissions](/roles-and-permissions/canonical-roles-and-permissions). This page intentionally does not restate role definitions, so there is one source of truth.
</Info>

<Warning>
  PLACEHOLDER: confirm the canonical role model before expanding this page. Roles are defined once in 9.1.
</Warning>

## Related

<CardGroup>
  <Card title="Inviting your team" icon="user-plus" href="/getting-started/inviting-your-team">
    Add teammates to the workspace.
  </Card>

  <Card title="Roles and permissions" icon="shield-halved" href="/roles-and-permissions/canonical-roles-and-permissions">
    The single source of truth for roles.
  </Card>

  <Card title="Publish and Share" icon="share-nodes" href="/export-and-share/publish-and-share">
    Access for shared projects and artifacts.
  </Card>
</CardGroup>


# Billing and Plans
Source: https://docs.figr.design/page4

Check your plan, credits, renewal, and payment details.

Billing shows your current plan, renewal details, credits, and subscription status.

<Frame>
  ![Billing page showing current plan and credit status](https://placehold.co/1600x900/EEEEEE/31343C?text=08-02-billing-plans.png)
</Frame>

Use billing when you need to check your plan, track credit usage, upgrade or change plan, review your renewal date, or manage payment details. Current plans and pricing live at [figr.design/pricing](https://figr.design/pricing).

<Note>
  \[VERIFY: confirm current plan names, pricing, renewal details, and billing provider behavior before stating any of them here.]
</Note>


# Connected Apps
Source: https://docs.figr.design/page5

Review and manage the integrations connected to your workspace.

Connected Apps shows the integrations connected to your workspace or account.

<Frame>
  ![Connected Apps page showing active integrations](https://placehold.co/1600x900/EEEEEE/31343C?text=08-06-connected-apps.png)
</Frame>

Use this page to review active integrations, disconnect tools, re-authenticate expired connections, and manage external context sources. This connects closely with [Connectors](/product-intelligence/connectors).

<Note>
  \[VERIFY: confirm the relationship between Connected Apps and Connectors so the two pages do not contradict each other.]
</Note>


# SSO
Source: https://docs.figr.design/page6

Single sign-on for enterprise workspaces.

Enterprise workspaces may support single sign-on (SSO) through providers such as Google, Okta, or custom SAML.

<Warning>
  PLACEHOLDER: document SSO only after confirming the supported providers, setup steps, admin requirements, domain verification behavior, login behavior for existing users, and troubleshooting steps. Do not publish specifics until verified.
</Warning>

<Frame>
  ![SSO setup page, to be captured once the feature is available](https://placehold.co/1600x900/EEEEEE/31343C?text=08-06-sso-setup+\(once+available\))
</Frame>


# Setting up Connectors
Source: https://docs.figr.design/product-intelligence/connectors

Connect live tools like Mixpanel, Notion, and Linear so Figr pulls real data into your designs at query time.

A Connector links Figr to an external tool through the Model Context Protocol (MCP). Once connected, the agent can call that tool live during a canvas query, fetching funnel data, reading a doc, or pulling tickets, and design directly from what it finds.

Where a Design Language defines how things look and a Context Pod captures what your product is, Connectors bring in what is true right now: your live, changing data.

## Available connectors

The Connectors page lists ready-to-use integrations:

* **Analytics**: Mixpanel, Amplitude
* **Docs and knowledge**: Notion, Confluence, Google Workspace
* **Product and planning**: Linear, Miro, Mobbin
* **Communication**: Slack, Granola

Each shows its name, category, and connection status. Anything not listed can be added as a custom connector.

## Open the Connectors page

Reach it two ways: from the canvas, click the database icon in the chat console, then **Manage connectors**. Or open **Connectors** in workspace settings.

<Frame>
  <img alt="Canvas chat console with the Manage connectors option" />

  <img alt="Canvas chat console with the Manage connectors option" />
</Frame>

## Connect a standard tool

Using Mixpanel as the example:

<Steps>
  <Step title="Click Connect">
    Find the tool on the Connectors page and click **Connect**.
  </Step>

  <Step title="Review the setup modal">
    A modal opens, like "Mixpanel, Add connector," with instructions and a warning that you will be redirected to authenticate.
  </Step>

  <Step title="Authorize with OAuth">
    Click **Connect with OAuth**. Your browser opens the provider's authorization page. Review the requested access, like tracking, metrics, and funnel queries, then click **Authorize**.
  </Step>

  <Step title="Return to Figr">
    You land back with a "Connected to Mixpanel" banner. The tool now shows a green **Connected** badge and a toggle.
  </Step>
</Steps>

Toggle a connector off anytime to stop the agent from using it, without disconnecting.

<Frame>
  <img alt="Connectors page listing integrations like Notion, Mixpanel, and Linear" />

  <img alt="Connectors page listing integrations like Notion, Mixpanel, and Linear" />
</Frame>

## Add a custom connector

Any MCP-compatible tool can be added manually.

<Steps>
  <Step title="Click Add custom">
    Top right of the Connectors page.
  </Step>

  <Step title="Fill in the details">
    Name (a label, like Figr MCP), MCP Server URL (the endpoint, like [https://mcp.figr.design/mcp](https://mcp.figr.design/mcp)), and Transport type (the connection method).
  </Step>

  <Step title="Add the connector">
    Click **Add connector**. It saves with a yellow **Requires authentication** badge.
  </Step>

  <Step title="Authenticate">
    Click **Connect** to run the OAuth handshake, then **Allow access** on the consent screen. The badge turns green and the connector is live.
  </Step>
</Steps>

<Frame>
  <img alt="Add custom connector modal with Name, MCP Server URL, and Transport type" />

  <img alt="Add custom connector modal with Name, MCP Server URL, and Transport type" />
</Frame>

### Connection states

| State                   | Badge  | Meaning                             |
| ----------------------- | ------ | ----------------------------------- |
| Not connected           | None   | Available but not linked            |
| Requires authentication | Yellow | Registered, needs OAuth to activate |
| Connected               | Green  | Live, the agent can query it        |

## Using connectors in a design

Once a tool is connected, ask for what you need on the canvas. The agent decides when to call the connector and pulls the data in mid-task.

```text theme={null}
Find the biggest onboarding drop-off step, and brainstorm how to fix it.
```

```text theme={null}
Pull our active Linear bugs and design a triage board.
```

```text theme={null}
Use last month's funnel data to design an analytics summary.
```

For the first one, Figr queries the connected Mixpanel source for live funnel data, finds the weakest step, and designs against the real numbers. No export, no copy-paste.

<Frame>
  <img alt="Canvas chat querying live Mixpanel funnel data to generate insights" />

  <img alt="Canvas chat querying live Mixpanel funnel data to generate insights" />
</Frame>

## Why it matters

Static inputs go stale. A screenshot of last quarter's dashboard is wrong the moment the data moves. Connectors keep Figr current: every query fetches fresh data, so designs reflect reality at the moment you ask.

| Without connectors               | With connectors                      |
| -------------------------------- | ------------------------------------ |
| Paste data into every prompt     | The agent fetches it live, on demand |
| Numbers go stale between updates | Always the current data              |
| Design from assumed metrics      | Design from real metrics             |
| Switch tools to look things up   | The agent looks it up for you        |

## Best practices

<Tip>
  * Connect only what you will use. Each active connector is a tool the agent may call, and a focused set keeps queries fast and predictable.
  * Toggle off rather than disconnect when pausing a tool you will return to.
  * Name custom connectors clearly so you can tell them apart.
  * Be specific in prompts. Name the data you want, like "last 30 days of signup funnel," so the agent queries precisely.
  * Review OAuth scopes before authorizing, so you know exactly what access you are granting.
</Tip>

## Troubleshooting

| Issue                                               | Fix                                                            |
| --------------------------------------------------- | -------------------------------------------------------------- |
| Custom connector stuck on "Requires authentication" | Click Connect and complete the OAuth consent flow              |
| Agent is not pulling live data                      | Confirm a green Connected badge and that the toggle is on      |
| OAuth redirect fails                                | Log into the provider in the same browser, then retry          |
| Connector returns no data                           | Verify your account has access to that data in the source tool |

## Related

<CardGroup>
  <Card title="Figr MCP" href="/export/mcp">
    Expose your own project context to AI coding assistants over MCP.
  </Card>

  <Card title="Context Pods" href="/product-intelligence/context-pods">
    Bundle static product knowledge for a project.
  </Card>

  <Card title="Setting up Design Language" href="/product-intelligence/design-system">
    Teach Figr how your product should look.
  </Card>
</CardGroup>


# Context Pods
Source: https://docs.figr.design/product-intelligence/context-pods

Reusable product knowledge Figr can understand across projects, prompts, and tasks.

A Context Pod is the most flexible way to teach Figr about your product. Where a Design Language defines how things look, a Context Pod captures what your product is and how it behaves: flows, terminology, user needs, and constraints.

Build it once, attach it to any project, and reference it as a chip on any prompt.

## Create a Context Pod

<Steps>
  <Step title="Open Context Pod">
    From the sidebar, under **Product intelligence**.
  </Step>

  <Step title="Create a new pod">
    Click **Create new Context Pod** (top right). Give it a name (required) and an optional description.
  </Step>

  <Step title="Continue to setup">
    This opens the **Add your product details** screen, where you connect your sources.
  </Step>
</Steps>

## Add your sources

A Context Pod accepts five source types. Use as many as you like; the more you add, the deeper Figr's understanding.

### Show us your product (recommended)

The richest source. Show Figr your product in motion.

* Record a walkthrough directly, with optional microphone narration and full-screen capture
* Or drag and drop an existing screen recording

A recorded flow tells Figr how screens connect and how users move through them, context a static screenshot cannot carry.

### Upload files

Drag and drop supporting material: PDFs and design specs, screenshots and images, documents, and other product files.

### Paste text

Open the note editor, give it a title, and write in the rich-text area. Useful for product overviews, terminology, or notes that do not live in a file.

### Link website

Paste a URL, like your product or marketing site. Figr validates the link and fetches the page so it can read your live content.

### Add instructions

Free-form guidance that shapes how the agent responds:

```text theme={null}
Be concise
```

```text theme={null}
Always use our terminology: Workspaces, not Projects
```

```text theme={null}
Prioritize mobile patterns
```

When your sources are in, click **Start Building** to save the pod.

## The pod summary

After building, you land on the pod's summary dashboard. A right-side drawer lists everything linked to the pod, every recording, file, note, link, and instruction, alongside its generated context status. Return here anytime to review what the pod knows or to add and remove sources.

<Frame>
  <img alt="Context Pod summary dashboard listing linked sources" />

  <img alt="Context Pod summary dashboard listing linked sources" />
</Frame>

## Use a Context Pod

A Context Pod only shapes output once you attach it to a prompt.

<Steps>
  <Step title="Start a new chat">
    In a project, start a **New chat** on the canvas.
  </Step>

  <Step title="Open the attachment menu">
    In the prompt box, open the attachment menu and select **Context Pod**.

    <Frame>
      <img alt="Context Pod Menu" title="Context Pod Menu" />

      <img alt="Context Pod Menu" title="Context Pod Menu" />
    </Frame>
  </Step>

  <Step title="Choose your pod">
    Pick the pod you want. It appears as an active chip on the prompt.

    <Frame>
      <img alt="Context Pod Menu 1" title="Context Pod Menu 1" />

      <img alt="Context Pod Menu 1" title="Context Pod Menu 1" />
    </Frame>
  </Step>
</Steps>

Submit your query and Figr grounds its response in the pod's sources, referencing your real flows, files, and terminology instead of generic assumptions. Attach the same pod across many projects, so product knowledge follows you everywhere.

## Context Pod vs Design Language

The two design-intelligence sources do different jobs, and most teams use both.

|          | Context Pod                                  | Design Language                         |
| -------- | -------------------------------------------- | --------------------------------------- |
| Captures | What your product is and how it works        | How your product looks                  |
| Sources  | Recordings, files, text, links, instructions | Figma frames, tokens, component files   |
| Shapes   | Flows, terminology, behavior, content        | Colors, typography, spacing, components |
| Output   | Designs that fit your product's logic        | Designs that match your visual system   |

## Why it matters

Without product context, Figr designs from generic assumptions: plausible screens that do not reflect your actual flows, naming, or user needs, and you re-explain your product in every prompt.

With a Context Pod attached, that knowledge is always present. Figr already knows your onboarding flow, your terminology, and your constraints, so it designs for your product, not a generic version of it.

## Best practices

<Tip>
  * Lead with a recording. A walkthrough conveys flow and behavior that files alone cannot.
  * Mix source types: a recording for flow, files for detail, instructions for tone.
  * Keep instructions specific. Concrete rules like "use our terms" or "mobile-first" steer output more than vague ones.
  * Reuse across projects. Build one strong pod and attach it everywhere instead of re-uploading per project.
  * Keep it current. Refresh recordings and links when your product changes so context does not drift.
</Tip>

## Troubleshooting

| Issue                             | Fix                                                                            |
| --------------------------------- | ------------------------------------------------------------------------------ |
| Website link will not attach      | Confirm the URL is valid and public, and wait for the validation check to pass |
| Pod does not influence a response | Make sure it is attached as a chip on the prompt before submitting             |
| Recording upload fails            | Check the file is a supported video format and within the size limit           |
| Output ignores your terminology   | Add an explicit instruction spelling out the terms to use                      |

## Related

<CardGroup>
  <Card title="Context Pods" href="/product-intelligence/context-pods">
    What a Context Pod is and how it grounds a project.
  </Card>

  <Card title="Setting up Design Language" href="/product-intelligence/design-system">
    Teach Figr how your product should look.
  </Card>

  <Card title="Screen Recordings" href="/input-research/screen-recording">
    Capture a flow to drop into a pod.
  </Card>
</CardGroup>


# Design System
Source: https://docs.figr.design/product-intelligence/design-system

Import your design system once and Figr designs with your actual components, tokens, and patterns, not generic UI.

## Setting up your Design Language

<iframe title="Setting up your Design Language" />

### Open Design Language

From the sidebar, click **Design Language**. The setup screen has two sections: sources and instructions.

### Upload product screenshots

The first section takes screenshots and files. Upload your existing product screens, Figma frames exported as images, UI mockups, component examples, and CSS or style files. Drag and drop into the upload area, or click to browse.

<Tip>
  **The more you upload, the better.** Figr analyzes every image to learn your visual patterns. Five screenshots give a basic read; twenty give deep pattern recognition.
</Tip>

### Add design instructions

The second section lets you describe your design language in text:

* Style ("minimal, lots of whitespace")
* Color ("primary is purple #6366f1")
* Typography ("Inter for UI, system fonts for body")
* Spacing ("8px base unit")
* Components ("rounded buttons, subtle shadows")
* Any specific rules or constraints

You can also attach files for CSS, tokens, or documentation, add Figma frames to import directly, or use voice input to describe your style out loud.

### Complete setup

Click **Setup design language**. Figr analyzes the uploads, extracts color, typography, and spacing, identifies component patterns, combines them with your written instructions, and generates your design language profile.

## Editing your Design Language

After setup, Figr generates a structured CSS tokens document with your design language.

<iframe title="Editing your Design Language" />

### View your tokens

Open **Design Language** in the sidebar to see your tokens organized by category: Typography, Colors Brand, Colors Neutrals, and Colors Icons. Each token carries a usage comment, like `/* Card titles */` or `/* Primary text */`.

### Edit tokens

Click **Edit** (bottom right), make changes directly in the document, and use the toolbar for headings, bold, italic, links, and lists. Click **Save changes** to apply, or **Discard** to cancel.

### Regenerate tokens

Click **Regenerate** to have Figr re-analyze your uploads, review the new document, edit if needed, then save.

## Why it matters

Generic AI output looks generic: wrong colors, wrong spacing, wrong button styles. You spend more time fixing than you saved.

With a design system imported, every design that follows uses your exact tokens, your component variants, and your spacing scale. The output looks like it belongs in your product because it uses your product's building blocks.

| Without Design System                   | With Design System                             |
| --------------------------------------- | ---------------------------------------------- |
| Generic components that need restyling  | Your actual components with correct variants   |
| Colors that miss your brand             | Your exact color tokens, applied automatically |
| Spacing that feels off                  | Your spacing scale enforced throughout         |
| Typography that needs manual fixing     | Your type hierarchy respected                  |
| Components that are not in your library | Designs that match your Figma library          |

For "Design a settings page," that is the difference between a template with arbitrary colors and default styles, and a page using your accent color, your Inter typography, your 8px grid, your button style, and your card shadows, one that looks like your product.


# Brainstorm & Thinking
Source: https://docs.figr.design/product-thinking/brainstorm

Explore ideas before committing to designs. Generate concepts, surface edge cases, think through problems. Product thinking before pixel pushing.

## What Brainstorm Does

Brainstorm helps you think through problems before jumping to solutions. It generates ideas, explores approaches, identifies considerations, and surfaces what you might miss. Brainstorm provides:

* PRDs and documentation
* Multiple concept directions
* Feature ideas and variations
* Edge case identification
* Pros/cons analysis
* Strategic recommendations

<Frame>
  <img alt="Thinkingresearch" />
</Frame>

## When Figr Uses Brainstorm

Figr engages brainstorming when you:

* Explore open-ended problems
* Ask for ideas or options
* Want to think through a feature
* Need to identify considerations
* Request multiple approaches

<Accordion title="Trigger phrases">
  ```text theme={null}
  "How should we handle..."
  "What are different ways to..."
  "Help me think through..."
  "What should we consider for..."
  "Give me ideas for..."
  ```
</Accordion>

## [​](#brainstorm-outputs) What Brainstorm Produces

<AccordionGroup>
  <Accordion title="Concept Exploration">
    Multiple directions: "Three different approaches to user onboarding:

    * Progressive disclosure wizard
    * Interactive tutorial overlay
    * Contextual tips on first use"
  </Accordion>

  <Accordion title="Edge Case Identification">
    What you might miss: "Consider these scenarios:

    * User with no data yet
    * User hitting plan limits
    * Multiple users editing simultaneously
    * Session timeout during long forms"
  </Accordion>

  <Accordion title="Trade-off Analysis">
    * **Pros and cons:** "Modal confirmation: ✓ Clear user intent ✓ Prevents accidents ✗ Interrupts flow ✗ Extra click required"
  </Accordion>
</AccordionGroup>

## From Brainstorm to Design

Brainstorm naturally flows into design.

```text theme={null}
Workflow:
1. "Help me think through a settings page" → Brainstorm
2. Review ideas and edge cases
3. "Design option 2 - the tabbed approach" → Prototype
4. Iterate based on brainstorm insights
```

***

## [​](#best-results)Getting Best Results

<AccordionGroup>
  <Accordion title="Start with Problems, Not Solutions">
    * **Less effective:** "Design a modal for confirmation"
    * **More effective:** "Users accidentally delete things. How should we handle confirmation?"
  </Accordion>

  <Accordion title="Share Context">
    * **Rich prompts:** "We're a B2B tool for enterprise teams. Help me think through role-based permissions. Current pain point: admins can't delegate."
  </Accordion>

  <Accordion title="Ask Follow-Up Questions">
    * **Go deeper:** "What about edge case #3 - tell me more" "How would approach 2 work on mobile?" "What are the risks of the progressive approach?"
  </Accordion>
</AccordionGroup>


# Prototype
Source: https://docs.figr.design/product-thinking/prototype

Generate production-ready UI designs that match your product. Not generic templates. Actual interfaces you can show stakeholders and export to Figma.

## What Prototype Does

Prototype is Figr's core design generation capability. Describe what you need, and Figr creates high-fidelity interfaces based on your product context, design language, and memory. Prototype generates:

* Complete screen designs
* Component layouts
* Multi-screen flows
* Responsive variations
* Interactive states

<Frame>
  <img alt="Prototypes" />
</Frame>

## [​](#when-figr-uses-prototype)When Figr Uses Prototype

Figr automatically engages prototype generation when you:

* Ask for a new screen or page design
* Request a feature interface
* Need UI for a specific flow
* Want to visualize a concept
* Ask for design variations

<Accordion title="Trigger phrases">
  ```text theme={null}
  "Design a settings page"
  "Create a dashboard for analytics" 
  "Build a checkout flow"
  "Show me what a notification center could look like"
  "Design the onboarding experience"
  ```
</Accordion>

***

## [​](#what-you-get)What You Get

<AccordionGroup>
  <Accordion title="High-Fidelity Output">
    Not wireframes. Not sketches. Production-ready designs. Output includes:

    * Correct colors from your design language
    * Proper typography and spacing
    * Real component patterns
    * Realistic placeholder content
    * Complete visual hierarchy
  </Accordion>

  <Accordion title="Product-Matched Designs">
    Prototypes look like they belong in your product. Figr applies:

    * Your design system tokens
    * Your component patterns
    * Your layout conventions
    * Your visual style
    * Context from memory
  </Accordion>

  <Accordion title="Export-Ready">
    Take designs directly to Figma or code. Export options:

    * One-click Figma export
    * Code export for development
    * Image downloads
    * Share links for stakeholders
  </Accordion>
</AccordionGroup>

***

## [​](#best-results)Getting Best Results

<AccordionGroup>
  <Accordion title="Be Specific About Requirements">
    * **Less effective:** "Design a dashboard"
    * **More effective:** "Design a dashboard showing: daily active users chart, recent activity feed, and quick action buttons for creating new projects"
  </Accordion>

  <Accordion title="Reference Your Product">
    * **Leverage your context:** "Using our existing card style, design..." "Match the navigation from our dashboard..." "Follow the form pattern we use in settings..."
  </Accordion>

  <Accordion title="Specify States and Variations">
    * \*\*Request complete coverage: \*\*"Design the empty state, loading state, and populated state" "Show mobile and desktop versions" "Include error handling for failed submissions"
  </Accordion>
</AccordionGroup>


# Refine Design
Source: https://docs.figr.design/product-thinking/refine-design

Make targeted improvements to existing designs. Fix specific elements, adjust styling, iterate on feedback. Precision editing without starting over.

## What Refine Does

Refine takes an existing design and makes specific changes. Instead of regenerating from scratch, it preserves what works and modifies what needs adjustment. Refine handles:

* Visual adjustments (colors, spacing, typography)
* Layout modifications
* Component swaps
* Content updates
* State additions
* Responsive adaptations

## [​](#when-figr-uses-refine) When Figr Uses Refine

Figr automatically engages refinement when you:

* Ask to change something in a generated design
* Request adjustments to specific elements
* Want to iterate on a concept
* Need to incorporate feedback
* Ask for variations of an existing design

<Accordion title="Trigger Phrases">
  ```text theme={null}
  "Make the buttons larger"
  "Change the header to use our blue"
  "Add more whitespace between sections"
  "Move the sidebar to the right"
  "Make this more minimal"
  ```
</Accordion>

## [​](#refinement-types) Types of Refinement

<AccordionGroup>
  <Accordion title="Visual Adjustments">
    * "Make the cards have more rounded corners"
    * "Increase the contrast on the text"
    * "Use a darker background"
    * "Make the typography bolder"
  </Accordion>

  <Accordion title="Layout Modifications">
    * "Stack these horizontally instead of vertically"
    * "Add a sidebar navigation"
    * "Make this a two-column layout"
    * "Move the CTA above the fold"
  </Accordion>

  <Accordion title="Component Updates">
    * "Replace the dropdown with tabs"
      * "Use toggle switches instead of checkboxes"
    * "Add a search bar to the header"
    * "Include pagination at the bottom"
  </Accordion>

  <Accordion title="Content Refinement">
    * "Use more realistic placeholder data"
    * "Make the headlines shorter"
    * "Add helper text under the form fields"
    * "Include error messages"
  </Accordion>

  <Accordion title="State Additions">
    * "Show what this looks like empty"
    * "Add a loading skeleton"
    * "Design the error state"
    * "Show the hover state for cards"
  </Accordion>
</AccordionGroup>

## [​](#best-results)Getting Best Results

<AccordionGroup>
  <Accordion title="Be Specific About What to Change">
    * **Less effective:**"Make it better"
    * **More effective:** "Increase the font size of the section headers  and add more space between the cards"
  </Accordion>

  <Accordion title="Reference Specific Elements">
    * **Clear targeting:** "Change the top navigation..." "In the sidebar, make..." "The card on the right should..."
  </Accordion>

  <Accordion title="Explain the Why">
    * "Make the CTA bigger - users are missing it"; "Add more contrast - accessibility feedback"; "Simplify the form - users abandoning halfway"
  </Accordion>
</AccordionGroup>


# Review Design
Source: https://docs.figr.design/product-thinking/review-design

Get UX audits, accessibility checks, and expert critique. Identify issues before they ship. Grounded in patterns from 200,000+ screens.

## What Review Does

Review analyzes designs and provides actionable feedback. It catches usability issues, accessibility problems, and pattern violations that humans miss. Review provides:

* UX audits and critique
* Accessibility analysis (WCAG compliance)
* Pattern consistency checks
* Usability issue identification
* Improvement recommendations

<Frame>
  <img alt="Uxreview" />
</Frame>

## When Figr Uses Review

Figr engages review when you:

* Ask for feedback on a design
* Request an audit or critique
* Want accessibility analysis
* Need to validate a approach
* Ask what's wrong or what to improve

<Accordion title="Trigger Phrases">
  ```text theme={null}
  "Review this design"
  "What's wrong with this?"
  "Check accessibility"
  "Give me feedback on..."
  "Audit this flow"
  "What could be better?"
  ```
</Accordion>

***

## [​](#review-types)Types of Review

<AccordionGroup>
  <Accordion title="UX Audit">
    Comprehensive usability analysis. UX audit covers:

    * Information hierarchy
    * Visual scanning patterns
    * Cognitive load assessment
    * Action clarity
    * Error prevention
    * User flow friction
  </Accordion>

  <Accordion title="Accessibility Review">
    WCAG compliance and inclusive design. Accessibility checks:

    * Color contrast ratios
    * Touch target sizes
    * Screen reader compatibility
    * Keyboard navigation
    * Focus states
    * Alt text requirements
  </Accordion>

  <Accordion title="Pattern Consistency">
    Does it match your product? Consistency checks:

    * Design system compliance
    * Component usage patterns
    * Spacing and alignment
    * Typography hierarchy
    * Interaction patterns
  </Accordion>

  <Accordion title="Competitive Benchmark">
    How does it compare? Benchmark analysis:

    * Industry standard patterns
    * Best-in-class examples
    * Differentiating opportunities
    * Common conventions
  </Accordion>
</AccordionGroup>

***

## Getting Best Results

<AccordionGroup>
  <Accordion title="Provide Context">
    * **Better reviews with context:** "Review this onboarding flow. Target users are non-technical small business owners. Goal is completion in under 3 minutes."
  </Accordion>

  <Accordion title="Ask Specific Questions">
    **Focused review:**

    * "Is the visual hierarchy clear?"
    * "Are the CTAs prominent enough?"
    * "Will users know what to do first?"
  </Accordion>

  <Accordion title="Request Actionable Output">
    **Actionable asks:**

    * "What are the top 3 things to fix?"
    * "Give me specific recommendations I can implement"
    * "Prioritize issues by impact"
  </Accordion>
</AccordionGroup>


# User Flow
Source: https://docs.figr.design/product-thinking/user-flow

Visualize journeys, document paths, identify gaps. See the complete picture before designing individual screens.

## What Map User Flow Does

Map User Flow creates visual representations of user journeys, process flows, and system interactions. It documents paths, identifies decision points, and surfaces missing states. Map User Flow produces:

* User journey diagrams
* Process flowcharts
* Decision trees
* State diagrams
* Information architecture maps

<Frame>
  <img alt="Userflows" />
</Frame>

## [​](#when-figr-uses-map-flow) When Figr Uses Map User Flow

Figr engages flow mapping when you:

* Ask to visualize a journey
* Need to document a process
* Want to see all paths in a flow
* Request a diagram or map
* Ask about user journeys

<Accordion title="Trigger Phrases">
  ```text theme={null}
  "Map the checkout flow"
  "Show me the user journey for..."
  "Create a flowchart for..."
  "What are all the paths through...?"
  "Diagram the onboarding process"
  ```
</Accordion>

## [​](#flow-types) Types of Flow Maps

<AccordionGroup>
  <Accordion title="User Journey Maps">
    End-to-end user experience. Journey map includes:

    * Touchpoints and interactions
    * User emotions and pain points
    * Opportunities for improvement
    * Cross-channel transitions
  </Accordion>

  <Accordion title="Process Flowcharts">
    Step-by-step process documentation. Flowchart includes:

    * Sequential steps
    * Decision points
    * Branching paths
    * Start and end states
    * Error handling paths
  </Accordion>

  <Accordion title="State Diagrams">
    All possible states and transitions. State diagram includes:

    * Every possible state
    * Transitions between states
    * Trigger conditions
    * Edge case states
  </Accordion>

  <Accordion title="Information Architecture">
    Content and navigation structure. IA map includes:

    * Page hierarchy
    * Navigation relationships
    * Content groupings
    * Cross-linking patterns
  </Accordion>
</AccordionGroup>

## Getting Best Results

<AccordionGroup>
  <Accordion title="Define Start and End Points">
    * \*\*Clear boundaries: \*\*"Map the flow from clicking 'Create Project' to seeing the new project dashboard"
  </Accordion>

  <Accordion title="Ask for Edge Cases">
    * **Complete coverage**: "Include error states and edge cases" "What happens if the user goes back?" "Show the timeout scenario"
  </Accordion>

  <Accordion title="Specify Detail Level">
    * **Right granularity:** "High-level overview of the signup journey" vs. "Detailed flowchart of form validation logic"
  </Accordion>
</AccordionGroup>


# Prompt Library
Source: https://docs.figr.design/prompt-library





# Quickstart
Source: https://docs.figr.design/quickstart

Start building awesome documentation in minutes

## Get started in three steps

Get your documentation site running locally and make your first customization.

### Step 1: Set up your local environment

<AccordionGroup>
  <Accordion title="Clone your docs locally" icon="copy">
    During the onboarding process, you created a GitHub repository with your docs content if you didn't already have one. You can find a link to this repository in your [dashboard](https://dashboard.mintlify.com).

    To clone the repository locally so that you can make and preview changes to your docs, follow the [Cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) guide in the GitHub docs.
  </Accordion>

  <Accordion title="Start the preview server" icon="rectangle-terminal">
    1. Install the Mintlify CLI: `npm i -g mint`
    2. Navigate to your docs directory and run: `mint dev`
    3. Open `http://localhost:3000` to see your docs live!

    <Tip>
      Your preview updates automatically as you edit files.
    </Tip>
  </Accordion>
</AccordionGroup>

### Step 2: Deploy your changes

<AccordionGroup>
  <Accordion title="Install our GitHub app" icon="github">
    Install the Mintlify GitHub app from your [dashboard](https://dashboard.mintlify.com/settings/organization/github-app).

    Our GitHub app automatically deploys your changes to your docs site, so you don't need to manage deployments yourself.
  </Accordion>

  <Accordion title="Update your site name and colors" icon="palette">
    For a first change, let's update the name and colors of your docs site.

    1. Open `docs.json` in your editor.
    2. Change the `"name"` field to your project name.
    3. Update the `"colors"` to match your brand.
    4. Save and see your changes instantly at `http://localhost:3000`.

    <Tip>
      Try changing the primary color to see an immediate difference!
    </Tip>
  </Accordion>
</AccordionGroup>

### Step 3: Go live

<Accordion title="Publish your docs" icon="rocket">
  1. Commit and push your changes.
  2. Your docs will update and be live in moments!
</Accordion>

## Next steps

Now that you have your docs running, explore these key features:

<CardGroup>
  <Card title="Write Content" icon="pen-to-square" href="/essentials/markdown">
    Learn MDX syntax and start writing your documentation.
  </Card>

  <Card title="Customize style" icon="palette" href="/essentials/settings">
    Make your docs match your brand perfectly.
  </Card>

  <Card title="Add code examples" icon="croissant" href="/essentials/code">
    Include syntax-highlighted code blocks.
  </Card>

  <Card title="API documentation" icon="code" href="/api-reference/introduction">
    Auto-generate API docs from OpenAPI specs.
  </Card>
</CardGroup>

<Note>
  **Need help?** See our [full documentation](https://mintlify.com/docs) or join our [community](https://mintlify.com/community).
</Note>

> sasas

<Accordion title="New Accordion" icon="sparkles">
  sasa
</Accordion>

<Steps>
  <Step title="New Step">
    sasa
  </Step>

  <Step title="why now" />

  <Step title="sasasas" />
</Steps>

<AccordionGroup>
  <Accordion title="New Accordion" icon="sparkles" />

  <Accordion title="New Accordion" icon="sparkles" />

  <Accordion title="New Accordion" />
</AccordionGroup>

<Card title="New Card" icon="sparkles">
  asas
</Card>

<Card title="New Card" icon="sparkles" />

<Card title="New Card" icon="sparkles" />


# Design Inspiration
Source: https://docs.figr.design/research/design-inspiration

Figr draws from design patterns and references to create better solutions. This happens automatically, behind the scenes, to inform every design it generates.

## What Find Inspiration Does

Find Inspiration searches for relevant design patterns, proven approaches, and visual references. But unlike a mood board tool, it doesn't show you the inspiration. It uses it internally to produce better outputs. Inspiration informs:

* Layout decisions
* Component patterns
* Visual approaches
* Interaction models
* Industry conventions

## [​](#how-figr-uses-inspiration)How Figr Uses Inspiration

When you ask for a design, Figr automatically looks for relevant patterns and references. This happens in the background to make outputs smarter.

```text theme={null}
Example:
You ask: "Design a pricing page"

Behind the scenes, Figr:
- References high-converting pricing patterns
- Considers industry-standard layouts
- Draws from proven comparison table approaches
- Applies best practices for plan presentation

You get: A pricing page informed by patterns 
that work, not generic guesswork.
```

## [​](#when-inspiration-activates) When Figr Draws on Inspiration

Figr engages inspiration gathering automatically when it helps. You don't usually need to ask for it. **Automatic activation:**

* Designing common screen types (dashboards, settings, checkout)
* Creating standard components (tables, forms, cards)
* Building industry-specific interfaces
* Generating layouts for familiar use cases

**You can also explicitly ask Figr to seek inspiration:**

* "Find inspiration for creative empty states, then design ours"
* "Look at best-in-class onboarding patterns and apply them to our flow"
* "Draw from modern dashboard designs for this analytics view"

## What You Get

You don't see the inspiration directly. You see the result: designs that are informed by proven patterns rather than invented from nothing.

| **Without inspiration**                                           | **With inspiration**                                                                                  |
| ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| Generic layouts, reinvented wheels, patterns that might not work. | Designs grounded in what's proven, informed by industry standards, building on successful approaches. |

## Getting Best Results

<AccordionGroup>
  <Accordion title="Let Figr do its Job">
    Most of the time, you don't need to ask for inspiration. Figr automatically draws from relevant patterns when generating designs.
  </Accordion>

  <Accordion title="Be Specific When Asking">
    If you explicitly want inspiration-driven output:

    * "Draw from best-in-class examples to design..."
    * "Use proven patterns for..."
    * "Apply industry best practices to..."
  </Accordion>

  <Accordion title="Trust the Output">
    The inspiration is baked into results. You won't see a mood board, but you'll see designs that feel grounded and well-considered.
  </Accordion>
</AccordionGroup>


# Understand Url
Source: https://docs.figr.design/research/understand-url

Share any link and Figr reads the content. Extract information from articles, documentation, product pages, or any webpage to inform your work.

## [​](#what-understand-url-does) What Understand URL Does

Understand URL reads and extracts content from any webpage you share. It processes the text, information, and context on the page, not the visual design. Understand URL extracts:

* Page content and copy
* Article text and information
* Documentation and guides
* Product descriptions
* Feature lists and specifications
* Any textual content

<Tip>
  **Important:** This tool is for content extraction, not visual reference. For visual design reference from a webpage, use the [Chrome Extension](/designing/input/chrome-extension) instead.
</Tip>

## [​](#when-figr-uses-understand-url) When Figr Uses Understand URL

Figr engages URL understanding when you:

* Paste a link in the query box
* Ask Figr to read or analyze a page
* Need content from a webpage as context
* Reference documentation or articles
* Share competitor product pages for information

## [​](#content-vs-visual)Content vs. Visual Reference

| **Understand URL (Content)**   | **Chrome Extension (Visual)**      |
| ------------------------------ | ---------------------------------- |
| Reading article content        | Capturing visual design patterns   |
| Extracting product information | Extracting colors, spacing, layout |
| Understanding documentation    | Referencing UI component styles    |
| Getting text-based context     | Matching visual design language    |

## [​](#best-practices)Best Practices

<AccordionGroup>
  <Accordion title="Use Full URLs">
    Provide complete links: "Read [https://docs.stripe.com/webhooks](https://docs.stripe.com/webhooks)" rather than "Look at Stripe's webhook docs"
  </Accordion>

  <Accordion title="Specify What You Need">
    Focused extraction:

    * "Read \[URL] and extract the feature list"
    * "Look at \[URL] and summarize the pricing tiers"
    * "What does \[URL] say about their API limits?"
  </Accordion>

  <Accordion title="Combine with Design Requests">
    Content-informed design:

    * "Read this documentation \[URL], then design an interface for the workflow it describes"
    * "Extract the requirements from \[URL] and create a PRD, then design the feature"
  </Accordion>

  <Accordion title="For Visual Reference, Use Chrome Extension">
    If you want to match styling:

    * **Don't**: "Look at \[URL] and match their design"
    * **Do**: Capture the page with Chrome extension, then reference the visual capture
  </Accordion>
</AccordionGroup>


# Web Search
Source: https://docs.figr.design/research/web-search

Find current information, industry data, and real-world context. Ground your designs in facts, not assumptions.

## What Search Does

Search retrieves current information from the web to inform design decisions. It finds data, benchmarks, trends, and context that make outputs more relevant and accurate. Search provides:

* Current industry data
* Competitor information
* Best practice research
* Trend analysis
* Factual verification

## [​](#when-figr-uses-search) When Figr Uses Search

Figr engages web search when you:

* Understanding the market, what needs to designed
* Existing solutions for problems
* Ask about current trends or data
* Need industry benchmarks
* Want competitive information
* Request recent examples
* Ask questions requiring current facts

## How Search Helps Design

<AccordionGroup>
  <Accordion title="Industry Benchmarks">
    Data-informed design:

    * "What's the average checkout conversion rate?"
    * "How many steps do top onboarding flows have?"
    * "What's standard for session timeout duration?"
  </Accordion>

  <Accordion title="Competitive Context">
    Market awareness:

    * "How does Stripe handle failed payments?"
    * "What patterns do top SaaS dashboards use?"
    * "How do competitors approach pricing pages?"
  </Accordion>

  <Accordion title="Evidence-based decisions">
    * "What's the recommended touch target size?"
    * "Current accessibility requirements?"
    * "Best practices for error message copy?"
  </Accordion>

  <Accordion title="Trend Awareness">
    Current patterns:

    * "What's trending in B2B SaaS design?"
    * "Current approaches to AI feature UX?"
    * "Modern patterns for data visualization?"
  </Accordion>
</AccordionGroup>


# Canonical Roles and Permissions
Source: https://docs.figr.design/yea

The single source of truth for who can do what in a Figr workspace.

This page is the single source of truth for roles and permissions in Figr. Other pages link here instead of repeating role definitions, so there is one place to keep correct.

<Frame>
  ![Permission matrix, to be added once the role model is confirmed](https://placehold.co/1600x900/EEEEEE/31343C?text=09-01-permission-matrix+\(once+confirmed\))
</Frame>

<Warning>
  PLACEHOLDER: the confirmed role matrix goes here. Do not restate roles on other pages; link back to this one.
</Warning>

Before this page is published, confirm:

* Role names
* What each role can view
* What each role can edit
* Who can invite members
* Who can manage billing
* Who can manage connectors
* Who can manage design systems
* Who can publish artifacts
* Who can delete projects

## Related

<CardGroup>
  <Card title="Inviting your team" icon="user-plus" href="/getting-started/inviting-your-team">
    Add teammates and assign a role.
  </Card>

  <Card title="Members and roles" icon="users" href="/billing-and-settings/members-and-roles">
    Manage members in workspace settings.
  </Card>

  <Card title="Publish and Share" icon="share-nodes" href="/export-and-share/publish-and-share">
    Access that depends on project roles.
  </Card>
</CardGroup>


# Figma Input
Source: https://docs.figr.design/yes

Help Figr understand your existing design work more precisely than screenshots.

Figma input helps Figr understand your existing design work more precisely than screenshots. A screenshot shows what something looks like; a Figma frame carries structure, so Figr can understand how the design is built.

Use Figma input when you want Figr to understand components, layout, typography, spacing, colors, variants, design patterns, or existing product screens.

Good use cases:

* Use an existing screen as context
* Match a design system
* Redesign a product area
* Generate new screens in the same visual language
* Export generated screens back to Figma

<Tip>
  - Share focused frames, not massive unorganized files
  - Include the closest existing product screens
  - Include component examples if visual consistency matters
  - Make sure Figr has access to the file
</Tip>

## Bring in a Figma frame

<Steps>
  <Step title="Paste your Figma link">
    Add the link to the frame or file you want Figr to use.
  </Step>

  <Step title="Open Figma Sync">
    Use the Figma Sync plugin to connect the file to Figr.
  </Step>

  <Step title="Import the frame">
    Select and import the frame so Figr can read its structure and patterns.
  </Step>
</Steps>

<Frame>
  ![Figma frame selection and import into Figr](https://placehold.co/1600x900/EEEEEE/31343C?text=05-04-figma-input.png)
</Frame>

<Note>
  \[VERIFY: confirm the current Figma access flow, frame selection behavior, and error states.]
</Note>


# Domain Auto-join
Source: https://docs.figr.design/yes-3

Let people with your company email domain join the workspace automatically.

Domain auto-join lets users with a matching company email domain join a workspace automatically, so teammates do not each need a manual invite.

<Frame>
  ![Domain auto-join settings in the workspace](https://placehold.co/1600x900/EEEEEE/31343C?text=09-02-domain-auto-join.png)
</Frame>

<Note>
  \[VERIFY: confirm whether domain auto-join is currently live, how the default role is assigned to people who join this way, and whether admins can disable it. Do not document the setup steps until this is confirmed.]
</Note>


# Usage and Audit Logs
Source: https://docs.figr.design/yes-4

Access controls and activity visibility for enterprise teams.

Enterprise teams may need more detailed access controls and activity visibility than a standard workspace.

<Frame>
  ![Audit log page showing workspace activity](https://placehold.co/1600x900/EEEEEE/31343C?text=09-03-audit-log.png)
</Frame>

Potential enterprise controls:

* Role-based access control
* Audit logs
* Activity export
* Per-seat credits
* Workspace-level permissions

<Note>
  \[VERIFY: confirm which of these controls are currently live and exactly what the audit logs include before documenting them as available.]
</Note>

## Related

<CardGroup>
  <Card title="Canonical roles and permissions" icon="shield-halved" href="/roles-and-permissions/canonical-roles-and-permissions">
    The authoritative role model.
  </Card>

  <Card title="SSO" icon="key" href="/billing-and-settings/sso">
    Single sign-on for enterprise workspaces.
  </Card>
</CardGroup>