С прошлого года Figma добавила улучшения, которые расширяют способы структурирования компонентов, позволяя вам встраивать одни компоненты в другие, а также легко заменять экземпляры компонентов. Поэтому я подумал, что пришло время по-новому взглянуть на компоненты в Figma.
Одна из лучших особенностей системы компонентов Figma заключается в том, что вы можете получить доступ к стеку уровней каждого экземпляра компонента. Это может иметь огромное влияние на всю систему дизайна, поскольку может помочь сохранить компоненты и сократить количество необходимых компонентов.
В другом недавнем обновлении появилась возможность замены экземпляров простым перетаскиванием. Это может происходить локально внутри вашего файла или прямо из вашей общей командной библиотеки (отдельный документ Figma). Такая возможность окажет огромное влияние на то, как вы структурируете свои компоненты
Вот несколько идей, как вы можете максимизировать модульность, а в некоторых случаях сократить количество необходимых компонентов.
Вложенные компоненты
Figma позволяет вам складывать компоненты вместе. Это значит, вы можете структурировать их модульным способом. Ниже несколько способов использования вложенных компонентов:
Строительные блоки
Часто я создаю компонент «строительный блок» (building block) и использую его как основу для другого компонента. Например, в этих кнопках я создал базовый прямоугольник с закругленными углами для формы кнопки и превратил его в компонент. Этот компонент не публикуется в моей командной библиотеке, а его экземпляры просто используются в других компонентах, которые я создаю, например, фактические компоненты кнопок (которые публикуются).
Преимущество этого метода заключается в том, что все мои кнопки и состояния кнопок используют этот базовый компонент (с примененными переопределениями стиля). Если мне нужно сделать глобальное изменение, например, изменить форму кнопки, я могу просто вернуться и отредактировать исходный компонент, его изменение повлияет на все компоненты, которые основаны на нем.
Каждая кнопка встраивает компонент строительного блока и применяет переопределения стиля к базовому компоненту для создания разных состояний
Замена элементов
Другим преимуществом вложенных компонентов является то, что вы можете заменять их на другие компоненты. Например, в примере ниже, мне просто нужно сделать один компонент для заголовка плитки и поменять вложенный компонент на другой. Если вы знакомы со Sketch, вы, вероятно, уже знакомы с этой концепцией, однако в Figma взаимодействие для замены компонентов отличается (простое перетаскивание).
Сочетания клавиш:
Чтобы поменять компонент – удерживайте клавишу option при перетаскивании.
Для замены верхнего вложенного компонента (внутри другого компонента, фрейма или группы) – Удерживайте клавиши ⌘ + option при перетаскивании.
Экземпляры разных иконок могут быть заменены на другие из вашего документа или общей командной библиотеки
Применение масок
Вы также можете использовать вложенные компоненты в сочетании с масками, чтобы легко поменять заливку. Думайте об этом, как о компонентном решении глобальных цветов (?). Чтобы сделать это, создайте компоненты образца (фигуру с заливкой) и поместите экземпляр компонента на слой поверх изображения, к которому вы хотите применить маску. Выбрав оба слоя, примените маску, и все, что вам нужно сделать, чтобы изменить цвет – использовать метод, описанный выше, для замены одного экземпляра компонента заливки на другой.
Показать/скрыть компоненты
Поскольку вы можете получить доступ к стеку слоев каждого экземпляра, бывают случаи, когда имеет смысл размещать различные состояния внутри одного компонента. Простейшим примером этого является флажок или переключатель. Вместо того, чтобы иметь два компонента («проверено» и «не проверено»), вы можете просто включить в свой компонент состояние «проверено». Отображение и скрытие слоя «проверено» приведет к переключению состояния.
Доступ к стеку слоев каждого экземпляра позволяет показывать / скрывать слои
Сочетания клавиш:
Выберите отмеченный слой и нажмите клавишу «Удалить», чтобы скрыть слой. Альтернативный вариант, ⌘ + Shift + H, также будет переключать видимость слоев.
Кадрирование компонентов
Подумайте о компонентах как о расширенных фреймах – все те же вещи, которые вы можете делать с фреймами, также применимы к компонентам, включая возможность их кадрирования.
Создайте компонент и настройте ограничения внутри него – удерживая клавишу ⌘, перетащите фрейм своего компонента, чтобы обрезать содержимое, или отрегулируйте размеры на панели свойств. Содержимое вашего компонента может сместиться, если вы не настроили ограничения, поэтому в первую очередь убедитесь, что вы это сделали. Это отлично подходит для создания строк / столбцов «повторяющейся сетки» или настройки табличных данных. Вы можете создать больше строк, чем вам нужно, и использовать метод для отображения только нужного количества элементов. Соедините этот метод с ограничениями, и вы сможете настроить компоненты, которые будут скрывать или раскрывать контент, поскольку их родительский компонент расширяется и сжимается. Убедитесь, что на панели свойств стоит галочка «Clip Content», чтобы увидеть кадрированный результат.
Группы экземпляров могут быть собраны в виде компонентов, а затем кадрированы с использованием опции «clip content»
Настройка кадрирования компонентов сетки:
- Настройте свой исходный повторяемый компонент Экземпляры этого компонента будут повторяться для каждой строки или столбца. Сюда могут входить вложенные компоненты, текстовые поля, изображения-плейсхолдеры (формы с заполнением) и т. д.
- Установите ограничения Настройте ограничения для повторяемого элемента, подумайте о том, как вы хотите, чтобы он реагировал на отношения с родительским компонентом (который будет вашей сеткой).
- Отрегулируйте размер фрейма Удерживайте клавишу ⌘ при настройке размера фрейма компонента, для увеличения его размеров, чтобы вы могли встраивать компонент в общий размер фрейма (если это применимо к вашему дизайну).
- Продублируйте экземпляры Продублируйте повторяемый элемент, вы можете использовать команды Pack Horizontally или Pack Vertically в Figma (в меню Arrange), чтобы убедиться, что все компоненты отлично расположены впритык друг к другу. Вот почему я рекомендую создать заполнение вашего компонента.
- Создайте компонент «сетки» Превратите свою группу повторяющихся экземпляров в новый компонент.
- Установите ограничения Установите ограничения в новом компоненте сетки; подумайте о том, как вы хотите, чтобы каждый из элементов сетки себя вел, когда контейнер сетки обрезается, и направление, в котором он будет расширяться.
- Clip content Отключите «clip content» на панели свойств. Это скроет содержимое, которое выходит за границу фрейма.
- Отрегулируйте размер фрейма Удерживайте клавишу ⌘ при настройке размера фрейма компонента, чтобы обрезать его до нужного размера.
Как только вы начнете создавать эти сетки, возможности станут безграничны. Переопределение текста, символов и добавление изображений – не проблема!
Этот метод в сочетании с “Разместить изображения” (Shift + ⌘ + K), позволяет очень быстро заполнить сетку изображениями
Текстовые компоненты
До тех пор, пока не будет альтернативного способа обработки текстовых стилей (?), создание их в виде компонентов является лучшим вариантом. Это отлично работает, потому что, как и любой другой компонент, вы можете добавить их в свою командную библиотеку и синхронизировать по своим проектам. Вы также можете легко переопределить свойства, такие как цвет, выравнивание, стиль и вес. Вот несколько шагов для создания текстовых компонентов:
Компоненты могут работать в текстовых стилях. Легко переключать стили с панели компонентов
- Создайте текстовое поле
Нажмите один раз, чтобы создать текстовое поле (не перетаскивайте, чтобы создать поле). По желанию измените его стиль: шрифт / вес / цвет / высоту строки / выравнивание / и т.д. - Конвертируйте это текстовое поле в компонент
Задайте ограничения текстового поля внутри символа: «Сверху и снизу» и «Слева и Справа». Это гарантирует, что ваше текстовое поле будет соответствовать размеру компонента. - Переименуйте слои Переименуйте свой компонент в нужное имя стиля текста. Переименуйте свой текстовый слой в нечто общее, например, «Текст». Вы переименуете этот слой одинаково во всех последующих текстовых компонентах.
- Используйте новые компоненты В любое время, когда вам нужно изменить стиль текста, вы можете просто заменить экземпляры на другой текстовый компонент. Поскольку мы переименовали все текстовые слои в компонентах одинаковым именем, это позволяет компоненту преобразовать любой переопределенный текст на заменённый экземпляр.
И если вам интересна эта тема, Mirka S написал потрясающую статью по модульным/масштабируемым текстовым технологиям.
Все вместе
В приведенном ниже примере все вышеприведенные методы были использованы для создания чрезвычайно гибкого компонента плитки, который учитывает разные состояния и варианты.
Вот краткое описание нескольких различных вариантов компонентов:
Хорошо построенный компонент может принимать разные формы, просто заменяя вложенные компоненты и переключая видимость слоев
Разбор
Выше ряд элементов, вложенных внутри компонента плитки. Они могут быть включены / выключены или заменены на различные компоненты.
- Иконки Иконки в целом являются вложенными экземплярами и могут быть легко заменены на другие иконки.
- Содержимое плитки Область содержимого в плитке также является вложенным компонентом. Чтобы создать базовый компонент плитки, есть компонент-плейсхолдер с красной пунктирной линией, которая описывает размеры, а также устанавливает ограничения внутри плитки. Я могу заменить компонент-плейсхолдер на фактический контент компонентов сетки. Объединив это с методом кадрирования я могу отобразить версию вида «повторяющейся сетки», которая будет расти вместе с родительским компонентом.
- Полоса прокрутки (скроллбар) Полоса прокрутки – это просто вложенный компонент, чья видимость может быть переключена, если мы хотим сообщить, что содержимое внутри прокручивается.
- Усечение Маленький вектор с градиентом белого расположен поверх текстового компонента заголовка плитки. Его отображение может быть включено или выключено, чтобы показать эффект угасания усечения при необходимости.
- Поиск Внутри заголовка плитки находится компонент ввода поиска, который также можно переключать. Поскольку этот конкретный элемент также является вложенным компонентом, он позволяет мне менять различные состояния поля ввода.
Вот он в действии:
Время, затрачиваемое на настройку компонентов, сэкономит ваше время при создании экранов и внесении глобальных изменений в несколько фреймов / файлов
Несколько дополнительных примечаний
Меню экземпляра (Instance menu)
Компоненты, локальные для вашего файла, также могут быть заменены из меню экземпляра. Согласованный шаблон именования со слешем помогает сортировать ваши компоненты в более управляемые группы
Другим способом замены компонентов является выбор компонента и доступ к меню экземпляров на панели свойств. Отсюда вы можете выбрать другой компонент для замены. Это работает только для локальных компонентов, потому что список формируется только из компонентов, которые уже существуют в вашем документе.
Использование слеша для сегментации вашей схемы именования не только организует в этом меню ваши компоненты в группы, но и организует ваши экспортированные активы в подкаталоги.
Замещение компонентов
Изменение многих экземпляров часто используемого компонента звучит как сложная задача, особенно если они распространяются по многим различным фреймам. Мы знаем, что изменение экземпляра – это просто, проблема найти все. К счастью, у Figma есть возможность сделать выбор, основанный на общих чертах.
Документация
Figma позволяет добавлять описания к вашим основным компонентам. Если у вас есть изменения в похожих компонентах, конкретных случаях использования или даже обновленном компоненте, который вы проверяете, это отличное место для добавления полезной информации, которая будет сопровождать ваш компонент, который будет легко доступен для дизайнеров, прямо из панелей компонентов и командной библиотеки.
Описания, добавленные к вашим основным компонентам, отображаются при наведении курсора на меню компонентов
Документация важна не только для дизайнеров, но и для взаимодействия с разработчиком. Описать каждую деталь в маленьком поле описания невозможно, поэтому постарайтесь поставить себя на место разработчиков и определите, что им нужно знать. Благодаря тому, что структура многих приложений начинает ориентироваться на компоненты, высока вероятность того, что разработчики захотят использовать тот же подход к написанию кода и захотят понять всю гамму каждого компонента и его различных состояний, которые заданы в дизайне. Можно ошибочно полагать, что вам нужно для этого разработать руководство по стилю, сайт документации или дополнительные инструменты, но многие небольшие команды просто не имеют времени или ресурсов на это. Хорошая новость заключается в том, что для того, чтобы быть успешным это не нужно – придерживайтесь простоты и не усложняйте рабочий процесс.
Figma может помочь упростить передачу проекта разработчику. Рассмотрим приведенный ниже пример. Компонент выбора даты с различными состояниями. Этот конкретный компонент находится внутри файла настройки, чтобы быть хранилищем для всех компонентов интерфейса в системе дизайна. Компоненты в нем разделяются на другие файлы, содержащие макеты экрана. Вместо того, чтобы отправлять разработчику только экраны, подумайте о том, чтобы поделиться ссылкой непосредственно на документы из вашей командной библиотеки в придачу к макетам.
Основные компоненты, составляющие выборщик дат, находятся во фрейме (названы соответственно так, что они группируются на панели компонентов). Основные компоненты расположены слева. Это те компоненты, к которым дизайнеры будут иметь доступ со своей панели командных библиотек при работе с макетами экрана. Справа – это только экземпляры основных компонентов (поэтому вам не нужно беспокоиться об этом, загромождая командную библиотеку при доступе из других файлов). Эти экземпляры могут быть собраны для иллюстрации различных состояний компонента. Документация может быть такой же простой, как добавление примечаний и взаимодействие с разработчиками посредством комментариев. Это позволяет все держать в одном месте и спасает разработчика от необходимости искать различные макеты экрана, чтобы понять весь объем того, что ему нужно построить.
Удаление основного компонента
Нажатие на голубую ссылку восстановит ваш основной компонент
Удаление основного компонента может быть катастрофой. Представьте, что каждый связанный экземпляр упомянутого компонента внезапно отсоединяется и возвращается во фрейм! Figma этого не допустит. Экземпляры фактически сохраняют статус своего экземпляра, если вам придется вернуться к ним позже. Это позволяет вам либо выбрать их все, либо поменять их на другой компонент (который существует), или вы восстановите исходный основной компонент.
Спасибо за прочтение—пожалуйста поделитесь своими мыслями, задайте вопросы и дайте нам знать была ли эта статья полезна для вас. Свободно пишите автору в директ вTwitter, или вы можете найти его наSpectrum Figma канале, если у вас есть вопросы!
И… если вы не пробовали Figmaпрежде, но случайно наткнулись на эту статью, попробуйте ее, она бесплатна для частных лиц и студентов!
Перевод статьи Thomas Lowry
Найновіші коментарі (0)