Web / Figma Interview questions

Figma is a collaborative design platform for designing, prototyping, and handing off user interfaces and other digital products. It runs in the browser, has desktop apps for macOS and Windows, and keeps files in the cloud so several people can work in the same file at once.

The core editor, Figma Design, is vector-based and built around frames, components, Auto Layout, and variables. Prototyping and developer inspection (Dev Mode) sit in the same file, so designers, developers, and product managers aren't passing exports back and forth.

• Cloud files with automatic version history
• Live multiplayer editing and comments
• Shared libraries for design systems
• Plugins and a public API for extending it

Figma is no longer a single design tool. Besides Figma Design, the platform includes a set of products that share the same account, libraries, and collaboration model.

In interviews, it's enough to know Design, Dev Mode, FigJam, and Make well, and be able to name the rest.

A frame is Figma's container object. It's the closest thing to an artboard: a top-level frame usually represents a screen, such as a 390 x 844 phone layout or a 1440-wide desktop page.

Frames differ from plain shapes because they can hold child layers and control them:

• Clip content so children outside the edge are hidden
• Constraints that decide how children react when the frame resizes
• Layout grids and Auto Layout for structure
• Their own fill, stroke, corner radius, and effects

Frames can be nested, so a card is a frame inside a list frame inside a screen frame. Prototype flows also start from top-level frames.

Layers are the individual objects on the canvas, such as frames, groups, text, shapes, images, vectors, components, and instances. The Layers panel on the left shows them as a hierarchy, with parents containing children.

Position in the list sets stacking order: a layer higher up sits in front of the ones below it. You can rename, hide, lock, reorder, and nest layers from there.

Naming matters more than most beginners expect. Smart Animate matches layers by name, instance overrides carry across swaps by name, and developers read layer names in Dev Mode and exports. A file full of "Rectangle 214" slows everyone down.

A component is a reusable design element, such as a button, input, or card, that you define once and reuse many times. The original is called the main component, and every copy you place is an instance linked back to it.

Edit the main component and every instance updates, unless that property was overridden locally. That is the basis of a design system: consistency without manual copy-paste fixes.

To create one, select a layer or frame and press Ctrl/Cmd + Alt + K. Main components show a filled purple diamond icon in the Layers panel.

An instance is a copy of a main component that stays linked to it. In the Layers panel it shows a hollow purple diamond, while the main component shows a filled one.

Instances inherit everything from the main component but allow limited local changes called overrides: text content, fills, visibility of layers, swapped nested instances, and so on. You can't add, delete, or reorder layers inside an instance without detaching it.

Anything you don't override keeps following the main component, so a later change to the main flows through automatically.

Auto Layout turns a frame into a container that arranges its children automatically and resizes as content changes. Add it with Shift + A. If you know CSS, it behaves much like flexbox.

You control:

• Direction: horizontal, vertical, or wrap
• Spacing between items and padding inside the frame
• Alignment of children
• Resizing of the frame and its children (Fixed, Hug, Fill)

A button with Auto Layout grows when its label gets longer, and a list reflows when you delete a row. Without it, you'd nudge every layer by hand.

Constraints define how a child layer behaves when its parent frame is resized. They pin the layer to an edge, the center, or scale it with the frame.

Constraints always work relative to the parent frame, not the page. They apply when you manually resize a frame, which is why they were the first tool for responsive designs.

Styles are saved sets of properties that you apply to layers by name instead of re-entering values. Change the style and every layer using it updates.

Figma has four types:

• Color (paint) styles for solid fills, gradients, and images
• Text styles bundling font, size, weight, line height, and letter spacing
• Effect styles for shadows and blurs
• Grid styles for layout grids

Styles can be published in a team library so other files use the same definitions. Slash naming such as Text/Heading/H1 groups them in the picker.

Variants let you group related versions of a component into one component set. Instead of a dozen separate button components, you get one button with properties such as Size, State, and Type.

Each variant is named with Property=Value pairs, for example Size=Large, State=Hover. When you drop an instance, you switch versions from dropdowns in the right panel instead of hunting through the Assets panel.

A component set is drawn on the canvas with a dashed purple outline. Variants work best for discrete choices like state, size, or style, not for free text or on/off toggles, which are better handled with component properties.

FigJam is Figma's online whiteboard for the early, messy stages of work: brainstorming, user flows, retros, journey maps, and workshops. It's separate from Figma Design but lives in the same workspace and accounts.

Typical building blocks include sticky notes, text, shapes with connectors, stamps, emoji reactions, sections, and templates. Facilitators get a timer, voting, and cursor chat to run sessions with remote teams.

Because it uses the same collaboration engine, everyone sees edits live. It also supports AI helpers for sorting stickies and drafting diagrams, and you can paste design frames in to discuss them.

Dev Mode is a view of a Figma Design file made for developers. Toggle it with Shift + D. The canvas becomes read-only and the right panel switches to inspection tools.

• Measurements and spacing between layers
• Code snippets (CSS, iOS, Android) for selected layers
• Variables shown with their token names
• Ready for dev statuses to mark finished sections
• Compare changes to see what moved since a design was handed off
• Links to code, via Code Connect

It needs a paid seat, so developers get the inspection surface without risking accidental edits to the design.

Plugins are small programs that extend Figma. They can generate content, check accessibility, rename layers in bulk, import data, export tokens, or connect Figma to other tools. Most are installed from the Figma Community and run from the Plugins menu or quick actions.

They're written with the Plugin API in JavaScript or TypeScript and can read and change the document. Plugins are different from widgets: a plugin runs on demand for the person who launched it, while a widget is an object that sits on the canvas and can be used by every collaborator, such as a poll or timer.

Prototyping is connecting frames with interactions so a static design behaves like a working flow. You switch to the Prototype tab, drag a connection from a layer to a destination frame, and choose a trigger, an action, and an animation.

Press Present to click through it in the browser, or open it on a phone with the Figma mobile app. You can share the prototype link with stakeholders for feedback without giving them edit access.

Each connection has three parts:

1. Trigger: what starts it (on click, on drag, while hovering, after delay)
2. Action: what happens (navigate, open overlay, scroll to, set variable)
3. Animation: how it transitions (instant, dissolve, Smart Animate, move, push, slide)

Boolean operations combine two or more shapes into one editable result. Select the shapes and pick one from the toolbar:

1. Union: merges the shapes into one outline
2. Subtract: removes the top shapes from the bottom one
3. Intersect: keeps only the overlapping area
4. Exclude: keeps everything except the overlap

The result stays live, so you can still move or edit the original shapes. Use Flatten when you want a single plain vector path and don't need that editability, which also helps with performance and clean SVG exports.

Layout grids are overlay guides on a frame that help you align content consistently. They're visual aids and, with the right setting, also drive how children snap.

There are three types:

• Grid: uniform squares, handy for 8-point spacing systems
• Columns: set count, gutter, margin, and type (Stretch, Left, Center, Right)
• Rows: horizontal bands for vertical rhythm

A common web setup is a 12-column grid with 24px gutters and 80px margins. Grids can be saved as grid styles so every desktop frame uses the same structure.

Variables store reusable values that you bind to design properties and prototype logic. They are Figma's native way to represent design tokens.

There are four types:

• Color for fills and strokes
• Number for spacing, padding, corner radius, and similar values
• String for text content
• Boolean for layer visibility and conditions

Variables live in collections and can have multiple modes, such as Light and Dark. They can alias other variables, and they can drive prototype interactions, which styles can't do.

Select a layer, frame, or slice, scroll to the Export section at the bottom of the right panel, click +, choose a format and scale, then press the export button.

• Formats: PNG, JPG, SVG, and PDF
• Scales: 0.5x, 1x, 2x, 3x, 4x, or a fixed width/height such as 512w
• Suffix: append something like @2x to filenames

Use SVG for icons and logos, PNG for UI screenshots with transparency, and JPG for photos. You can add several export settings to one layer, for example 1x, 2x, and 3x PNGs for mobile, and download them together. Whole frames can also be exported to PDF from the file menu.

Figma Make is Figma's prompt-to-code product. You describe an app, interactive prototype, or small website in plain language, and it generates a working version you can preview, edit by chatting, and refine.

You can also start from an existing Figma design and ask Make to turn it into something functional, which keeps visual fidelity better than starting from a blank prompt. Output is real code under the hood, so you can tweak the code directly and publish the result.

It suits quick proof-of-concepts, testing interaction ideas with users, and giving stakeholders something they can click through. For production systems, you'd still review and own the code.

A team library is a Figma file whose components, styles, and variables have been published so other files can use them. It's the delivery mechanism for a design system.

Designers turn on a library from the Assets panel, then drag components into their own files. Instances stay linked to the library, so when the library owner publishes a change, consumers see an update prompt and can review it before accepting.

Libraries keep a single source of truth, reduce drift between teams, and let you ship improvements to hundreds of files in one release. Team libraries require a paid plan.

Both hold child layers, but a frame is a real container and a group is only a selection wrapper.

Use frames for screens, cards, and layout containers. Use groups for quick, lightweight bundling, such as an illustration made of several shapes.

Component properties are controls you expose on a component so people can change it from the properties panel instead of digging into layers. There are four kinds:

• Variant: pick between variant values such as Size or State
• Boolean: show or hide a layer, like an icon or helper text
• Text: edit a text layer's content
• Instance swap: replace a nested instance, like an icon, with another component

They keep a button's "Show leading icon" toggle or label field in one tidy place, and they cut the number of variants you must maintain. A button with three sizes, a leading icon, and a trailing icon would need many variants without boolean properties.

Both are resizing options in Auto Layout, but they respond to different things. Hug contents sizes a layer to fit what's inside it. Fill container makes a layer expand to use the space available in its parent.

A common pattern: a card is Fill width inside a screen, with Hug height so it grows with its text. Fill only works when the parent is an Auto Layout frame or a frame with a set size on that axis.

Constraints and Auto Layout both help layouts adapt, but they work differently. Constraints pin a child to its parent's edges when the parent is resized by hand. Auto Layout makes the parent calculate the position and size of children from spacing, padding, and content.

• With constraints, each child is placed manually; the rules only react when the frame resizes.
• With Auto Layout, children flow in order, so add or remove one and the rest reposition.
• Auto Layout children ignore constraints, unless a child uses absolute position, in which case constraints apply again.

Use Auto Layout for most UI structure, and constraints for overlays like a badge pinned to a corner or a hero image that stretches.

Styles bundle several properties into one named set, while variables store single values that can change by mode. They overlap for color, but each has things the other can't do.

In practice, many teams use variables for color, spacing, and radius and keep text and effect styles for composite definitions that variables don't bundle.

A mode is a named column of values inside a variable collection. Every variable in the collection holds one value per mode, so switching the mode swaps all of those values at once.

A typical Theme collection has Light and Dark modes. The variable bg/surface might be white in Light and near-black in Dark, and every layer bound to it follows the active mode.

1. Create a collection and add a second mode.
2. Enter a value for each variable in each mode.
3. Bind layers to the variables instead of raw values.
4. Select a frame or section and apply the mode you want.

Child layers inherit the mode from the nearest parent that sets one. That's how you can place a dark card inside a light screen. Prototypes can also change modes with a Set variable mode action, so a theme toggle can really work.

Detaching an instance cuts its link to the main component and turns it into a plain frame. It keeps its current appearance, including any overrides, but those values become ordinary properties.

• It no longer receives updates when the main component changes.
• You can now add, delete, and reorder layers freely.
• Nested instances inside it stay instances unless you detach them too.
• Reset overrides is no longer possible, since there is nothing to reset to.

The shortcut is Ctrl/Cmd + Alt + B. Detaching is useful for one-off layouts, but it's a common cause of design-system drift, so teams usually prefer overrides, component properties, or a new variant instead.

Both are prototype animations between two frames, but they transition very differently. Dissolve simply cross-fades the destination frame over the source. Smart Animate finds matching layers in both frames and animates the changes between them.

Smart Animate matches layers by name and hierarchy, then tweens properties such as position, size, rotation, opacity, and fill. A toggle knob that sits left in one frame and right in the next will slide across.

• Layers with no match fade in or out instead.
• Duplicated names can cause the wrong layers to pair up.
• Easing and duration set the feel, for example ease-out over 300ms.

Use Dissolve for simple page changes, and Smart Animate for micro-interactions such as toggles, accordions, and tab indicators.

Responsive design in Figma combines several tools, and each solves a different part of the problem.

1. Auto Layout for flow, spacing, and padding, with Hug and Fill sizing so content adapts.
2. Min and max width on Auto Layout items so a text column never gets too narrow or too wide.
3. Wrap for card grids that should reflow into fewer columns.
4. Constraints for pinned items like fixed headers or floating buttons.
5. Layout grids to keep columns and margins aligned per breakpoint.

Then design key breakpoints as separate frames, such as 390, 768, and 1440, and test by dragging a frame's edge to check how it resizes. Components can carry a breakpoint variant when the structure really changes, for example a hamburger menu on mobile and a full nav on desktop.

Everyone who opens the same file joins it live, and each person's edits appear for the others within moments. There's no check-in or check-out and no merging of local copies.

• Multiplayer cursors and avatars show who is where.
• Comments (press C) pin feedback to the canvas, with replies and resolve.
• Observation mode: click an avatar to follow someone's viewport.
• Cursor chat (press /) sends quick messages next to your pointer.
• Version history keeps automatic saves and lets you name important versions.

Access is controlled by can view and can edit permissions, which you set per file, project, or team. Reviewers can comment without being able to change the design.

Overrides are local changes you make on an instance without breaking its link to the main component. They sit on top of the main component's values.

You can override text, fills, strokes, effects, corner radius, layer visibility, and nested instances. You can't change structure, such as adding or reordering layers.

• Properties you haven't touched keep following the main component.
• Properties you overrode stay put, even if the main changes.
• Reset all overrides returns the instance to match the main.
• Push overrides to main component promotes a local change into the main.

If a "stuck" value won't update after a library change, an old override is the usual cause. Check the instance for override markers and reset the property.

Both are vector UI design tools with components, styles, and prototyping, but they differ in platform and collaboration model.

The deciding factors for most teams are cross-platform access and live collaboration, which is why Figma became the default for product teams that include developers, PMs, and non-Mac users.

Publishing pushes the current state of the library's components, styles, and variables to every file that uses it. Those files don't change silently, though. They get an update available prompt.

1. In the library file, open the Assets panel and choose Publish.
2. Review the list of changed items and select which ones to publish.
3. Add a short description, which consumers will see.
4. Consumer files show an update badge in the library menu.
5. Designers review the changes and accept them when ready.

Accepted updates flow into instances while preserving local overrides. Renaming or removing a component is the risky case, because instances can lose their link. Deprecate first, and remove later, so teams have time to migrate.

Good handoff is mostly about making the file easy to read in Dev Mode, so developers don't have to guess.

1. Build with Auto Layout, so spacing and resizing behavior are explicit.
2. Use components, styles, and variables so Dev Mode shows token names, not raw hex values.
3. Name layers clearly and organize screens into sections.
4. Mark finished sections Ready for dev.
5. Add annotations for behavior that isn't obvious, such as empty, loading, and error states.
6. Prepare export settings for icons and images, and link resources, such as tickets or Storybook docs.
7. Connect components to code with Code Connect where available.

After handoff, the Compare changes view lets developers see what changed in a design since they last looked.

Variables can store state inside a prototype, and the Conditional action can branch on that state. Together they let a prototype behave like a tiny program, without leaving Figma.

Two actions do the work:

• Set variable: assign or calculate a value, such as count = count + 1
• Conditional: run if/else logic, such as if count >= 3

A login-attempt example:

On click of "Sign in":
  Set variable  attempts = attempts + 1
  Conditional
    if attempts >= 3  -> Navigate to "Locked"
    else              -> Navigate to "Try again"

Number variables support basic math, booleans suit toggles and visibility, and strings can drive text such as a typed name. It's great for realistic usability tests without code.

Branching lets you create a copy of a main file where you can make changes safely, then review and merge them back. It works like a Git branch, but for design files, and it's most useful for design system libraries.

1. Create a branch from the main file.
2. Edit components, styles, or variables in the branch without affecting the main file.
3. Request a review from teammates.
4. Merge into main, resolving conflicts if the main file changed in the meantime.
5. Publish the library as usual.

That way a risky change, such as a button redesign, can be reviewed before it reaches consumer files. Branching is available on higher-tier plans, so check your plan before relying on it.

Code Connect maps components in a Figma design system to the real components in your codebase. When a developer selects a button in Dev Mode, they see the team's actual <Button> usage with correct props, instead of generic CSS generated from the layers.

You write small mapping files next to your components and publish them with the CLI. Figma properties such as Label, Disabled, and Type are linked to code props. It supports React, SwiftUI, Jetpack Compose, and HTML-based frameworks, and it's part of Dev Mode on higher-tier plans.

import figma from '@figma/code-connect'
import { Button } from './Button'

figma.connect(Button, 'https://www.figma.com/design/FILE_KEY?node-id=1-2', {
  props: {
    label: figma.string('Label'),
    disabled: figma.boolean('Disabled'),
    kind: figma.enum('Type', { Primary: 'primary', Secondary: 'secondary' }),
  },
  example: ({ label, disabled, kind }) => (
    <Button kind={kind} disabled={disabled}>{label}</Button>
  ),
})

Once published, snippets in Dev Mode stay in sync with how the design system is really used in code.

The Figma REST API gives programs read access to files and many workspace resources, plus some write operations such as comments. It's used for automation that sits outside the editor.

• Fetch a file's node tree to read layers, styles, and component data
• Render nodes as PNG, JPG, SVG, or PDF for asset pipelines in CI
• Read and post comments, for bots and notifications
• Sync design tokens into code, using the variables endpoints (available on Enterprise)
• React to events through webhooks

Authenticate with a personal access token for scripts, or OAuth 2 for apps used by other people:

curl -H "X-Figma-Token: $FIGMA_TOKEN" \
  "https://api.figma.com/v1/images/FILE_KEY?ids=1:2&format=svg"

The REST API doesn't edit the canvas. For creating or changing layers, use the Plugin API.

A plugin is split into two environments that talk through messages. The main thread runs in a sandbox with access to the document through the figma global but no DOM or network. The optional UI runs in an iframe with normal browser APIs but no direct access to the document.

flowchart LR
  A["manifest.json"] --> B["Main code in sandbox"]
  B -- figma.ui.postMessage --> C["UI iframe"]
  C -- parent.postMessage --> B
  B --> D["Figma document"]
  C --> E["Network and browser APIs"]

The manifest declares the name, ID, API version, entry files, editorType, and documentAccess. Newer plugins use dynamic-page access with async calls such as figma.getNodeByIdAsync.

// code.ts (sandbox)
figma.showUI(__html__)
figma.ui.onmessage = (msg) => {
  if (msg.type === 'prefix') {
    for (const n of figma.currentPage.selection) n.name = msg.value + n.name
    figma.closePlugin()
  }
}

// ui.html (iframe)
parent.postMessage({ pluginMessage: { type: 'prefix', value: 'btn/' } }, '*')

Call figma.closePlugin() when finished, or it keeps running.

The Figma MCP server (first introduced as the Dev Mode MCP server) lets MCP-compatible tools, such as VS Code with Copilot, Cursor, or Claude Code, pull structured design context from Figma instead of guessing from a screenshot.

The context includes layout and spacing, variables and token names, component information, and Code Connect mappings. An AI tool can then generate code that uses your real components and tokens, rather than hard-coded values.

1. Enable the server (locally through the Figma desktop app, or use the remote option).
2. Connect your MCP client to it.
3. Give the client a Figma link or selection.
4. The client requests design context and generates code against your design system.

Output still needs review, but with Code Connect in place the results land much closer to what the team would write by hand.

Slow files usually come from too many layers, heavy effects, or large images. Fixing them is mostly housekeeping.

1. Split the file: keep design-system libraries separate from product files and divide big projects across pages or files.
2. Remove what you don't use: delete hidden layers, old explorations, and unused components.
3. Flatten complex vectors, especially illustrations with thousands of points.
4. Compress images before placing them, and avoid pasting huge photos.
5. Go easy on blurs and shadows: background blur and big layer blurs are expensive to render.
6. Limit nesting depth in components, and keep variants lean using component properties.
7. Use the desktop app, enable hardware acceleration, and close extra tabs.

Hidden layers still cost memory, so deleting beats hiding for anything you won't bring back.

A missing font shows a warning icon and a fallback typeface, which can change line breaks and spacing. Start by finding out which font is missing, then pick the fix that matches how you work.

1. Open the warning from the toolbar or text panel to see the missing family and weight.
2. If it's a Google font, it's already built in, so check that the exact style name exists.
3. For a local or licensed font, install it on your computer.
4. In the browser, install the font installer so Figma can read local fonts. The desktop app reads system fonts directly.
5. If you can't get the font, use Replace missing fonts to map it to another family.
6. For teams, admins on higher plans can upload shared fonts to the organization.

After fixing the font, check text boxes for changed wrapping, since fallback fonts have different widths.

A library component moves through a predictable set of stages, from first sketch to retirement. Knowing them helps you plan changes without breaking consumer files.

flowchart TD
  A["Design with Auto Layout and variables"] --> B["Create main component"]
  B --> C["Add variants and properties"]
  C --> D["Document and publish to library"]
  D --> E["Teams enable library and use instances"]
  E --> F["Edit main and publish update"]
  F --> G["Consumers review and accept"]
  G --> F
  F --> H["Deprecate and remove"]

1. Build the layout with Auto Layout and bind it to variables.
2. Create the main component and add variants or properties.
3. Document with a description, usage notes, and a Dev Mode link to code.
4. Publish so other files can use it.
5. Maintain: edit the main, publish, and let consumers accept updates.
6. Deprecate: flag it, point to the replacement, and remove it only after teams migrate.

The riskiest stages are renaming and removal, because they can break links in files you can't see.

A modern handoff is a loop between design, Dev Mode, and the codebase, rather than a one-time file drop. Here is the typical flow.

sequenceDiagram
  participant D as Designer
  participant F as Figma file
  participant V as Developer in Dev Mode
  participant R as Code repo
  D->>F: Build with components and variables
  D->>F: Mark section Ready for dev
  V->>F: Inspect specs, tokens, snippets
  F-->>V: Code Connect snippet for real component
  V->>R: Implement using design system code
  D->>F: Later design changes
  V->>F: Compare changes
  F-->>V: Shows what changed since handoff

1. The designer finishes a section using components and variables, then marks it Ready for dev.
2. The developer is notified and opens the section in Dev Mode.
3. Inspection shows measurements, tokens, and snippets. With Code Connect, snippets show the real component.
4. The developer builds against the repo and links resources such as tickets or pull requests back to layers.
5. If the design changes later, Compare changes highlights the differences.

Figma's multiplayer is a client-server system. A file is modeled as a tree of objects, each with an ID and a set of properties, and edits are small property changes rather than whole-file saves.

sequenceDiagram
  participant A as Client A
  participant S as Multiplayer server
  participant B as Client B
  A->>A: Apply change locally
  A->>S: Send property change
  S->>S: Order change, last writer wins per property
  S-->>A: Acknowledge
  S-->>B: Broadcast change
  B->>B: Apply change

• Each client applies its own edit immediately so the UI feels instant, then reconciles with the server.
• The server is the authority on ordering. If two people change the same property of the same object, the later one wins, and edits to different properties don't conflict.
• Child order uses fractional indexing, so inserting a layer doesn't renumber its siblings.
• The server persists changes, so edits aren't lost if someone disconnects.

The design was inspired by CRDTs, but a central server lets Figma keep things simpler than a fully peer-to-peer approach. Undo history is local to each person, so you only undo your own edits.

A scalable setup separates raw values from meaning, using aliasing between collections. Three layers are common.

• Name with slashes so groups appear in pickers, such as color/text/muted.
• Bind designs to semantic tokens, never to primitives, so theming only touches the semantic layer.
• Use scopes to restrict where a variable appears, for example spacing numbers only on gap and padding.
• Publish the collections through the library, and keep names aligned with code tokens.
• For syncing to code, use the variables REST endpoints or an export plugin that feeds a build tool such as Style Dictionary.

The main payoff: rebranding or adding a dark theme means editing a few semantic aliases, not hundreds of layers.

Figma needed desktop-class speed for a heavy vector editor but wanted zero-install access. The answer was to write the core editor in C++, compile it to WebAssembly (originally asm.js), and run it inside the browser with GPU rendering.

• Performance: the rendering engine, layout, and document logic run at near-native speed, which matters for files with thousands of layers.
• Reach: any OS with a modern browser can open a link and start working, with nothing to install.
• One codebase: the desktop apps wrap the same web editor, so features ship everywhere together.
• GPU drawing: rendering has used WebGL and has been moving toward WebGPU for more headroom.

The surrounding interface, such as panels and menus, is built with standard web tooling, while the canvas is drawn by the compiled engine.

When you swap an instance for another component, Figma tries to carry your overrides across by matching layer names and structure. If the new component has different layer names or a different hierarchy, overrides can't match and are lost.

1. Compare the layer trees of both components and look for renamed or reordered layers.
2. Align names on text, icon, and container layers so they match exactly.
3. Prefer component properties (text, boolean, instance swap) over raw overrides, since properties survive swaps more reliably.
4. Check that the original override wasn't made on a nested instance that was itself swapped.
5. Use Reset all overrides on the new instance, then reapply the values in a controlled order.
6. Undo the swap with Ctrl/Cmd + Z if the result is wrong, and fix the library component first.

The long-term fix is consistent naming across component families, so swaps behave predictably.

For color, spacing, and radius differences, variable modes are almost always better. One component set reads the active mode, so there is a single source of truth. For structural differences, variants are the right tool, and duplicated components are rarely justified.

Choose modes when only values change, such as Light and Dark or Compact and Comfortable density. Choose variants when the layout itself changes, for example a different nav on mobile. Mode counts are limited by plan, which is worth checking early.

Migrate in layers, from the library outward, so product files keep working during the move.

1. Audit existing color, spacing, and radius styles and values, and merge near-duplicates.
2. Define the token model: primitives, semantic tokens, and modes such as Light and Dark.
3. Create the variable collections, with names aligned to code tokens.
4. Rebind main components first. Select a component and use Selection colors to swap raw colors and styles for variables in bulk.
5. Test in a branch or a copy: check both modes, prototypes, and Dev Mode output.
6. Publish with a clear description so consumers review and accept the update.
7. Deprecate old color styles after teams migrate. Keep text and effect styles, since variables don't replace those bundles.
8. Announce and support: share a migration note, and give teams a deadline.

For hundreds of components, a plugin or the variables REST API (Enterprise) can automate creation and rebinding, but spot-check the results by hand.