Frontend engineer system design interview questions

As asked

Adobe Creative Cloud has over 30 million paying subscribers. Describe how your design and engineering approach changes when you know a feature will be used at that scale from day one, compared to building something for a few thousand internal users.

Sample answer outline

Strong answers cover progressive rollout strategies (feature flags, canary deployments), observability from day one (structured logging, real-user monitoring), designing for partial failures so one region or cohort does not take down the whole fleet, and understanding that performance regressions at this scale have real revenue consequences. A great candidate also mentions backward compatibility and how a bad update to Photoshop or Lightroom can break professional workflows globally.

Expect these follow-ups

• How do you handle a hot path where 1% of requests come from 30% of your traffic?
• What is your rollback strategy if a deploy breaks a rendering pipeline?

As asked

Figma supports real-time collaborative editing where dozens of people can edit the same file simultaneously. Walk me through how you would design the data synchronization layer for this. How do you handle conflicts when two users move the same object at the same time?

Sample answer outline

A strong answer covers operational transformation or CRDTs as the two main approaches, explains why Figma uses a server-authoritative model with a central server that serializes all operations rather than a pure peer-to-peer CRDT approach, and discusses the tradeoff between complexity and correctness. The candidate should explain how vector clocks or sequence numbers track causality, how the client applies optimistic local updates and rolls back on conflict, and how presence (cursors, selection highlights) is handled as ephemeral state separate from document state. They should mention that Figma publishes engineering posts explaining their choices.

Expect these follow-ups

• If the server goes down mid-edit, how does a client know which local operations were acknowledged?
• How would you handle the case where one user deletes a frame that another user is actively editing inside of?

As asked

Design the frontend architecture for a Google Docs-style collaborative editor. Multiple users edit the same document concurrently with sub-200ms perceived latency.

Sample answer outline

Choose a conflict resolution strategy: OT (operational transform) or CRDT. Both let concurrent edits converge; CRDTs are easier to reason about at the cost of metadata overhead. Discuss the data model: a doc as a sequence of operations or a CRDT tree. Network: WebSocket for low latency, with reconnect-and-replay logic. Client: local-first writes for zero-latency feel, with rebase on remote ops. Discuss undo (per-user vs global), selection awareness (other cursors), and offline support.

Expect these follow-ups

• Why pick CRDT over OT in 2026?
• How do you handle a user typing 200wpm into a doc with 30 collaborators?
• What is your cursor presence protocol?

As asked

Design a reusable infinite-scroll feed React component for a content app. It must stay smooth at 60fps with 10,000 items.

Sample answer outline

Virtualise: only render the items in the viewport plus a small overscan buffer. Use IntersectionObserver on a sentinel near the bottom to trigger the next page fetch. Handle variable item heights with a measured cache. Discuss key-based identity for React reconciliation, scroll restoration on back navigation, and the tradeoff between window-virtualisation (whole list) and DOM recycling. Mention accessibility: the feed must remain keyboard navigable, screen reader friendly, with deterministic focus order.

Expect these follow-ups

• How do you preserve scroll position when a user navigates back from a detail page?
• What if some items have media that takes 1-2s to lay out - how do you avoid CLS?
• When would you NOT virtualise?

As asked

Design a reusable autocomplete search component for a product like GitHub's global search. Walk me through the component API, data fetching strategy, debouncing, caching, keyboard navigation, accessibility, and how you would handle 50ms API latency versus 500ms.

Sample answer outline

API: controlled input, async onSearch prop, renderResult slot. Debounce input at 200 to 300ms. Cache responses in a Map keyed by query string to avoid duplicate fetches. Keyboard navigation with roving tabindex or aria-activedescendant pattern. For high latency: show a loading state after 200ms delay, show stale results while new ones load. For low latency: optimistic immediate results without a spinner.

Expect these follow-ups

• How would you handle the case where a slow response comes back after a faster one for a different query?
• How would you design the caching layer to respect TTL and evict stale results?

As asked

You are building a component library that must support two brand themes (light and dark, plus a white-label partner brand) without duplicating component code. Walk me through your architecture for design tokens, CSS custom properties, component API, and how you ensure the library is tree-shakeable.

Sample answer outline

Design tokens defined in a JSON/YAML source of truth, compiled to CSS custom properties per theme. Component code references only semantic tokens (not raw values). Theme switching via a class on the root element. Each component is a separate entry point for tree shaking. Distribution: ESM plus CJS builds from Rollup, CSS injected via a side-effect import or css prop.

Expect these follow-ups

• How would you version the design system so consuming apps can migrate breaking changes at their own pace?
• What is the difference between semantic tokens and primitive tokens and why do you need both?

As asked

Design the frontend for an infinite-scroll feed that loads new posts as the user scrolls. Cover pagination strategy, DOM virtualization, skeleton loading, scroll position restoration when navigating back, and how you handle new posts arriving at the top while the user is mid-scroll.

Sample answer outline

Cursor-based pagination (not offset) to handle real-time inserts. Virtualize the list with TanStack Virtual for performance. Skeleton screens for loading states. Scroll restoration: save scroll offset to sessionStorage or History API state before navigation, restore on back. New posts: show a banner indicating new content rather than inserting above to avoid layout shift.

Expect these follow-ups

• How does cursor-based pagination differ from offset pagination and why is it better for feeds with frequent writes?
• What happens to your scroll restoration strategy if the virtualized list has variable item heights?

As asked

Design the frontend for an e-commerce product image gallery that needs to score 90+ on PageSpeed Insights. Cover image format selection, responsive images, lazy loading above/below the fold, LQIP, and how you would measure and monitor regressions in image performance.

Sample answer outline

Use AVIF with WebP fallback via picture element. Responsive images with srcset and sizes. Above-the-fold hero image gets fetchpriority=high and no lazy loading. Below-the-fold images get loading=lazy. LQIP: base64-encoded blurred thumbnail as placeholder. Monitoring: web-vitals library sending LCP to analytics, alerting on p75 regression in CI via Lighthouse CI.

Expect these follow-ups

• How does a CDN image transformation service like Cloudinary or imgix fit into this architecture?
• What is AVIF's browser support situation and how does the picture element handle fallback?

As asked

Design the state management and routing architecture for a multi-step checkout form with 5 steps, client-side validation per step, the ability to go back without losing data, and a partial save feature so users can resume on a different device.

Sample answer outline

State in a single reducer or Zustand store, persisted to localStorage for same-device recovery and to the server on step completion for cross-device. URL encodes the current step for shareable/refreshable state. Per-step validation with React Hook Form using a Zod schema per step. On submit of each step, patch the server resource so partial progress is saved.

Expect these follow-ups

• How would you prevent the user from deep-linking to step 3 if step 2 is incomplete?
• What is the difference between touched, dirty, and valid states in React Hook Form?

As asked

Design the authentication architecture for a Next.js app using JWTs. Cover where tokens are stored (cookie vs. localStorage), CSRF protection, token refresh flow, protecting App Router pages on both server and client, and how you handle expiry in the middle of a user session.

Sample answer outline

HttpOnly SameSite=Strict cookie for the JWT avoids localStorage script-injection risks. CSRF: SameSite=Strict mitigates most CSRF; for cross-origin cases add a double-submit token. Refresh: short-lived access token (15 min), long-lived refresh token in separate HttpOnly cookie. Middleware reads the cookie server-side to protect routes. On expiry: silent refresh attempt; if it fails, redirect to login.

Expect these follow-ups

• What does NextAuth.js add on top of this and when would you use it versus rolling your own?
• How do you protect a Server Component that needs the user's identity without passing the token through props?

As asked

Figma plugins run inside a sandboxed iframe and communicate with the main canvas thread via postMessage. Walk me through how you would design this security model, including what data the plugin can access, how you prevent a malicious plugin from exfiltrating user data, and how you handle plugins that hang or consume too much memory.

Sample answer outline

A strong answer covers the dual-thread model: the plugin code runs in a sandboxed iframe with a restricted JavaScript environment, and it communicates with the Figma document object model only through a serialized message protocol. Security controls include origin isolation, Content Security Policy, restricting network access from the plugin sandbox, and whitelisting which node properties are readable and writable. For resource abuse, the candidate should discuss execution timeouts, memory budgets enforced by the host, and the ability for Figma to kill a plugin process without affecting the main editor. A great answer also covers the audit/review process for published plugins in the community.

Expect these follow-ups

• How would you let a plugin make HTTP requests to an external API without letting it leak document data to that API?
• A plugin causes the editor to lag by running a heavy loop. How do you detect and stop it without blocking the main thread?

As asked

In a single-user editor, undo is straightforward: pop the last operation from a stack and apply its inverse. In Figma, where multiple users are editing simultaneously, undo gets complicated. How would you implement per-user undo so that undoing my action does not undo your concurrent changes?

Sample answer outline

A strong answer explains that each user maintains their own local undo history, and that inverting an operation must first be transformed against all operations that were applied after it by other users (selective undo using operational transformation). The key insight is that the client cannot simply replay its local history: it needs to transform its undo operation against concurrent remote operations to produce the correct inverse in the current document state. A great answer discusses the complexity of undo/redo stacks in systems with branching histories, and mentions that some collaborative editors (including older Figma versions) restricted undo to only work on the current session to avoid this complexity.

Expect these follow-ups

• What happens to a remote user's view if you undo a shape creation they have since moved?
• How do you handle undo when the operation to undo was itself an undo?

As asked

Figma Dev Mode lets developers inspect designs and extract design tokens (colors, typography, spacing, effects) as code. Design the data model that represents a design token in Figma, including how it maps to a specific layer's property, and how you would expose this through an API that a code-generation tool could consume.

Sample answer outline

A strong answer models a token as a name, a type (color, dimension, font-family, etc.), a resolved value, and optionally an alias chain (one token can reference another). The API should return tokens scoped to a selection, a component, or a whole file, with a stable identifier so code-gen tools can build stable variable names. The candidate should address how tokens compose with component variants (a button's background color token changes in hover state) and how to handle the case where a token resolves to different values in light vs dark mode. A great answer references the Design Tokens Community Group W3C spec that Figma aligns to.

Expect these follow-ups

• How do you handle a token whose value changes across modes or themes in the same file?
• How would you generate type-safe TypeScript types from a set of exported tokens?

As asked

Figma Variables let designers define named values (colors, numbers, strings, booleans) and switch between modes (for example, light and dark, or mobile and desktop). Design the data model that stores variables, their modes, and their resolved values, and explain how the editor resolves which value to use at render time.

Sample answer outline

A strong answer models a Collection as the grouping entity that owns a set of Modes and a set of Variables. Each Variable has a type and a value per mode. At render time, the active mode for a collection is determined by the frame's mode assignment, and any variable reference on a node resolves to the value for that mode. The candidate should handle aliasing: a variable can reference another variable of the same type (creating a chain that must be resolved without cycles). A great answer covers how this maps to actual token systems (W3C Design Tokens, Tailwind theme, CSS custom properties) and how Figma exports variable collections to code.

Expect these follow-ups

• How do you detect and prevent circular variable references at definition time?
• If a designer switches a frame's mode from light to dark, how do you efficiently re-render only the nodes that used variables from that collection?

As asked

When a user opens a Notion page, the client needs to fetch the full block tree, user presence data, and workspace metadata. Page loads should feel instant for recently visited pages even on slow networks. Walk me through your end-to-end caching strategy, including what you cache, where, and how you handle stale data.

Sample answer outline

A strong answer covers multiple cache layers. On the client: IndexedDB or in-memory store caches block trees by page ID, serving a stale-while-revalidate pattern so the page renders immediately from cache and updates in the background. On the server: Redis caches hot pages (recently accessed block trees) by page ID with a short TTL, reducing Postgres load. CDN-level caching is not useful here because pages are user-specific. The candidate should discuss cache invalidation: when a collaborator edits a block, the editing client sends the delta to the server which pushes the update via WebSocket to all connected clients and invalidates their caches. A great answer also covers cache warming for team workspaces where many users hit the same pages.

Expect these follow-ups

• You have a race condition where the client renders from its local cache and then receives a WebSocket update that conflicts with the cached version. How do you merge them?
• How do you handle the case where a user is offline and their local cache is the only copy of recent edits?

As asked

A Shopify merchant wants their storefront to be globally fast using CDN edge caching, but their homepage shows personalized recommended products and a live cart count in the header. These vary per user, so naive caching breaks them. How would you design the caching architecture to get both global edge performance and correct personalization?

Sample answer outline

A strong answer separates the cacheable shell from the dynamic fragments: the page HTML minus personalized sections is cached at the edge with a long TTL and served instantly; personalized content (recommendations, cart) is fetched client-side from a fast API after the initial paint. This is edge-side include (ESI) or client-side hydration pattern. They should discuss surrogate-key-based cache invalidation (purge by product ID when a product changes rather than invalidating the entire site), and how Shopify's own CDN uses cache-control headers with s-maxage for the edge vs max-age for the browser.

Expect these follow-ups

• How do you handle cache invalidation when a merchant changes a product price mid-campaign?
• What is the trade-off between storing the cart in a cookie versus making a round-trip API call on each page load?

As asked

Design the autocomplete service that powers the search bar on X: as a user types, they should see up to 5 query completions in under 50 milliseconds. The suggestions must blend trending topics, popular users, and the user's own recent searches.

Sample answer outline

A strong answer uses a trie or prefix-indexed inverted index stored in Redis for sub-10ms lookups, a pre-computed top-K list per prefix refreshed every few minutes from trending data, and a user-specific recency store (small sorted set per user) merged at query time. The candidate should address the latency budget (50ms means the client must be close to a PoP), character-by-character debouncing on the client side, and how to rank results that combine global popularity with personal relevance.

Expect these follow-ups

• How do you keep the trie up to date as new trending topics emerge without rebuilding the entire structure?
• A user types in Japanese. How does your prefix-matching approach change for languages without spaces?

As asked

Design the frontend architecture for a collaborative document editor like Notion where multiple users can edit the same document simultaneously. Focus on the conflict resolution model, local state management, network sync, and offline support.

Sample answer outline

Should discuss CRDTs (like Yjs or Automerge) versus Operational Transformation as conflict resolution approaches. Local state is immediately applied (optimistic update) and synced via WebSocket. Offline edits queue locally and merge on reconnect using the CRDT. Cursor positions for other users require presence messages on a separate channel.

Expect these follow-ups

• What is the difference between CRDTs and OT and why did the industry largely move to CRDTs?
• How would you handle undo/redo in a collaborative context where other users may have edited since your action?

As asked

An enterprise portal has 8 teams each owning a section of the app. They want independent deploys without coordinating releases. Walk me through the micro-frontend approaches you would evaluate (module federation, iframes, web components, route-based splitting) and the tradeoffs of each.

Sample answer outline

Module federation: shared runtime, tight React version coupling risk, best developer experience. iframes: true isolation, poor performance, accessibility and URL routing challenges. Web components: framework-agnostic, but complex state sharing and styling isolation. Route-based splitting with a shell app: simplest, works well if teams own top-level routes. Should recommend module federation for same-framework teams with a shared design system.

Expect these follow-ups

• How do you share authentication state and a design system across micro-frontends without duplicating bundle weight?
• What is the risk of multiple React instances in a module federation setup and how do you prevent it?

As asked

Design a browser-side analytics pipeline that tracks user interactions (clicks, page views, form submissions) and reliably delivers them to a backend endpoint even when the user closes the tab mid-session. Cover event buffering, batching, ordering, and retry logic.

Sample answer outline

Buffer events in memory and flush on interval or threshold. Use sendBeacon for tab-close/visibilitychange events to guarantee delivery without blocking navigation. IndexedDB as a persistence layer for retry on reload if the beacon fails. Batch events into a single POST to reduce requests. Include a sequence number per session for ordering on the backend.

Expect these follow-ups

• What is the difference between sendBeacon and a keepalive fetch request?
• How would you design the schema so the backend can handle out-of-order events?

As asked

Photoshop supports unlimited undo and redo of editing operations. Design the data structures and algorithms that power this. Consider both simple operations like a brush stroke and expensive operations like applying a filter to a 100 MB raw image.

Sample answer outline

The command pattern is the foundation: each operation is an object with execute and undo methods stored in a stack. For cheap operations, storing the inverse operation (e.g., color fill undo stores the previous pixels) is fine. For expensive filter operations, a snapshot approach with copy-on-write layer data is more practical. A great answer discusses memory budgets (how many states to keep in RAM vs compress to disk), lazy undo computation (only materialize the undo state when the user actually presses Cmd+Z), and non-destructive editing using adjustment layers to avoid storing pixel data at all.

Expect these follow-ups

• How do you handle undo across multiple layers that were edited in the same stroke?
• A user applies 200 operations, then undoes 50, then applies 20 new ones. How does your stack behave and what happens to the branched redo history?

As asked

You are building an iOS hiking app that uses MapKit. Users need to download map tiles for a region before going off-grid. Design the tile cache: how do you decide which tiles to download, how do you store them, and how do you manage the storage budget?

Sample answer outline

Tiles are identified by zoom level, x, and y in the slippy map convention. For a bounding box, the candidate should enumerate all tiles at each zoom level the user is expected to view. Storage is the product of tile count and average tile size (typically 20-50KB). For a 50km x 50km region at zoom levels 10-16, this can be several hundred megabytes. Storage management requires an eviction policy: LRU by last access or explicit region deletion. Tiles should be stored in a file system hierarchy or SQLite (MBTiles format). A strong answer discusses progress tracking for the download, background URLSession for resilience to the app being backgrounded, and the user-facing storage estimate before they confirm the download.

Expect these follow-ups

• How do you handle tile updates when the map data changes?
• What happens if the user starts the download and then loses connectivity halfway through?

As asked

Dashers often drive through areas with poor connectivity. The Dasher app must still accept deliveries, show navigation, and record delivery confirmations even when offline. How would you design the offline-first architecture for the Dasher mobile app, and how does it sync when connectivity returns?

Sample answer outline

Strong answers describe a local SQLite or Realm database on the device as the source of truth, with a sync queue that records operations performed offline (order accepted, delivery confirmed with photo). On reconnect, the queue replays operations to the server with conflict resolution: the server is authoritative for assignment decisions, but device-side delivery confirmations are trusted and idempotent. Candidates should address the case where a Dasher confirms a delivery offline but the server has already reassigned the order.

Expect these follow-ups

• How do you test offline sync logic without physically taking a phone out of coverage?
• What happens if two Dashers are assigned the same order due to an offline race condition?

As asked

Figma files can have hundreds of thousands of nodes. Describe how you would design an efficient binary file format for serializing and deserializing a Figma document. What encoding choices matter most for load time and file size?

Sample answer outline

A strong answer covers schema-driven binary encoding (Protobuf or FlatBuffers vs JSON), interning repeated strings and enum values into a string table, delta-encoding for spatial coordinates that are often close to their parent values, and lazy deserialization so the canvas becomes interactive before the full document is parsed. The candidate should discuss the tradeoff between forward/backward compatibility (schema evolution in Protobuf vs versioned file headers) and compression at the transport layer. A great answer mentions memory-mapped access for very large files so not everything needs to be in RAM, and how Figma streams initial visible nodes before the rest of the file.

Expect these follow-ups

• How do you handle schema evolution when an old client opens a file created by a newer version of Figma?
• How would you design the format to support incremental saves that only write changed nodes?

As asked

Notion databases let users define filters (e.g., Status = Done AND Date >= last week) and sorts (e.g., sort by Priority desc, then by Name asc). These filters and sorts are applied on the fly as the view renders. Walk me through how you would implement the filter and sort execution engine, both on the client for fast local filtering and on the server for large databases.

Sample answer outline

A strong answer covers both paths. For small databases (under a few hundred rows), the client can hold all rows in memory and apply filters and sorts locally in JavaScript, which gives instant feedback. For large databases, the server generates a SQL or Elasticsearch query from the filter/sort AST and returns a paginated result. The candidate should describe the filter schema (an AST with AND/OR nodes and leaf comparisons), how property types (date, select, multi-select, relation) affect comparison logic, and how to handle user-defined formulas that reference other properties. A great answer also discusses the sync between client and server: optimistic filtering on cached rows while the server query is in flight.

Expect these follow-ups

• A user has a filter that references a relation property linking to another database. How do you execute this join efficiently?
• How do you keep the client's local row cache consistent when another user modifies a row that matches the current filter?