# Use Figma for design prototyping

* **Status:** Active
* **Last Modified:** 2026-04-27, 2023-07-03
* **Related Issue:** [#103](https://github.com/HHS/simpler-grants-gov/issues/103)
* **Deciders:** Andy, Emily, Lucas
* **Tags:** design

## Context and Problem Statement

Which tool should be used for wireframing and prototyping? The tool should facilitate design conversation, be easilty integrated into research activities, and provide artifacts for stakeholder review.

## Decision Drivers

* Platform availability
* Live collborative editing
* assets can be integrated into design research tools
* tool and assets must be accessible to internal partners (HHS or employed by HHS) and external partners (general public).
* Nava familiarity

## Options Considered

* Figma
* Adobe XD
* Sketch
* Invision Studio

## Decision Outcome

Chosen option: Figma, because it is not platform specific and its multi-user collaboration allows for easy remote pairing. It's assets can be easily shared, embedded, or integrated into research tools. Additionaly, Nava has the most familiarity with this option.

**Update (Aug 26, 2025):** Designers should have a "Full seat." Engineers and Product Managers should have a "Dev seat."

**Update (Apr 27, 2026):** Frontend implementation tickets in GitHub should include screenshots that detail the exact design changes. Figma is a living document. Screenshots help us focus on the changes outlined in the GitHub Issue and avoid distraction of unrelated changes. This is especially important for open-source contributors since we now use Dev Mode, which is not accessible to anyone without a license. 

### Positive Consequences

* Truss has developed [Figma assets using USWDS](https://www.figma.com/community/file/836611771720754351/U.S.-Web-Design-System-\(USWDS\))
* Figma's free tier does not require FOSS contributors to purchase licenses
* Figma has a robust community of plugins and integrations
* Includes Figjam (tho this may be redundant, depending on chosen whiteboarding tool)

### Negative Consequences

* Collaborative nature of Figma requires connectivity and working online
* Tho version control and file management is possible, it can be difficult to track *who* made recent changes

## Pros and Cons of the Options

### Figma

* **Pro**
  * Browser-based (works on Mac, Windows, Linux…)
  * Free forever
  * Nava familiarity
  * Robust plugin community
* **Cons**
  * Limited files (3) in free tier
  * Requires internet connectivity

### Adobe XD

* **Pro**
  * Part of Adobe Creative Suite
* **Cons**
  * Native app, not browser-based
  * No free tier (7-day trial)

### Sketch

* **Pro**
  * Lowest subscription cost
* **Cons**
  * Mac only (nonstarter?)
  * No free tier (30-day trial)

### Invision Studio

* Nonstarter: [tool is being sunset](https://help.invisionapp.com/hc/en-us/community/posts/11525657213965-SUNSET-NOTIFICATION-Studio)

## Links

* [Figma pricing](https://www.figma.com/pricing/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.simpler.grants.gov/product/decisions/adr/2023-07-03-design-prototyping-tool.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.