All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4330 bites
Page 29
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 apply systematic rules to asymmetrical layouts predictably?
Grid and spacing tokens as guardrails; deliberate ratios create asymmetry, not random offsets; engineers get rules, not pixels.
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.
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.
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.
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 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 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 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.
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 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.
Profile card with nested Auto Layout sizing
Outer vertical frame set to fixed width and hug height, an inner horizontal frame for avatar and name, and a bio text set to fill width and auto-height so the card grows down.
When would you use absolute position in an Auto Layout frame?
Absolute position lets badges float without pushing siblings; standard flow stacks sequentially and prevents overlap.
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.
Structure a responsive nav bar using variants and Auto Layout
One component set with desktop/mobile variants; horizontal Auto Layout with wrap for links, then hamburger and vertical overlay.
Build a responsive feature grid with nested Auto Layout and component properties
This tests nested Auto Layout fluency for responsive grids. Strong answer: vertical section frame with wrapping horizontal row, cards with 280 px min widths, and component properties to swap content. Red flag: duplicating static artboards per breakpoint.
Create a button component with default, hover, and disabled variants
This tests Figma component variants and prototyping. A good answer: create a component set with a State property, build default, hover, and disabled variants, wire Change to with While hovering. Red flag: separate components instead of one variant set.
What is the most efficient way to update a brand color globally?
This tests Figma variables versus styles for design system maintenance. Store the brand color as a variable, apply it across components, and edit the value once for global propagation. Red flag: manual updates or using a color style for a single raw value.
Super button versus composition: discuss trade-offs and scalability
Tests combinatorial explosion and API trade-offs in design systems. Contrast the super button's exponential growth with composition's explicit APIs and linear scalability, noting governance needs. Red flag: absolutism or ignoring type safety and tree-shaking.
Make a Figma button navigate from Frame A to Frame B
Tests hands-on Figma prototype workflow. Good answer: enter Prototype mode, select the Login button, drag the interaction noodle to Frame B, set trigger to On Click and action to Navigate To.