Adobe 前端面试指南

Adobe front end interviews are practical engineering interviews built around the surfaces Adobe ships on the web: Photoshop web, Adobe Express, Acrobat web, the Firefly generative AI app, and the Spectrum design system that ties them together. The loop usually leans on JavaScript and React fundamentals, UI coding, debugging, performance, and client-side architecture, but recent candidate reports show real variation by team. Firefly and Adobe Express candidates have reported frontend-heavy/full-stack loops, while other Adobe loops still include DSA, object-oriented design, or non-frontend system design.

Do not over-invest in LeetCode-only prep. Adobe still asks data structures and complexity questions, but front end candidates who get remembered ship a small accessible component live, talk through a Spectrum-style design system tradeoff, and reason about Critical Rendering Path, React reconciliation, and editor state. Skim the official hiring page and your recruiter's instructions for the exact mix; level and team move the rounds around.

Interview process

Adobe's official "How we hire" page describes a five-stage process: application, Talent Partner call, hiring manager interview, skills assessments and team interviews, then offer. For technical roles, the skills stage covers "coding challenges, system design discussions, or portfolio reviews," and the timeline averages around four to five weeks end to end.

Community write-ups and recent candidate reports from Computer Scientist, Computer Scientist II, MTS-2, and Senior Frontend loops describe the engineering variant as:

• Recruiter call: 30 to 45 minutes on background, motivation, and logistics. Engineering candidates often field a few warm-up JavaScript or React questions here.
• Hiring manager screen: 30 to 45 minutes on scope of past projects, ownership, and a high-level technical discussion tied to the role.
• Technical screen: 45 to 60 minutes of live coding on CoderPad or a similar pad. Front end candidates usually get a JavaScript-leaning question, sometimes with a small React or DOM follow-up.
• Onsite loop: 4 to 5 back-to-back sessions of 30 to 60 minutes. Reported loops include JavaScript and React fundamentals, UI coding, debugging, performance improvement discussion, client-side architecture, API integration, communication and collaboration, behavioral questions, and (for senior candidates) a project deep dive or director conversation.

Levels and teams matter for weighting: Computer Scientist (SDE 1) loops lean harder on DSA and JavaScript fundamentals, Computer Scientist II adds UI coding and client-side architecture, and Senior Computer Scientist or Senior Frontend loops push deeper on system design, API integration, and project ownership. Do not assume every "system design" round is frontend-only; recent community reports include a non-frontend cache or class-modeling round, a Firefly architecture round with a recursive API call follow-up, and an Adobe Express panel that expected product-specific discussion.

Coding rounds

Two coding-heavy rounds usually show up: a JavaScript and framework fundamentals session and a separate UI coding session.

The fundamentals session is dense. Reported Adobe questions include Array.prototype.reduce, finding the number of islands in a binary grid, converting a date string into a fixed format, finding leaders in an array, traversing descendant links from an async getAllLinks(url) API with cycle handling and efficiency follow-ups, and writing a custom React hook with interval cleanup. Also rehearse Promise behavior, Function.prototype.bind, debounce, throttle, deep clone, and a task runner that executes promises in batches. Interviewers may ask you to hand-run code because test cases are not always preloaded.

The UI coding session is a mini-project. Reported tasks include building an accordion in vanilla JS or React, rendering a chart from JSON, implementing a file or layer tree, designing a document header in React, and assembling small editor controls with CSS Grid or Flexbox. The interviewer adds requirements as you go, so factor your code into small pieces from the start and keep state in named functions rather than inline closures. Adobe interviewers cite accessibility, semantic HTML, and event-handler hygiene as differentiators, which lines up with how heavily the company invests in Spectrum, React Spectrum, and React Aria.

Good GreatFrontEnd practice questions:

• Array Reduce: Directly reported in an Adobe onsite and a good proxy for JavaScript polyfill fluency
• Count Islands in a Grid: Matches a reported Adobe coding round asking for the number of islands in a 0/1 grid
• Map Async Limit: Closest practice for the reported async descendant-link traversal follow-ups around promises, cycles, and efficient API calls
• Accordion: Directly reported UI coding task; rehearse keyboard interaction and ARIA expansion state
• Design a Drawing Tool (Figma/Canva): The closest GreatFrontEnd analog to Adobe Express, Photoshop web, Firefly canvas surfaces, and the reported Canva/Google Slides-style product prep

Use GreatFrontEnd's user interface coding questions and quiz questions to keep DOM, async, accessibility, and React internals fresh before the loop.

System design rounds

The front end system design round at Adobe is closer to a guided technical discussion than a textbook scalability interview when the role is explicitly frontend-heavy. Candidate reports consistently land on the same themes: performance optimization, accessibility, build tooling, security, API integration, and component architecture. Reported scenarios include a file directory or layer tree with virtualization, a notifications system handling millions of real-time updates, a dashboard with heavy data-grid rendering, and a generative AI panel that streams progress while the model runs. Recent reports also mention non-frontend system design and object-model rounds, so senior candidates should be comfortable moving between UI architecture and plain software design.

Structure the answer around user actions first, then the document or domain model, the render path, state ownership, and reliability. Adobe surfaces are document-heavy and selection-heavy, so practice talking about layer trees, z-order, undo and redo, optimistic UI, virtualization for long panels, and how a Spectrum-style design system constrains the component API. Build tooling and micro-frontends are fair game given Adobe's public move from monolithic frontends to Module Federation; have an opinion on shared dependencies, runtime composition, and bundle splitting. Adobe runs hundreds of products on Spectrum, so accessibility, internationalization, and right-to-left support are core requirements, not afterthoughts.

Good Adobe-shaped scenarios to rehearse: a streaming Firefly generative panel with cancellation and progress state, an Adobe Express collaborative canvas, a Photoshop-web-style editor with WebAssembly under the hood and Web Components for the chrome, an Acrobat PDF viewer with virtualized pages and annotations, and a Spectrum data grid or combobox built on the React Aria state-and-behavior split.

Use the Front End System Design Playbook for structure and the system design question set for collaborative editor, rich text editor, and drawing-tool practice.

Project and code deep dives

Senior loops usually add a project deep dive. Pick one system where you owned a complex UI, a performance-sensitive interaction, a streaming feature, a design-system component, or a piece of platform another team built on. Walk through the user problem, the architecture, the data and state model, the rendering and accessibility tradeoffs, the rollout, and the alternatives you rejected. Adobe interviewers reward specific numbers (frame times, bundle sizes, percentile latencies, accessibility audit scores) far more than vague claims of impact.

Values and behavioral rounds

Adobe's stated core values are Genuine, Exceptional, Innovative, and Involved, and the hiring manager and behavioral rounds explicitly probe these. Prepare 8 to 10 STAR-format stories spanning ownership, cross-team collaboration, scope decisions, technical disagreement, mentoring, and learning from a shipped failure. Adobe ships globally and across many product orgs, so stories that involve partnering across design, research, accessibility, localization, or another engineering team land well.

Recommended preparation strategy

1. Read Adobe's official hiring material first: Start with How we hire and any role-specific notes your recruiter sends so the stage order is not a surprise.
2. Use Adobe's web products hands-on: Spend an hour each inside Adobe Express, Photoshop on the web, Firefly, and Acrobat online. Pay attention to editor toolbars, layer panels, generative AI panels, undo and redo, share and comment flows, and how Spectrum components feel across surfaces.
3. Study how Adobe builds these surfaces: Read Photoshop's journey to the web, Introducing React Spectrum, and Transforming a Huge Monolith into Micro Frontends for the WebAssembly, design-system, and Module Federation playbook.
4. Drill JavaScript, async, and light DSA fundamentals: Polyfill reduce, Promise, and bind; implement debounce, throttle, deep clone, and bounded-concurrency async mapping; then practice grid DFS/BFS, array scanning, and graph traversal with cycle detection. Rehearse explaining React reconciliation, when useMemo and useCallback actually help, and how Critical Rendering Path interacts with hydration.
5. Practice a 45-minute UI coding mini-project: Pick one of accordion, tabs, autocomplete, a chart from JSON, or a file or layer tree. Build it end to end in React, narrating state shape, event handling, accessibility, and what you are deferring.
6. Practice Adobe-shaped system design: Take one real Adobe flow (a Firefly generative panel, an Express editor canvas, an Acrobat annotation viewer, a Spectrum data table) and design it end to end. Cover document model, render path, virtualization, optimistic UI, streaming and cancellation, accessibility, and internationalization.
7. Prepare a project deep dive and values stories: Choose one system you personally shaped and can walk from user problem to architecture to metrics. Match concrete stories to Adobe's Genuine, Exceptional, Innovative, and Involved values rather than retrofitting after the question.

Official resources

• Adobe - How we hire: Official documentation of the five-stage hiring process and what each stage evaluates.

Company blog posts

• Photoshop's journey to the web: How Adobe used WebAssembly, Emscripten, Web Components with Lit, Spectrum Web Components, and Service Workers with Workbox to bring Photoshop to the browser.
• Introducing React Spectrum: The React Stately, React Aria, and React Spectrum layering that splits state, behavior, and rendering across Adobe's design system.
• React Spectrum and React Aria blog: Ongoing posts on submenus, adaptive press events, internationalization, and accessibility patterns that power Adobe's product UI.
• Transforming a Huge Monolith into Micro Frontends: Adobe Campaign's move to Webpack 5 Module Federation, runtime remotes, and shared singletons.
• Adobe Tech Blog - Engineering: Index of engineering posts spanning frontend architecture, performance, design systems, and AI surfaces.

Community resources

• Frontend Interview Handbook Adobe front end interview questions: Sister site coverage of Adobe's front end interview question bank and patterns.
• Exponent - Get a Job at Adobe: Community guide to Adobe's interview process and question types across engineering roles.
• Frontend Interview Experience in Adobe (Computer Scientist II): Six-round candidate write-up covering DSA, JavaScript and React internals, a task-runner coding exercise, and a file directory system design discussion.
• My Frontend Interview Experience with Adobe for Computer Scientist (SDE1): Candidate-reported four-round loop covering a discussion-style front end system design round, a Promise polyfill and bar chart coding session, and JavaScript and CSS fundamentals.
• Glassdoor Adobe Frontend Developer interviews: Candidate-reported Adobe front end developer interview questions and experiences across levels and offices.