Autolayout в Figma — мощный инструмент, который автоматически выстраивает и адаптирует фреймы и компоненты в зависимости от их содержимого и настроек. Он делает дизайн более гибким, похожим на поведение Flex_ов при вёрстке, и позволяет:

🌟 автоматически выравнивать и распределять элементы внутри фрейма или компонента;
🌟адаптировать размер контейнера под содержимое (или наоборот);
🌟 настраивать отступы, выравнивание, направление (горизонтальное или вертикальное), интервалы между элементами;

Использование Autolayout заметно ускоряет работу, а в сочетании с компонентами превращает дизайн-макет в «живую» систему.

⚡️ Кстати, если собрать письмо через Autolayout, его можно легко выгрузить в готовую email-верстку с помощью плагина Pixcraft.

#Продизайн #Figma

💌 JSON-LD в email-рассылках

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

#Блог

🌙 Как создать тёмную тему макета в Figma и удобно управлять цветом

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

Плагин Dark Me для Figma позволяет получить тёмную тему интерфейса буквально в 1 клик 🖱

Основные возможности:

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

Где может быть полезен:

💜 Создание тёмной темы интерфейса
💜 «Подкручивание» цветовой гаммы или яркости всего интерфейса, как в фотошопе
💜 Тестирование отображения письма в тёмной теме при автоматическом перекрашивании (обычный режим - как в большинстве почтовиков, полная инверсия - как в Gmail на iOS)

Кстати, плагин бесплатный и доступен без ограничений.

#Продизайн #Figma

🧐 Что проверить перед отправкой письма?

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

#Блог

✉️ Какие цепочки писем запускать в первую очередь?

В статье — обзор must-have email-сценариев: от welcome-серии до реактивации. Расскажем, какую пользу они приносят бизнесу и как превратить каждое письмо в инструмент вовлечения.

#Блог

🧹 Наводим порядок в Figma

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

Решение — плагин 📦 Structure Optimizer, который наводит порядок за вас.
А именно:

— находит и удаляет лишние слои, перенося их стили и содержимое;
— упрощает структуру авто-лайаутов, делая макет понятнее;
— сохраняет внешний вид, меняя только внутреннюю организацию;
— переименовывает выделенные слои, пронумеровав их по порядку на холсте.

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

И благодаря тому, что Structure Optimizer упрощает структуру, это позволяет выгружать более компактный код в ⚡️ Pixcraft Email Plugin.

#Продизайн #Figma

Команда EmailMatrix протестировала плагин ⚡️ Pixcraft и поделилась впечатлениями в новой статье.

Узнать больше

📬 Интерактивные формы в письме — это просто

В статье показываем, как с помощью AMP и Pixcraft встроить формы прямо в email, собрать данные и улучшить отклик.

#Блог

Медиа-запросы в email: что нужно знать

Медиа-запросы (media queries) — это CSS-правила, которые позволяют менять стили в зависимости от устройства получателя (ширины экрана, ориентации, плотности пикселей и других параметров).

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

📧 Mail.ru — наиболее полная поддержка медиа-запросов.

📧 Gmail — медиа-запросы поддерживаются в моб.приложениях (Android/iOS) и на десктопе в веб-интерфейсе. Но в мобильном веб-интерфейсе они не работают.

📧 Яндекс.Почта — несмотря на свою популярность, медиа-запросы не поддерживает.

Более подробную информацию можно найти на сайте caniemail.

Что делать?

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

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

Именно он лежит в основе ⚡️ Pixcraft и обеспечивает надежное отображение писем в любом почтовом клиенте.

#How_to

🌐 Что нового в Figma: коротко о главном

Разбираем обновления: новый Auto Layout с сетками, AI-инструменты, генерация сайтов, шаблоны для маркетинга и другие полезные фишки из Config 2025.

#Блог

Где тестировать рассылки?

Знакомо многим: то, что отлично выглядит в Gmail, может поехать в Outlook и криво отобразиться в Yandex. Чтобы этого избежать — важно тестировать письма до запуска.

Вот 4 сервиса, которые помогут проверить отображение в разных почтовиках:

1️⃣ Litmus
+ Подробный предпросмотр писем в более чем 100+ почтовых клиентах и устройствах
+ Множество вспомогательных сервисов - тестирование на спам, блочный редактор, сервис аналитики и т.д.
- Для теста необходимо отправить письмо из вашей платформы

2️⃣ Email on Acid
+ Подробный предпросмотр писем в более чем 100+ почтовых клиентах и устройствах
+ Проверка ссылок, картинок, кода на возможные проблемы и ошибки
+ Имеет встроенную проверку на спам (анализ заголовков, контента и т.д.)
- Не поддерживает российские почтовые сервисы

3️⃣ Testi@
+ Предпросмотр писем в более чем 100+ почтовых клиентах и устройствах
+ Есть бесплатный тарифный план (2 почтовых клиента, 1000 предпросмотров в месяц)
+ Тестирование на спам
- Может работать нестабильно при больших нагрузках

4️⃣ Email Preview Service
+ Cкриншоты отображения писем в более чем 50 почтовых клиентах и устройствах
+ Включает инструменты для анализа спам-оценки, проверки на черные списки, а также тестирования SPF, DKIM и DMARC записей
- Ограниченная поддержка русскоязычных почтовых клиентов
- Небольшой набор почтовых клиентов и устройств относительно других сервисов

В любом случае не стоит пренебрегать ручным тестированием в реальных почтовых клиентах.

А использование инструментов ⚡️ Pixcraft поможет создавать изначально письма, которых хорошо отображаются во всех почтовых клиентах

#How_to