Marka Email Generator [Плагин]

Плагин генерирует страницу HTML, назначение которой — рассылка по электронной почте. 

Основные особенности

1. В файле формируются стили для классов
2. Поддерживается адаптивность (@media)

Как пользоваться

1. Выбрать фрейм
2. Запустить плагин
3. Указать настройки и экспортировать

Правила для корректной работы

Фон

• Для фона используйте заливку (Fill) основного фрейма. Это может быть как цвет, так и изображение

Текст

• Плагин поддерживает стили текста, а также настройки позиционирования. Используйте Left, Right, Center и Left&Right — для вытянутых по ширине блоков
• Чтобы сделать текст столбцами, добавьте их в один фрейм
• Плагин поддерживает Auto Layout

Ссылки

• Есть два способа формирования ссылок:

1. Переименуйте слой в виде #href(ссылка)
2. Прямо в тексте создайте ссылку вида [Текст ссылки](ссылка)

Изображения

• Позиционирование (constraints) действуют так же, как и для текста. 
• Для изображений также поддерживается Auto Layout
• Плагин поддерживает векторы, но изображения при экспорте будут конвертированы в PNG
• Вы можете сделать изображение ссылкой, переименовав его слой в виде #href(ссылка)
• Вы можете вставить GIF или картинку со стороннего ресурса, переименовав слой изображения в виде #src(ссылка на изображение)

Кнопки 

• Для создания кнопки переименуйте фрейм, выступающий за кнопку, в виде #button(ссылка)

Вложенные фреймы

• Для создания горизонтально расположенных объектов, поместите их в один фрейм с Auto Layout
• Для создания карточек, расположенных рядом на десктопе и одна под другой на мобильных, создайте фрейм с названием  #cards, и поместите в него фреймы с карточками
• Для создания текста с иконкой поместите их в один фрейм

Некоторые особенности, которые мы нашли

1. Если у фона выбрано две и более заливки, плагин не будет работать корректно
2. Для кнопок выставляйте Text Align Center, иначе текст в кнопке будет прижат к краю, вопреки Auto Layout
3. Для объектов во фрейме #cards нет margin — они будут прижаты друг к другу
4. Старайтесь максимально вкладывать элементы в свои frame, при этом ставьте для фреймов «scale»

Песочница разработчика: https://www.figma.com/file/t6ViIic8yi0DiIN5aAdZ4C/Marka-Email-Generator-Playground-Community?node-id=61%3A40

 

 

 

Результат экспорта можно посмотреть здесь. 

Как скачать

Ссылка на плагин: https://www.figma.com/community/plugin/751436700152214815/Marka-Email-Generator

Как устанавливать плагины читайте здесь.

Помогла ли вам эта статья?