More in UI Design & Figma — page 6
Structure a responsive nav bar using variants and Auto Layout
Tests component architecture and responsive layout. ANSWER: One component set with desktop/mobile variants; horizontal Auto Layout with wrap for links, then hamburger and vertical overlay. RED FLAG: Using separate components instead of variant-driven states.
How would you configure a wrapping filter tag container and its properties?
This tests horizontal wrap vs grid and tuning container and child resizing. Set the container to horizontal auto layout with wrap, adjust spacing and padding, and set tags to hug contents. Red flag: confusing wrap with grid or suggesting manual breaks.
When would you use absolute position in an Auto Layout frame?
WHAT IT TESTS: When to escape Auto Layout flow for overlaps. ANSWER OUTLINE: Absolute position lets badges float without pushing siblings; standard flow stacks sequentially and prevents overlap. RED FLAG: Using spacer hacks instead of the absolute toggle.
How do Hug, Fill, and Fixed resizing behaviors interact?
This tests constraint-based size propagation. Define Hug as shrink-wrapping, Fill as stretching to the parent, and Fixed as explicit; note a Hug parent expands for Fixed or Hug children, but Fill needs a defined parent size.
Difference between 'Space between' and fixed spacing in Auto Layout
Tests your grasp of distribution logic versus fixed gaps. Fixed spacing sets a constant pixel gap; Space between splits free space to push items to edges. Use fixed spacing for lists, Space between for wide toolbars. Red flag: calling them interchangeable.
How would you use Auto Layout for a button with optional icon?
This tests Figma Auto Layout for responsive components. Answer: apply horizontal auto layout, set fixed padding and spacing, set text to hug contents, and set the frame to hug so it resizes when text changes. Red flag: using fixed widths or manual resizing.
How would you structure Figma colors for light and dark themes?
Fluency with token layers and Figma's mode-aware raw values. Use aliased color variables for semantics, switch themes via variable modes, and apply variables to styles not relying on styles for modes. Suggesting styles handle theming instead of variables.
How do you pin a Close icon to a modal's top-right corner?
This tests Figma constraint knowledge for responsive resizing. A strong answer sets horizontal to Right and vertical to Top so the icon pins to the corner as the modal resizes.
How do you build a responsive card with Auto Layout?
Tests nested Auto Layout and resizing logic. Answer: vertical hug frame, nested vertical text stack with hug height, image set to fill width, plus padding. Red flag: fixed-height text or absolute positioning breaks responsiveness.
How would you inspect a Figma text element for CSS properties?
WHAT IT TESTS: Your Figma-to-CSS typography workflow. A good answer selects the layer, opens the Properties tab or Dev Mode, reads font family, weight, size, line height, and letter spacing, and uses Copy as code. RED FLAG: Eyeballing instead of inspecting.
When would you wrap layers in a Frame versus a Group?
WHAT IT TESTS: Whether you know Frames have bounds, clipping, and scroll overflow while Groups do not. ANSWER OUTLINE: Use a Frame when you need Clip content, scroll overflow, or constraints on children.
How do you optimize nested Auto Layout for performance?
Tests architectural restraint and layer complexity in Figma. Strong answers use Grid and Wrap to avoid deep nesting, remove redundant groups, and favor component instances. Red flag: proposing invisible spacers or manual positioning hacks.
How do you apply systematic rules to asymmetrical layouts predictably?
WHAT IT TESTS: Boxing visual tension with rigid rules. ANSWER OUTLINE: Grid and spacing tokens as guardrails; deliberate ratios create asymmetry, not random offsets; engineers get rules, not pixels.
How do you enforce proximity with Figma Auto Layout and spacing variables?
Tests translating Gestalt proximity into systematic spacing. Strong answers map t-shirt scales to Auto Layout gap and padding, then bind them to Figma spacing variables. Red flag: confusing proximity with alignment or manual nudging.
How do you build a responsive Figma component across breakpoints?
Tests Figma auto layout and constraint logic for responsive components. Strong answers mention nested frames, hug/fill modes, breakpoint variants or variables, and resizing previews. Red flag: copying static frames instead of using constraints.
How would you structure a multi-theme color system in Figma and CSS?
WHAT IT TESTS: Token architecture bridging Figma modes to code. ANSWER OUTLINE: Primitives and Semantic collections with theme modes; pipeline to CSS variables; components use semantic tokens only.
How would you optimize and implement a full-bleed responsive hero image?
WHAT IT TESTS: responsive image delivery and performance budgeting across breakpoints. ANSWER OUTLINE: use srcset with AVIF/WebP, CSS object-fit cover, and width/height to prevent CLS. RED FLAG: serving one 4K JPEG as a background image with no size hints.
Assess WCAG AA contrast for light grey text on off-white
Tests your fluency in WCAG relative luminance and design collaboration. A strong answer extracts sRGB values, computes contrast ratio, checks 4.5:1 or 3:1 by text size, and suggests a darker tint preserving hue.
How would you establish a modular typographic scale for a design system?
This tests systems thinking and contextual ratio choice. A strong answer picks a ratio by contrast—high for marketing, low for dashboards—rounds values, adds sizes for dense UIs, adjusts base size across breakpoints.
Line-height vs letter-spacing: impact on readability and values for body vs headings
This tests whether you distinguish vertical rhythm from horizontal glyph spacing. A strong answer sets body line-height to at least 1.5x per WCAG with minimal tracking, while headings use tighter line-height and tighter tracking. Red flag: identical values.