Skip to content
RED SAGSkills

Design Systems interview questions and answers

Design system questions test how you build consistent, reusable UI across a product and keep design and code in sync.

Below are 60 Design Systems questions with the correct answer and a short explanation, grouped from fresher to experienced level. Try each one before you open the answer.

Take the Design Systems MCQ testPractise 152+ Design Systems questions for points

What Design Systems interviews usually check

  • ✓Components and variants
  • ✓Design tokens
  • ✓Documentation and adoption
  • ✓Accessibility in components
  • ✓Versioning and governance

Design Systems interview questions for freshers easy

1. Showing rupees in Indian format

Which code renders 150000 as ₹1,50,000.00 in a React component?

  1. A.amount.toFixed(2) with a ₹ sign added in front of it
  2. B.amount.toLocaleString("en-US") with a ₹ sign in front
  3. C.String(amount).replace(/\d{3}/g, "$&,") plus a ₹ sign
  4. D.Intl.NumberFormat("en-IN", { style: "currency", currency: "INR" })
Show answer

Answer: D. Intl.NumberFormat("en-IN", { style: "currency", currency: "INR" })

The en-IN locale uses Indian digit grouping (lakhs and crores), and the currency style adds the ₹ sign and two decimals. Create the formatter once outside the component and reuse it, since building it each render is wasteful.

2. Version bump for a breaking change

Your library is at version 3.7.2 and follows Semantic Versioning. You remove a public function that users call. What should the next version be?

  1. A.3.8.0
  2. B.4.0.0
  3. C.3.7.3
  4. D.3.8.2
Show answer

Answer: B. 4.0.0

In SemVer, MAJOR.MINOR.PATCH means: major for incompatible changes, minor for new backward-compatible features, patch for backward-compatible fixes. Removing a public function breaks callers, so the major number goes up and the others reset to 0.

3. Conventional commit prefixes

Your team uses Conventional Commits so release tools can choose version bumps. Which message signals a new feature that should bump the minor version?

  1. A.feat(cart): add saved-for-later list
  2. B.fix(cart): handle empty list
  3. C.chore: update dev dependencies
  4. D.docs: explain cart setup
Show answer

Answer: A. feat(cart): add saved-for-later list

Under Conventional Commits, feat means a new feature (minor bump) and fix means a bug fix (patch bump). A ! after the type or a BREAKING CHANGE footer means a major bump. chore and docs usually do not trigger a release.

4. Why start with low-fidelity wireframes

What is the main purpose of a low-fidelity wireframe?

  1. A.To explore layout, content and flow quickly before spending time on visual polish
  2. B.To give developers pixel-perfect specs for coding
  3. C.To choose the final brand colours and fonts
  4. D.To replace usability testing
Show answer

Answer: A. To explore layout, content and flow quickly before spending time on visual polish

Low-fidelity wireframes are cheap and fast. They let you and stakeholders focus on structure and flow without getting distracted by colours or images, and they are easy to throw away when an idea does not work.

5. Wireframe, mockup or prototype

What is the difference between a wireframe, a mockup and a prototype?

  1. A.They are three names for the same thing
  2. B.A wireframe shows structure, a mockup shows the visual design, and a prototype is interactive so it can be tested
  3. C.A prototype is always coded by developers
  4. D.A mockup is drawn on paper only
Show answer

Answer: B. A wireframe shows structure, a mockup shows the visual design, and a prototype is interactive so it can be tested

Fidelity grows from structure, to looks, to behaviour. Choosing the right one for the question you need answered saves time: wireframes for layout and flow, mockups for visual decisions, prototypes for testing interactions.

6. Why use auto layout

What is the main benefit of Auto Layout in Figma?

  1. A.It exports designs as code automatically
  2. B.It adds animation to frames
  3. C.Frames resize and reflow automatically when content changes, like flexbox in CSS
  4. D.It checks colour contrast
Show answer

Answer: C. Frames resize and reflow automatically when content changes, like flexbox in CSS

With Auto Layout, a button grows with its label and a list adds spacing for new items without manual nudging. It also mirrors how developers build layouts with flexbox, which makes handoff smoother.

7. Editing a main component

In Figma you change the corner radius of a main Button component from 4 to 8. What happens to the 200 Button instances already placed across your files?

  1. A.Nothing changes until each instance is detached and rebuilt
  2. B.They update; other files get it after accepting the library update
  3. C.Only instances on the same page as the main component will update
  4. D.Every instance is reset and loses its text overrides
Show answer

Answer: B. They update; other files get it after accepting the library update

Instances are linked to their main component, so property changes flow down to them. Inside the same file this is immediate; files that use a published library see the change after the library is published and they accept the update. Overrides such as custom label text are kept.

8. What Storybook is used for

Your developers use Storybook alongside the Figma library. What is its main job in a design system?

  1. A.Showing coded components in isolation, one story per state
  2. B.Storing the master Figma files for designers
  3. C.Running the production build of the main website
  4. D.Hosting user research notes for each component
Show answer

Answer: A. Showing coded components in isolation, one story per state

Storybook renders coded components outside the app, one "story" per state such as default, disabled or loading. Designers, QA and developers use it to review real behaviour and it often doubles as the coded documentation site.

9. Version number after a breaking change

Your design system npm package is at version 2.4.1. You remove the "size" prop from Button, so existing code that uses it will break. Under semantic versioning, what is the next version?

  1. A.2.4.2
  2. B.2.5.0
  3. C.3.0.0
  4. D.2.4.1-beta
Show answer

Answer: C. 3.0.0

Semantic versioning is MAJOR.MINOR.PATCH. A change that breaks existing usage needs a new major version, which resets minor and patch to zero. New backwards-compatible features bump minor and bug fixes bump patch.

10. Why components need a focus state

A developer removes the outline on all buttons because "it looks ugly" and the design has no focus state. Who is hurt most?

  1. A.Mouse users, who lose the hover colour on buttons
  2. B.Search engines, which cannot index buttons
  3. C.Keyboard users, who cannot see where focus is
  4. D.Screen reader users, who lose the button label
Show answer

Answer: C. Keyboard users, who cannot see where focus is

People who navigate with Tab rely on a visible focus indicator to know where they are. WCAG requires focus to be visible, so a design system should define a clear focus style for every interactive component instead of removing it.

11. Best export format for icons

You are handing off 40 single-colour interface icons for the web app. Which export format is usually best?

  1. A.SVG, so icons stay sharp at any size and can take colour from CSS
  2. B.JPG at 72 dpi, so files are as small as possible
  3. C.PNG at 1x only, so they match the Figma frame size
  4. D.GIF, so the icons can include transparency
Show answer

Answer: A. SVG, so icons stay sharp at any size and can take colour from CSS

SVG is a vector format, so icons scale cleanly on any screen density. With fill set to currentColor, a single SVG can follow the text colour in CSS, which suits a token-based system.

12. Style guide versus design system

A client says "we already have a design system" and shows a PDF listing the logo, colours and fonts. What is this more accurately called?

  1. A.A complete design system with nothing missing
  2. B.A component library that developers can install
  3. C.A prototype ready for usability testing
  4. D.A brand style guide, one part of what a design system covers
Show answer

Answer: D. A brand style guide, one part of what a design system covers

A style guide documents brand basics such as colour and type. A design system adds reusable components in design and code, tokens, usage guidance and a process for keeping them in sync. The PDF is a useful start but not the whole system.

13. Using a token in CSS

Tokens are published as CSS custom properties. Which line correctly applies the surface background token?

:root {
  --color-bg-surface: #FFFFFF;
}
  1. A..card { background: $color-bg-surface; }
  2. B..card { background: --color-bg-surface; }
  3. C..card { background: var(--color-bg-surface); }
  4. D..card { background: token(color-bg-surface); }
Show answer

Answer: C. .card { background: var(--color-bg-surface); }

CSS custom properties are declared with two leading dashes and read with var(). The $name form is Sass syntax, and a bare --name or a made-up token() function is not valid CSS.

14. Icons that follow text colour

You want SVG icons to automatically match the colour of the text next to them, including in dark mode. What should their fill be?

  1. A.fill="#000000"
  2. B.fill="currentColor"
  3. C.fill="none" on every path
  4. D.fill="transparent"
Show answer

Answer: B. fill="currentColor"

currentColor uses the element's CSS color value, so an icon inside a button or link takes the same colour as the label. One icon file then works for every theme and state without separate coloured exports.

15. What belongs in a tooltip

A designer puts the only "Retry" link for a failed upload inside a hover tooltip. Why is this a problem?

  1. A.Touch and keyboard users may never reach the link
  2. B.Tooltips cannot contain any text longer than one word
  3. C.Links inside tooltips always open in a new tab
  4. D.Tooltips slow the page load by several seconds
Show answer

Answer: A. Touch and keyboard users may never reach the link

Tooltips show on hover, which touch screens lack, and keyboard users may not reach links inside them. They should hold short, supplementary hints. Essential information and actions belong in the main interface.

16. Loading a list of cards

A product list takes about two seconds to load. Which loading pattern usually feels fastest and avoids layout jumps?

  1. A.A blank white page until all data arrives
  2. B.A full-screen spinner covering the header
  3. C.Skeleton cards in the shape of the content
  4. D.A pop-up asking the user to wait
Show answer

Answer: C. Skeleton cards in the shape of the content

Skeleton screens show grey placeholders where content will appear, so the layout is stable and progress feels visible. A blank page or a blocking spinner gives no sense of what is coming and can cause the page to jump when content loads.

17. When not to make a component

A designer wants to add a special festival banner used once on the Diwali sale page to the core library. What is the usual guidance?

  1. A.Keep it local to that project unless it starts repeating
  2. B.Add it to the core library so it is never lost
  3. C.Make it a token instead of a component
  4. D.Copy it into every product file just in case
Show answer

Answer: A. Keep it local to that project unless it starts repeating

Core libraries should hold patterns used across many places. A one-off banner adds noise and upkeep. Keep it in the project, and promote it to the system only if several teams start needing it.

18. A list with nothing in it

A new user opens the Invoices page and has no invoices yet. What should a good empty state include?

  1. A.An empty table with column headers only
  2. B.An error message saying "No data found" in red
  3. C.A loading spinner that keeps spinning
  4. D.A short explanation and a "Create invoice" button
Show answer

Answer: D. A short explanation and a "Create invoice" button

Empty states are a chance to guide. Explaining what will appear here and offering the next step helps new users start, while an empty table or an error-like message feels broken. Systems often include an Empty state component for this.

19. Filter chips that run onto new lines

A row of 14 filter chips in horizontal auto layout runs off the right edge of a 360 px mobile frame. Which auto layout setting moves extra chips onto the next line?

  1. A.Clip content on the chip row frame
  2. B.Wrap, which works like flex-wrap in CSS
  3. C.Vertical direction for the chip row
  4. D.Absolute position on the last chips
Show answer

Answer: B. Wrap, which works like flex-wrap in CSS

Turning on wrap lets children flow onto new rows when they run out of width, with separate horizontal and vertical gaps. It matches flex-wrap: wrap in CSS, so the handoff stays close to the real build.

20. Wireframes in elicitation

Why would a BA show a low-fidelity wireframe during elicitation?

  1. A.To fix the final visual design with the brand team
  2. B.To replace the need for written acceptance criteria
  3. C.To get quick feedback before anything is built, because people react better to something they can see
  4. D.To show developers exactly which code to write
Show answer

Answer: C. To get quick feedback before anything is built, because people react better to something they can see

Prototypes help people discover what they actually need and spot missing steps. Low-fidelity versions are cheap to change, so users feel free to criticise. The final visual design is a separate task for designers.

Design Systems intermediate interview questions medium

21. Deciding when to release v2

Which planned change justifies releasing /v2 instead of changing /v1 in place?

  1. A.Adding an optional ?currency= query filter
  2. B.Adding a brand new /refunds endpoint
  3. C.Making the /orders endpoint twice as fast
  4. D.Splitting 'name' into 'firstName' and 'lastName'
Show answer

Answer: D. Splitting 'name' into 'firstName' and 'lastName'

Removing or reshaping an existing field breaks clients that read 'name', so it needs a new version or a long deprecation period. Optional parameters, new endpoints and speed-ups are additive and backward compatible. Keep v1 running until clients have moved.

22. Catching breaking changes before deploy

The web app and the mobile app often break when the backend team changes a response. Which practice catches this in CI before release?

  1. A.Load tests run once a month
  2. B.Manual testing by the QA team after deploy
  3. C.Adding more console.log calls to the API
  4. D.Consumer-driven contract tests, such as with Pact
Show answer

Answer: D. Consumer-driven contract tests, such as with Pact

Each consumer records the requests it makes and the response fields it relies on as a contract. The provider's CI checks every change against all consumer contracts, so a removed or renamed field fails the build. It is faster and more focused than full end-to-end tests.

23. Developer cannot reproduce

A developer says your bug is "cannot reproduce". What should you do first?

  1. A.Close the bug since the developer could not see it
  2. B.Escalate to the manager
  3. C.Log the same bug again with a new title
  4. D.Compare environments and data, retry with exact steps, and add logs, timestamps or a recording to the ticket
Show answer

Answer: D. Compare environments and data, retry with exact steps, and add logs, timestamps or a recording to the ticket

Differences in environment, test data, user role, build version, browser or timing often explain "cannot reproduce". Gathering precise evidence such as request IDs, console logs and recordings, or reproducing together, is the fastest path to a fix.

24. Light and dark mode in Figma

What is the cleanest way to design both light and dark themes in Figma?

  1. A.Create colour variables in a collection with Light and Dark modes, bind components to them and switch the mode on frames
  2. B.Duplicate every screen and recolour it by hand
  3. C.Use a plugin that inverts all colours
  4. D.Design light mode only and let developers guess
Show answer

Answer: A. Create colour variables in a collection with Light and Dark modes, bind components to them and switch the mode on frames

Variables with modes let one design swap themes instantly, and they map to design tokens in code. Inverting colours rarely works, because shadows, images and brand colours need deliberate choices.

25. Design too costly to build

An engineer says your custom animated date picker will take three weeks, but the sprint is two weeks. What is the best response?

  1. A.Insist on the design because it is approved
  2. B.Discuss which parts deliver the user value, consider a well-tested native or library component with your styling, and plan the extras for later if data supports them
  3. C.Remove the date picker entirely
  4. D.Ask the engineer to work weekends
Show answer

Answer: B. Discuss which parts deliver the user value, consider a well-tested native or library component with your styling, and plan the extras for later if data supports them

Constraints are design inputs. Library or native components are often more accessible and robust than custom ones. Working with engineers on trade-offs keeps the core experience and builds trust.

26. Fill container in CSS terms

In a horizontal auto layout row, an input is set to "Fill container" and the button next to it is "Hug contents". How would a developer most directly express the input in CSS flexbox?

  1. A.position: absolute; width: 100%
  2. B.display: inline-block; width: auto
  3. C.flex-shrink: 0 with a fixed width
  4. D.flex: 1 (grow to take the remaining space)
Show answer

Answer: D. flex: 1 (grow to take the remaining space)

Horizontal auto layout behaves like a flex row. Fill container means the child takes the leftover space, which is flex-grow: 1 (often written flex: 1). Hug contents is like letting the element size to its content.

27. Spacing mode set to auto

A header uses horizontal auto layout with gap set to "Auto" so the logo sits left and the menu sits right. Which CSS property matches this behaviour?

  1. A.justify-content: space-between
  2. B.align-items: stretch
  3. C.justify-content: center
  4. D.flex-direction: row-reverse
Show answer

Answer: A. justify-content: space-between

Auto spacing in Figma pushes children apart so the space between them is shared equally, with the first and last item at the edges. That is what justify-content: space-between does on a flex container.

28. Constraints when resizing a frame

Inside a plain frame (no auto layout), a divider line has horizontal constraint "Left and right". The frame is resized from 360 to 768 wide. What happens to the line?

  1. A.It stays the same width and stays pinned left
  2. B.It scales in both width and height
  3. C.It stretches, keeping the same distance from both edges
  4. D.It moves to the centre at its old width
Show answer

Answer: C. It stretches, keeping the same distance from both edges

Left and right constraints pin both sides of the layer to the parent edges, so the layer grows or shrinks to keep those margins. "Scale" would resize it proportionally and "Center" would keep its width and move it.

29. Two brands from one library

A Dubai retail group runs two brands with different primary colours and corner styles but the same components. What is the most maintainable setup in Figma?

  1. A.A copy of the whole library for each brand
  2. B.One library with a variable mode for each brand
  3. C.One library with two variants of every single component
  4. D.Separate local styles in every product file
Show answer

Answer: B. One library with a variable mode for each brand

Components bind to semantic variables such as color/action/primary, and a brand collection holds one mode per brand. Switching the mode on a frame rebrands every component, so fixes to the components are made once.

30. Converting Figma pixels to rem

A heading is 28 px in Figma. The site's root font size is the browser default of 16 px. What rem value should the developer use?

  1. A.2.8rem
  2. B.1.5rem
  3. C.1.75rem
  4. D.0.57rem
Show answer

Answer: C. 1.75rem

rem is relative to the root font size, so 28 ÷ 16 = 1.75rem. Using rem means text scales when users raise their browser font size, which is better for accessibility than fixed pixels.

31. Where a variable mode applies

You set the Theme collection to Dark mode on a page frame. A card inside that frame has no mode set. Which mode does the card use?

  1. A.Light, because the default mode always wins
  2. B.Dark, because children inherit the mode from their parent
  3. C.Neither, so its bound colours show as missing
  4. D.Whichever mode was used when it was created
Show answer

Answer: B. Dark, because children inherit the mode from their parent

Variable modes cascade down the layer tree, much like CSS custom properties. A child uses its parent's mode unless it sets its own, so you can preview a whole screen in dark mode by setting it once at the top.

32. Icon font or inline SVG

Your old web app uses an icon font. Why do most design systems now prefer SVG icons?

  1. A.Icon fonts cannot be coloured with CSS in any way
  2. B.SVGs fail less and can be labelled or hidden properly
  3. C.SVGs are always larger files than fonts
  4. D.Browsers stopped supporting web fonts in 2024
Show answer

Answer: B. SVGs fail less and can be labelled or hidden properly

Icon fonts can show as empty boxes if the font fails, can be read out as odd characters by screen readers and suffer font smoothing. SVGs are real graphics that can be hidden with aria-hidden or given a title, and they can be multi-colour.

33. Handing off for many screen sizes

You hand off a pricing page designed only at 1440 px. What is the most useful thing to add?

  1. A.Mobile and tablet breakpoints and how parts reflow
  2. B.The same design exported at 2x resolution
  3. C.A note saying "make it responsive"
  4. D.A larger version of the page at 1920 px only
Show answer

Answer: A. Mobile and tablet breakpoints and how parts reflow

Developers need to know what happens as width changes: how columns stack, which elements hide, what wraps and the min and max widths. Showing a few breakpoints and the rules between them removes guesswork.

34. Translating a drop shadow

A Figma drop shadow has X 0, Y 4, Blur 12, Spread 0 and colour rgba(0,0,0,0.12). Which CSS line matches it?

  1. A.box-shadow: 4px 0 0 12px rgba(0,0,0,0.12);
  2. B.box-shadow: 12px 4px 0 0 rgba(0,0,0,0.12);
  3. C.box-shadow: 0 4px 12px 0 rgba(0,0,0,0.12);
  4. D.text-shadow: 0 4px 12px rgba(0,0,0,0.12);
Show answer

Answer: C. box-shadow: 0 4px 12px 0 rgba(0,0,0,0.12);

CSS box-shadow order is offset-x, offset-y, blur radius, spread, colour, the same order Figma uses. So X 0, Y 4, blur 12, spread 0 becomes 0 4px 12px 0. text-shadow applies to text only and has no spread.

35. Toast or inline message

A payment fails because the card has expired. The user must enter a new card. Which pattern should the system recommend?

  1. A.A toast that disappears after three seconds
  2. B.An inline error at the form that stays until fixed
  3. C.A tooltip on the Pay button
  4. D.A badge on the profile icon
Show answer

Answer: B. An inline error at the form that stays until fixed

Toasts are brief, auto-dismissing and easy to miss, so they suit confirmations like "Saved". An error the user must act on needs a persistent message placed where the fix happens, with a clear next step.

36. Checking the build against design

Developers say a feature is done. What does a design QA pass involve?

  1. A.Rewriting the developer's code to match Figma
  2. B.Approving the Figma file again without the build
  3. C.Running a usability study with 50 users
  4. D.Checking the real build's spacing, states and behaviour
Show answer

Answer: D. Checking the real build's spacing, states and behaviour

Design QA compares the working build with the intended design on real devices: spacing, type, colours, responsive behaviour and states like errors and focus. Issues are logged with screenshots, so small gaps are caught before users see them.

37. What changed since handoff

A developer built a screen last week. The designer has since adjusted padding and a label. In Dev Mode, how can the developer see exactly what changed?

  1. A.Use compare changes on the frame to see a diff
  2. B.Export both versions as PNG and overlay them
  3. C.Ask the designer to list changes from memory
  4. D.Rebuild the whole screen from scratch
Show answer

Answer: A. Use compare changes on the frame to see a diff

Dev Mode tracks edits to frames marked ready for dev and offers a compare view showing what changed, including property values like padding and text. This replaces guesswork and long chat threads.

38. Design and engineering disagree

Your designer wants a rich, animated onboarding; the tech lead says it will add three weeks and suggests a simpler version. What is the best way for you to resolve it?

  1. A.Always side with engineering because they build it
  2. B.Always side with design because they own the experience
  3. C.Escalate to your manager right away
  4. D.Bring them together around the goal and evidence: what user problem matters most, what is the cost, can a simpler first version be tested and improved later
Show answer

Answer: D. Bring them together around the goal and evidence: what user problem matters most, what is the cost, can a simpler first version be tested and improved later

The PM's job is to frame trade-offs against outcomes, not pick sides by role. Often an incremental plan, such as a simple version now plus a test of the richer one, satisfies both and reduces risk.

39. Limits of a clickable prototype

Users breeze through your clickable Figma prototype of a loan application. What does this test NOT tell you?

  1. A.Whether people will apply when it is their real money
  2. B.Whether people can find the main buttons in the flow
  3. C.Whether the screen order makes sense to new users
  4. D.Whether the field labels are easy to understand
Show answer

Answer: A. Whether people will apply when it is their real money

Prototype tests are good for usability: navigation, labels and flow. They cannot show real behaviour under real stakes, such as sharing bank statements or accepting an interest rate. That value risk needs a different test, such as a pilot with real applications.

40. Designing with real words

Why do UX writers push for real draft copy in wireframes instead of "lorem ipsum"?

  1. A.Lorem ipsum is illegal to use in commercial software
  2. B.Real copy makes the wireframes load faster
  3. C.Lorem ipsum cannot be shown on mobile screens
  4. D.Real text reveals layout, length and clarity problems early
Show answer

Answer: D. Real text reveals layout, length and clarity problems early

Placeholder text hides real issues: labels that do not fit, messages that need two lines, or flows that cannot be explained simply. Drafting real words early, even rough ones, shapes the design instead of squeezing words in at the end.

Design Systems interview questions for experienced candidates hard

41. Retiring an old API version

You plan to switch off /v1 on a fixed date. Besides emailing clients, what can the API itself do so client developers notice?

  1. A.Send Deprecation and Sunset headers with a link to the docs
  2. B.Return 500 errors at random on v1
  3. C.Slow v1 down a little each week without notice
  4. D.Remove v1 from the docs and keep it running forever
Show answer

Answer: A. Send Deprecation and Sunset headers with a link to the docs

The Deprecation header marks the endpoint as deprecated, and the Sunset header gives the date it will stop working, often with a Link to migration docs. Client tools and logs can then flag the usage. Track remaining v1 traffic by client to know who still needs help.

42. Teams ignore the design system

Several product teams are building their own buttons and modals instead of using the design system. What is the most effective response?

  1. A.Find out why through interviews and code audits, fix the gaps (missing variants, slow releases, weak docs), and set up a clear contribution process
  2. B.Ask leadership to make use of the design system mandatory with penalties
  3. C.Rebuild the whole design system from scratch
  4. D.Let every team keep its own components
Show answer

Answer: A. Find out why through interviews and code audits, fix the gaps (missing variants, slow releases, weak docs), and set up a clear contribution process

Low adoption usually means the system does not meet real needs or is hard to use. Treating teams as customers, closing gaps and letting them contribute builds lasting adoption. Mandates without fixes create workarounds.

43. Changing a widely used component

You must change the Button component so its "size" values change from small/large to sm/md/lg. Forty products use it. What is the best rollout?

  1. A.Release it as a new major version with clear migration notes, deprecate the old values with warnings first, and support the old version for a set period
  2. B.Change it silently in the main library overnight
  3. C.Ask each team to rebuild their own button
  4. D.Never change components once released
Show answer

Answer: A. Release it as a new major version with clear migration notes, deprecate the old values with warnings first, and support the old version for a set period

Breaking changes need versioning, communication and a migration path. Deprecation warnings and codemods or Figma library update notes let teams move on their own schedule without surprise breakages.

44. Preparing for German and Arabic

Your English-only app will launch in German and Arabic. What should you change in the designs first?

  1. A.Nothing; translation is the developers' job
  2. B.Make every text box exactly fit the English text
  3. C.Use images of text so translation is easier
  4. D.Allow for text expansion (German is often much longer), avoid fixed-width labels and text in images, and mirror layouts and directional icons for right-to-left Arabic
Show answer

Answer: D. Allow for text expansion (German is often much longer), avoid fixed-width labels and text in images, and mirror layouts and directional icons for right-to-left Arabic

Fixed containers break when translated strings grow, and RTL languages flip reading order, navigation and progress direction. Designing with flexible layouts and testing with real or pseudo-localised strings prevents costly rework.

45. Smart animate jumps instead of moving

You link two frames with Smart animate so a card should slide and grow. In the prototype it just cross-fades. The card layer is called "Card" in frame A and "Card copy" in frame B. Why?

  1. A.Smart animate only works on frames under 400 px wide
  2. B.Smart animate matches layers by name, so different names cannot be tweened
  3. C.Cross-fade is used whenever a layer changes size
  4. D.The prototype must be viewed in the mobile app to animate
Show answer

Answer: B. Smart animate matches layers by name, so different names cannot be tweened

Smart animate looks for layers with the same name and hierarchy in both frames and animates the differences in position, size and other properties. Unmatched layers fade in and out instead, so renaming "Card copy" to "Card" fixes it.

46. Hover colour by lowering opacity

A developer makes every button hover state by setting opacity: 0.8 on the whole button. On a photo background, what problem does this cause?

  1. A.The photo shows through, so colour and contrast vary
  2. B.Opacity cannot be animated, so the hover state snaps
  3. C.Screen readers announce the button as disabled
  4. D.The button stops receiving keyboard focus
Show answer

Answer: A. The photo shows through, so colour and contrast vary

Opacity makes the whole element semi-transparent, including the label, so whatever is behind it bleeds through and contrast varies by background. A dedicated hover token, or an overlay on the fill only, gives a predictable colour that can be checked for contrast.

47. Keyboard behaviour of a modal

Your Modal component spec covers visuals only. What keyboard behaviour should the spec add for an accessible dialog?

  1. A.Focus stays on the page behind, and Tab keeps moving through it
  2. B.Esc is disabled so users cannot close by mistake
  3. C.Focus moves in and is trapped; Esc closes and focus returns
  4. D.Focus jumps to the browser address bar on open
Show answer

Answer: C. Focus moves in and is trapped; Esc closes and focus returns

An accessible modal moves focus into the dialog when it opens, keeps Tab cycling inside it, closes on Esc, and sends focus back to the element that opened it. Without this, keyboard and screen reader users get lost behind the overlay.

48. Is this change breaking?

Your Figma library and code package are versioned together. You rename the Button variant value "Ghost" to "Tertiary". Why is this a breaking change for designers, not just developers?

  1. A.Instances set to Ghost lose their match and may reset
  2. B.Renaming a variant value deletes every existing instance
  3. C.Figma blocks publishing when a value is renamed
  4. D.Renaming is cosmetic and never affects instances
Show answer

Answer: A. Instances set to Ghost lose their match and may reset

Instances store the variant values they were set to. When a value is renamed, consumers accepting the update can see instances snap to another variant, so screens change silently. Treat renames as breaking: announce them, offer a migration note and plan the release.

49. Choosing a team model

A company has 8 product squads and a design system team of two people who have become a bottleneck for new components. Which operating model usually fits best?

  1. A.Fully centralised: only the two people may create anything
  2. B.No system team: every squad keeps its own separate library
  3. C.Outsourcing all component work to an agency each year
  4. D.Hybrid: core team sets standards, squads contribute
Show answer

Answer: D. Hybrid: core team sets standards, squads contribute

Small central teams cannot build everything for many squads. A hybrid (or federated) model lets squads propose and build components while the core team reviews quality, accessibility and naming, keeping one system without the queue.

50. Error state shown only in red

Your Input error state turns the border red and does nothing else. Which change best meets WCAG and helps colour-blind users?

  1. A.Use a brighter red with higher saturation
  2. B.Add an error icon and a text message linked to the input
  3. C.Make the border 4 px thick but keep it red only
  4. D.Flash the border red three times on error
Show answer

Answer: B. Add an error icon and a text message linked to the input

WCAG 1.4.1 says colour must not be the only way to convey information. An icon plus a clear message ("Enter a 10-digit mobile number"), linked with aria-describedby, works for colour-blind and screen reader users alike.

51. The main component was deleted

Someone deleted the main Badge component from the library file and published. What is true about the existing Badge instances in product files?

  1. A.They are deleted from every file at the same moment
  2. B.They turn into images and lose all their layers
  3. C.They still exist, but get no updates until the main is restored
  4. D.They link to the most similar other component
Show answer

Answer: C. They still exist, but get no updates until the main is restored

Instances keep their content when the main component is removed, but they can no longer receive changes. In the library file you can restore the main component (for example from version history or via "Restore main component"), then publish again to reconnect updates.

52. Which changes reach overridden layers

On an instance, a designer overrode the label colour to red. Later the main component's label colour and font size both change. What does the instance show?

  1. A.The new colour at the new font size
  2. B.A red label at the old font size
  3. C.A red label at the new font size
  4. D.The old colour at the old font size
Show answer

Answer: C. A red label at the new font size

Overrides are tracked per property. The instance keeps the overridden colour but still receives changes to properties it did not override, such as font size. Resetting the override would bring back the main component's colour.

53. Showing depth in dark mode

In dark mode, black shadows barely show against a #121212 background, so cards and dialogs look flat. What approach do systems such as Material use?

  1. A.Make higher surfaces slightly lighter in tone
  2. B.Use white shadows instead of black ones
  3. C.Add thick bright borders around every surface
  4. D.Make raised surfaces darker as they rise
Show answer

Answer: A. Make higher surfaces slightly lighter in tone

In dark themes, higher surfaces get a lighter tone (Material 3 uses tonal surface colours) so depth reads without heavy shadows. Semantic surface tokens like surface-container-high make this automatic for each component.

54. Keeping Figma and code tokens in sync

Your team edits tokens in Figma, but developers keep a separate JSON file that falls out of date. Which workflow removes the double entry?

  1. A.Email a screenshot of the variables panel weekly
  2. B.Let developers pick colours from screenshots
  3. C.Keep two token files and compare them yearly
  4. D.Sync tokens to Git and build every platform from it
Show answer

Answer: D. Sync tokens to Git and build every platform from it

Tools such as Tokens Studio, or scripts using Figma's Variables REST API, push token changes to a repository, ideally as a pull request. A build step (for example Style Dictionary) turns that one source into CSS and app files, so design and code cannot silently differ.

55. One system, many frameworks

An enterprise has apps in React, Angular and plain server-rendered HTML. It wants one coded component library. Which option is designed for this?

  1. A.A React-only library wrapped inside iframes
  2. B.Copying Figma CSS snippets into each app
  3. C.A separate hand-built library per framework
  4. D.Web Components themed with CSS custom properties
Show answer

Answer: D. Web Components themed with CSS custom properties

Custom elements are a browser standard, so they work in any framework or plain HTML. Theming through CSS custom properties passes tokens through the shadow DOM boundary. Some teams add thin framework wrappers for better ergonomics.

56. Tab order that jumps around

A checkout page has a two-column layout. Developers built it with CSS order changes, and Tab now jumps from the left column to a footer link and back. What should the design handoff have specified?

  1. A.A larger focus ring so jumps are easier to follow
  2. B.tabindex="5" and higher on every element
  3. C.The intended focus order, matched by the DOM order
  4. D.Keyboard support only for the Pay button
Show answer

Answer: C. The intended focus order, matched by the DOM order

Keyboard focus follows the order in the HTML, not the visual layout. Annotating the focus order and keeping the source order aligned with it gives a logical path. Positive tabindex values are fragile and create more confusion.

57. Constraint for a proportional chart

In a plain frame, a bar inside a chart has horizontal constraint Scale. The frame is resized from 400 to 600 px wide. The bar was 100 px wide starting at x = 40. Where is it after resizing?

  1. A.Starting at x = 40 and 300 px wide
  2. B.Starting at x = 40 and 100 px wide
  3. C.Starting at x = 240 and 100 px wide
  4. D.Starting at x = 60 and 150 px wide
Show answer

Answer: D. Starting at x = 60 and 150 px wide

Scale keeps position and size as a percentage of the parent. The frame grew by 1.5×, so x becomes 40 × 1.5 = 60 and width 100 × 1.5 = 150. Left and right would instead keep fixed margins on both sides.

58. Two people edit the same record

Two accountants edit the same customer record at once. The second save silently overwrites the first. What is a better design?

  1. A.Detect the conflict and show both changes to resolve
  2. B.Always keep the first save and discard others
  3. C.Lock the record for a day after any edit
  4. D.Let the last save win, with no warning
Show answer

Answer: A. Detect the conflict and show both changes to resolve

Silent overwrites lose work and cause errors. Detecting conflicts, showing what changed and letting the user merge or choose protects data. Presence indicators ("Priya is editing") can prevent conflicts in the first place.

59. Discovery for an AI summary feature

Your team plans an AI feature that summarises long customer support threads for agents. Which discovery step reduces the most risk early?

  1. A.Ask agents whether they would like AI summaries
  2. B.Benchmark three large language models on a public summarisation dataset and pick the best
  3. C.Hand agents summaries made from real past threads and watch if they help
  4. D.Write the full technical design before talking to agents
Show answer

Answer: C. Hand agents summaries made from real past threads and watch if they help

Feeding real threads (with privacy safeguards) into a quick prototype, or even having a person write summaries Wizard-of-Oz style, tests value and usability together. Asking for opinions is unreliable, and public benchmarks do not show whether summaries help these agents with their tickets.

60. "It looks done, ship it"

After seeing a clickable prototype, the sponsor asks why go-live is still three months away. What should the BA have done?

  1. A.Shown a less attractive prototype on purpose
  2. B.Promised a go-live date in two weeks
  3. C.Said upfront that it was a mock-up with no logic
  4. D.Never shown a prototype to a sponsor
Show answer

Answer: C. Said upfront that it was a mock-up with no logic

High-fidelity prototypes can look like finished software, which raises expectations. Stating clearly that it has no back end, integrations, security or testing, and why those take time, avoids this. Lower fidelity also helps.

Ready to test yourself?

Take a 15-question Design Systems MCQ test with a score at the end, or practise the full Design Systems question bank and earn points on the leaderboard.

Start the Design Systems testTake a mock interview