Figma Make: build a prototype that survives the second click

In this guide

1. The useful starting point
2. Begin with the decision you need to make
3. 1. Write the prototype brief
4. 2. Review the first version for behavior
5. 3. Revise a specific element
6. 4. Run a short learning session
7. 5. Hand off the difference between simulated and real
8. Sources and further reading

The useful starting point

Give Figma Make a specific task, relevant design context, and a state list. Test the full interaction before refining the visual treatment.

Begin with the decision you need to make

Suppose your team is deciding whether people can choose the right introductory appointment without assistance. Build enough of that flow to study the choice. Adding a dashboard, billing area, and profile editor creates more surface area without answering the question.

Figma describes Make as a prompt-to-app tool. It can use attached designs and other context to generate an interactive prototype or web app. Structured frames can provide more context than screenshots. Access and available features depend on your current account; use the official creation guide linked below.

1. Write the prototype brief

State the audience, task, entry point, success condition, and exclusions. For our fictional studio: a first-time visitor compares two appointments, chooses a date, enters contact details, and reaches an explicitly simulated confirmation. Use sample data and label the experience as a prototype.

Create a test prototype for a fictional design studio. Task: choose a suitable introductory appointment. Include two appointment options, date selection, contact details, and a simulated confirmation. Use these attached frames as visual context. Add unavailable-date, invalid-email, loading, and failed-submit states. No real booking, payment, or outbound email.

2. Review the first version for behavior

Walk through the task without reading the prompt again. Can you tell which appointment suits you? Can you move back without losing the date? Does a failed submit preserve the email? Write these observations before asking for refinements; otherwise the conversation can become a stream of unrelated visual requests.

3. Revise a specific element

Use a targeted edit or an annotation where supported rather than asking to “make it better.” Explain the observed problem, the intended behavior, and what should remain consistent.

On the contact-details step, the validation message appears far below the email field. Place the explanation next to that field, preserve entered values, and make the next action clear. Keep the appointment selection and visual system unchanged.

4. Run a short learning session

Ask a relevant participant to choose an appointment that fits a stated need. Avoid mentioning the button label. Observe decisions and recovery, then ask what they expected. Record findings with the prototype version; do not turn a rehearsal with an AI assistant into participant evidence.

5. Hand off the difference between simulated and real

List which behaviors use sample data and which require a production service. A working-looking form does not establish booking persistence, delivery, authorization, or error handling in a deployed application. Give the next builder a state inventory and acceptance checks, not just a preview URL.

Continue with the one-workflow product guide when you are ready to make the prototype real.

Sources and further reading

• Figma: create a Figma Make file
• Figma: explore Make
• W3C: evaluating web accessibility

Sources checked November 4, 2026. Review the linked publisher information for current details.

Put one idea to work

Take the next step with a practical worksheet, a clear research question, and a standard you can use to review the work.

Explore design worksheets →Explore more from UX Design CoachGet design practice in your inbox →