How do you turn two Figma screens into a flow?
Start in a Figma Design file. Draw one screen for the action and one for the result. Figma calls each screen container a frame. Connect the action on the first frame to the second in the Prototype tab and open Present to try it.
For a library loan, put “Extend my loan” next to the current return date. Connect it to a second frame that shows the new date. Add a separate outcome for an unavailable date. If people tap the date itself first, note where they expected to act and revise the layout or wording.
Use made-up records. Figma lets you try the navigation and show feedback. Check the real loan record later in the running app.
How do you save a Figma design outside the workspace?
Use File → Save local copy to save a .fig file if the owner allows copying. Reimporting it in Figma creates a new file. Keep a separate copy of any review decisions you want to carry forward.
| Item | What it carries |
|---|---|
| Local .fig file | Editable Figma Design work. The copy leaves out comments and version history and is separate from the original file. |
| Static PNG, JPG, SVG or PDF export | A picture, vector asset or document, depending on the format. Keep a clickable review separately. |
| Short handoff note | The approved wording, where an existing component should be reused and what happens when the action fails. |
When does a Figma Design project need a paid seat?
Start with the free Starter plan for a personal draft and a clickable flow. If someone else needs to edit the same file, check the shared-folder limits and permissions. Starter drafts can be shared with viewers.
Figma prices paid access by seat type. Check which collaborators need to edit in Figma Design, which need design inspection and which only need to view. The price depends on the plan, seats and billing term. Review the current quote before inviting people who need paid access.
What should the builder verify after the Figma handoff?
Hand over the approved frame, narrow layout, failure example and the result you expect to see after saving. Ask the builder to show the actual behavior in a test copy.
A compatible coding tool can use structured Figma design context if it has access. A frame or exported asset is also a useful reference. In either case, check that the implementation reuses the app’s existing parts, works by keyboard and keeps the original loan date when the app rejects a change. If the browser gets no reply, show the last confirmed date and check the saved loan. Offer a retry only after confirming the change did not go through.
Where can you learn the next steps?
- Compare ways to move a Figma design into codeChoose what design context to send, test one screen’s states and inspect what the code reuses.