Вопросы на собеседовании: Дизайн-инженер
100 реальных вопросов с образцовыми ответами и пояснениями для уровня Junior.
Смотреть пример резюме: Дизайн-инженер →Тренировка флешкарточками
Интервальное повторение · Hunter Pass
Вопросы
Я проверю определения токенов и ссылки на них, потому что одних названий недостаточно для точной классификации.
- blue-500, скорее всего, является примитивным токеном палитры.
- action-background выглядит как семантическая роль, которая может ссылаться на примитив.
- button-primary неоднозначен: это может быть компонентный токен или семантический алиас, поэтому сначала я проверю его область действия и потребителей.
Зачем это спрашивают: Интервьюер проверяет понимание уровней токенов без слепого доверия соглашениям об именовании.
Кнопка должна использовать семантический токен действия, а не значение палитры.
- Светлая тема может связать action-background с blue-600.
- Тёмная тема может связать тот же токен с blue-400.
- Компонент не меняется, потому что соответствие тем задаётся уровнем выше.
Зачем это спрашивают: Интервьюер проверяет понимание переключения тем через семантические токены.
Я заменю литерал ближайшим утверждённым токеном радиуса после сверки с макетом.
- Я измерю скругление в Figma и проверю, соответствует ли оно md или lg.
- Я не стану добавлять новый токен ради разовой разницы в один пиксель.
- Если паттерн действительно не покрыт, я отмечу это до расширения шкалы.
Зачем это спрашивают: Интервьюер оценивает практичное использование токенов без лишних сущностей.
Я переименую неоднозначный токен по шкале системы и обновлю его ссылки.
- Я проверю числовое значение и сопоставлю его с space-4 или space-6.
- До переименования найду все использования в стилях компонентов.
- Если значение не совпадает, уточню задуманный отступ у дизайнера.
Зачем это спрашивают: Интервьюер проверяет, умеет ли кандидат безопасно нормализовать несогласованный токен.
Сначала я прослежу роли токенов и только потом буду устранять повторы исходных значений.
- Одинаковый hex может использоваться для разных семантических ролей, поэтому совпадения значений недостаточно для объединения ролевых токенов.
- Подтверждённые общие значения палитры могут ссылаться на один примитив, сохраняя разные семантические алиасы.
- Компонентные токены останутся там, где их область действия или поведение действительно относятся к конкретному компоненту.
Зачем это спрашивают: Интервьюер проверяет, умеет ли кандидат убрать дублирование значений, не потеряв семантические различия.
Я исправлю общую пару токенов disabled-состояния, а не добавлю отдельный цвет в кнопку.
- На disabled-контролы не распространяются обязательные минимумы контраста WCAG, поэтому это целевой уровень читаемости продукта.
- Я измерю контраст текста и фона в браузере и сравню его с согласованной целью.
- После изменения общих токенов я повторно проверю все использующие их компоненты.
Зачем это спрашивают: Интервьюер оценивает системное улучшение disabled-состояния без неверной трактовки требований WCAG.
Я подключу toast через семантические токены обратной связи, а не через зелёный по имени.
- success-background может ссылаться на зелёный примитив для поверхности.
- Для success-foreground и success-border нужны отдельные роли.
- Toast использует feedback-токены, не зная значений палитры.
Зачем это спрашивают: Интервьюер проверяет, моделирует ли кандидат цвета обратной связи как семантические роли.
Я выберу проектный токен источником и свяжу с ним все варианты синтаксиса.
- CSS-переменная будет хранить каноническое значение отступа.
- Конфигурация темы Tailwind свяжет gap-2 с этой переменной.
- Прямые значения 8px нужно заменить там, где они обозначают ту же роль.
Зачем это спрашивают: Интервьюер проверяет, умеет ли кандидат связывать токены между CSS и Tailwind.
Имя описывает внешний вид, поэтому я заменю его ролью вроде text-muted.
- В тёмной теме text-muted может ссылаться на более светлый примитив.
- Семантическое имя останется верным в обеих темах.
- Потребителям больше не понадобятся отдельные имена для каждой темы.
Зачем это спрашивают: Интервьюер проверяет, видит ли кандидат ограничение темизации в названиях по внешнему виду.
Я явно задам цвет, толщину и отступ фокусного кольца токенами или свойствами компонента.
- Цвет кольца должен контрастировать и с контролом, и с окружающей поверхностью.
- Видимая обводка толщиной два пикселя подходит как базовый вариант.
- Отступ отделяет кольцо от границы кнопки.
Зачем это спрашивают: Интервьюер оценивает, рассматривает ли кандидат фокус как полноценное визуальное состояние.
Я выберу breakpoint там, где контент перестаёт помещаться, а не по названию устройства.
- Я буду уменьшать ширину, пока подписи, контролы или колонки не начнут тесниться.
- На этой ширине переключу grid с двух колонок на одну.
- Проверю значения чуть выше и ниже breakpoint на резкие переносы.
Зачем это спрашивают: Интервьюер проверяет, выводит ли кандидат адаптивное поведение из ограничений контента.
Я использую CSS Grid с auto-fit и размером колонки через minmax.
- Шаблон может использовать repeat(auto-fit, minmax(240px, 1fr)).
- Браузер сам добавляет или убирает колонки при изменении места.
- Единый токен gap сохранит системные отступы.
Зачем это спрашивают: Интервьюер проверяет знание адаптивной сетки, зависящей от контента.
Я проверю flex-элемент заголовка и обычно добавлю min-width: 0.
- По умолчанию минимальная ширина flex-элемента зависит от размера контента.
- min-width: 0 позволяет заголовку сжиматься в доступном месте.
- После этого overflow-wrap или ellipsis управляет текстом явно.
Зачем это спрашивают: Интервьюер проверяет, умеет ли кандидат диагностировать типичное переполнение flexbox.
Я проверю смещение sticky и всех предков, которые могут создавать прокрутку или обрезку.
- Элементу нужно значение top, например top: 0.
- Предок с overflow hidden, auto или scroll может изменить контейнер sticky.
- У секции должна быть достаточная высота прокрутки для фиксации.
Зачем это спрашивают: Интервьюер оценивает знание конкретных причин поломки sticky-позиционирования.
Я сделаю фиксированный overlay на весь viewport и отцентрирую диалог внутри него.
- Overlay использует position fixed с нулевыми отступами по всем сторонам.
- Grid с place-items-center или flex-выравнивание центрирует панель.
- Панели нужны max-height и внутренняя прокрутка для маленьких экранов.
Зачем это спрашивают: Интервьюер проверяет, умеет ли кандидат строить стабильный layout модального окна.
Я найду конкретный переполняющий элемент до изменения глобальных правил overflow.
- Layout-инструменты DevTools покажут элемент шире viewport.
- Я проверю 100vw, фиксированную ширину, transform и неразрывный текст.
- Исправлю сам элемент, а не спрячу overflow у body.
Зачем это спрашивают: Интервьюер проверяет дисциплинированный подход к конкретному адаптивному дефекту.
Я использую двухколоночный grid со значениями 280px и minmax(0, 1fr).
- Фиксированный трек сохранит ширину sidebar.
- minmax(0, 1fr) позволит основной панели сжиматься без переполнения.
- На breakpoint регионы можно сложить, когда после 280px контенту становится тесно.
Зачем это спрашивают: Интервьюер проверяет, умеет ли кандидат точно описать типовой каркас приложения.
Я зарезервирую область графика и буду показывать все состояния в контейнере одного размера.
- Контейнеру можно задать осмысленный min-height по высоте графика.
- Loading, empty, error и data должны использовать общую обёртку.
- Сообщение можно центрировать в зарезервированной области без сдвига соседнего контента.
Зачем это спрашивают: Интервьюер оценивает, сохраняет ли кандидат layout между состояниями компонента.
Обычно я оставлю значок размером 24px, а его область нажатия сделаю не меньше 24 на 24 CSS-пикселя для уровня AA.
- Критерий WCAG 2.2 AA 2.5.8 допускает область 24 на 24 CSS-пикселя либо достаточное расстояние вокруг меньшей области с учётом перечисленных исключений.
- Критерий WCAG 2.5.5 задаёт 44 на 44 CSS-пикселя на уровне AAA, поэтому 44px также можно выбрать как более строгую цель продукта.
- Видимый индикатор фокуса должен охватывать всю интерактивную область, а не только значок.
Зачем это спрашивают: Интервьюер проверяет, отличает ли кандидат размер значка от области нажатия и требования AA от AAA.
Я сравню точный шрифт, файл начертания, размер, line-height, letter-spacing и ширину контейнера.
- Fallback-шрифт может иметь другую ширину глифов при том же размере.
- Отсутствующее начертание 600 может включить синтетический bold с другими метриками.
- Padding контейнера может вызвать перенос даже при совпадающей типографике.
Зачем это спрашивают: Интервьюер проверяет системную диагностику расхождения типографики между Figma и кодом.
Закрытые вопросы
- 21
Основной текст задан как 16px с line-height 16px; что изменить для читаемости?
- 22
Числовая колонка таблицы выглядит неровно даже с выравниванием вправо; какую функцию шрифта попробовать?
typographyschema - 23
Label набран капсом в 12px и плохо сканируется; что вы скорректируете?
- 24
Веб-шрифт вызывает заметную замену текста и сдвиг layout; какие основы загрузки применить?
typography - 25
React-компонент Button принимает props color, radius, shadow и padding; как упростить API?
reactcomponentscss - 26
Обработчик клика кнопки повешен на стилизованный div; что изменить в компоненте?
components - 27
Vue-компоненту карточки нужен гибкий footer от потребителя; какой API использовать?
componentsvueapi - 28
React-поле теряет фокус при появлении ошибки; какую ошибку реализации искать?
reactownership - 29
Диалог должен удерживать фокус и закрываться по Escape; писать вручную или взять Radix Dialog?
radix - 30
Компонент shadcn/ui не совпадает с токенами продукта; как его адаптировать?
tokenscomponentsshadcn - 31
Dropdown-меню открывается, но стрелки не работают; какое поведение должен дать компонент?
components - 32
Tabs скрывает панели через display none; что ещё должен включать компонент?
componentsartifactstabs - 33
Управляемый React Switch показывает неверное состояние после обновления родителя; что проверить?
reactforms - 34
Переиспользуемому полю нужны label, hint и ошибка; как его структурировать?
forms - 35
Одинаковый набор Tailwind-классов кнопки повторяется в шести файлах; что разумно вынести на junior-уровне?
tailwind - 36
Tailwind-компонент напрямую использует text-gray-500 в тёмной теме; чем заменить?
componentstailwindtheming - 37
Кнопка в состоянии загрузки продолжает реагировать на клики; как представить это состояние?
- 38
Граница input меняется при ошибке только цветом; что добавить?
- 39
Карточка на hover поднимается на 8px и делает сетку нестабильной; как настроить эффект?
gridcss-grid - 40
Focus outline убрали, потому что он выглядел некрасиво; какая замена допустима?
- 41
Светло-серая подпись на белом имеет контраст 2,8:1; что вы сделаете?
- 42
Tooltip содержит обязательную ссылку-действие; подходит ли этот primitive?
- 43
У кнопки удаления только иконка без видимого текста; что обязательно добавить в код?
artifacts - 44
Форма использует placeholder вместо label; что изменить?
forms - 45
В Storybook у Button показан только default; какие stories добавить первыми?
storybook - 46
Chromatic показывает изменение границы на один пиксель у всех карточек; как провести review?
visual-regression - 47
В Figma у компонента есть hover и pressed, но нет disabled; что уточнить до реализации?
componentsfigma - 48
Figma-фрейм шириной 1440px содержит фиксированные карточки; как не скопировать его как фиксированную страницу?
figma - 49
Hover-анимация увеличивает кнопку с 1 до 1,12; как сделать её спокойнее и безопаснее?
motion - 50
Переход между страницами сдвигает весь экран на каждом route; что делать при reduced motion?
reduced-motion - 51
Шапка профиля совпадает с макетом Figma на широком экране, но при ширине 390px кнопки перекрывают имя; как исправить вёрстку?
artifactsfigma - 52
Карточка тарифа на русском заметно выше, чем на английском; как сохранить ровный ряд?
pricing - 53
Таблица должна оставаться удобной на экране шириной 360px без уменьшения текста ниже 14px; что вы предложите?
- 54
Карточка фиксированной высоты 220px обрезает заголовок из трёх строк; как её изменить?
- 55
В CSS Grid последняя карточка растягивается на всю последнюю строку; что проверить?
cssgridcss-grid - 56
Segmented control меняет ширину, когда активный label становится bold; как убрать сдвиг?
- 57
Баннер уведомления появляется над формой и выталкивает submit ниже viewport; что изменить?
formscss - 58
Липкий mobile-footer перекрывает последнее поле формы; как исправить страницу?
forms - 59
При browser zoom 200 процентов пункты навигации исчезают за логотипом; что делать?
- 60
Поле поиска визуально выровнено, но clear-кнопка находится вне его hit area; как перестроить?
- 61
В Figma указаны отступы 12px, а в кодовой шкале есть только 8px и 16px; что делать?
figma - 62
В Figma используется недоступное начертание 550; как реализовать текст?
typographyfigma - 63
Заголовок hero в коде выглядит тяжелее Figma, хотя в обоих указан 700; как расследовать?
figma - 64
Строка абзаца на desktop содержит около 110 символов; как улучшить читаемость?
- 65
Skeleton использует другие line-height, чем загруженная карточка, и вызывает прыжок; как выровнять?
ux - 66
Компонент Button может отображаться как ссылка для навигации; какую семантику должен сохранять его API?
componentsapi - 67
React-modal закрывается при клике внутри панели; какую проблему событий проверить?
reactdialogs - 68
Vue-компонент Badge принимает и status, и произвольные классы background; какой конфликт убрать?
componentsvue - 69
shadcn Select используется для пяти видимых вариантов, и клавиатурным пользователям трудно их сравнивать; оставить его?
keyboardshadcn - 70
Radix Popover обрезается карточкой с overflow-hidden; что проверить до добавления z-index?
radixindexescss - 71
Command palette открывается, но фокус остаётся на странице сзади; что исправить?
- 72
Drag handle является единственным способом менять порядок списка; какую клавиатурную альтернативу добавить?
keyboard - 73
Кастомный checkbox переключается по Enter, но не по Space; каким должно быть поведение?
- 74
После закрытия подтверждения удаления фокус уходит на body; как исправить?
- 75
Toast дважды объявляет одно сообщение об успехе скринридеру; что проверить?
a11y - 76
Красная и зелёная точки являются единственным различием статусов строк; как исправить артефакт?
artifacts - 77
Input в тёмной теме проходит контраст в покое, но теряет границу на hover; что измерить?
contrastresta11y - 78
Чтобы открыть состояние ошибки в Storybook, нужно трижды переключить настройки; как упростить проверку?
storybook - 79
Chromatic показывает сотни diff после обновления шрифта; как отделить ожидаемые изменения от регрессий?
typographyvisual-regression - 80
Story компонента проходит визуально, но до кнопки нельзя добраться клавиатурой; какую проверку добавить?
keyboardcomponents - 81
Visual snapshot меняется на каждом запуске из-за timestamp; как стабилизировать?
snapshot - 82
У нового Card variant нет документации Storybook; какой минимальный артефакт приложить к коду?
storybookdocumentationartifacts - 83
Дизайнер сообщает, что карточка в коде на восемь пикселей шире Figma; как провести visual QA?
designfigmavisual-qa - 84
Figma-прототип показывает деталь карточки только по hover; какой вопрос задать при handoff?
prototypingprototypesfigma - 85
В дизайн-файле есть detached-копии кнопок с немного разным padding; как обработать handoff?
cssdesign - 86
Компонент выглядит правильно при zoom 100 процентов, но граница исчезает на high-density скриншоте; что проверить?
components - 87
Большая PNG-иконка повторяется 30 раз в сетке функций; чем заменить?
gridcss-grid - 88
Галерея ниже первого экрана загружает все изображения сразу; что изменить?
- 89
Lighthouse сообщает CLS из-за промобаннера после hydration; как исправить?
hydrationweb-vitals - 90
Полевые данные показывают плохой INP после добавления прототипа выбора цвета; что проверить сначала?
prototypingprototypesweb-vitals - 91
Страница импортирует всю motion-библиотеку ради одного fade-in; что рассмотреть?
motion - 92
Карусель автоматически переключается каждые три секунды и отвлекает; как изменить?
- 93
Progress indicator анимируется с нуля при каждом React-rerender; что исправить?
react - 94
Анимация drawer ощущается медленной даже при 300ms; какие измерения и свойства проверить?
motion - 95
В code-прототипе date picker большая часть работы уходит на backend persistence; как пересобрать scope?
prototypingprototypes - 96
Завтра нужно сравнить два паттерна навигации, но настройка React-приложения занимает часы; что делать?
reactprototypesprototyping - 97
Прототип Figma plugin читает имена выбранных слоёв и экспортирует токены; какие safeguards добавить?
tokensprototypesfigma - 98
Скрипт экспорта токенов каждый раз записывает JSON-ключи в случайном порядке; как улучшить DX?
tokens - 99
Дизайнер вставляет неверный hex в token tool и получает stack trace; что изменить?
tokensdesigndebugging - 100
В интерактивной песочнице компонента показаны 25 параметров, и дизайнеры в них теряются; как упростить интерфейс?
componentsdesign