- Название компонента только на английском языке. Каждое новое слово с большой буквы, в качестве разделителя пробел. Используется только общепринятые названия компонентов. Например:
- Action Button
- Promo Banner
- Services Section
- Balance Widget
- Название настроек и их значений только на английском языке. Каждое новое слово с большой буквы, в качестве разделителя пробел. Например:
- Show Button (True, False)
- Type (Button, Button & Title, Title & Subtitle)
- Discount Label (Sale, Black Friday, None)
- Pin Position (Top Left, Top Right, Bottom Left, Bottom Right)
- Если компонент меняет вид на разных брейкпоинтах экрана, то должна быть настройка Breakpoint со значениями:
- Desktop XL, Desktop L, Desktop M, Desktop S, Desktop XS
- Tablet
- Mobile
- Если компонент интерактивный, то должна быть настройка State со значениями или их комбинацией:
- Enabled, Focused, Hovered, Pressed, Disabled
- Selected, Unselected
- Opened, Closed
- On, Off
- Expanded, Collapsed
- Внутри компонента должны быть названы все слои, группы и фреймы (особое внимание текстовым слоям). Только на английском языке. Каждое новое слово с большой буквы, в качестве разделителя пробел. Никаких Frame 3532, Group 3533, Vector 352 и прочее. Чистота и лаконичность.
- Компонент и его внутренние компоненты\стили должны быть привязаны к ДС. Если нет нужного стиля или компонента — его нужно завести. Никаких раздетаченных элементов, элементов из других китов, кастомных элементов, забытых или не указанных стилей.
- В компоненте не должно быть скрытых слоев. Если есть необходимость сделать настройку для отображения\скрытия какого-то элемента внутри, лучше использовать для этого Variants, а не Properties.
- Должны быть проставлены Constraints у всех слоев, которые в этом нуждаются, а в Autolayout должны быть корректно выставлены параметры Fill Content, Hug Content и Fixed. Таким образом, компонент должен корректно отрабатывать изменение его ширины и, если это возможно и необходимо, изменение высоты.
- Вложенность элементов друг в друга должна быть оправдана. По возможности нужно достичь минимальной вложенности.
- Если у компонента есть вложенные кастомные компоненты и они не являются самостоятельными единицами, то они должны быть названы с явной привязкой к родительскому компоненту, а перед названием, должна стоять точка. Например:
- Balance Widget/.Balance ****Price Tag
- Services Section/.Service Card