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

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

## [Mockup Plugin](https://www.figma.com/community/plugin/817043359134136295/mockup-plugin-devices-mockups-print-mockups-ai-mockups) 

<Img
img="/api/uploads/figma_mockup_706f96370e.jpg"
alt="Mockup плагин"
/>

Инструмент для создания мокапов.  

- Большая библиотека. В ней вы найдёте макеты устройств, брендовые элементы и другие уникальные решения. - У некоторых мокапов есть варианты — можно менять размер или цвет. Также есть возможность создавать свои макеты. 
- Есть ИИ. После загрузки [**лого**](https://altcraft.com/ru/glossary/logotip-chto-eto-i-kak-ego-sozdat) или ввода текста генерируется готовое решение. 
- Можно редактировать уже готовые мокапы. 
- Установка бесплатная. [**Подписка**](https://www.ls.graphics/unlimited-access) с безлимитным доступом ко всей библиотеке за $10 в месяц. 

## [Batch Styler](https://www.figma.com/community/plugin/818203235789864127/batch-styler) 

<Img
img="/api/uploads/figma_batch_styler_bd19fabb54.jpg"
alt="Batch Styler плагин"
/>

Бесплатный плагин для изменения цвета и стилей. 

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

## [Styles & Variables Viewer](https://www.figma.com/community/plugin/1332412206147274506/export-styles-and-variables-to-css)

<Img
img="/api/uploads/figma_styles_variables_0357b65b37.jpg"
alt="Styles and Variables плагин"
/>

После того как вы обновили стили, можно приступить к их выгрузке в CSS. В этом поможет наш плагин styles&variables viewer. Он позволит заменить dev-режим Фигмы, а в чем-то он даже значительно удобнее.

Отображает все переменные и стили из всех коллекций в удобном для разработчиков формате — в JSON, в виде переменных или классов CSS.

Существует 3 доступных режима работы:

- Вывод всех переменных Figma.
- Вывод всех стилей Figma.
- Вывод стилей для выбранного элемента.

Причем при выделении будут отображены:

- Все его CSS-стили;
- Если слой текстовый, то текст для удобного копирования;
- Если у слоя есть фоновое изображение, то кнопка для экспорта оригинального изображения;
- Если выбрано 2 слоя — размеры слоёв и расстояние между ними.

## [Dark Me](https://www.figma.com/community/plugin/1210863977149285175/dark-me) 

<Img
img="/api/uploads/figma_darkme_977ccc3dd6.jpg"
alt="Darkme плагин"
/>

Плагин для создания тёмной темы для пользовательского интерфейса или электронного письма. 

- Автоматически изменяет цвета элементов, чтобы фон стал тёмным, а текст на нем был светлым. Также доступна опция полной инверсии яркости.
- Есть фильтры для оттенка, насыщенности и яркости — всё делается буквально двумя кликами. 
- Плагин полностью бесплатный.

## [PixCraft Email Generator ](https://pixcraft.io/ru/figma)

<Img
img="/api/uploads/figma_email_generator_64873a39be.jpg"
alt="Email generator плагин"
/>

Плагин для создания писем. 

- **Позволяет легко создавать готовые к отправке HTML электронные письма.** Плагин обеспечивает корректное отображение в любых почтовых клиентах, включая мобильные и все версии Outlook. Помимо этого, мобильную адаптацию можно гибко настраивать.
- **Много готовых ассетов.** Библиотека содержит более ста готовых компонентов, включая блоки контента, шапки и подвалы писем, кнопки, изображения, текстовые блоки, разделители и AMP-компоненты. Также можно создавать свои собственные ассеты и разбивать их на категории. 
- **Есть возможность предпросмотра.** Не выходя из плагина, вы можете проверить, как письмо отображается на мобильных устройствах различной ширины, а также в тёмном режиме.
- **Экспорт.** Вы можете экспортировать макет прямо из плагина в [**Altcraft**](https://altcraft.com/ru), Unisender, Sendsay, Enkod, Dashamail, Mailganer и другие. Если же в списке нет подходящей ESP, то можно выгрузить в виде zip-архива.
- **Поддерживает** [**AMP**](https://pixcraft.io/ru/blog/amp-emails-chto-takoe). Можно экспортировать не только стандартный HTML, но и [**AMP HTML**](https://pixcraft.io/ru/blog/kak-vnedrit-amp-pisma-v-vashu-email-strategiyu). Вставляйте в письма формы, карусели и другие интерактивные элементы. 

## [Iconify](https://www.figma.com/community/plugin/735098390272716381/iconify)

<Img
img="/api/uploads/figma_iconify_e42c5c1996.jpg"
alt="iconify плагин"
/>

Библиотека векторных иконок. 

- Более 200 тысяч иконок и 150 наборов. 
- Можно импортировать иконки или просто перетаскивать их из плагина в Figma.
- Легко заменять выбранные иконки.
- Иконки всегда импортируются в формате SVG без дополнительной оплаты. 
- Сохраняется последняя посещённая вами страница — легко продолжить поиск. 

## [Isometric](https://www.figma.com/community/plugin/741184519069077841/) 

<Img
img="/api/uploads/figma_isometric_2c0427f0e7.png"
alt="Isometrics плагин"
/>

Простой плагин для Figma для создания изометрических слоёв. 

- Есть диалоговое окно, через которое можно одним щелчком мыши преобразовать макет в изометрический вид.
- Проект открыт для использования и распространяется под лицензией MIT.

## [Beautiful Shadows](https://www.figma.com/community/plugin/1068595505353552645/)

<Img
img="/api/uploads/figma_beautiful_shadows_9e754cc930.png"
alt="Beautiful Shadows плагин"
/>

Инструмент для создания и настройки теней. 

- Прост в использовании — достаточно перетащить источник света в окне плагина относительно центрального элемента.
- Цвет тени настраивается. 
- Имеет открытый исходный код и распространяется по лицензии MIT.

## [Remove BG](https://www.figma.com/community/plugin/738992712906748191/remove-bg)

<Img
img="/api/uploads/figma_plugins_remove_bg_f7409a4911.jpg"
alt="Remove BG плагин"
/>

Инструмент для удаления фонов. 

- Фон изображений удаляется автоматически всего одним кликом. 
- Можно добавить белый фон к фото, сделать его прозрачным (PNG); выделить, изолировать или получить вырезанный объект.
- Для использования требуется учётная запись remove.bg. Базовый план подписки — €0,90 за изображение, единоразовый платёж — €9. 

## [Jitter. Animation for Figma](https://www.figma.com/community/plugin/961270034818256057/) 

<Img
img="/api/uploads/figma_jitter_f4c1474d38.jpg"
alt="Jitter плагин"
/>

Простой бесплатный плагин для создания анимаций. 

- Позволяет легко анимировать интерфейсы (мобильные приложения, веб-сайты, лендинги, микровзаимодействия). Интуитивно понятный процесс создания анимаций. 
- Есть экспорт в формате видео (до 4K, 60 fps), GIF и Lottie. Поддерживается прозрачный фон.
- Можно создать свою систему моушн-дизайна.
- Легко делиться анимированными шаблонами.
- Есть возможность анимировать текст. 
- Есть готовые пресеты. Просто настройте их под свой проект в несколько кликов.

##Заключение 

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

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

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

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

small_figma-main.jpg

thumbnail_figma-main.jpg

figma-main.jpg

Топ-10 полезных плагинов для Figma

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

В статье сравним ключевые функции [**Pixcraft**](https://pixcraft.io/ru/figma) и [**Emailify**](https://www.hypermatic.com/emailify/), их возможности по настройке и интеграции, а также удобство использования, чтобы вы могли выбрать лучший вариант для своих рассылок.

## Emailify  

<Img
img="/api/uploads/emailify_new_email_a96b89d9f5.jpg"
alt="Создание емейла"
/>

При открытии плагина предлагается создать первое письмо, указав его название. Затем открывается библиотека ассетов, где можно выбрать нужные. Блоки разделены на категории: шапки, изображения, контент, кнопки, е-ком, футеры и пользовательские блоки. 

<Img
img="/api/uploads/emailify_settings_d6be4a6562.jpg"
alt="Настройки емейла"
/>

Можно собрать письмо, используя эти заготовки, после чего отредактировать контент — заменить изображения и текст. 

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

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

При выделении блока можно перейти к детальным настройкам, нажав на кнопку «Настройки слоя».

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

Важно отметить, что использование MJML для рендеринга сразу накладывает ряд проблем — там используется подход «mobile first» и медиазапросы, что ломает верстку в веб-интерфейсе Yandex. Также у MJML есть небольшие проблемы отображения в Outlook.

В плагине можно локализовать дизайн писем с помощью встроенных инструментов перевода. Emailify поддерживает экспорт и импорт переводов через Excel (XLSX) или интеграцию с платформами Lokalise и Crowdin, что упрощает создание емейлов для международной аудитории.

<Img
img="/api/uploads/emailify_background_color_1a27ab45ca.jpg"
alt="Конструктор писем. Настройки емейла"
/>

### Какие есть тарифы  

- **Есть бесплатная версия.** Подходит для тех, кто хочет протестировать возможности Emailify перед покупкой. План предоставляет 10 пробных попыток с полным доступом к функциям pro-версии. Пользователи могут создавать неограниченное количество шаблонов емейлов. Для активации бесплатной версии не требуется привязывать карту.
- **Pro-версия.** Оптимальный выбор для индивидуальных пользователей, которым нужен полный доступ к функциям. Pro-версия включает безлимитный экспорт HTML, неограниченное размещение изображений и GIF, загрузку на платформы и локализацию текста. Также в пакете предусмотрена поддержка клиентов. 
- **Версия для организаций.** Этот план разработан для крупных компаний и команд с высокими требованиями к email-рассылкам. Он предлагает доступ ко всем функциям, а также приоритетную техническую поддержку. 

### Главное 

- Инструмент довольно дорогой. Годовая подписка на pro-версию стоит больше $450, что может быть неподъемной суммой для небольших команд. 
- Нет возможности создавать [**AMP-письма**](https://pixcraft.io/ru/blog/amp-emails-chto-takoe). 
- Сервис зарубежный — могут быть проблемы с оплатой из России. 
- Использует MJML — отображение в Yandex будет некорректным.
- Emailify не предоставляет возможности глубокой кастомизации. Структура писем задается внутри плагина, что существенно ограничивает творческие возможности и гибкость в дизайне.
- Качество отображения может варьироваться в зависимости от почтового клиента. Использование MJML под капотом накладывает некоторые ограничения. Например, в России может возникнуть проблема с корректным отображением в Yandex. Также рекомендуется провести дополнительные тесты в Outlook.
- Интерфейс только на английском языке. 

## Pixcraft 

При первом запуске плагина вы видите пошаговую инструкцию. Здесь объясняется, как создать письмо, воспользоваться библиотекой и тонко настроить мобильную адаптацию.

<Img
img="/api/uploads/pixcraft_1_step_5de6220be0.png"
alt="Конструктор емейлов Pixcraft"
/>

В конце этого гайда у вас уже будет готовое письмо, и останется всего один шаг до его экспорта. Но обо всем по порядку. 

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

<Img
img="/api/uploads/pixcraft_2_step_d2270f16d0.png"
alt="Генератор писем Pixcraft"
/>

Библиотека ассетов разделена на категории: блоки, шапки, изображения, тексты, кнопки, футеры, AMP-компоненты и разделители. Здесь можно найти ассеты на любой вкус. Если же ничего не подошло, вы можете создать собственный блок в Figma, используя автолэйауты.

<Img
img="/api/uploads/pixcraft_step3_d1fb3048eb.png"
alt="Конструктор писем для рассылки Pixcraft"
/>

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

<Img
img="/api/uploads/pixcraft_4_step_0b1c123d97.png"
alt="Верстка email рассылок с Pixcraft"
/>

Вкладка «Нейросеть» поможет создать современное и стильное письмо. Если выделить изображение, откроются инструменты для генерации иллюстраций: с помощью Pixcraft можно задать стиль (арт, фото, скетч, мультик или аниме), выбрать настроение и описать, что должно быть на картинке. Нейросеть также работает с текстом — можно сгенерировать текст по запросу, сделать рерайт в нужном стиле или просто исправить ошибки.

<Img
img="/api/uploads/pixcraft_5_step_63c35ce41e.jpg"
alt="HTML конструктор Pixcraft"
/>

Когда письмо готово, можно перейти в режим предпросмотра, чтобы оценить, как оно выглядит на мобильных устройствах и в [**темной теме**](https://altcraft.com/ru/blog/invertirovanie-cvetov-v-rassylke). В этом режиме формируются как статичный HTML, так и интерактивная AMP-версия письма. Если всё отображается корректно, можно переходить к последнему шагу — экспорту.

На этапе экспорта указывается тема письма и прехедер (с возможностью выбрать короткий прехедер). По умолчанию выгружается только HTML-версия, но можно также добавить AMP и [**TJML**](https://pixcraft.io/ru/framework) или сразу экспортировать емейл в одну из поддерживаемых ESP.

<Img
img="/api/uploads/pixcraft_6_step_539a6c85c2.png"
alt="Поддерживаемые ESP"
/>

### Какие есть тарифы 

До регистрации доступны пять выгрузок. После создания аккаунта вы можете пользоваться pro-версией бесплатно две недели. Использование плагина можно добавить к любому из следующих планов:  

- **Тариф Personal.** Идеален для индивидуальных пользователей, которые работают над небольшими проектами. Подписка включает неограниченные черновики, до 50 сохраненных шаблонов и 1 проект. Также доступно 1 000 AMP-событий с возможностью увеличения их количества. 
- **Тариф Starter.** Этот вариант подойдет для небольших команд (три пользователя), которым требуется больше возможностей для работы. При этом доступны неограниченные черновики, до 300 сохраненных шаблонов и два проекта. Включено от 3 000 AMP-событий.
- **Тариф Pro.** Оптимальное решение для команд (десять пользователей) или компаний с более объемными задачами. Этот тариф включает неограниченные черновики, шаблоны и проекты. План также предлагает от 5 000 AMP-событий.

### Главное 

- Есть разные планы подписки, которые подходят как для фрилансеров, так и для больших команд. Вы можете выбрать то, что лучше всего соответствует вашим потребностям. 
- Поддерживает обычную HTML-верстку емейлов и интерактивные AMP-письма. 
- Pro-версия для 10 пользователей обойдется дешевле, чем план Enterprise для Emailify. 
- Российский сервис. 
- Поддерживает экспорт в [**Altcraft**](https://altcraft.com/ru), Unisender, Sendsay, Enkod, Dashamail, Mailganer и другие.
- Интерфейс на русском, английском, испанском и французском языках. 

## Заключение 

Выбор между Pixcraft и Emailify зависит от ваших потребностей, но Pixcraft выделяется своими возможностями по кастомизации, широкой библиотекой готовых блоков, встроенным функционалом нейросети, а также поддержкой AMP. Это позволяет создавать интерактивные письма с формами и игровыми механиками, что значительно увеличивает вовлеченность получателей.

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


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

small_figma-plugins.jpg

thumbnail_figma-plugins.jpg

figma-plugins.jpg

Pixcraft или Emailify: какой плагин использовать для создания емейлов

Электронные письма являются важнейшим элементом при взаимодействии с клиентом. Именно от них зависит, какое впечатление ваша компания произведёт на получателя. В этой статье мы расскажем, как быстро создать шаблон письма с нуля при помощи инструментов Pixcraft, а также, как разработать мастер-шаблон для дальнейшей работы над email-сообщениями.

<div>
  <Baner
  title='Хотите узнать больше о создании писем?'
  desc='Все фишки и решения — в нашем Telegram-канале!'
  theme='light'
  btnTitle='Перейти в канал'
  btnIco='/uploads/btn_ico_baner_3233dc3870.svg'
  backgroundColor='linear-gradient(92.74deg, #3583FF -36.98%, #4A2DFF 50.34%, #790FFF 123.51%)'
  href='https://t.me/pixcraft_io'/>
</div>

## Планирование рассылки

На первый взгляд создание email-шаблона не кажется сложной задачей. Однако, если рассмотреть этот процесс подробнее, становится очевидно, с какими трудностями можно столкнуться при его разработке. Электронное письмо – не просто текст в красивой «упаковке». Работа над шаблоном состоит из следующих этапов:

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

* **Разработка дизайна письма**. Дизайн письма должен быть лаконичным. Чрезмерная перегруженность визуальными элементами или слишком яркие цвета могут отвлечь внимание от главной информации рассылки.
* **Верстка шаблона**. Когда идея, текст и дизайн готовы, наступает технически самый сложный этап — верстка. В этой статье разберем использование плагина [Pixcraft для Figma](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates), который позволяет получить качественную email-верстку из дизайн-макета.
* **Тестирование письма**. Чтобы проверить корректное отображение письма, а также выявить технические ошибки при отправке, необходимо не просто открыть шаблон в режиме предпросмотра, но и запустить тестовую рассылку. Только после проведения тестов можно рассылать письмо реальным получателям.

## Текст письма

Вне зависимости от целей рассылки есть несколько неоспоримых правил для текста письма:

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

В ситуациях, когда у вас есть интересные идеи для текста, но сложно найти точные формулировки, вы можете воспользоваться помощью **нейросетей**. В [плагине Pixcraft](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates) есть соответствующий раздел AI-инструментов, который поможет вам не только с текстом, но и с изображениями:

<Img
img="/api/uploads/email_shablony_1_921f13aebb.jpg"
alt="AI-генерация изображений и текста"
/>

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

## Разработка дизайна

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

Для большинства компаний основным инструментом является **Figma**. Вы можете разработать дизайн-макет с использованием auto layout с вашим уникальным дизайном и структурой. Или воспользоваться заготовками плагина [Pixcraft Email Generator](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates) и собрать письмо из готовых блоков:

<Img
img="/api/uploads/email_shablony_2_37054e8980.jpg"
alt="Готовые блоки"
/>

Здесь вы также можете добавить ссылки в элементы. Для этого выберите нужный слой или текст, откройте раздел «Свойства» и укажите URL-адрес ссылки:

<Img
img="/api/uploads/email_shablony_3_4306a919bb.png"
alt="Адрес ссылки"
/>

Обширная статья для дизайнеров о работе с плагином Pixcraft доступна в нашем [блоге](https://pixcraft.io/ru/blog/email-template-no-code).

Если email-рассылки являются для вас основным способом общения с клиентами, мы рекомендуем разработать **мастер-шаблон** — шаблон, в котором проработаны все возможные структуры блоков, которые вы планируете использовать. При наличии мастер-шаблона создание нового письма сводится к выбору нужных блоков и замене в них текстов и изображений. Наличие такого шаблона **значительно ускоряет** создание новых рассылок.

Pixcraft Email Generator позволяет сохранить все ваши блоки (ассеты) в библиотеку, указав им имена и теги для удобного выбора:

<Img
img="/api/uploads/email_shablony_4_fab0d68ab9.png"
alt="Имена и теги"
/>

## Верстка шаблона

При использовании плагина Pixcraft Email Generator вам не потребуется думать о верстке шаблона – достаточно выбрать нужное письмо и открыть предпросмотр. Если письмо отображается корректно, то далее можно перейти в раздел экспорта. Для разовых промо-рассылок достаточно выгрузить результат сразу в ESP. Если же вы планируете повторно использовать этот шаблон или его блоки, особенно, если в дальнейшем предстоит работать над шаблоном без дизайнера, то лучшим вариантом будет **сохранить шаблон в Pixcraft**:

<Img
img="/api/uploads/email_shablony_export_5_75c3a812a3.png"
alt="Сохранить шаблон"
/>

После сохранения шаблон будет доступен в конструкторе писем [Pixcraft Builder](https://app.pixcraft.io). Теперь, когда вам нужно будет создать новое письмо для рассылки, просто откройте сохраненный мастер-шаблон и нажмите **«Редактировать копию»**:

<Img
img="/api/uploads/email_shablony_redaktorovanie_6_98a2c79840.jpg"
alt="Редактирование копии"
/>

Также в конструкторе Pixcraft можно отдельно сохранить используемые элементы для дальнейшей вставки в любом другом письме. Для этого во время редактирования выделите блок, откройте дополнительные настройки и нажмите **«Save asset»**:

<Img
img="/api/uploads/email_shablony8_ce7f115791.png"
alt="Сохранение ассета"
/>

Все сохраненные элементы будут доступны в соответствующем разделе панели инструментов слева:

<Img
img="/api/uploads/email_shablony_assets_7_8b45a0e102.png"
alt="Сохранённые элементы"
/>

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

## Тестирование отображения

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

* **Почтовый клиент** – не все клиенты поддерживают AMP-контент или требуют особенной настройки компонентов письма
* **Мобильная или десктопная версия** – элементы письма должны уметь адаптироваться в зависимости от устройства, которым пользуется получатель
* **Системная тема интерфейса** – темная или светлая

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

<Img
img="/api/uploads/email_shablony_8_4512f82b35.jpg"
alt="Отдельные компоненты"
/>

Письма, созданные с помощью Pixcraft, корректно отображаются и сохраняют изначальный внешний вид во всех почтовых клиентах, начиная от **самых массовых** (Gmail и Mail.ru, Yandex) и заканчивая **корпоративными** (Outlook). 

## Заключение

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

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


Расскажем, как быстро создавать шаблоны писем с нуля с помощью инструментов Pixcraft. А ещё выясним, как как сделать мастер-шаблон. 


small_kak-sozdat-email-shablony.jpg

thumbnail_kak-sozdat-email-shablony.jpg

kak-sozdat-email-shablony.jpg

Как создать email-шаблоны с нуля с помощью Pixcraft

Про тёмную тему (в письмах и не только) не рассказал только ленивый: есть множество [**рекомендаций и правил**](https://emailmatrix.ru/blog/dark-mode-guide/) по использованию изображений, текста и цветов, чтобы они корректно выглядели как в светлой, так и в тёмной теме. Но давайте взглянем немного под другим углом.

<div>
  <Baner
  title='Хотите узнать больше о создании писем?'
  desc='Все фишки и решения — в нашем Telegram-канале!'
  theme='light'
  btnTitle='Перейти в канал'
  btnIco='/uploads/btn_ico_baner_3233dc3870.svg'
  backgroundColor='linear-gradient(92.74deg, #3583FF -36.98%, #4A2DFF 50.34%, #790FFF 123.51%)'
  href='https://t.me/pixcraft_io'/>
</div>

## Немного теории

Мы привыкли к использованию цветовой модели RGB, где любой цвет можно представить как сочетание 3-х основных цветов: R — красного, G — зеленого и B — синего. В компьютерной графике интенсивность каждого из основных цветов чаще всего варьируется от 0 до 255. Например, при минимальной интенсивности всех трёх цветов (R=0, G=0, B=0) получается чёрный цвет, а при максимальной (R=255, G=255, B=255) — белый. Этот принцип положен не только в математическую модель, но и воплощен в привычных нам мониторах. Каждый пиксель состоит из трёх субпикселей — красного, зелёного и синего. В зависимости от яркости их свечения мы видим определённый цвет благодаря эффекту пространственного смешивания, а при отсутствии свечения наблюдаем чёрный цвет.

<Img
img="/api/uploads/dark_theme_7186cd1340.png"
alt="Темная тема: модель"
/>

При работе с кодом или графическими редакторами чаще всего применяется шестнадцатеричное (Hex) представление цвета, записанное вместе, например #6812FC. При этом перед кодом всегда следует символ #, который указывает на способ задания значения. В нашем примере получается, что это цвет:

R = #68 = 104
G = #12 = 18
B = #FC = 252

Помимо RGB существуют и другие цветовые модели, например CMYK, применяемая для вывода изображения на печать. Здесь C — отвечает за Cyan (Синий), M — Magenta (Пурпурный), Y — Yellow (Желтый) + K — черный.

<Img
img="/api/uploads/dark_theme_model2_63c32e5b9b.png"
alt="Темная тема: модель CMYK"
/>

Эта цветовая модель также предлагает «смешивать» несколько цветов, чтобы получить желаемый.

Но нас сегодня будет интересовать немного другой подход к представлению цвета. Давайте рассмотрим еще одну цветовую модель — HSL, которая включает три компонента:

- Hue (Тон)
- Saturation (Насыщенность)
- Lightness (Светлота).

Хотя иногда светлоту называют «яркостью», это не совсем корректно, правильнее будет использовать термин «светлота» или «интенсивность».

Тон принимает значение от 0 до 360 градусов; насыщенность — значение от 0 до 1; светлота — также от 0 до 1. 

## Как же работает тёмная тема

Многие почтовые клиенты имеют функцию автоматического перекрашивания письма в случае, если в приложении (или системе) пользователя включена тёмная тема интерфейса, чтобы светлое письмо не «било по глазам». Выглядит это примерно так:

<Img
img="/api/uploads/dark_theme_email_11zon_d2d7a14806.jpg"
alt="Емейл с тёмной темой"
/>

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

Для решения задачи в самом простом случае необходимо представить цвет, используя HSL-цветовую модель, и инвертировать последнюю компоненту — светлоту. Она принимает значение от 0 до 1, то есть нам нужно из единицы вычесть значение светлоты нашего цвета. Поэтому черный становится белым, а белый — черным. чем ближе значение к 0.5, тем меньше изменений мы видим.

## Разберём на примере

У нас есть кнопка с цветом фона #6A66D3 и цветом текста #FFFFFF

<Img
img="/api/uploads/dark_theme_button_fee67de805.png"
alt="Пример кнопки"
/>

Для начала переведем цвет из 16-ричной системы счисления в десятичную.

```#6A66D3 = R 106, G 102, B 211```
```#FFFFFF = R 255, G 255, B 255```

Следующим шагом необходимо перевести цвет из RGB в HSL, для этого воспользуемся следующим алгоритмом:

```
Dif = Max([R,G,B])-Min([R,G,B]) = 0,4274
Lightness = (Max([R,G,B])+Min([R,G,B]))/2 = 0.6137

Saturation = Dif/(2-Max([R,G,B])-Min([R,G,B])), Если Lightness > 0.5
Saturation = Dif/(Max([R,G,B])+Min([R,G,B])), Если Lightness < 0.5

Saturation = 0.5527

Hue = 0, если Dif = 0
Hue = ((G - B)/Dif mod 6)/6*360, если Max = R
Hue = ((B - R)/Dif + 2)/6*360, если Max = G
Hue = ((R - G)/Dif + 4)/6*360, если Max = B

Hue = 242
```
Итого, мы получили: 

```#6A66D3 = H 242, S 0.55, L 0.61```
```#FFFFFF = H 0, S 0, L 1```

Чтобы получить цвет для тёмной темы, пересчитаем значение светлоты, вычтя из единицы значение цвета:

H 242, S 0.55, L (1-0.61) = 0,39
H 0, S 0, L (1-1) = 0

Переводя цвета в RGB, мы получим: 

```#302C9A```
```#000000```

Или же визуально:

<Img
img="/api/uploads/dark_theme_button2_66307bea97.png"
alt="Пример кнопки с темной темой"
/>

Примерно так работает преобразование в тёмную тему в почтовом клиенте Gmail на iOS — просто инвертируя светлоту каждого из цветов.

Вместо всех этих вычислений  вы можете увидеть значение цвета в RGB и HSL в любом профессиональном графическом редакторе, например, в Figma или Photoshop.

##Что перекрашивать

Для правильной работы необходимо разобраться, что же следует преобразовывать, а что нет. В верстке мы легко можем понять, какой цвет является фоном, а какой текстом. Используя параметр светлоты, определить, является ли этот цвет тёмным. Поэтому, если, например, мы видим светлый текст, для тёмной темы будет странно перекрашивать его в тёмный — его следует оставить неизменным. Аналогично для фона — если он и так тёмный, то трогать его не стоит, а иначе следует его «приглушить». 

Здесь каждый разработчик волен выбирать значения, которые ему по душе, или «поиграться» с ними. Эмпирически мы подобрали значение светлоты 0,6. Если фон светлее (больше) этого значения, его следует перекрасить. Аналогично, если текст темнее 0,6, его также нужно перекрасить. 

В реальных почтовых клиентах все происходит чуть-чуть сложнее. Используется прогрессивная шкала корректировки яркости (а не просто вычитание из единицы): чем значение ближе к пороговому (в нашем случае — 0.6), тем меньше цвет будет изменяться. Кроме того, обычно происходит небольшая коррекция насыщенности.

##Инструменты

Мы разобрали теорию, где же это может пригодиться на практике и в каких инструментах уже реализовано?

###TJML framework и тестирование тёмной темы

При профессиональной верстке писем важно позаботиться не только о качественном отображении в различных почтовых клиентах, но также и об отображении в тёмной теме.

Специально для этого в [**TJML-фреймворке**](https://pixcraft.io/ru/framework) предусмотрен инструмент тестирования отображения в тёмной теме, а также в тёмной теме, характерной для gmail на iOS:

<Img
img="/api/uploads/dark_theme_testing_1664f23ca7.png"
alt="Тестирование темной темы"
/>

Здесь реализован именно тот алгоритм, который мы пошагово рассмотрели выше. Следует отметить, что проверить можно не только письма, созданные на фреймворке — в тело письма (m-body) можно вставить и обычную емейл-верстку.

###Pixcraft Плагин для Figma

Этот [**плагин для Figma**](https://pixcraft.io/ru/figma) также позволяет создавать профессиональные емейл-рассылки, но уже без кода. Он преобразует структуру дизайн-макета в TJML-верстку автоматически, после чего позволяет выгрузить получившийся код в виде архива или в ESP. 

Так как TJML-фреймворк является неотъемлемой частью инструмента, то и все преимущества его использования здесь также доступны, в том числе и проверка отображения письма в тёмной теме:

<Img
img="/api/uploads/dark_theme_plugin_11zon_1c66f00083.jpg"
alt="Проверка темной темы"
/>

##Dark me плагин для Figma

Мы не зря говорили про HSL в контексте работы с цветом — это один из самых удобных подходов, который мы воплотили в плагине [**Dark me**](https://www.figma.com/community/plugin/1210863977149285175/dark-me).

<Img
img="/api/uploads/dark_theme_dark_me_cd5fa205f5.png"
alt="Плагин для темной темы"
/>

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

Расскажем, как правильно подготовить ваши письма для тёмной темы — от теории до инструментов.


Статьи по тегу: Figma