UI/UX Design Prototyping & Design Tools Syllabus

What is a prototype 'hotspot'?

The interactive region (a frame, layer, or component) that has an interaction attached, i.e., the tappable/clickable area that triggers a prototype action.

In prototyping, what is the difference between a trigger and an action?

A trigger is the user event or condition that starts an interaction (e.g., On click, On drag, After delay); an action is what happens in response (e.g., Navigate to, Open overlay, Set variable).

List five common prototype triggers in Figma.

On click/tap, On drag, While hovering, While pressing, Mouse enter/leave, Key/gamepad input, and After delay (any five).

Name five prototype actions available in Figma.

Navigate to, Change to (variant), Open overlay, Swap overlay, Close overlay, Back, Scroll to, Open link, Set variable, and Conditional (any five).

What transition types does Figma offer between frames?

Instant, Dissolve, Smart Animate, Move in/out, Push, and Slide in/out — with configurable direction, easing, and duration.

What is the 'After delay' trigger typically used for?

Frame-level timed transitions without user input — e.g., splash screens, auto-advancing carousels, or simulating loading states. It fires once after the set time when the frame is displayed.

What is an overlay in Figma prototyping and when is it preferred over navigation?

An overlay displays a frame on top of the current screen (modal, dropdown, toast) with settings for position, background dimming, and close-on-click-outside. It is preferred when the underlying screen should remain visible and state should be preserved.

What is Smart Animate and how does it decide what to animate?

A transition that automatically animates differences between two frames by matching layers with the same name and hierarchy, interpolating position, size, scale, rotation, and opacity to create smooth motion.

What are the requirements for Smart Animate to match and animate a layer between frames?

The layer must exist in both frames with an identical name (and comparable nesting/hierarchy). Unmatched layers fade in or out instead of animating their properties.

Which easing options are available for Figma transitions?

Linear, Ease in, Ease out, Ease in and out, Ease in back, Ease out back, Ease in and out back, plus spring presets (Gentle, Quick, Bouncy, Slow) and custom bezier/spring curves.

How does conditional logic work in Figma prototypes?

The Conditional action evaluates if/else expressions against variable values (e.g., if cartCount > 0) and runs different actions per branch, enabling logic-driven prototypes like validation, toggles, and counters.

How would you prototype a cart counter in Figma using variables?

Create a number variable (e.g., cartCount), bind it to a text layer, and on the add-to-cart button use a Set variable action with the expression cartCount + 1; the bound text updates live in the prototype.

What is FigJam and how does it differ from Figma design files?

FigJam is Figma's online whiteboard for brainstorming, diagramming, and workshops. It offers sticky notes, connectors, stamps, voting, and timers, whereas Figma design files focus on high-fidelity UI design and prototyping.

Name five FigJam features built specifically for collaborative workshops.

Sticky notes, voting sessions, timers, stamps/emote reactions, cursor chat, music, and templates for exercises like retrospectives and brainstorms (any five).

What workshop activities are commonly run in FigJam or similar whiteboards?

Brainstorming/affinity mapping, user journey mapping, retrospectives, dot voting/prioritization, user story mapping, and crazy 8s ideation.

What is developer handoff in the design process?

The stage where finalized designs are delivered to engineers along with specs — measurements, colors, typography, assets, spacing, and interaction behavior — so the design can be implemented accurately in code.

What is Figma's Dev Mode?

A dedicated inspect interface for developers that exposes measurements, CSS/iOS/Android code snippets, variables/tokens, component documentation and links, ready-for-dev section markers, and asset export — without allowing accidental edits to the design.

How do slices and export settings support handoff in Figma?

Any layer or slice can carry export settings specifying format (PNG, JPG, SVG, PDF) and scale (1x, 2x, 3x, etc.), letting developers download production assets at the required resolutions directly from the file.

What is redlining in design specs?

Annotating designs with exact measurements — spacing, dimensions, margins, font sizes — traditionally drawn in red lines. Modern tools like Figma Dev Mode generate these measurements automatically on hover.

What is branching in Figma and what is it used for?

Creating an isolated copy of a file to explore or develop changes safely; when finished, the branch is reviewed and merged back into the main file — mirroring git-style workflows for design (Organization/Enterprise plans).

How does version history work in Figma?

Figma autosaves checkpoints continuously; designers can also save named versions with descriptions, browse the history timeline, restore a previous version, or duplicate one as a new file.

What happens when a Figma branch merge has conflicts?

Figma runs a review step showing the changes; if the same layers were edited in both the branch and main, the merger must choose which version of each conflicting change to keep before completing the merge.

How do comments work in Figma's feedback workflow?

Anyone with view access can pin comments to specific spots on the canvas or in prototypes, mention teammates with @, reply in threads, and mark comments resolved — keeping feedback attached to its exact context.

What are best practices for giving design feedback in a commenting workflow?

Be specific and anchored to the element, explain the reasoning or user problem (not just personal taste), suggest rather than dictate, ask clarifying questions, and resolve threads once addressed.

How does Sketch fundamentally differ from Figma?

Sketch is a macOS-native desktop app using local .sketch files, with real-time collaboration via Sketch Workspace; Figma is cross-platform and browser-based with cloud files and multiplayer editing by default. Sketch calls its containers Artboards and its reusable elements Symbols.

What are Symbols in Sketch and what is their Figma equivalent?

Symbols are Sketch's reusable master elements whose instances update when the master changes, with overrides for text and nested symbols — the direct equivalent of Figma components and instances.

What was Adobe XD and what were its signature prototyping features?

Adobe's UI/UX design and prototyping tool, notable for Auto-Animate (XD's Smart Animate equivalent), voice triggers/speech playback, Repeat Grid for duplicating content lists, and component States; Adobe put it into maintenance mode after the abandoned Figma acquisition.

What was Repeat Grid in Adobe XD?

A feature that duplicated a selected element into a grid or list by dragging handles, keeping every copy's styling synchronized while allowing unique text and images per cell — ideal for cards, lists, and tables.

What distinguishes Framer as a high-fidelity prototyping tool?

Framer produces real, production-grade interactive output: it uses actual React code and components, supports code overrides, real data, advanced animations (via Motion), and can publish fully functional responsive websites — going beyond click-through simulation.

Compare low-fidelity and high-fidelity prototyping and name a typical tool for each.

Low-fidelity prototypes are rough and fast (sketches, wireframes, FigJam/Balsamiq/Miro boards) for testing concepts and flows early; high-fidelity prototypes look and behave like the real product (Figma with Smart Animate, Framer, ProtoPie) for testing detailed interactions and visual design before development.