Разработка гайдлайна в Figma: компоненты, варианты и переменные
Гайдлайн (или дизайн-гайд) — это документ, который помогает поддерживать согласованность и единообразие в дизайне. Он описывает, как именно должны выглядеть повторяющиеся элементы, какие стили применять и как правильно использовать готовые компоненты. Наиболее подходящим решением для создания гайдлайнов email-шаблона для рассылок является Figma. Благодаря своим возможностям (компоненты, варианты, инстансы, переменные и пр.) Figma позволяет упростить работу над шаблонами писем и быстрее вносить правки.
В статье разберём, что такое компоненты, варианты, переменные в Figma, а также как они могут помочь в создании собственного целостного гайдлайна.
Что такое компонент
Компонент (component) — это шаблон элемента, копии (инстансы) которого могут в дальнейшем использоваться в разных местах проекта. Если в компонент будут внесены изменения, все его инстансы автоматически обновятся. Создать компонент можно в контекстном меню при выборе объекта, группы или фрейма, либо же нажатием горячих клавиш Ctrl+Alt+K.
Компоненты позволяют быстро и легко добавлять элементы в макет, соблюдая при этом единый стиль и подход к оформлению. Они также являются основным элементом любого гайдлайна. Во-первых, новые элементы, созданные из компонента, будут сохранять используемую в проекте стилевую составляющую. Во-вторых, если вы захотите внести правки в структуру какого-либо объекта в вашем гайдлайне, вам понадобится отредактировать только компонент, а его инстансы автоматически получат внесенные изменения.
Библиотеки компонентов, а также компоненты проекта отображаются на вкладке Assets. Для использования доступны как локальные компоненты, созданные в вашем текущем проекте, так и компоненты из подключенных библиотек.
Обычно компоненты хранятся в отдельном файле проекта. Это позволяет всем участникам проекта быстро получить доступ к этим элементам с предварительно настроенными параметрами размера, расположения, стиля и т.д.
Вы всегда можете перейти от инстанса к компоненту, нажав на любую копию правой кнопкой мыши и выбрав Main component – Go to main component. В этом же разделе вы можете перенести изменения экземпляра в ваш компонент:
Инстанс компонента
Инстанс (Instance) — это копия мастер-компонента, которая наследует его свойства, но может быть частично изменена. Инстансы позволяют переопределять содержимое, например, текст, изображения, цвета, но при этом копии сохраняют связь с оригинальным компонентом.
Как работают инстансы?
- Если изменить компонент, все инстансы обновятся автоматически;
- Если внести изменения в инстанс, они сохраняются только в этом инстансе, но не повлияют на компонент;
- Если отсоединить инстанс (Detach Instance), и он станет обычным объектом, потеряв связь с компонентом.
Варианты компонентов
Часто при создании гайдлайна возникает необходимость отобразить сразу несколько состояний одного и того же элемента интерфейса. Например, кнопка может быть в обычном состоянии, неактивной, нажатой или изменять свой вид при наведении курсора. Можно, конечно, создавать отдельный компонент под каждое состояние, однако это решение ведёт к избыточности структуры, усложняет поддержку макета и делает процесс проектирования менее удобным. Для таких ситуаций в Figma предусмотрены варианты, которые позволяет эффективно выделять несколько состояний внутри одного компонента.
Варианты (Variants) — это функционал, позволяющий объединять несколько компонентов с разными состояниями или свойствами в один компонент с параметрами переключения. Вместо создания множества отдельных компонентов (например, кнопки в разных состояниях), можно использовать один вариативный компонент с переключаемыми свойствами. Варианты также облегчают навигацию в панели Assets.
При этом следует помнить, что вариант компонента не является его полноценным инстансом, соответственно, изменения между несколькими вариантами не синхронизируются.
Чтобы добавить новый вариант, выберите в контекстном меню главного компонента Main component – Add variant. В дальнейшем вы можете добавлять новые варианты непосредственно в рабочем пространстве проекта:
Вложенные компоненты
Компоненты можно также использовать внутри других компонентов, что позволяет менять какие-то элементы уже непосредственно в инстансе.
Проще всего управлять такими вложенными компонентами при помощи свойств (Properties).
Свойства компонентов
Когда ваш проект содержит не так много разных элементов, работать с вариантами компонентов удобно. Но если вам необходимо настроить много различных объектов, например, множество полей ввода с разными состояниями, эффективнее будет работать со свойствами компонента. Свойства компонентов (Component Properties) — это параметры, которые позволяют настраивать инстансы компонентов, не изменяя их структуру. Они дают больше гибкости, чем просто варианты, и позволяют делать компоненты более универсальными.
Работа внутри одного компонента с множеством свойств — самый сложный способ работы с компонентами, однако, он же и является наиболее универсальным, эффективным и «компактным». Отсутствие необходимости работы с каждым вариантом по отдельности экономит дизайнеру достаточное количество времени.
В Figma есть четыре основных типа свойств:
- Текстовые (Text Properties).
- Булевые (Boolean Properties).
- Инстансные (Instance Swap Properties).
- Вариантные (Variant Properties).
Разберем каждое свойство подробнее.
Текстовые свойства
Позволяет редактировать текст внутри компонента прямо в панели Design, без необходимости разрывать связь с мастер-компонентом. С помощью этого типа свойств можно кастомизировать текстовое поле любого инстанса.
Как создать:
1. Выберите текстовый слой внутри мастер-компонента.
2. В панели справа найдите Content и нажмите Create Property.
3. Задайте имя свойства (например, label).
После этого вы сможете редактировать текстовое содержимое этого поля в любом инстансе прямо из панели инструментов.
Булевые свойства
Позволяют включать или отключать элементы внутри компонента. Свойства принимают значения true или false. С их помощью можно включать или выключать иконки внутри кнопок, а также вставлять какие-то временные блоки (например, плашку о скидке на товар).
Как создать:
1. Выберите нужный элемент внутри компонента.
2. В панели Layer нажмите Create Property – Boolean.
3. Задайте название (например, show_icon).
Инстансные свойства
Позволяют быстро заменять один вложенный компонент на другой, не разрывая связь с мастер-компонентом. Они позволяют, например, менять иконку внутри кнопки (icon = arrow – icon = check).
Как создать:
1. Выберите вложенный компонент в мастер-компоненте.
2. В панели Design найдите Instance Swap и создайте новое свойство.
3. Дайте название (например, icon_variant).
Вариантные свойства
Позволяют переключать существующие варианты компонента через настройки, вместо выбора из списка в панели Variants. Для пользователей, которые привыкли работать со свойствами компонента, этот способ взаимодействия с вариантами является более удобным.
Как создать:
1. Создайте несколько вариантов компонента.
2. В панели Variants объедините их и задайте свойства (type, state).
Свойства компонентов можно задавать прямо в их названии, для записи используется шаблон ключ=значение, ключ=значение. Properties — один из самых сложных аспектов при работе с компонентами, однако дизайнер, разобравшийся в них, способен быстро создавать крайне гибкие элементы для своих шаблонов.
Переменные
Помимо компонентов, одним из важнейших инструментов для разработки гайдлайна являются переменные. Переменные в Figma — это значения, которые можно задавать и переиспользовать для различных элементов дизайна. Они позволяют делать дизайн гибким, масштабируемым и более управляемым, особенно в больших проектах и дизайн-системах.
Переменные работают аналогично CSS-переменным (--primary-color, --spacing-lg), поэтому их легко передавать в код и использовать в разработке. Их можно настроить в панели Design, нажав на свободное место на рабочей поверхности:
С выгрузкой переменных и стилей из Figma в качестве CSS-переменных может помочь плагин от команды Pixcraft.
Переменные в Figma бывают четырех типов:
Цветовые (Color).
Числовые (Number).
Текстовые (String).
Булевые (Boolean).
Цветовые переменные
Используются для хранения значений цветов и градиентов. С их помощью настраиваются:
Основные цвета (например, Primary, Secondary).
Цвета текста (Text-Primary, Text-Secondary).
Цвета фонов (Background, Surface).
Цвета состояний (Hover, Disabled).
В Figma эти цвета можно использовать в заливках (Fills), обводках (Strokes), тени (Shadows) и градиентах.
Числовые переменные
Используются для хранения числовых значений, таких как размеры, отступы и радиусы. Применяется в:
Размерах (FontSize-Small, FontSize-Large).
Радиусах (Border-Radius, Card-Radius).
Отступах (Spacing-XS, Spacing-L).
Текстовые переменные
Используются для хранения текстовых значений, таких как названия кнопок или заголовков. Можно использовать для:
Названий кнопок (Button-Label-Primary).
Динамического контент (UserName, Product-Title).
Локализации (Locale-EN, Locale-ES).
Булевые переменные
Используются для переключения отображения (включено или выключено). Применение:
Показ/скрытие элементов (Show-Icon, Show-Badge).
Переключение темной/светлой темы (DarkMode-Enabled).
В Figma булевые переменные управляют отображением слоев (Visibility).
Также созданные переменные можно группировать в коллекции, например:
Theme (Темы) – Light / Dark.
Spacing (Отступы) – XS / S / M / L.
Typography (Типографика) – Heading / Body / Caption.
В нашем телеграм-канале мы рассказывали как можно применять переменные с несколькими значениями для разных режимов —- описали кейс автоматического перекрашивания в тёмную тему, перевод на несколько языков и описание мобильной адаптации.
Создание email-гайдлайна
Анализ и планирование
На этом этапе важно тщательно изучить текущие email-шаблоны, выявить их сильные и слабые стороны, описать типовые сценарии использования. Определите, какие элементы нуждаются в стандартизации: заголовки, кнопки, изображения, текстовые блоки и ссылки. Обсудите шаблоны совместно с командой маркетологов, дизайнеров и верстальщиков, чтобы убедиться, что ни одна важная деталь не упущена.
Создание дизайн-системы
Дизайн-система задаёт единый стиль для всех будущих email-шаблонов. В неё входят цвета, шрифты, размеры, отступы и стили ссылок. На этом этапе вам помогут переменные и стили. Стили позволяют централизованно хранить цвета, шрифты и эффекты элементов, разработанные для вашего проекта. А использование переменных обеспечивает быструю адаптацию дизайна к новым требованиям и условиям.
Формирование компонентов
Создание компонентов позволяет обеспечить единообразие и простоту использования отдельных элементов в шаблонах. Сначала определите основные компоненты: как правило, это заголовок, подвал, кнопки, изображения, текстовые блоки. Создайте для каждого элемента отдельный компонент с настраиваемыми параметрами и состояниями.
Auto Layout и адаптивность
Для email-рассылок критически важно, чтобы дизайн корректно отображался на различных устройствах и экранах. Использование функции Auto Layout в Figma позволяет сделать компоненты и шаблоны гибкими, автоматически подстраивающимися под контент. Настройте автовыравнивание так, чтобы шаблоны легко адаптировались при изменении содержимого и размеров экранов.
Документирование
Документирование всех созданных компонентов и правил использования является ключевым этапом разработки гайдлайна. Создайте отдельную страницу в Figma с подробными инструкциями и рекомендациями по использованию каждого компонента, а также особенностями настройки переменных и автовыравнивания.
Тестирование и оптимизация
Проведите внутреннее тестирование гайдлайна с участием дизайнеров и разработчиков, чтобы оценить удобство использования созданных компонентов и корректность описаний. Соберите обратную связь, выявите трудности и проблемные места. Внесите необходимые корректировки и улучшения в гайдлайн, чтобы добиться максимальной практичности и эффективности. Помните: гайдлайн необходимо обновлять и актуализировать в соответствии с изменениями в вашей маркетинговой стратегии.
Заключение
Создание гайдлайна для шаблона email-рассылки в Figma — это вложение в долгосрочную эффективность и согласованность дизайна. Грамотно настроенные компоненты и варианты делают процесс сборки писем похожим на сборку «по кирпичикам»: из набора заранее утверждённых элементов вы быстро формируете письмо, меняя только то, что нужно изменить.
Такой подход экономит время, обеспечивает единый стиль и упрощает дальнейшие доработки. Внедряя описанные выше шаги и постоянно актуализируя гайдлайн, вы сможете поддерживать качественный, современный и легко масштабируемый дизайн для любых email-кампаний. А быстро создавать интерактивные письма по готовому гайдлайну можно, используя удобный плагин Pixcraft Email для Figma.
Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш Telegram-канал. Там делимся полезными материалами, лайфхаками и идеями для работы.