Design and UX
Prototyping and design tools
A prototype is a question you can hand to someone. Paper sketches, clickable wireframes and near-final simulations each answer a different one, and the craft lies in building no more fidelity than the question needs. This topic covers that loop and the tools that carry it, from Figma and Sketch to Framer and Adobe XD, treating each as part of the landscape, not as a verdict on which to buy.
Why this topic exists: Figma, Sketch, Adobe XD and the prototyping loop from paper to clickable: NN/g's Prototyping topic; Udemy's Design Tools shelf; the third and fifth courses of Google's UX programme.
Every prototype exists to answer a question more cheaply than building the real thing would. Does anyone understand this navigation? Is the new checkout shorter than the old one? Will the sponsor approve this direction? The Interaction Design Foundation sorts prototypes into low, mid and high fidelity, and Nielsen Norman Group files prototyping among its research topics, not under visual design. That placement is the right instinct: a prototype is a test instrument first and a drawing second.
Match the fidelity to the question
| Fidelity | Typical form | Good at testing | Poor at testing |
|---|---|---|---|
| Low | Paper sketches, whiteboard flows, grey-box wireframes | Structure, order of steps, whether the idea makes sense at all | Visual appeal, fine interaction, familiar interface patterns |
| Mid | Clickable wireframes with real labels and little styling | Navigation, wording, whether people finish the task | Emotional response to the brand, motion |
| High | Near-final screens with interaction and real content | Detailed usability, sign-off, developer hand-off | Big structural questions, because people react to the polish |
The usual error runs one way: too much fidelity too early. A polished screen draws comments about colour when the real question was whether the flow should exist, and the hours invested make the designer reluctant to bin it. Google's UX programme follows the right order, with a course on wireframes and low-fidelity prototypes well ahead of the one on high-fidelity work in Figma, which is the tool the Google UX Design certificate teaches.
Judging the tools
Figma, Sketch, Framer and Adobe XD all combine drawing, reusable components and a prototyping mode, and they differ in platform, collaboration model and how close their output sits to production. None of them is the right answer for everyone; the questions below separate them for a given team.
- Components and variants: the raw material of a design system, and how easily they update across files.
- Prototyping depth: simple links between screens, or conditions, variables and motion.
- Collaboration: live co-editing, comments and version history for non-designers.
- Hand-off: how developers read spacing, tokens and assets without asking.
- Kits and templates: starter files and web templates that save setup time, provided their licence covers client work.
Write the question on the file
Put the question a prototype must answer, and the fidelity that answer needs, as the file's first line before you start. When testing has answered it, stop polishing and move on. Paper still belongs in the kit: five minutes of sketching explores more layouts than an hour of dragging rectangles.
Prototyping leads naturally into UX research, where prototypes meet users, and into design systems, where the components become shared infrastructure for a whole product team. Designers who enjoy the interactive end of the work often go further into motion and logic, building prototypes realistic enough that developers treat them as a specification. That is valuable, as long as the team remembers a convincing simulation is still not a tested product.
Next to this topic
- UX researchInterviews, usability tests, surveys, analytics and when to use which: NN/g's Research Methods and User Testing topics; SFIA User research; the fourth course of Google's UX programme.
- UX and interaction designInformation architecture, flows, patterns and the behaviour of interfaces: NN/g's Interaction Design and Information Architecture topics, IxDF's UX and HCI literature, SFIA User experience design.
- UI and visual designLayout, typography, colour, hierarchy and the craft of the screen: NN/g's Visual Design topic, IxDF's UI design, colour theory and Gestalt literature.
- Design systemsTokens, components, documentation and governance so that many hands ship one product: the site's design-system concept, IxDF's brand-guidelines literature, and the meeting point with front-end code.
- Accessibility in designWCAG's four principles and conformance levels, assistive technology and inclusive design: NN/g's Accessibility topic, SFIA Accessibility and inclusion, W3C WAI.
- Graphic design and illustrationComposition, type, image and print, and the Adobe and Affinity toolchain: SFIA Graphic design; IxDF's graphic design literature; Udemy's largest design shelf after 3D.
- 3D, animation and motion designModelling, rigging, rendering and motion in Blender, Maya, 3ds Max, ZBrush, After Effects and Cinema 4D: SFIA Animation development; Udemy's largest design shelf.
- Web designLayout for the browser, responsive design, WordPress themes and the hand-off to code: Udemy's Web Design shelf; the programming field owns the build.
- Design assets and licensingTemplates, stock media and fonts, and the licences that decide what you may do with them: the site's design-assets concepts and the /digital-assets/ partner picks.
- Design thinking and service designProblem framing, ideation and the end-to-end service: IxDF's design-thinking and service-design literature; NN/g's Design Process and Customer Journeys topics; SFIA Customer experience.
Concepts to know
Glossary entries with the reason each one matters here.
- Design system
Tools are where systems are built.
- Template
Kits and templates inside the tools.
Certifications that test it
Vendor exams and free certificates; facts, cost and the preparation path are on each page, and the certifications hub has them all.
Tools of the trade
- Figma
The design tool of the decade.
Frequently asked
- Which design tool makes a sensible first one to learn?
- Whichever one the job advertisements in your market name most often, since hiring teams expect to share files with you. The principles of components, layout and prototyping carry across, so switching later costs weeks rather than starting over. Avoid spending months comparing tools instead of designing.
- Is a wireframe the same as a prototype?
- Not quite. A wireframe is a static drawing of a screen's structure. It becomes a prototype once it can be used to test something, for example by linking screens so a person can click through a task. Many low-fidelity prototypes are simply connected wireframes.
- Can I prototype without design software?
- Yes. Paper, sticky notes and a pen are enough for early tests, and a person moving paper screens in response to taps can simulate a flow convincingly. Software becomes worthwhile when you need realistic interaction, remote testing or a file developers can build from.
Courses in the directory
826 courses are filed here; the top 6 by our ranking, details and the provider link on each course page.
Last reviewed 26 September 2026 · Getting Digital