Код-ревью Middle Figma на практике обновлено
Ревью компонента в Figma
Вопрос
Описан компонент «Кнопка» в библиотеке. Найдите проблемы устройства компонента.
1. 96 вариантов: на каждую иконку свой вариант (Icon=Plus, Icon=Trash, ...)
2. Ширина кнопки Fixed 120 px
3. Цвета заданы hex, не переменными
4. Нет состояния focus, только default, hover, disabled
5. Текст кнопки в слое «Rectangle 47» поверх фрейма, автолэйаута нет
6. Описание компонента пустое
Коротко
Хороший компонент собран на автолэйауте, использует переменные, покрывает все состояния, держит число вариантов под контролем за счёт свойств и описан.
Что должен найти ревьюер
- Стильстрока 1Вариант на каждую иконку взрывает число вариантов. Нужны boolean для видимости и instance swap для выбора иконки.
- Ошибкастрока 2Фиксированная ширина: длинный текст обрежется или вылезет. Нужен автолэйаут с Hug.
- Стильстрока 3Hex вместо переменных: темы и бренды не переключатся, в Dev Mode не видно токенов.
- Ошибкастрока 4Нет focus: клавиатурные пользователи не увидят фокус, разработчики нарисуют свой.
- Стильстрока 5Слои без имён и без автолэйаута: кнопка не адаптируется к тексту, разработчику непонятна структура.
- Стильстрока 6Нет описания: непонятно, когда использовать вариант и какие есть ограничения.
Разбор
Хороший компонент собран на автолэйауте, использует переменные, покрывает все состояния, держит число вариантов под контролем за счёт свойств и описан.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.