Разработка гайдлайна в 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-канал. Там делимся полезными материалами, лайфхаками и идеями для работы.