Create High-Fidelity Designs and Prototypes in Figma
This domain tests visual design fundamentals, accessible high-fidelity execution, design systems, and the Figma mechanics that turn static mockups into interactive prototypes ready for developer handoff.
Visual design fundamentals
Typography: serif, sans-serif, display, and script typefaces; build hierarchy with size and weight; 1.4–1.6 line height for body text; limit to two or three typefaces. Color: hue, saturation, value; the 60-30-10 rule for dominant, secondary, and accent. Layout and spacing: an 8-point grid and consistent padding. Iconography and imagery carry meaning and must have accessible alternatives.
Accessibility in high fidelity
WCAG AA requires 4.5:1 contrast for normal text and 3:1 for large text (18pt, or 14pt bold) and for UI components and graphical objects. Never use color alone to signal state; add text, icons, or pattern. Provide alt text and visible focus states.
Design systems and Figma
Design systems package reusable components, variants, styles, and shared libraries; examples include Material Design, Apple’s Human Interface Guidelines, and Fluent. In Figma, know frames versus groups, constraints, auto layout, components and instances, variants, color/text/effect styles, shared libraries, and prototyping with triggers, smart animate, overflow scrolling, and interactive components. A mockup is static; a prototype adds navigation and interaction.
Worked example
A fintech app builds a Card component: variants for default, pressed, and disabled; text properties for the amount; auto layout with 16 px padding; color styles pulled from the shared library. The team checks secondary text #767676 on white - 4.54:1, which passes AA - and confirms the disabled state is not signaled by color alone. Prototype links card → detail with smart animate, and the list uses overflow scrolling. Handoff includes redlines and documentation for each variant.
Traps
Signaling status with color only. Low-contrast secondary text. Inconsistent spacing that breaks the grid. Detached instances that stop receiving library updates. Prototyping before components exist. Omitting accessibility annotations from handoff.