что такое компоненты в фигме

Figma компоненты

Что такое компоненты в Figma? Компоненты в фигме, как основа блочного дизайна.

Одним из способов в разы ускорить разработку дизайна сайта – использовать компоненты.

Компоненты в Figma – это часть дизайна сайта, которая повторяется на всех или некоторых страницах (шапка, подвал, сайдбар). Когда вы меняете что-то в этой части, то аналогичные изменения происходят на всех страницах. Уточнение! Изменения нужно делать на самой первой странице, где вы только создали компонент.

Теперь нагляднее покажу его работу.

Для того чтобы создать компонент нужно на элемент или группу элементов кликнуть правой кнопкой мыши и выбрать соответствующий пункт меню.

После этого его иконка изменится.

Это значит, вы создали родительский компонент.

Если вы скопируете данную группу на другую страницу, то ее иконка станет уже другой.

Данная иконка показывает, что это дочерний компонент.

То есть если вы в самый первый компонент внесете изменения, то и на остальных эти изменения также произойдут.

Более подробную работу с компонентами я провожу в своих видео уроках. Подпишитесь на мой канал, чтобы получать знания по веб-дизайну.

Важно! Рекомендую ознакомиться с готовыми шаблонами Figma. Возможно в них вы найдете не только вдохновение, а уже готовые элементы сайты, которые вы сможете перенести в свой проект. Ссылки на шаблоны: ссылка 1 и ссылка 2

Источник

Как в Figma использовать компоненты и для чего они нужны

Компоненты в Figma позволяют легко и быстро добавлять уже готовые элементы в макет, массово менять их параметры в макетах и передавать их свойства наследникам. Компоненты созданы для того, чтобы повторно использовать уже готовые решения: например, карточки товаров, кнопки, списки и любые другие блоки любой вложенности.

Как создать компонент

Важный момент – для создания компонента вам нужна уже готовая группа элементов, которую в дальнейшем вы назначаете компонентом. Эта группа может находиться в любой месте любого фрейма документа, но будет удобнее, если вы сделаете отдельный фрейм под компоненты – UI-кит. Таким образом вам не придётся потом искать родителя, когда потребуется внести изменения, вы не удалите его случайно и не измените по ошибке. Самое лучшее решение – сделать отдельную страницу под UI и все компоненты помещать в неё.

Итак, чтобы создать компонент:

Всё, компонент готов. В окне навигатора слоёв состояние значка изменится на синюю иконку из четырёх ромбов, цвет названия элемента также станет синим.

Также важно называть компоненты по-человечески для более удобного поиска.

Как создать экземпляр компонента

Есть несколько способов:

Теперь ваш элемент есть в макете, и если вы измените один из параметров стиля компонента, то изменятся и стили всех его экземпляров в документе. В навигаторе экземпляры отмечены иконкой в виде синего пустого ромба.

Как сделать экземпляр обычным элементом

Если вы решили, что какой-то экземпляр компонента более не должен зависеть от родительского компонента, вы можете сделать его обычным элементом (либо группой). Для этого:

Как быстро перейти от элемента к родительскому компоненту

Чтобы не вспоминать, где лежит сам компонент, кликните на элемент правой кнопкой мыши и выберите Master Component > Go to Master Component

Играй бесплатно в браузере!

Заполните форму, мы сделаем иконку
и добави ее в коллекцию

Источник

Дизайн-система в Figma. Взгляд на интерфейс через компоненты

Какой должна быть оптимальная дизайн-система в Figma? Что такое переиспользуемый компонент? Как понятнее и удобнее организовать структуру внутри панели Instance? Каковы этапы разработки подобного продукта? И так далее. Ответы на эти и многие другие вопросы я постараюсь дать в этой статье.

Совсем недавно я разработал свою уже 4-ю библиотеку для Figma и только сейчас я готов структурировать знания и опыт накопленные в процессе разработки этой и предыдущих систем.

Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.

А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken

Осмысление применение наступает после хайпа

Как и любое новшество на рынке, дизайн-системы пережили хайп и перешли в стадию практического переосмысления. Отныне их можно применять совершенно в разных случаях и для решения большего типа задач. Для крупной организации — это визуальный язык, брендинг, порядок, единство дизайна и кода. Для небольших организаций — это командная библиотека в Figma, в которой эффективен небольшой штат разработчиков и дизайнеров. Дизайн-систему может применять для своих задач и частный фрилансер — это и автоматизация правок от клиентов (через мастер-компоненты он быстро двигает пиксели, меняет цвета и формы) и постепенно растущая база UI виджетов (все они упорядочены и логично перестраиваются при resize). Скорость выполнения задач с таким продуктом возрастает в несколько раз. Сегодня каждый сможет найти для себя плюсы работы внутри дизайн-системы.

Как бы я объяснил суть дизайн-системы в Figma простым языком? Всего в четыре слова: “Поменяли тут — поменялось везде”. В этом кроется главный принцип использования компонентов и экземпляров при разработке любого интерфейса, который при корректной последовательности использования атомов и молекул для создания темплейтов, превратится со временем в полноценную систему.

Смотреть на мир и видеть компоненты

Раньше дизайнеру достаточно было просто рисовать и двигать пиксели. Иногда он даже упорядочивал и аккуратно проименовывал слои и группы. Потом появились символы и дали полуавтоматизацию процессов. Сейчас пришли компоненты и изменения можно транслировать автоматически в разные фрагменты артбордов, разбросанные по всей дизайн-системе. Применение компонентов изменило и сам подход к визуальной разработке.

Компонентная разработка интерфейсов заключается прежде всего в унификации и последовательности. Как я уже сказал, раньше достаточно было просто двигать пиксели, но с приходом компонентов в проектирование интерфейсов дизайнеру приходится держать в уме расстановку constraints, логику экземпляров, категоризацию всех элементов в системе, еще и оставаться последовательным при создании сложных компонентов из простых. С одной стороны процесс создания интерфейса сильно упростился за счет софта нового поколения. С другой — появление нововведений заставляет обучаться и приобретать новые навыки, уходить в специализацию. Визуальный разработчик дизайн-систем — возможно очень перспективная профессия уже ближайшего будущего.

Унификация компонентов и переиспользуемость

Эффективная дизайн-система не содержит лишних компонентов. Любой подобный продукт начинается с исследования на предмет возможности обобщить повторяющиеся блоки и переиспользовать их в разных случаях. Простой пример, компонент List можно использовать как элемент каталога файлов, так и для, например, визуализации отзывов клиента. В этом и есть вся суть унификации и переиспользуемости:

Видите? Оба компонента идентичны по структуре, отличается лишь размерность и плотность шрифта, контент в круглом элементе.

Для создания интерфейса невозможно придумать какой-то новый модуль. Все списки, таблицы, заголовки и аккордеоны уже существуют, но используются иногда по-разному. При планировании состава компонентов нужно начинать с исследования на предмет поиска визуально похожих, чтобы постараться свести к одному компоненту в системе, экземпляр которого будет переиспользоваться с разным наполнением. Хотя сейчас Figma достаточно мощна, чтобы хранить в одной библиотеке 500 и более компонентов, лучше стараться сводить их к минимуму, чтобы проще было организовать структуру. Итак, настало время наконец-то перейти к самому продукту…

Кейс: веб дизайн-система для landing сайтов. Встречайте Websy!

В этой статье речь пойдет о конструировании веб-сайтов. Слово “конструирование” использовалось неспроста. Эта дизайн-система является своеобразным конструктором, чтобы из предоставленных блоков быстро создавать любые templates, и еще быстрее их кастомизировать. Как для мобильных устройств так и для десктопных. Именно компонентная архитектура позволит сделать это эффективно; чтобы в будущем вы могли просто клонировать исходник, быстро сменить цвета, типографику и создавать новые темы. “Поменяли тут — поменялось везде”. Помните?

Исследование и анализ будущего состава

Landing-сайты идеальная сфера применения компонентного подхода. Хватит пальцев двух рук, чтобы сосчитать все блоки, из которых строится классический веб-сайт, рекламирующий товар, услугу или сервис: Header, Footer, Call to action, Features, Testimonials, Download, Video и так далее. Принцип такой системы для конструирования в наличии достаточных комбинаций всех перечисленных блоков. Таким образом можно как паззл собрать любой сайт + мобильную версию. Оставалось лишь в качестве исследования изучить сотню свежих landing-сайтов и коллекционировать наиболее часто использовавшиеся элементы. Их в будущем я перерисую, создам компоненты, задам определенный стиль и в конце соберу темплейты. Забегая вперед, скажу что в итоге удалось собрать 18 полноценных темплейтов: 9 полноэкранных и 9 мобильных версий. Я старался создать универсальные шаблоны, которые одинаково подходили бы для презентации сервисов, приложений, портфолио и каких-либо других продуктов

Большинство сайтов в основном безлики

Именно к таким выводам я пришёл, когда попытался просто гуглить. Веб в целом быстро устаревает и это нормально. Ведь быть в актуальном дизайне — это всегда перемены. А мы относимся к переменам с опаской, осторожностью. Если старый сайт работает и кое-как продает себя, то лучше не мешать механизму работать. Но есть компании, которые занимаются оптимизацией внутренних процессов. И продуктовый дизайн для них не на последнем месте. Большинство хороших сайтов, чтобы провести аудит, мне удалось найти на hyperpixel.io и www.lapa.ninja. Я предполагаю, что просмотрел 100+ различных ссылок и это лишь малая часть списка. Должно быть чувство меры, чтобы понимать объем, необходимый для первой версии (читайте MVP). Поэтому я остановился, когда объем компонентов в разделе Text blocks (различные текстовые блоки, возможно с формами и кнопками) достиг числа 30:

Внешний вид продукта

Как именно должен выглядеть продукт? Один из важных вопросов на этапе проектирования. На поиск ответа и исследования тратятся огромные ресурсы компаний. Для себя я решил так — продукт должен быть визуально актуальным. Дизайн и стилистика должны быть не вчерашними, не завтрашними, а в том виде, который сейчас в тренде. Простой пример: сегодня редко где встретишь шрифт Open Sans в западном вебе, хотя три года назад он был очень актуален. Если Google как бренд переходит на Product Sans, надо присматриваться к похожим шрифтам. Если Intercom использует стилистику papercut в своем продуктовом дизайне, надо понять как похожие приемы использовать в своих проектах. Сейчас типографика — это одновременно дизайн, послание и настроение. Давайте с нее и начнем.

Хороший шрифт — это уже половина дела

Идея пришла совершенно внезапно. Невероятно пропорциональный neo-гротеск Objectivity (увы, русификации нет) сразу же поразил меня своей актуальностью. Alex Slobzheninov проделал колоссальную работу и разрешил бесплатное коммерческое использование. Мне сразу же захотелось что-то “задизайнить” на основе этого шрифта. Какое-то время я вертел его по артбордам в Figme, прежде чем понял “Это идеальный шрифт для веба!”. Видимо в тот момент и родился план создания системы именно для web.

Хорошая дизайн-система в Figma — это:

Использование глобальных стилей

С появлением возможности объявлять глобально цвета, параметры текста и теней, скорость кастомизации в Figma существенно возросла. Увеличилась и производительность в целом. Глобальные стили позволяют быстро поменять шрифт в сотнях объектах, изменить цветовую схему и, фактически, получить новый стиль.

Цвета

Сколько цветов хранить в системе? Мне встречались дизайн-системы под Sketch в которых были объявлены все цвета радуги + десяток оттенков для каждого. В реальности это чрезмерно много и 80% такой палитры никогда не будут использоваться. В моей системе Websy, о которой я подробно начинаю рассказывать с этого момента, хранится всего 8 цветов: белый, черный, основной цвет (action), дополнительный цвет (secondary), и 4 градации черного. С белым и черным, я полагаю, все ясно. Action & Secondary цвета мы используем для окраса элементов, с которыми можно взаимодействовать (кнопки, иконки, ссылки). Secondary цвет можно использовать для акцента. Например, для выделения важной фразы, слогана и т.п. Допускается объявление Success / Warning цветов, если ваша система больше про интерфейсы, чем про сайты.

Я адепт материального дизайна, поэтому я держу в системе несколько вариантов подъема над плоскостью (elevation). В Websy вы найдете 4 комбинаций теней: 2dp, 4dp, 8dp, 16dp. Они отличаются смещением и размытием (blur). Например, для обычной карточки рекомендуется использовать 2/4dp тени. Для выпадающих списков, onhover состояний и диалогов можно использовать 8/16dp. Внимательный дизайнер уже подметил, что некоторые продукты Google сейчас используют reflex-тени и двойные тени, которые более реалистичны. Поэтому дополнительно в системе объявлено несколько многослойных теней, которые дают очень реалистичный эффект:

Через глобальные стили тени переключаются всего в пару кликов.

Обводка

Параметр Stroke в Websy регулируется через несколько отдельных компонентов, которые отличаются разными параметрами скругления углов. Обводка чаще всего используется для кнопок и текстовых полей. Аналогично теням, объявлено 5 вариантов скругления углов: 0px, 4px, 8px, 16px и 99px. Для чего столько? Начну с примера того, как вообще используется компонент обводки, например для кнопки:

Разместив кнопку, которая по умолчанию имеет обводку 4dp, можно выделить компонент Stroke и переключить через панель Instance скругление углов в меньшую или большую сторону. Это чуть более сложный способ, но позволяет хранить в отдельном мастер-компоненте разные виды скруглений. Самый простой способ — менять степень скругления через поле ввода в правой панели. Аналогичная схема применима и для текстовых полей, карточек или любых фоновых компонентов.

Расстановка constraints для компонентов.

Давайте я расскажу об этом пункте и остальных в следующей главе. Про поведение модулей и элементов при изменении размеров нужно сказать многое. А также мы перейдем к очень интересной части — описанию всех компонентов в составе веб-дизайн системы Websy. И, возможно, рассмотрим некоторые готовые темплейты для landing pages. Обсудим их состав и гибкость изменения блоков, чтобы подгонять под любые нужды и цели… Подписывайтесь, если интересно.

На десерт небольшое видео.

В данном ролике я с помощью готовых компонентов собираю layouts, которые будут использоваться в качестве экранов-презентаций для системы. Первый вариант мне понравился меньше, а второй (начинается с 1:30) я взял за основной:

Источник

Как делать варианты элементов интерфейса в Figma

Каждый раз делать разные состояния одной и той же кнопки — долго. Варианты в Figma помогут избежать этой нудной работы.

Варианты — это группы компонентов, которые объединяются в один. Благодаря этому дизайнер может в любой момент выбрать, в каком состоянии показать элемент интерфейса: кнопку — нажатой или деактивированной, чекбокс — активным или пустым.

Рассказываем, как сделать варианты для кнопок и воспользоваться ими в макете.

Перед тем как читать эту статью, советуем узнать о функции Auto Layout и компонентах. Иначе вам будет сложно разобраться, для чего нужны варианты и как их сделать.

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

Подготовка компонентов

Чтобы варианты работали, сначала нужно правильно назвать компоненты для них. Для этого в Figma есть система со слешами /:

Название элемента/Значение первого свойства/Значение второго свойства/…/Значение десятого свойства

Рекомендуем описывать варианты на английском языке. Например, отмеченный чекбокс большого размера можно назвать так:

Система названий поддерживает и русский язык, но имейте в виду, что, если ваш макет попадёт к зарубежным дизайнерам, они не смогут понять, что в нём написано:

Как сделать кнопки с системой названий в Figma

Теперь у вас есть два готовых компонента, которые можно превращать в варианты.

Создание вариантов

Чтобы создать варианты из ваших компонентов, выделите их и на панели настроек, в блоке Variants нажмите Combine as variants. Ваши компоненты объединятся в общую группу с вариантами — он называется комбайном.

Обратите внимание, что добавить в комбайн можно только компоненты. Если вместе с ними выделить группы, фреймы или копии компонентов, Figma не даст вам сделать из них варианты.

Как воспользоваться вариантом

Ваша контрастная кнопка перекрасится в серый:

Добавление новых состояний

У каждого объекта может быть сколько угодно состояний, но их важно правильно назвать, чтобы потом вы не потерялись в своём же макете. Сейчас состояния Primary и Secondary относятся к свойству Property 1 — вашему арт-директору будет непонятно, что это значит.

Чтобы переименовать Property 1, выделите весь комбайн c вариантами и на панели настроек в блоке Variants вместо Property 1 напишите Type. Теперь даже спустя десять лет кому угодно будет понятно, что в этом меню нужно выбрать тип элемента:

Как добавить новое свойство

Теперь у стиля Primary появилось новое состояние — Disable. Чтобы его активировать, выберите вашу кнопку на макете и на панели настроек в блоке Button укажите значение State — Disable:

То же самое можно сделать и с дополнительным стилем кнопки, чтобы вы могли быстро показать её отключённой.

С помощью вариантов можно менять что угодно, например цвет, размер, и добавлять иконки.

Когда вариантов становится слишком много, полезно привести весь комбайн в порядок, чтобы вы могли быстро найти любое состояние. Рекомендуем располагать всё вертикально и группировать по типу кнопок:

Не забывайте, что варианты — это те же компоненты. Если вы захотите изменить цвета или форму кнопок по всему макету, это можно сделать через комбайн.

Плагин Button Buddy

Создать варианты кнопок несложно, но отрисовывать каждую по отдельности — долго и нудно. Решить проблему поможет плагин Button Buddy, который автоматически создаёт все основные состояния по указанным вами параметрам.

Как пользоваться плагином:

У вас на макете появится готовый комбайн с базовыми состояниями кнопки:

обложка: Olyasnow для Skillbox Media

Источник

Лучшие практики Figma: компоненты, стили и общие библиотеки

Две самые мощные функций Figma – это компоненты и стили. Они позволяют вам повторно использовать объекты и атрибуты интерфейса, чтобы систематически поддерживать дизайн в масштабе. Когда вам нужно что-то изменить, например, цвет ссылки вашего бренда или домашнюю иконку, вы можете внести изменение один раз – в исходный основной компонент или стиль – и посмотреть, как он обновится во всех ваших проектах.

Вы можете использовать компоненты и стили:

При создании, наименовании и управлении вашими компонентами и стилями нужно учитывать бесконечное количество нюансов, поэтому мы написали руководство, которое поможет вам. Налейте себе чашечку кофе или чая, сядьте поудобнее и начните читать наш мастер-класс.

Небольшое примечание: перед тем, как создавать компоненты в Figma, мы рекомендуем выяснить, какой тарифный план Figma больше вам подходит. Если вы купили лицензию Figma Organization, прочтите эту прекрасную практическую статью об организации работы команд в Figma, потому что эта структура станет основой организации ваших компонентов.

Введение: что такое компоненты и стили?

Если вам уже знакомы основы компонентов, стилей и библиотек, перейдите к следующему разделу.

Процесс создания, публикации и обмена компонентами и стилями

Компоненты – это объекты многоразового использования в вашем дизайне. Они могут быть простыми, как отдельная кнопка, или сложными, как весь заголовок навигации (состоящий из экземпляров других компонентов, таких как логотипы, аватары, кнопки и пункты меню). Компоненты работают аналогично «символам» в Sketch или других инструментах проектирования, но с некоторыми уникальными отличиями. Подробнее об этом чуть позже.

Вот список вещей, которые люди часто превращают в компоненты:

Экземпляры компонента: Как только вы сделаете компонент, вы можете создать его экземпляры, которые по сути являются связанными копиями этого компонента. Поэтому, если вы обновите дизайн исходного компонента, эти экземпляры будут отражать изменение. Например, если вы измените цвет компонента кнопки на красный, а затем опубликуете эти изменения, любой файл, который использовал экземпляры этой кнопки, получит уведомление. Затем можно будет выбрать, обновлять экземпляры на красный цвет или нет.

Стили: это многократно используемые коллекции свойств, которые вы можете легко применять к элементам вашего дизайна. В Figma вы можете создавать стили для текста, цветов, сеток и эффектов, таких как тени и размытия. Если компоненты являются объектами многократного использования, думайте о стилях как об атрибутах, которые вы можете применять к этим объектам.

Вы можете создавать библиотеки для всего, что вам нужно многократно использовать

Библиотеки: в Figma вы можете поделиться компонентами и стилями, опубликовав их. Это превращает ваш файл в библиотеку, поэтому вы можете использовать экземпляры этих компонентов в других файлах. Обновления дизайна ваших компонентов можно публиковать и распространять в других документах, где находятся экземпляры компонентов. Пользователи могут принять эти обновления или продолжить работу со старой версией (если требуется).

Компоненты

Когда начинать создавать компоненты?

Этот вопрос часто возникает, и ответ зависит от предпочтений в рабочем процессе отдельных дизайнеров. Тем не менее, мы обычно рекомендуем превращать элементы дизайна в компоненты на раннем этапе проектирования. Когда элементы повторяются на нескольких экранах, самое время подумать о компонентах (даже если ваш проект находится на довольно низком уровне точности). Дизайн может измениться и пройти через множество усовершенствований, но создание компонентов на этом этапе означает, что вы сможете сэкономить время, сделав эти изменения один раз (с исходным компонентом), и обновив их на всех ваших экранах (с экземплярами).

Главные компоненты (мастер-компоненты) живут там, где вы их создаете, обычно в контексте вашего дизайна, что позволяет легко их настраивать по мере развития вашего проекта (за исключением крупных компаний, которые размещают свои главные компоненты в отдельном файле дизайн-системы). Если вы чувствуете, что слишком рано зацикливаетесь на компонентах, на исследовательской стадии вашего проекта, вернитесь к ним позже – не позволяйте им помешать плавности процесса проектирования.

Когда ваша команда решит применять эти паттерны для повторного использования в других продуктах, в качестве части вашей дизайн-системы, вы можете рассмотреть возможность объединения их из отдельных файлов проекта в более формальный документ, предназначенный для использования в качестве общей библиотеки. Во время этого процесса вы можете уточнить их структуру / наименование / свойства, чтобы они были проще в использовании и соответствовали другим компонентам. Как разработать лучшие компоненты? Давайте рассмотрим некоторые идеи и лучшие практики!

Атомная структура компонентов

Когда вы начнете создавать высококачественные компоненты, особенно с целью их совместного использования, подумайте о том, чтобы начать с более мелких «атомных» компонентов, которые можно использовать в качестве строительных блоков. Вы заметите в своем дизайне паттерны, и захотите их последовательности. Например, форма карточки или форма кнопки.

Хорошая стратегия – превратить эти повторяющиеся элементы в компонент, который вы можете использовать повторно, вложив экземпляры этих элементов в другие компоненты. Представьте себе, что вы превращаете простую форму кнопки в компонент (который будет использоваться в качестве атома) и вкладываете его в каждый созданный вами компонент кнопки. Результат: все кнопки используют одну и ту же отправную точку. Если эту форму нужно изменить, ее можно обновить, изменив всего лишь «атомный» компонент.

Продолжая пример с кнопками, давайте предположим, что у вас также есть основной и дополнительный варианты, десктопная и мобильная версии, каждая из которых имеет 4 состояния (normal, disabled, pressed и focused). Потенциально у вас будет 16 различных компонентов кнопок, которые в противном случае пришлось бы редактировать, если бы вы не использовали атомную структуру. Таким образом, подобная структура компонентов сделает вашу систему более удобной в обслуживании.

Создавайте многократно используемые «атомные» компоненты, которые вы можете вкладывать в другие компоненты, чтобы упростить обновление

Подсказка: добавьте к именам компонентов префикс «_» или «.» и они будут исключены из публикации. Подумайте, какие компоненты могут понадобиться разработчикам. Возможно им не понадобиться доступ ко всем атомным компонентам. Исключив их из процесса публикации, вы упростите работу пользователей библиотек, поскольку отключите их отображение на панели компонентов.

Структурирование компонентов для обработки состояний, тем и изменений

Размышляя о компонентах пользовательского интерфейса, вы, скорее всего, думаете о том, как обращаться со связанными компонентами – это могут быть дополнительные состояния, темы (светлая или темная), или другие варианты. Как лучше справиться с ними? Как дизайнеры будут взаимодействовать с ними?

Вложенные состояния и изменения в одном компоненте

Группы или фреймы, вложенные в компонент, можно переключать с помощью видимости слоев

Когда вы добавляете экземпляр компонента в свой дизайн, Figma предоставляет вам доступ к его слоям на панели слоев. Это позволяет вам просматривать и расширять каждый экземпляр на панели слоев. Вы можете вложить элементы в компонент, которые пользователи при необходимости могут включать (переключая видимость слоя). Вы можете даже вкладывать все состояния в один компонент. Этот метод имеет ряд преимуществ, но также обладает рядом недостатков.

Преимущества: существует один компонент Figma, которым можно поделиться с пользователями. Это означает всего один компонент для обслуживания, для использования дизайнерами и для поиска на панели компонентов, и в меню экземпляров.

Недостатки: этот метод может затруднить обнаружение различных состояний в стеке слоев каждого компонента. Переключение между ними может быть проблематичным, поскольку дизайнеры должны знать, как переключать соответствующие слои внутри компонента. Эти состояния не всегда очевидны, пока дизайнеры не развернут компонент на панели слоев. Этот метод также может привести к множеству повторяющихся слоев в вашем компоненте. Например, кнопка, состоящая из текстового поля и прямоугольника, может потребовать повторить эти слои для каждого состояния – когда пользователи переопределяют текст, а позже захотят показать другой вариант / состояние, дизайнеру потребуется повторно ввести переопределение. Этот вариант использования можно упростить при следующем подходе.

Отдельные компоненты для состояний и вариантов

Другой подход, который мы обычно рекомендуем, заключается в создании отдельных компонентов для каждого варианта или состояния.

Для простоты использования мы рекомендуем создавать состояния или варианты компонентов, как отдельные компоненты

Преимущества: с помощью этого метода все варианты легко доступны на панели компонентов и в меню экземпляров. Это облегчает поиск и переключение между ними. Вместо того чтобы переключать правильную комбинацию вложенных слоев, дизайнеры могут просто выбрать другой связанный компонент из меню экземпляров. Этот метод может сохранить ваши текстовые переопределения при переключении экземпляров, если текстовые слои имеют одинаковые имена в обоих компонентах. Также этот метод более производительный; мы видели несколько примеров очень сложных компонентов с сотнями скрытых слоев (используя вложенный подход), которые можно было бы значительно упростить с помощью этого подхода.

Недостатки: с помощью этого метода вы в конечном итоге получите больше компонентов для совместного использования и обслуживания. Однако, если вы объедините этот метод с атомарной структурой, описанной выше, вы сможете создавать компоненты таким образом, чтобы их было проще поддерживать. Наконец, поскольку многие визуальные вариации могут быть едва заметными их трудно различить при предварительном просмотре миниатюр. Поэтому рассмотрите возможность добавления полезных описаний к вашим компонентам (они будут отображаться как всплывающие подсказки при наведении курсора на панели компонентов).

Манипуляции с темами посредством компонентов

Также могут возникнуть ситуации, когда вы захотите создать варианты компонентов с разными визуальными свойствами. Например, для тем, для светлых и темных режимов или для разных брендов. Одна из техник, которую вы можете использовать для достижения этой цели – это выбрать существующий экземпляр компонента, переопределить визуальные свойства, которые вы хотите изменить, а затем создать из него компонент. Это вложит экземпляр исходного компонента в новый компонент. Вы сохраните вновь примененные переопределения, но при этом оставите связь с исходным компонентом – это упрощает поддержку дизайна, поскольку вам нужно настроить дизайн в одном месте. Изображение ниже показывает пару возможных вариантов использования.

Вложив исходный компонент в другой мастер-компонент, вы можете переопределить свойства и получить варианты, которые остаются связанными по мере развития дизайна

Лучшие практики компонентов

Теперь, когда вы знакомы с парой базовых подходов, давайте обсудим лучшие методы по упрощению использования и обслуживания этих компонентов.

Сохранение переопределения текста: при создании вариантов / состояний компонентов, в качестве отдельных компонентов, вы захотите сохранить переопределения текста, если вы планируете переключаться между ними. Таким образом вам не нужно повторно вводить текст. Чтобы сохранить текст во время этого переключения, убедитесь, что названия текстовых слоев внутри каждого компонента совпадают друг с другом (поскольку по умолчанию имя слоя наследуется от того, что вы изначально вводите в текстовое поле).

Описания: Вы можете добавить описание к каждому главному компоненту на боковой панели свойств. Эти описания отображаются как всплывающие подсказки на панели компонентов. Здесь можно указать информацию об их предполагаемом использовании, чтобы помочь пользователям выбрать правильные компоненты.

Описания компонентов отображаются на панели компонентов в виде всплывающих подсказок

Ограничения и сетки макетов: Потратьте время на установку надлежащих ограничений, чтобы обеспечить предсказуемое поведение компонентов при изменении размеров. Поскольку компоненты функционируют так же, как и фреймы, вы можете добавлять сетки макетов в свои компоненты и даже применять ограничения к элементам, связанным с сеткой. Их также можно использовать для визуализации полей или отступов в компоненте.

Содержимое, в сочетании с сетками макетов, может помочь вам изменить размер компонентов проще и более предсказуемо

Обрезка контента: Можно установить флажок «обрезать контент» (clip content) на панели свойств, чтобы определить, будут ли обрезаны / скрыты элементы, которые выходят за пределы фрейма. Эта функция может быть очень полезна, если у вас есть компоненты с повторяющимися элементами, которые вы можете захотеть раскрыть при изменении размера. Например, число строк в таблице может варьироваться от варианта использования – с помощью этого метода вы можете просто изменить размер компонента, чтобы отобразить необходимое количество строк. Сначала убедитесь, что вы установили ограничения для всех элементов в компоненте!

Стили

Вы также можете добавить в общие библиотеки стили, например, цвета и текста – их гораздо проще создавать, но все же есть рекомендации, которые облегчат их использование.

Стили текста: в Figma, такие несвязанные свойства, как выравнивание и цвет уже включены в стиль, поэтому вам не нужно создавать отдельный несвязанный стиль текста для каждого цвета или выравнивания. Это приводит к уменьшению количества стилей, облегчая управление ими. У многих пользователей будет два набора типов стилей: для мобильных устройств и для настольных компьютеров.

Стили цвета: убедитесь, что у вас есть стили, созданные для всех цветов вашей дизайн-системы, и назовите их соответствующим образом, чтобы их было легко идентифицировать и использовать.

Стили эффектов: стили эффектов позволяют последовательно повторно использовать такие эффекты, как размытие слоя, размытие фона, тени и внутренние тени. Например, система Material design включает в себя набор теней, совпадающих с различными слоями, которые уложены в стек в интерфейсе. Тени многократно используются для создания эффекта различных «возвышений», привязанных к определенным элементам, таким как модальные окна и кнопки.

Стили сетки: часто игнорируемые стили сетки могут помочь стандартизировать сетки макетов в нескольких проектах и ​​окнах просмотра. Если у вас есть определенные сетки, которые вы используете от настольных компьютеров до мобильных телефонов, рассмотрите возможность определения стилей сетки, чтобы ими можно было легко поделиться.

Советы по стилям

Имена стилей: Имена стилей имеют решающее значение в вашей дизайн-системе для выравнивания с предопределенными свойствами. Также для группировки стилей в палитре стилей вы можете добавлять в имена префиксы, разделенные слэшем. (Примечание: вы можете добавить только один уровень иерархии). Например, если вы добавите «Alerts /» перед несколькими стилями, все они будут объединены подзаголовком «Alerts». Вы можете использовать эти префиксы для:

Описания стилей: Добавьте описания к своим стилям – они будут отображаться во всплывающих подсказках почти так же, как и для компонентов. Описания могут помочь уточнить их предполагаемые варианты использования, чтобы помочь дизайнерам выбрать правильный стиль.

Имена и описания стилей могут быть полезны для пояснения вариантов использования или создания соответствий с именами, используемыми в вашей кодовой базе

Примечание: когда разработчики проверяют ваши проекты, на панели кода имена стилей будут отображаться в виде комментариев в режиме CSS и в виде строки в табличном представлении. Имена цветов, шрифтов и стилей эффектов будут отображаться в дополнение к их атрибутам.

Заливка изображениями для изображений-плейсхолдеров: Вы можете создавать стили для заливки изображением (image fills). Допустим, у вас есть несколько пользовательских аватаров или фотографий-плейсхолдеров, которые вы обычно используете. Вы можете не знать, какую форму, пропорции или размеры следует выбрать. Создавая заливку изображением, вы можете легко применить их к любой форме.

Создавайте стили из заливок изображением и легко применяйте их к объектам любых форм и размеров

Сетки макетов для визуализации интервалов: Вы можете создавать стили сетки, состоящие из нескольких сеток макетов. Например, сетка столбцов и строк может быть применена к фрейму или компоненту, чтобы помочь визуализировать поля или отступы. Это может быть очень полезно для команд, которые определили стандартизированный интервал, как часть своей системы.

Используйте сетки макетов для визуализации стандартного интервала вашей системы

Организация и создание библиотек

Чтобы создать свою первую библиотеку, опубликуйте любой документ Figma из модального окна Командной библиотеки (Team Library). Все основные компоненты и стили в этом документе станут доступны для использования в других документах. Когда вы масштабируете дизайн по продуктам или командам, особенно в крупных организациях, вы захотите найти наилучший способ их организации и распространения компонентов для всех пользователей. Сколько библиотек вы должны создать? Как организовать свои компоненты? Помните, что дизайнеры, использующие эти библиотеки, являются вашими конечными пользователями.

Нас часто спрашивают, должны ли команды делиться всем из одной библиотеки или использовать несколько библиотек. Конечно ответ зависит от ситуации. Давайте рассмотрим некоторые факторы, которые необходимо учитывать.

Всё в одной большой библиотеке

Некоторые команды, особенно небольшие, часто создают единую библиотеку для размещения всех своих компонентов и стилей. Этот подход имеет определенные преимущества, но и несколько больших недостатков при масштабировании.

Единый файл библиотеки

Преимущества: есть только одна библиотека для пользователей, которая содержит все, что им нужно. Никогда не возникает путаницы, где найти определенные компоненты. Это также означает, что нужно поддерживать только одну библиотеку.

Недостатки: для более крупных организаций с большим количеством компонентов и стилей, необходимых для поддержки множества различных платформ и продуктов, эта библиотека может очень быстро расти. Даже, если пользователям нужен небольшой набор компонентов, им все равно придется просеять множество похожих компонентов, которые им никогда не понадобятся.

Отдельные библиотеки

Многие команды, особенно средние и крупные, часто решают, что лучший подход – разбить компоненты на несколько библиотек. Это обеспечивает лучшее масштабирование.

Разбивка компонентов и стилей на отдельные библиотеки позволяет пользователям включать только те библиотеки, которые им нужны

Преимущества: разделив компоненты/стили на разные документы/библиотеки, можно включить только необходимые библиотеки для нужного подмножества пользователей или групп. Например, скажем, у вас есть специальные команды, работающие только над мобильными продуктами. Тем, кто работает над мобильными устройствами, возможно, никогда не понадобятся активы, предназначенные для настольных компьютеров. Разделив их на отдельные документы, вы можете опубликовать их в отдельных библиотеках. Тогда дизайнерам нужно всего лишь включить подходящую библиотеку, что избавит их от необходимости просеивать компоненты, которые им не нужны.

Недостатки: прибавится работы для тех, кто отвечает за поддержание и публикацию библиотек.

Оптимизация для достижения успеха: в пакете Figma Organization библиотеки могут быть включены по умолчанию для специализированных команд или для всех команд компании. Чтобы узнать больше прочитайте наш пост о структурировании команд.

Организация компонентов в библиотеке

Следующий уровень организации библиотеки – внутренняя организация каждой библиотеки. Внутри документа у вас есть возможность организовать основные компоненты различными способами, от схем именования до страниц и фреймов. Вы даже можете комбинировать эти методы в сочетании друг с другом.

Слэш в именах

Первый и наиболее распространенный способ группировки компонентов – использовать слэш в именах компонентов, чтобы организовать их в иерархию. Если вы пользовались Sketch, возможно, вы уже знакомы с этим методом. Допустим, у вас были первичные и вторичные кнопки с вариациями для каждой. Вы можете назвать их так:

Преимущества: этот метод является самым быстрым способом организации компонентов. Просто переименуйте компоненты, и они будут организованы в иерархию в меню вашего экземпляра.

Недостатки: хотя этот метод является быстрым способом организации ваших компонентов, в более крупных системах он может привести к длинным именам компонентов. Нередко имена компонентов превышают ширину панели слоев, что затрудняет ее сканирование и анализ. Если вы пользователь Sketch, в этом методе нет ничего плохого, и он поможет вам быстрее приступить к работе. Однако, если вы можете потратить немного больше времени на разметку основных компонентов и хотите добавить к ним дополнительную информацию, следующий метод может оказаться более подходящим.

Страницы и фреймы

Рекомендуемый нами метод организации компонентов – это использование страниц и фреймов в качестве организующих контейнеров.

Используйте страницы и фреймы в своей библиотеке, чтобы организовать компоненты в иерархию на панели компонентов и в меню экземпляров

Преимущества: этот метод позволяет вам отделить организацию от схемы именования компонентов. В результате вы получите более короткие имена компонентов, которые легче сканировать на панели слоев, что позволит вам использовать схему именования, которая ближе к кодовой базе вашей системы.

Например, у вас может быть страница под названием «Кнопки» и выделенный фрейм для каждого типа кнопок («Основная» и «Вторичная»), где находятся эти главные компоненты. Это повысит удобство навигации по миниатюрам на панели компонентов. Имена страниц будут отображаться, как заголовки верхнего уровня, а имена фреймов будут отображаться, как складывающиеся подзаголовки со всеми компонентами, которые находятся в этом фрейме ниже.

Эта функция дополняет визуальную организацию библиотеки, с сопроводительными примечаниями, аннотациями, примерами правильного и неправильного использования и другой документацией по использованию. Таким образом, пользователи могут кликнуть правой кнопкой мыши по любому экземпляру компонента в своем документе и выбрать «Go to Master Component», что откроет документ библиотеки. Здесь они могут просмотреть эту дополнительную информацию, которая может помочь им использовать компоненты, согласно их предназначению.

Кроме того, компоненты, которые находятся в одном и том же фрейме, рассматриваются, как связанные компоненты. Когда вы кликаете по экземпляру одного из этих компонентов, список связанных компонентов появляется на верхнем уровне меню экземпляра, чтобы облегчить переключение между ними. Это означает, что вам не нужно искать правильный компонент в полном меню экземпляра.

Если вам требуются дополнительные уровни для иерархии компонентов, вы все равно можете использовать этот метод и комбинировать его со слэшем. Если вы добавите слэш, Figma вернется к вашей схеме именования, чтобы определить список связанных компонентов для последующих уровней.

Совет: Если вы переходите из существующей или импортированной библиотеки Sketch, в которой используется метод организации посредством слэша, и хотите переключиться на подход страниц и фреймов, вы можете использовать функцию пакетного переименования Figma, чтобы ускорить этот переход. Для этого просто выберите компоненты, которые вы хотите переименовать, и выберите «Rename» в контекстном меню или нажмите cmd + R (Mac), Ctrl + R (Win). В этом диалоговом окне переименования вы даже можете использовать регулярные выражения Javascript для удаления любых префиксов и слэшей.

Экономьте время благодаря пакетному переименованию слоев или компонентов

Мысли в заключение

Хотя существует много способов создания и организации общих библиотек, мы надеемся, что это руководство поможет вам выбрать тот, который больше всего подходит для вашей команды или организации. Никогда не упускайте из виду конечных пользователей, которые в итоге используют созданную вами систему. Убедитесь, что для них включены нужные библиотеки и, что компоненты просты в использовании, поиске и понимании. Выполните это, и вы получите большую согласованность в работе вашей организации.

Источник