Спроектировать компонент
Вопрос
Как вы спроектируете компонент «Поле ввода» для дизайн-системы?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Собираю сценарии использования в продуктах
Анатомия: подпись, поле, подсказка, ошибка, иконки, счётчик
Варианты и размеры, свойства компонента
Состояния: пусто, фокус, заполнено, ошибка, disabled, readonly
Доступность: связь подписи и ошибки с полем, контраст, фокус
Документация и согласование API с разработкой
Что могут спросить следом
- Нужен ли плейсхолдер, если есть подпись?
- Как поле поведёт себя с очень длинной ошибкой?
Разбор
Сначала собираю все поля в продуктах и их сценарии: поиск, телефон, сумма, пароль. Определяю анатомию: подпись над полем, само поле, подсказка, текст ошибки, опциональные иконки слева и справа, счётчик символов. Задаю размеры и варианты свойствами в Figma, а не десятками копий. Рисую все состояния, включая readonly и disabled, которые часто забывают. По доступности: подпись видимая и связана с полем, ошибка текстом и связана программно, рамка 3:1, заметный фокус. Описываю поведение длинного текста и ошибок в несколько строк. С разработкой согласую имена свойств, чтобы дизайн и код говорили на одном языке.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.