https://ux.pub/10-sovetov-po-ispolzovaniyu-komponentov-v-figma/
Использование компонентов в Figma выведет ваш рабочий процесс на новый уровень. В этой статье я объясню, что такое компоненты, как они работают, и дам ряд рекомендаций по их использованию. Приступим.
Компоненты – это элементы интерфейса, которые можно повторно использовать в наших дизайн-проектах. Компонентом может быть кнопка, иконка или что-то сложное, например, таблица данных. Преимущество использования компонентов в проектах заключается в том, что каждый раз, когда вы вносите изменения в компонент, он обновляет все экземпляры компонента, автоматически экономя ваше время на повторяющуюся и утомительную работу. Это ускоряет ваш рабочий процесс, делает вашу дизайн-систему более согласованной, а также значительно упрощает ее поддержку и сотрудничество с другими дизайнерами.
Прежде чем перейти к рекомендациям и советам по компонентам, давайте рассмотрим одну важную концепцию: главные компоненты (master components) и экземпляры компонентов (component instances).
Экземпляры связаны с главными компонентами. Когда вы вносите изменения в главный компонент, он применяет изменения к экземпляру. На панели слоев вы можете определить по иконке, какие элементы являются главными компонентами, а какие – экземплярами. Для главных компонентов используется иконка с 4 ромбами, а для экземпляров – иконка с одним ромбом.
Демонстрация, как обновляется цвет фона кнопки и то, как это обновление распространяется на связанные экземпляры
Важно помнить, что экземпляр наследует все изменения, внесенные в главный компонент, за исключением переопределений экземпляра. Я более подробно остановлюсь на переопределениях экземпляров позже.
Теперь, когда мы понимаем, как работают компоненты и почему их важно использовать, давайте рассмотрим лучшие практики организации и структурирования компонентов.
Хорошая организация и система наименований позволяют легко находить компоненты на панели ресурсов, менять соответствующие компоненты и повышать юзабилити и адаптацию системы другими членами команды. Двумя наиболее полезными вариантами, используемыми при организации компонентов, являются имена со слешем (косой чертой) и фреймы-контейнеры. Использование обоих вариантов дает вам надежную и гибкую организационную структуру. Вот как они работают.
Именование со слешем – это соглашение об именах компонентов, которое использует косую черту для создания организованной иерархии ваших компонентов. Например, если у вас есть первичная и вторичная кнопки с поддерживаемыми состояниями, вы можете использовать «/»: