Figma interview questions and answers

Answer: C. A ConfigMap

A ConfigMap stores non-confidential key-value configuration that Pods read as environment variables or mounted files. This keeps config out of the image, so one image can move through every environment. Passwords and tokens belong in a Secret or an external secret store instead.

Answer: D. Create one button component set with variant properties such as type and state

Variants keep related versions in one component set with clear properties, so designers switch type or state in the properties panel. Changes to the main component update every instance.

Answer: D. The card becomes a plain frame and stops receiving component updates

Detaching turns the instance into an ordinary frame with no link to the main component. Future fixes, such as a new colour or spacing change, will not reach it, so the screen slowly drifts from the system. Library analytics count detaches because they often point at a missing option in the component.

Answer: C. Adding a text component property linked to the label layer

A text component property surfaces the chosen text layer as an input field on every instance. People change the label in the panel, and the override is kept when the main component is updated.

Answer: C. An instance swap property on the nested icon instance

An instance swap property exposes a nested instance so it can be replaced with another component, optionally limited to a set of preferred values. Making 300 variants instead would be unmanageable.

Answer: A. The button grows wider so the padding around the label stays 16

Hug contents makes the frame size itself to its children plus padding, so longer text gives a wider button. Fixed would keep the width and let text overflow, and Fill container would stretch it to the parent.

Answer: B. It groups them into nested folders: Icon, then Arrow

Figma reads slashes in component and style names as a folder path, so assets appear grouped as Icon > Arrow > Left. Variants are created by combining components into a component set, not by naming alone.

Answer: B. An interactive component: a hover interaction between the variants

Interactive components let you add prototype interactions between variants of the main component, such as "While hovering, change to State=Hover". Every instance then behaves that way in prototypes automatically.

Answer: D. Open overlay, with a background dim setting

Open overlay shows a frame above the current screen, with options for position, closing when clicking outside and a dimmed background. Navigate to would replace the screen, which loses the sense of a dialog over the page.

Answer: A. Set the header's scroll behaviour to Fixed (or Sticky)

Each layer inside a scrolling frame has a scroll behaviour. Fixed keeps it on screen while content scrolls underneath, and Sticky keeps it in flow until it reaches the top. Locking a layer only stops it being edited.

Answer: B. Every instance updates, apart from overridden properties

Instances inherit changes from their main component. Properties you have overridden on an instance, like its label text, are kept. This is what makes design systems in Figma scale.

Answer: A. Share a link with view or comment access

Figma runs in the browser, so a shared link lets clients view, comment and even open prototypes. Comments are pinned to the exact spot, which keeps feedback clear.

Answer: B. 120 variants, dropping to 60 with a boolean

Variants multiply: 4 × 3 × 5 × 2 = 120. A boolean property toggles layer visibility inside each variant, so the Icon dimension no longer multiplies the set, leaving 4 × 3 × 5 = 60. Fewer variants make the component lighter and easier to maintain.

Answer: B. The label layer has a different name in the Large variant

Figma keeps overrides when you swap variants by matching layers with the same name and hierarchy. If the label is called "Label" in one variant and "Text" in another, the match fails and the default text returns. Consistent layer names across variants fix it.

Answer: C. Set the dot to absolute position in the frame

Absolute position takes a child out of the auto layout flow, so it can be placed freely and pinned with constraints while the other children stay in order. This is like position: absolute inside a relatively positioned parent in CSS.

Answer: A. Give the card a max width, like CSS max-width

Auto layout supports min and max width and height. A max width lets the card fill smaller containers but stop growing past a readable size, which matches max-width in CSS and keeps the design spec close to the real behaviour.

Answer: B. Set variable scopes so each variable shows only for its use

Variable scoping lets you say where a variable may be applied, for example only gap and padding, or only corner radius. Pickers then show just the relevant options, which reduces mistakes like using a spacing value as a radius.

Answer: C. letter-spacing: -0.02em

Figma's percentage letter spacing is a share of the font size, which is exactly what em means in CSS. So -2% becomes -0.02em. A fixed px value would only match at one size, and percent is not valid for letter-spacing in CSS.

Answer: B. Talk to the teams detaching it to learn what option is missing

A 45% detach rate signals the component does not meet real needs, for example a missing search field or multi-select. Learning why from the people detaching it tells you which variant or property to add, which is better than forcing or ignoring them.

Answer: A. Font family, size, weight, line height and letter spacing

A typography style is a composite: changing the size without its line height or weight breaks the look. Defining all these properties together, often as a composite token that references primitive values, keeps design and code text styles in step.

Answer: A. Separate libraries for foundations, components and icons

Splitting into a foundations library (variables, styles), a components library that uses it, and an icon library keeps files smaller and lets teams enable only what they need. Updates to icons, for example, do not force a republish of every component.

Answer: C. Auto layout set to hug contents

Auto layout frames resize based on their content with set padding and spacing. Set to hug contents, the button grows or shrinks with its label, and the spacing stays consistent.

Answer: B. One component set with variant properties

Variants group related versions into one component set with properties such as State and Size. Designers switch between them in the properties panel, and developers can map them to code props.

Answer: D. Colour variables with light and dark modes

Figma variables can hold different values per mode. Linking fills to colour variables with Light and Dark modes lets you switch a frame's theme instantly, which matches how code uses design tokens.

Answer: D. ISRs that call FreeRTOS APIs must have a priority numerically equal to or above 5, so the kernel can mask them

FreeRTOS protects its data by masking interrupts at or below configMAX_SYSCALL_INTERRUPT_PRIORITY. An ISR at priority 0 is never masked, so it can interrupt the kernel mid-update and corrupt lists. Give such ISRs priority 5 or a numerically higher value; keep priority 0 for ISRs that never call the kernel. configASSERT catches this.

Answer: C. Priority 2 is more urgent than the limit, so it may not call RTOS APIs

On Cortex-M a lower number means a higher priority. FreeRTOS masks interrupts only up to the syscall limit; an ISR with a more urgent priority (numerically lower, like 2) can interrupt kernel critical sections, so it must not call any API. Set the ISR priority to 5 or a higher number.

Answer: C. Levels 5 to 15

On Cortex-M, lower numbers are more urgent. The kernel masks levels 5 and above (numerically) in critical sections, so only those can safely call the API. Levels 0 to 4 are never masked by the kernel and must not call it. The STM32 default of 0 for new interrupts breaks this.

Answer: B. Put a checksum of the ConfigMap in a Pod annotation

The Deployment template did not change, so no rollout happened, and env vars only load at start. An annotation such as checksum/config with the sha256sum of the rendered ConfigMap changes whenever the config changes, which triggers a rolling update. Kustomize does the same by adding a hash to the ConfigMap name.

Answer: C. box-sizing: border-box, so the border sits inside the 320×200 box

With the default content-box, CSS adds the border outside the width, giving 324×204. border-box includes border and padding in the width, which matches Figma's inside stroke. A centre stroke would straddle the edge, which CSS borders cannot copy directly.

Answer: A. A branch of the library file, reviewed and merged when ready

Branching (on Organization and Enterprise plans) lets you work on a copy, review changes and merge into the main file, while others keep publishing fixes. Manual copy-paste loses history and can overwrite others' work.

Answer: A. "Change to" the matching variant, on the tab click

"Change to" swaps an instance to another variant of the same component set. Defined on the main component, it makes every instance switch tabs in prototypes without extra frames. Navigate and overlay operate on whole frames instead.

Answer: B. Build it from small cell and row components

Huge component sets load all their variants and multiply memory use. Building tables from small cell components, using boolean and instance swap properties rather than variants for every combination, keeps files light and the component easier to maintain.

Answer: C. #93C5FD, from blue-300

The frame's mode picks the Dark value of text-link, which is an alias to blue-300, so Figma follows the alias to #93C5FD. Primitives usually have one mode, and semantic collections hold the mode-specific mapping.

Answer: D. Stay calm, reset to that point and log it as a tool issue

A tool failure is not a design finding. Reset to the point of failure if possible, continue the task and note it so it is excluded from task-success metrics. Having a backup prototype link ready helps.

Answer: D. Offer the source files as an add-on with a clear price

Source files are a separate deliverable that lets the client edit or reuse work without you, so they have extra value. If the contract does not include them, quoting them as an add-on is fair. The best fix is to state in every contract whether source files are included.

Answer: A. Use variables and components, and mark frames ready

Dev Mode shows measurements, code hints and variable names. When designs use variables and components and frames are marked ready for development, developers see consistent tokens instead of guessing raw values.