Marka Email Generator [Плагин]


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

Figma в html - десктопная версия
Figma в 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

Figma в html - исходный фрейм
Figma в html — исходный фрейм

 

Figma в html - десктопная версия
Figma в html — десктопная версия

 

Figma в html - мобильная версия
Figma в html — мобильная версия

 

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

Как скачать

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

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

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


👋 Курс дизайнера за полцены: сформируйте портфолио и найдите высокооплачиваемую работу. Помощь с трудоустройством!

По теме:


<