Figma is the leading design tool for UI/UX design and prototyping. These Figma interview questions cover frames, components and auto layout for freshers, then variants, variables, design systems, prototyping, Dev Mode and developer handoff for experienced product designers.
30 questions · Updated
Fundamentals, definitions and simple scenarios. Good for freshers and warm-ups.
Figma is a browser-based design tool for interfaces, prototypes and design systems. It became popular because it runs in the browser with no installs, lets many people edit the same file in real time like Google Docs, keeps one source of truth in the cloud, and makes handoff easy because developers can inspect designs directly.
A frame is a container with its own size, background, clipping, constraints, layout grids and auto layout, and represents a screen or a component area.
A group simply bundles layers together and resizes to fit them.
I use frames for screens and structured elements and groups only for simple bundling.
Constraints define how a layer behaves when its parent frame is resized, for example staying fixed to the left and right so it stretches, or staying centred.
They help designs adapt to different screen sizes.
Auto layout is now usually used for most responsive behaviour, with constraints for absolutely positioned elements.
Use pages to separate stages and areas, such as cover, explorations, final designs, components and archive.
Name frames and layers clearly, group related layers, use auto layout for structure, keep frames for each screen arranged in user flows, and label sections.
A tidy file makes collaboration and developer handoff much easier.
Styles save reusable colours, text, effects (such as shadows) and layout grids.
Applying a style links elements to it, so updating the style changes every element that uses it.
Styles can be published in a team library.
Variables are now preferred for many values such as colours and spacing, while text styles remain essential for typography.
Layout grids are guides on frames, such as columns, rows or square grids, that help align content consistently.
A typical web design uses a 12-column grid with margins and gutters, and mobile uses a 4-column grid.
Grids can be saved as styles, combined and set to stretch or stay centred as frames resize.
Popular plugins include Unsplash and Iconify for images and icons, Content Reel for realistic text, Stark or Able for accessibility checks, Tokens Studio for design tokens, Autoflow for drawing flow arrows, Lorem ipsum generators, and plugins that rename layers or find unused styles. Plugins should be from trusted developers, especially in company files.
FigJam is Figma's online whiteboard for collaboration: brainstorming with sticky notes, user journey mapping, diagrams and flowcharts, retrospectives and workshops, with templates, voting, timers and widgets. It connects with Figma design files, so teams can move from ideas to designs in the same ecosystem.
Many people can work in the same file at the same time and see each other's cursors.
Comments are pinned to specific places on the canvas, can mention teammates and be resolved, which suits design reviews.
Observation mode follows another person's view, and sharing permissions control who can view or edit.
Select a layer or frame and add export settings in the right panel, choosing format (PNG, JPG, SVG or PDF), scale (1x, 2x, 3x) and suffixes.
Several assets can be exported at once, and marking layers as exportable helps developers download them themselves in Dev Mode.
Icons are usually exported as SVG and photos as JPG or WebP.
Figma saves versions automatically, and you can name important versions, view history and restore earlier states. On paid plans, branching lets designers create a branch of a file to explore changes, such as updating a design system component, then review and merge the branch into the main file, similar to Git branches.
Applied problems, trade-offs and questions about your own projects.
Auto layout makes a frame arrange its children automatically in a row, column or wrapping grid with set padding and spacing, like CSS flexbox.
Children can hug their content, fill the container or have a fixed size.
Buttons grow with their label, and lists reflow when items are added, which makes designs faster to edit and closer to how they are built in code.
A component is a reusable design element, such as a button; instances of it update when the main component changes, while still allowing overrides like text.
Variants group related components into one set with properties, for example a button with type (primary, secondary), size and state (default, hover, disabled).
Component properties for text, booleans and instance swaps make them easier to use.
In Prototype mode I connect frames with interactions, such as on click navigate to, open overlay or scroll to, with transitions like smart animate.
I set the starting frame and device, use interactive components for hover and pressed states, and variables and conditionals for more realistic logic.
I share the prototype link for user testing and stakeholder reviews.
Variables store reusable values for colours, numbers, text and booleans, such as colour tokens, spacing and border radius.
Modes let one set of variables switch values, for example light and dark themes, brands or languages.
They act as design tokens, keep designs consistent and map directly to code, and also power prototype logic.
Component properties expose specific options on a component so instances are easy to customise: boolean properties to show or hide layers (such as an icon), text properties to edit labels from the properties panel, instance swap properties to choose a nested component (such as which icon), and variant properties for states and sizes. Slots let instances contain custom content.
Interactive components define interactions between variants inside the component, such as a button changing to its hover state on mouse enter, or a checkbox toggling when clicked. Every instance in a prototype then behaves interactively without wiring each one, which makes prototypes realistic and much faster to build.
Use nested auto layout frames with fill container and hug contents settings, min and max widths, wrap for grids of cards, and constraints for fixed elements.
Resizing the top frame then shows how the design behaves at different widths.
Designing key breakpoints (mobile, tablet and desktop) and documenting the behaviour helps developers implement it.
Smart Animate is a prototype transition that animates matching layers between two frames, based on layer names and hierarchy, interpolating position, size, rotation, opacity and colour. It creates realistic micro-interactions, such as expanding cards, toggles, carousels and loading states, without separate animation tools.
Components, styles and variables from a library file are published so other files can use them.
When the library is updated and the changes are published, files using it receive a notification to review and accept the updates.
This keeps every product file consistent with the design system while allowing controlled rollouts of changes.
Dev Mode is a view for developers that shows measurements, spacing, CSS, iOS and Android code snippets, the variables and styles used, component properties and assets to download.
Designers mark sections as ready for development, and changes are compared between versions.
Code Connect links Figma components to real code components so developers see the actual component usage.
Agree a structure such as a cover page with status, pages per feature or flow, a work-in-progress area, final screens and an archive.
Use sections with statuses, consistent naming for frames and components, a shared library for components, comments for decisions, and a changelog.
A file template helps every designer follow the same structure.
System design, deep internals, leadership and tough follow-ups.
I define foundations as variables and styles: colour, typography, spacing, radius and elevation.
Then I build components with variants and auto layout, document their usage, and publish them as a team library.
Product files use the library, so updates flow out with review.
I version changes, keep naming consistent with the code's tokens, and work closely with developers so design and code stay in sync.
I organise files with clear page names and mark finished frames as ready for development.
In Dev Mode developers inspect spacing, sizes, colours and typography as code values, see the variables and components used, and export assets.
I annotate interactions, edge cases, empty and error states and responsive behaviour, and stay available to answer questions during implementation.
I check colour contrast against WCAG AA (4.5:1 for body text) using plugins, never rely on colour alone, design visible focus states, keep touch targets at least 44 by 44 points, use readable type sizes, and design for text resizing. I annotate heading levels, reading order, labels and alt text for developers, and test designs with accessibility plugins and real users.
Define tokens as Figma variables (primitive values such as colours and a semantic layer such as surface-primary), then export them through the Figma REST API, plugins such as Tokens Studio or tools such as Style Dictionary into CSS variables, Tailwind config or platform code. Ideally the pipeline runs automatically, so design and code always use the same values.
Use variable collections with modes, such as light and dark or brand A and brand B, where semantic variables point to different primitive values in each mode.
Components use only semantic variables, so switching a frame's mode re-themes the whole design without duplicating components.
This mirrors how themes are implemented in code.
Figma AI can generate first drafts of designs from prompts, rename layers, create realistic content, replace images, and help search for assets.
Figma Make turns prompts into working interactive prototypes and simple apps, and Figma Sites publishes designs as websites.
These speed up exploration, but designers still need to check quality, accessibility and consistency with the design system.
Split large projects into several files, archive old explorations, avoid huge numbers of hidden layers and very large images, use components rather than detached copies, limit heavy effects such as blurs, remove unused styles and components, and check the memory usage indicator. Libraries let teams share components without putting everything in one file.
Figma's library analytics show how often components, styles and variables are used and detached across files.
High detachment signals components that do not meet designers' needs.
I combine this with feedback sessions, code-side metrics such as component usage in the codebase, and the time teams save, then prioritise improvements.
See all UI/UX Designer interview questions, covering Figma, User Research, Wireframing, Prototyping, Design Systems and more.