Вопросы на собеседовании: Дизайн-инженер
100 реальных вопросов с образцовыми ответами и пояснениями для уровня Middle.
Смотреть пример резюме: Дизайн-инженер →Тренировка флешкарточками
Интервальное повторение · Hunter Pass
Вопросы
Я введу единый контракт на основе назначения и временные адаптеры.
- Сначала соберу реальные сочетания props, а затем определю variant и size.
- Каждый адаптер сохранит события и DOM и предупредит о сочетаниях без соответствия.
- Буду переводить приложения по одному, а CI запретит новые импорты старого API.
Зачем это спрашивают: Интервьюер оценивает безопасное объединение расходящихся API компонентов.
Я заменю конфликтующие флаги структурными слотами и одним явным режимом взаимодействия.
- Слоты header, media, body и actions дадут композицию без внутренних селекторов.
- Ссылка карточки и меню останутся отдельными целями фокуса.
- Объединения типов TypeScript запретят невозможные сочетания вроде disabled с href.
Зачем это спрашивают: Интервьюер оценивает моделирование композиции и недопустимых состояний.
Я разделю нативный Select и асинхронный Combobox, сохранив общие стили поля.
- Select останется вариантом для коротких списков и обычной отправки формы.
- Combobox возьмёт на себя отмену запросов, загрузку, пустую выдачу и виртуализацию.
- Общая обёртка Field выровняет подписи, ошибки, плотность и фокус.
Зачем это спрашивают: Интервьюер оценивает выбор границ между контролами с разным поведением.
Я отделю смену формата значения от визуальной переработки.
- Контрактные тесты покроют UTC, отрицательные смещения, переходы летнего времени и даты без времени.
- Устаревающий адаптер временно примет Date и вызовет прежний callback.
- Буду переводить формы по сценариям и сравнивать отправленные данные до удаления адаптера.
Зачем это спрашивают: Интервьюер оценивает сохранение смысла дат при широкой миграции.
Я сохраню общую доступную основу, но разделю Dialog, AlertDialog и Sheet.
- Основа будет отвечать за удержание фокуса, Escape, блокировку прокрутки и возврат фокуса.
- Каждый публичный примитив ограничит размещение и закрытие вместо произвольных флагов.
- Тесты покроют вложенные меню и удаление trigger во время подтверждения.
Зачем это спрашивают: Интервьюер оценивает переиспользование механики оверлеев без смешения разных паттернов.
Я вынесу выбор строк в безголовый контракт состояния, сохранив композицию ячеек.
- Стабильные ID строк и набор выбранных ID заменят выбор через DOM.
- Единая колонка реализует checkbox, диапазоны с Shift и промежуточное состояние.
- Документация серверной пагинации разделит выбор страницы и всей выборки.
Зачем это спрашивают: Интервьюер оценивает владение состоянием в переиспользуемой таблице.
Я заменю слой стилей под существующим публичным контрактом.
- Computed styles и Chromatic подтвердят совпадение по каждому компоненту.
- Значения темы станут CSS-переменными, а статические варианты перейдут в модули.
- Тестовое приложение и лимит бандла остановят проблемную группу до удаления зависимости.
Зачем это спрашивают: Интервьюер оценивает отказ от стилевой инфраструктуры без видимых регрессий.
Я заменю приватные селекторы явными слотами в начале и конце поля.
- Input будет управлять отступами, областями нажатия, disabled-стилями и местом для ошибки.
- Примеры миграции покроют поиск, валюту и кнопку очистки.
- После перехода внутренние классы можно будет хешировать без поломки поддерживаемых раскладок.
Зачем это спрашивают: Интервьюер оценивает превращение случайной связанности в узкую точку расширения.
Я опубликую точку входа Badge без побочных эффектов и уберу из него runtime-данные локалей.
- Package exports сохранят совместимость общего импорта и откроют прямой путь.
- Текст статуса придёт из продукта, а Badge только свяжет status с семантическими стилями.
- Для чанка маршрута появится лимит, проверяемый на собранном пакете.
Зачем это спрашивают: Интервьюер оценивает связь API с реальной стоимостью бандла.
Я ограничу срок адаптера и покажу каждое оставшееся место использования с владельцем.
- Старый экспорт предупредит в разработке и даст ссылку на инструкцию.
- CI запретит новые использования, сохранив текущее поведение задержавшимся командам.
- Релиз удаления получит дату, а спорные случаи станут решениями API, не вечными исключениями.
Зачем это спрашивают: Интервьюер оценивает завершение ограниченной по сроку миграции.
Я отклоню конфликт до генерации платформенных файлов в Style Dictionary.
- Проверка нормализует пути как CSS-преобразование и покажет оба источника.
- Дизайнеры выберут основное семантическое имя, а второе останется алиасом на один релиз.
- CSS, типы TypeScript и манифесты останутся детерминированными после переименования.
Зачем это спрашивают: Интервьюер оценивает обработку конфликтов внутри token-пайплайна.
Я прослежу один неверный токен от набора Figma до вычисленного значения кнопки.
- Сначала проверю экспорт нужной темы Tokens Studio.
- Затем изучу преобразования, порядок селекторов и атрибут темы на document.
- Фикстура с двумя темами будет блокировать такую ошибку в CI.
Зачем это спрашивают: Интервьюер оценивает сквозную диагностику разрешения темы.
Я сохраню общее типографическое назначение и сгенерирую числовые значения отдельно для платформ.
- Источник разделит роль семейства, начертание, размер, высоту строки и трекинг.
- Преобразования выдадут безразмерный CSS line-height и проверенные пункты iOS.
- Двухстрочные эталоны поймают расхождения, которых не видит схема.
Зачем это спрашивают: Интервьюер оценивает межплатформенную семантику типографических токенов.
Я сначала опишу роль выбранного ряда, а не открою обход палитры.
- Проверю hover, disabled, тёмную тему и соседние ряды.
- Недостающий примитив останется внутренним под семантическим data-selected.
- Различимость проверю на реальном фоне и при моделировании особенностей цветового зрения.
Зачем это спрашивают: Интервьюер оценивает превращение запроса цвета графика в устойчивую семантическую роль.
Я сначала опубликую замену и сохраню surface-subtle как генерируемый алиас.
- Журнал назовёт причину, замену и последнюю версию с алиасом.
- Сканирование репозиториев покажет остаток точнее количества загрузок.
- Мажорный релиз пакета удалит алиас только после выпуска всех потребителей.
Зачем это спрашивают: Интервьюер оценивает версионирование миграции токена между репозиториями.
Я выясню, неверен ли общий смысл или один компонент выбрал неподходящую роль.
- Отчёт зависимостей отделит намеренных потребителей от случайных.
- До принятия снимков проверю плотные, обычные и мобильные композиции.
- Локальное расхождение нужно исправить в компоненте, а не во всей шкале.
Зачем это спрашивают: Интервьюер оценивает анализ влияния широкого изменения токена.
Я введу стабильную сортировку до форматирования и проверю совпадение артефактов между операционными системами.
- Пути, темы и назначения будут использовать одно сравнение без зависимости от локали.
- Версии Node и Style Dictionary закрепятся, а время исчезнет из файлов.
- CI matrix сгенерирует чистые артефакты на macOS и Linux, а затем сравнит их байты и хеши SHA-256.
Зачем это спрашивают: Интервьюер оценивает детерминированную генерацию токенов в разных средах.
Я буду проверять объявленные семантические пары текста и фона.
- Манифест перечислит допустимые поверхности для text-muted в каждой теме.
- CI рассчитает контраст WCAG и назовёт точные проблемные алиасы.
- Storybook дополнительно проверит реальные размеры шрифта, hover и disabled.
Зачем это спрашивают: Интервьюер оценивает проверку контраста по реальным сочетаниям токенов.
Я опубликую нейтральные CSS-переменные и типизированные метаданные.
- CSS-переменные дадут runtime-темы, а JSON поддержит design tooling.
- Помощники фреймворков могут выбирать тему, но не владеть значениями.
- Фикстура каждого стека установит tarball и проверит одинаковые алиасы.
Зачем это спрашивают: Интервьюер оценивает отделение доставки токенов от адаптеров фреймворков.
Я сохраню авторство дизайна, но потребую проверяемый релиз пакета.
- Экспорт откроет pull request с generated diff и затронутыми компонентами.
- Дизайн отвечает за смысл, инженеры за преобразования и целостность пакета.
- Приложения будут получать неизменяемые версии, а не последний JSON ветки.
Зачем это спрашивают: Интервьюер оценивает совместное владение публикацией токенов.
Закрытые вопросы
- 21
Карточка переполняется только в sidebar шириной 280px. Как сделать её адаптивной к контексту?
responsive - 22
Toolbar прыгает между английским и русским из-за переноса действий. Какую CSS-систему применить?
csssystem-design - 23
Карточки должны быть шириной 240-360px и заполнять любого родителя. Как описать сетку?
gridcss-grid - 24
Sticky перестал работать после overflow: clip в каркасе приложения. Как диагностировать?
- 25
Редактору нужен изменяемый инспектор 320px без переполнения холста. Как построить?
- 26
Mobile hero на 100vh скрывается за панелями браузера. Какую viewport-единицу выбрать?
css - 27
Container query работает, но вложенный график больше не измеряет родителя. Что проверить?
queriescontainers - 28
JavaScript masonry прыгает при загрузке изображений. Какую CSS-альтернативу рассмотреть?
cssjavascript - 29
Переопределения продукта побеждают forced-colors несмотря на cascade layers. Как их организовать?
- 30
Checkout перестраивается после hydration по ширине window и вызывает CLS. Как убрать?
hydrationweb-vitals - 31
Странице Next.js нужны клики, но оболочка может остаться серверной. Где провести client boundary?
nextjs - 32
React Tooltip читает document при импорте и ломает SSR Next.js. Как исправить?
reactssrnextjs - 33
React и Vue нужен одинаковый компонент Tabs. Стоит ли делить код рендеринга?
reactvuetabs - 34
Vue-контрол копирует prop в локальное состояние и игнорирует сброс родителя. Как исправить API?
vueapi - 35
Калькулятор цены Astro находится ниже первого экрана. Какой hydration directive выбрать?
pricinghydration - 36
React-виджет в Astro удваивает JavaScript из-за импорта всей design-system. Как сузить?
reactdesign-systemsystem-design - 37
Svelte action меняет классы, которыми владеет design-system. Как сделать поведение предсказуемым?
system-designdesigndesign-system - 38
SvelteKit мигает неверной темой из-за выбора в localStorage. Как исправить?
- 39
Корень пакета экспортирует React hooks, и Server Component становится клиентским после импорта токена. Как перестроить?
reactcomponentsnextjs - 40
Modal ломается при Astro view transitions из-за возврата фокуса в старый DOM. Как исправить?
dialogsdom - 41
Framer Motion анимирует 200 строк при фильтрации и теряет кадры. Как переработать?
- 42
Параметры spring одной кнопки скопированы в 27 файлов. Как создать motion-токен?
tokens - 43
Переход Next.js начинается до готовности данных и оставляет пустую панель. Как выстроить?
nextjs - 44
Перетаскиваемая панель работает указателем, но не клавиатурой. Как завершить?
keyboard - 45
View Transitions преобразует аватары между страницами, но личности иногда не совпадают. Что изменить?
- 46
Lottie-анимация успеха задерживает checkout на две секунды. Как изменить?
motion - 47
Rive hero продолжает рендериться вне экрана и нагружает CPU. Как управлять?
- 48
Стек уведомлений анимирует высоту и сдвигает страницу. Как стабилизировать?
- 49
Прототип использует Framer Motion, Motion One и CSS для трёх простых эффектов. Как сократить?
cssprototypesprototyping - 50
Дизайн просит reveal 900ms, но пользователи кликают до завершения. Как решить?
design - 51
Меню аккаунта открывается по hover, закрывается при пересечении указателем зазора и недоступно с клавиатуры. Как вы исправите взаимодействие?
keyboard - 52
Multi-select combobox не сообщает в NVDA ни число результатов, ни удаление выбранных элементов. Что вы измените?
- 53
Kanban-доска поддерживает drag and drop между колонками, но не предлагает способа работы без указателя. Как привести её к WCAG?
wcagschemaa11y - 54
Сводка ошибок checkout видна, но пользователям скринридера приходится искать неверно заполненные поля. Как вы доведёте исправление?
validation - 55
В виртуализированной таблице скринридер теряет контекст, когда строки удаляются из DOM. Какое ограниченное исправление вы возьмёте?
gridcss-gridvirtualization - 56
Tooltip графика показывает точные значения только при hover указателя. Как сделать визуализацию доступной без зрения?
dataviz - 57
Диалог завершения сессии даёт 20 секунд и не позволяет остановить отсчёт. Что вы сделаете?
sessions - 58
Вложенный диалог открывает date picker, после чего фокус уходит на страницу позади обоих overlay. Как это диагностировать?
- 59
При zoom 400 процентов липкий cookie banner закрывает единственную кнопку Сохранить. Как устранить замечание аудита?
cookies - 60
Аудит design system нашёл разные focus indicators в 46 компонентах, а forced-colors скрывает часть из них. Как ограничить исправление?
system-designdesigncomponents - 61
Обновление variable font создало 600 diffs в Chromatic. Как проверить их без массового принятия регрессий?
typographyvisual-regression - 62
Playwright screenshots проходят локально, но падают в Linux CI из-за других переносов текста. Что стабилизировать первым?
playwright - 63
Снимок carousel нестабилен, потому что autoplay переключает слайд во время захвата. Как сохранить смысл теста?
snapshotflaky - 64
Разница границы в один пиксель появляется только при device scale factor 1.25. Стоит повысить threshold?
- 65
PR с токеном меняет тени в 80 stories, но продуктовые страницы не представлены в Storybook. Как оценить радиус изменений?
tokensstorybookresilience - 66
Chromatic не показывает diff, но кнопка невидима в Windows High Contrast. Какое покрытие добавить?
coveragevisual-regressiona11y - 67
У responsive navigation есть snapshots на 375 и 1440 пикселей, но она ломается на 820. Как изменить матрицу VRT?
responsivesnapshot - 68
Screenshot test ждёт две секунды исчезновения skeleton и всё равно нестабилен под нагрузкой. Что изменить?
uxdebugging - 69
Команда хочет делать snapshot для каждой комбинации компонента с 12 props. Как сохранить полезность набора?
componentssnapshot - 70
Визуальный baseline одобрили вместе с настоящим багом обрезки. Как не дать принятому дефекту стать постоянным?
defects - 71
В Figma свойство Button называется Emphasis, а код использует variant. Какая сторона будет source of truth?
figma - 72
Дизайнер detach-нул instances ради компактной строки таблицы, которой нет в коде. Как устранить расхождение?
design - 73
Tokens Studio экспортирует radius token, который в коде переименовали два релиза назад. Как предотвратить скрытое расхождение?
tokens - 74
Figma frame задаёт фиксированную геометрию 1440 пикселей, но продукт должен работать во встроенных панелях шириной 480-900 пикселей. Какой контракт запросить?
figma - 75
Figma и production расходятся: у destructive dialog одно действие или два. Как разрешить конфликт source of truth?
conflictfigma - 76
Компонент в коде поддерживает empty state, которого никогда не было в библиотеке Figma. Что сделать до его копирования в следующую функцию?
componentsfigma - 77
Генератор Figma-to-code выдаёт absolute positions и непрозрачные class names. Вы возьмёте его для продуктового UI?
decision-makinggeneratorsfigma - 78
Цветовой токен изменили в Figma в пятницу, но generated package остался старым в понедельник. Как сделать ownership видимым?
tokensownershipfigma - 79
Полевой INP ухудшился со 160 до 310 миллисекунд после выпуска filter drawer, хотя lab-тесты зелёные. Как расследовать?
ab-testingtestingweb-vitals - 80
Обновлённый hero выглядит лучше, но mobile LCP вырос с 1,9 до 3,4 секунды. Что изменить?
- 81
Personalization banner вызывает скачок CLS только у вернувшихся пользователей. Как измерить и исправить?
discoveryweb-vitals - 82
Пакет design system добавляет 28 КБ JavaScript на каждый route ради одного tooltip. Как ввести бюджет?
system-designdesignjavascript - 83
RUM показывает плохие Core Web Vitals в основном на слабых Android, но dashboard команды содержит только общие средние. Что добавить?
web-vitals - 84
Продуктовая команда хочет выпустить насыщенную анимацию, которая занимает 45 миллисекунд main thread при каждом input. Как согласовать бюджет?
motionconcurrency - 85
Прототип во Framer подтвердил новый onboarding flow, и его просят выпустить в Next.js в следующем спринте. Как подготовить production-версию?
prototypingnextjsprototypes - 86
Прототип конфигуратора на WebGL нравится пользователям, но быстро разряжает ноутбуки и не имеет fallback. Какой план?
prototypingprototypesconfig - 87
Прототип Rive хранит бизнес-состояние внутри файла анимации. Как разделить ownership для production?
motionprototypingprototypes - 88
Прототип использует мгновенный fake search, но production-результаты идут до 1,5 секунды и могут приходить не по порядку. Что добавить?
prototypingprototypes - 89
В прототипе шесть самописных контролов, похожих на компоненты design system. Как решить, что сохранить?
system-designdesigncomponents - 90
Кодовый прототип хорошо прошёл тест с 12 пользователями, но analytics и обработку ошибок намеренно пропустили. Какую границу release задать?
prototypingprototypes - 91
Только 34 процента использований UI-компонентов, добавленных в новых продуктовых PR, приходятся на design system, а команды считают миграцию слишком медленной. Что вы возьмёте на квартал?
componentsdesign-systemsystem-design - 92
Продуктовые инженеры копируют примеры Storybook и сталкиваются с отсутствующими providers, router mocks и theme setup. Как улучшить DX?
storybookmocking - 93
Figma plugin экспортирует токены 40 секунд, и дизайнеры запускают его повторно из-за непонятного прогресса. Что изменить?
tokensdesignfigma - 94
Команды обходят компонент, потому что его TypeScript errors занимают 20 строк и не предлагают правильного варианта. Как исправить API experience?
componentsapitypescript - 95
Codemod мигрировал 70 процентов вызовов Button и оставил 180 TODO. Как закончить adoption?
decision-making - 96
Дизайнеры не понимают, выпущен ли компонент, экспериментальный он или deprecated в Figma. Как показать lifecycle status?
componentsdesignexperiments - 97
Вклад в design system проходит от предложения до merge за 18 дней, в основном ожидая review. Что улучшить?
system-designdesign - 98
Команда просит новый компонент, который на 80 процентов дублирует существующий. Как обработать contribution?
components - 99
Поиск Storybook возвращает несколько компонентов с похожими именами, и дизайнеры открывают устаревшие stories. Какое изменение tooling выпустить?
componentsstorybookdesign - 100
Две продуктовые команды приняли новую систему, но одна оборачивает каждый компонент в собственный wrapper. Как вы отреагируете?
componentssystem-designdecision-making