Figma Onboarding Flow Wireframe Brief and Annotations
Plan a first-run experience for a product.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
Write a brief for onboarding screens in Figma. Product and new user goal: [PRODUCT_AND_GOAL]. First key action that shows value: [KEY_ACTION]. Information we need from users: [INFORMATION_NEEDED]. Constraints: [CONSTRAINTS]. Specify the flow with at least six screens in a table: Screen, Purpose, Content, Primary action, Secondary action, Error and empty states, and Annotation for developers. Include a welcome, only the set-up steps needed to reach the first success, permission requests with the reason given just in time, empty states, progress indication, skip options and a completion screen. Remove every step that does not help the user reach value. Write the microcopy for the welcome screen, one permission request with its reason, and the completion screen. Add accessibility notes for each screen. Measurement: track events at each step without personal data; the completion rate per step is users reaching the next step divided by users reaching the step, plus time to first success. Worked example: 400 sign-ups, 330 complete step one, 280 step two, 260 step three, and 260 reach the key action (65 percent); the largest loss is between sign-up and step one (70 users, 17.5 percent), so examine that screen first. Provide hypotheses, a usability test script of five tasks with questions for five users, what to measure after release and how long to wait before judging, and open questions for product and engineering.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.