Figma
208 bites tagged Figma — interview questions with model answers, and 60-second explainers.
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?
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. Eyeballing instead of inspecting.
When would you wrap layers in a Frame versus a Group?
Use a Frame when you need Clip content, scroll overflow, or constraints on children. Whether you know Frames have bounds, clipping, and scroll overflow while Groups do not.
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 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?
Primitives and Semantic collections with theme modes; pipeline to CSS variables; components use semantic tokens only. Token architecture bridging Figma modes to code.
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.
What is a design system's purpose and how does it enforce consistency?
This tests if you see a design system as a single source of truth for design, not just a UI kit. A strong answer cites components and style guides that standardize output. Calling it only a Figma file without developer adoption is a red flag.
Section-Scoped Variable Modes in Figma
A Figma section acts as a local variable mode override, letting you park dark-mode beside light-mode on the same page. Watch out for nested sections: conflicting mode overrides stack silently, and the deepest scope always wins without warning.
Generative AI Plugins in Figma
Figma AI plugins are a junior designer on demand: prompt for UI, copy, or images and get editable layers. Use them to unblock frames. Never ship raw output; generated layers break auto-layout and ignore accessibility, so treat them as scratchpads, not specs.
Real Data Exposes Design Flaws Early
Real data replaces lorem ipsum to stress-test layouts before code exists. A 60-character German product name breaks your card, or a portrait photo lands in a landscape frame. Designers curate perfect data and miss edge cases real content surfaces.
Multi-Edit: Type Once, Update Everywhere
Multi-edit lets you type into several text layers at once, like a keyboard wired to multiple screens. Use it to rename buttons across a flow or update labels before componentizing. It is a one-off bulk edit, not a persistent link, so missed layers stay stale.
Figma Command Palette: A Universal Remote
Figma's Command Palette is a searchable speed dial: press Cmd/Ctrl + P to jump pages, run plugins, or tweak layers without the mouse. It rescues you from nested submenus mid-flow. The footgun is memorizing shortcuts you could simply type to find.
Gamified Prototypes: Test Loops Before Code
A gamified prototype tests motivation loops without code. In Figma, you simulate points and badges with variants and Smart Animate to validate reward timing before engineers build scoring logic.
Simulate Form Validation in Figma
A form prototype is an interactive script, not a picture. You pre-build every state — empty, typing, error, success — and link them so stakeholders feel validation timing before engineers code it. The trap is logic you cannot maintain across design changes.
Figma Variable Modes for Multi-Context Theming
Variable modes let a single token hold different values for different contexts, like light and dark themes. Apply a mode to a frame and every token inside swaps instantly. The footgun is treating modes as component states, which creates a combinatorial mess.
Figma Boolean Variables: State Without Variant Sprawl
A boolean variable is a light switch for your component: one true/false value reveals badges or loaders instantly. Use it for binary states like visibility across a system. The trap is wiring too many switches into one component, making debugging a hunt.
Dynamic Counter: State in Figma
A dynamic counter wires a number variable to a text layer, letting taps change the value. Use it for quantity steppers or pagination in prototypes. The footgun is skipping the text-to-variable binding, so clicks fire but the on-screen number never updates.
Figma Branch Reviews: Merge Gates for Design
A Figma branch review is a merge gate: reviewers diff changes against main and approve before merge. Use it when designers share a system or a lead must sign off. The footgun is rubber-stamping and missing broken component links that corrupt the main file.
Figma File Covers as Status Billboards
A Figma cover page turns your file thumbnail into a status billboard, showing if a design is draft or ready for dev without opening it. Teams with many files use covers as scannable dashboards. Outdated badges send developers hunting for nonexistent specs.
Handoff Plugins Bridge Figma to Code
Handoff plugins are automated translators between Figma and code, turning visual specs into tokens or components. They speed up design systems where manual inspection is a bottleneck. The footgun is treating generated output as production-ready without review.
Conditional Logic in Figma Prototypes
Conditional logic turns static click-throughs into state-aware flows. Use it to unlock a button only after form fields are valid, or to branch checkout based on payment method. The footgun is building a brittle fake app instead of a focused testable flow.
Get Figma bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.