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

# Sketch wireframes

*Explore layouts quickly before you commit to visual design.*

Wireframes help you agree on structure and content before colour, type and components come in. Use them early, when you want to compare a few layouts or get feedback without the distraction of polish.

**1. Describe the screen**

Tell Figr what the screen is for and what it needs to show. For example: "Wireframe a a few layout options we could show order tracking for the clothes."

> [!TIP]
>
> Keep wireframe prompts about structure and content, not style. Save colour and visual feedback for the high-fidelity version.

**2. Attach your Context Pod**

Select your pod in the chat so the wireframe reflects your product's real content and structure.

**3. Review the wireframe on the canvas**

Figr creates a low-fidelity layout you can scan in seconds.

![Screenshot 2026 10 21 At 3 22 52 PM](https://mintcdn.com/figr-1af7ae64/GFl9SXL01D1q0Z7d/images/Screenshot-2026-10-21-at-3.22.52-PM.png?fit=max\&auto=format\&n=GFl9SXL01D1q0Z7d\&q=85\&s=d70c47353ae7b2eddcf00b1bf96fb4fe)

**4. Ask for alternatives**

Request a different layout to compare side by side. For example: "Show two more layout options with the task list as the main focus."

**5. Turn the one you like into a design**

Attach your design system and ask Figr to turn the wireframe into high-fidelity prototyped screens and add missing screens and states.

![Screenshot 2026 10 21 At 3 24 12 PM](https://mintcdn.com/figr-1af7ae64/GFl9SXL01D1q0Z7d/images/Screenshot-2026-10-21-at-3.24.12-PM.png?fit=max\&auto=format\&n=GFl9SXL01D1q0Z7d\&q=85\&s=225d707c90106bbd401de111223dd43b)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.