Важнейшая тема, которая лежит в основе дизайн-систематизации и позволяет делать сложные интерфейсы, которые реально поддерживать в актуальном состоянии на всех уровнях.Компоненты в Figma — аналог классов в программировании.Компоненты можно создать в одном месте, а затем использовать в других. В основе любого компонента есть фрейм. Его содержимое служит основой дальнейших копий, называется мастером или родителем. Все копии с этого слоя — экземплярами или детьми.Сделаем компонент кнопки1. Сделаем прямоугольник и текстовый слой внутри. Чтобы создать компонент, выделяем объект и нажимаем Opt Cmd K. Мнемоника: Компонент. Фрейм становится фиолетовыми превращается в мастер-компонент:Запомним: фиолетовый в Figma — цвет компонентов.Немного о клавишахСоздание компонентов — одна из команд, которую обычно дают с клавиатуры, поэтому Opt + Cmd + K важно запомнить.Лучшие практики работы с компонентамиЛюбой компонент в дизайн-системе должен ложиться в сетку, желательно 4 или 8px.Нежелательно, чтобы в компонентах был какой-либо осмысленный контент. Их нужно делать максимально обезличенными. Плохо, когда в компоненте кнопки написано «Сохранить» и хорошо, когда «Кнопка».Не следует использовать мастер-компонент в качестве экземпляра в макете, его нужно выносить отдельно, чтобы не плодить хаос.Не следует делать из компонентов всё, поскольку интерфейс будет сопротивляться любым изменениям. Некоторые объекты в дизайне всё-таки лучше оставлять группами.В первую очередь нужно настраивать стили текста и цветов. Точно не стоит делать компоненты для хранения цветов.Нужно дважды подумать, прежде чем заключать в компонент заголовок с текстом, содержащим конкретный контент. Будет ли он использоваться достаточное количество раз, чтобы это решение было оправдано, или лишь создаст когнитивную нагрузку на дизайнеров, которые будут работать с документом?Тема организации компонентов заслуживает отдельной книги, которая называлась бы вроде «Как создать дизайн-систему».Рекомендую статью «Стратегический дизайн интерфейсов», в которой я описал наблюдения по поводу работы с компонентами.Практика: компонентыСоздадим поле ввода высотой 56px в состоянии пустого и заполненного. Должна быть подпись поля и введённый в него текст.Создадим экземпляр поля, переключим в нём состояния между пустым и заполненным.При помощи ограничителей сделаем так, чтобы поле корректно тянулось на разной ширине. Особое внимание уделим длинным текстам в экземпляре.Сделаем две иконки размером 24 x 24, сделаем из них компоненты.Вставим экземпляр иконки в оба мастера поля.В экземпляре поля переключим иконки через оверрайд.Движение по главам
