Bannerify

Плагин Bannerify анимирует и экспортирует готовые HTML-баннеры.

Характеристики

• Криминально простая анимация временной шкалы и предварительный просмотр в реальном времени внутри Figma.
• Создает все изображения, HTML, CSS и Javascript, необходимые для каждого баннера.
• Vanilla HTML / CSS, Doubleclick Studio, DCM, Sizmek, FlashTalking, Adform и многое другое.
• Точная настройка встроенного сжатия изображений для баннеров меньшего размера.
• Включает статическое резервное изображение «backup.jpg» для каждого баннера.
• Произведите впечатление на ваших клиентов с красивыми отзывчивыми страницами предварительного просмотра HTML.
• Перезапустите прямо с боковой панели Figma в ваших проектах.
• Автоматически сохраняет все ваши экспортированные баннеры и страницу предварительного просмотра в одном файле .zip.

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

1. Установите Bannerify и создайте новый проект Figma.
2. Создайте столько фреймов разных размеров, сколько вам нужно для ваших баннеров.
3. Добавьте любые изображения, текстовые и кнопочные слои в ваши фреймы.
4. Запустите Bannerify на странице, содержащей фреймы вашего баннера.
5. Примените некоторые анимации и время для слоев внутри каждого кадра.
6. Нажмите кнопку «Экспорт баннеров в HTML», чтобы открыть панель экспорта.
7. Выберите формат / параметры экспорта и нажмите «Экспорт баннеров».
8. Скачивайте и наслаждайтесь вашими HTML баннерами!

Примечания

Чтобы сразу начать играть с Bannerify, вы можете продублировать этот предварительно разработанный пример файла Figma — https://figma.fun/YpbJwP — чтобы легко увидеть, как работает Bannerify и как может выглядеть структура слоя. В этом файле Figma уже есть примеры анимации, установленные на слоях каждого баннера.

Чтобы быстро приступить к разработке собственных баннеров, Bannerify предложит автоматически создать некоторые стандартные размеры баннеров, если вы запустите Bannerify на пустой странице Figma.

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

По умолчанию Bannerify экспортирует любые слои изображения как @ 2x JPG; поэтому, если некоторые из ваших изображений требуют прозрачности, добавьте настройку экспорта PNG в эти слои (нажав «Экспорт +» в правом столбце пользовательского интерфейса Figma); или если вам нужен меньший JPG, вы можете добавить настройку экспорта @ 1x JPG для этих слоев.

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

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

Вы можете установить цвет фона любого баннера, установив «заливку» этого кадра в цвет, который вам нужен в Figma.

Имя вашей страницы в Figma будет использоваться в качестве тега «title» для экспортированной страницы предварительного просмотра HTML Bannerify.

Лицензия

После того, как вы попробовали экспортировать баннеры с помощью Bannerify 10 раз, вам будет предложено ввести лицензионный ключ. Ваш лицензионный ключ позволит вам или вашей команде анимировать и экспортировать неограниченное количество HTML-баннеров с помощью Bannerify.