Как вставить прототип из figma в behance

Это третья статья по Bēhance из четырех. Если вы пропустили вторую — рекомендую вернуться и только после продолжить чтение этой части.

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

Технические детали

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

Обложка

Обложка кейса отображаются в размере 202×158 пикселей, но разрешение картинки, должно быть не меньше 808×632 пикселей. Чтобы всё было красиво и четко.

Ширина

Максимальная видимая ширина кейса — 1400 пикселей. Даже если вы загрузите макет шириной 1920 или 2800 пикселей, Behance всё равно будет отображать его по умолчанию в 1400. НО если на изображение кликнуть, то оно откроется в максимальном разрешении. Так что лучше экспортировать картинки из Figma в двойном размере. Они так еще лучше смотрятся на ретина-дисплеях.

Длина кейса

Хорошая длина кейса 20-30 000 пикселей. Количество блоков обычно зависит от размера проекта. В среднем от пяти до 15. Не нужно раздувать кейс, чтобы создать ощущение большой проделанной работы — больше не значит лучше.

Ни в коем случае не загружайте весь кейс одной картинкой, даже если он не большой. В Figma есть инструмент Slice tool — он помогает нарезать макет на блоки. Каждый такой блок экспортируйте отдельным изображением.

А для того, чтобы кейс прогружался быстрее нарезанные картинки ОБЯЗАТЕЛЬНО нужно прогнать через компрессор. Мы используем сервис tinypng.com. Он ужимает JPG и PNG изображения на 70-80% практически без потери качества. Благодаря этому ваш кейс будет загружаться гораздо быстрее даже на мобильном интернете.

Тексты

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

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

Анимация и видео

Если ваш проект состоит из 10-12 блоков, например, то несколько из них желательно сделать анимированными. Так вы разбавите статичные изображения и кейс будет смотреться динамичнее. Если ролик короткий (до 10 сек), то делаем GIF-ку. Вот, например, анимация иконок. Она легкая короткая и быстро прогружается.

Гифки в кейсах получаются хуже по качеству, чем видео, но у них есть и плюсы: их проще создавать и легко загружать в кейс, как и обычные картинки. Размер изображений максимум 30 МБт.

Для анимаций интерфейсов используем After Effect, потому что он позволяет делать классные анимации и выгружать их небольшого размера и нужного разрешения. Результат заливаем с помощью Vimeo — классный сервис, заточенный под коммерческие задачи. В бесплатном тарифе можно загружать до 500 МБт в неделю и общий объем хранилища 5 ГБт. Этого на кейсы обычно хватает с головой.

Как встроить видео с Vimeo?

Чтобы встроить ролик с Vimeo, нужно:

На странице видео в админке нажать на кнопку «Поделиться» и выбрать опцию — Embed / Share.
Открываем видео в новом окне, нажимаем еще раз Share выбираем Fixed size, ставим размер оригинала, например, 1920х1080. Ставим галочки на Autoplay и loop и отключаем галочки в поле Intro – Portrait / Title / Byline.
Копируем кусок кода в блокнот или заметку.
И можем добавить в этот код разные ключи, чтобы включить или отключить дополнительные настройки.

Например, ключ autoplay=1 поможет сделать так, чтобы видео воспроизводилось автоматически. Важно, что в некоторых браузерах и после обновления Хром оно все равно не будет автоматически запускаться, если только в плеере не отключен звук. Эту задачу решит ключ muted=1: muted=1&autopause=0&

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

Ключей очень много, но некоторые будут работать только с платным тарифом Vimeo. Например, полное отключение интерфейса плеера.

Потом копируем всё что накодили и вставляем через окно Embed media на Behance. Если что-то криво работает, то код можно отредактировать — иконка в левом углу блока. В этом же меню можно изменить порядок блоков, если что.

Необычные вставки

Если тебе нужно добавить музыку, можно встроить трек с сервиса SoundCloud. И зритель получит полноценное погружение в атмосферу проекта.

3D модель тоже можно добавить в кейс и читатель сможет ее прям тут покрутить. Сервис называется SketchFab. Вот хороший пример как это выглядит.

Свежая фича — добавлять кликабельные прототипы Figma. Для начала надо настроить прототип в макете. Потом скопировать код и вставить его в админку Behance, так же, как видео с Vimeo.

Как вставить прототип в Behance

cover! white transparent

Не все знают что можно вставить прототип на Биханс. Правда не всем это и нужно 🙂
Прототипы, показывают объемы детализации работы. Это очень удобно и наглядно. Лучше прототипов лишь видео презентация или анимация.
А еще лучше работающее приложение или проект.

Тем не менее, если остались лишь силы на вставку рабочего прототипа из InVision или Marvel, то во втором случае это реально сделать. Как сделать подобное из инвижион я не разобрался, но думаю что это тоже реально.

Инструкция
Заходим в прототип, находим кнопку Share и после клика копируем код из таба Embed

Анимация в Figma от 0 до постинга на Behance

Новичок в веб-дизайне? Восхищаешься красивыми анимированными кейсами на Behance, но не знаешь, как сделать анимацию и добавить видео в свою презентацию? Тогда эта статья специально для тебя: я пошагово расскажу, что надо делать!

Проблемы

При подготовке презентации своего нового проекта для Behance я столкнулась с такими проблемами:

Идея моей анимации слишком сложная, и ни один тьюториал не смог мне подсказать, как воплотить её в реальность;

Видеохостинг Vimeo изменился и перестал делать, как я хочу;

На Behance видео постится с дефолтным плеером и выглядит некрасиво.

Моя анимация

Я делала лендинг в рамках учебного проекта Логомашины. Тема «мужская парфюмерная вода Feromon 47». На Behance уже, как минимум, больше сотни концептов на эту тему! Поэтому мне необходимо было сделать что-то необычное и, конечно же, создать качественную интересную анимацию. Вот самая сложная из них:

Как сделать

Конечно, мне проще было сделать её в After Effects, но у меня была идея-фикс научиться, наконец, анимации именно в Figma!

Шаг 1. Придумываем крутую идею для нашей анимации. Если в голову ничего крутого не приходит, то смотрим референсы на https://www.awwwards.com/, например. Я подсмотрела там идею для анимации заголовков, но, в итоге, от неё отказалась.

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

Шаг 2. Делаем макет будущей анимации в Figma.

Шаг 3. Далее смотрим на Youtube тьюториалы по анимации в Figma в зависимости от того, что и как именно хотим заанимировать, например:

Шаг 4. Получаем просветление и понимание того, как нам надо дорисовать макет для анимации, чтобы он работал, и делаем это.

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

Чтобы фрейм треугольника не перекрывал нижние карточки делаем Flattern (правой кнопкой мыши). Если это тоже не помогает, то рисуем хитрый маленький невидимый треугольник поверх большого треугольника, и к нему привязываем анимацию!

Шаг 6. Добиваемся того, чтобы наша основная анимация работала, как было задумано. Например, в своей анимации я выбрала мгновенную (instant) анимацию по наведению (while hovering), чтобы при наведении мышки на каждую из фотографий гифка в треугольнике сменялась мгновенно. Приятным и неожиданным сюрпризом для меня стало то, что гифки реально проигрываются.

Шаг 7. Ни в коем случае не пытаемся проделать то же самое с заголовками — ничего не получится, проверено! Если у вас такая же многоуровневая анимация, как в моём проекте, то для заголовков необходимо использовать уже другой вид анимации в Figma — анимацию через компоненты. Спасибо кураторам Логомашины за то, что подсказали мне поискать тьюториалы именно на эту тему:

Шаг 8. Получаем новое просветление, в моём случае готовим 2 варианта заголовков: невидимые (0% непрозрачности) и видимые (100% непрозрачности), потому что заголовки должны мягко проявляться. Выделяем их вместе и оборачиваем в компоненты (create multiple components). Затем создаём наши варианты (create as variants). Я назвала варианты «Default» и «Normal» соответственно.

Шаг 9. Настраиваем несложную анимацию в режиме прототипа.

Шаг 10. Кликаем на варианты «Default» и с зажатым Alt дублируем их в нужные места нашего макета с основной анимацией. Лично я сперва продублировала их на отдельный фрейм для удобства и потом уже с него перетащила эти невидимые заголовки на места макета, где должна была проявиться моя анимация заголовков. Фото не прикладываю, потому что они, всё равно, невидимые.

Шаг 11. Готово! Вы прекрасны! В режиме прототипа проигрываем нашу анимацию, наслаждаемся и пожинаем лавры.

Подготовка видео

Шаг 1. В режиме full screen делаем запись экрана, например, с помощью Loom (расширение для Google) и загружаем видео на компьютер.

Шаг 2. Далее в Photoshop обрезаем наше видео, а также кадрируем. Это можно сделать и в онлайн-редакторах, но не все они кадрируют или показывают изображение покадрово, поэтому теперь я делаю это в Photoshop.

Шаг3. Лично у меня в моей анимации возник неприятный момент: при переносе курсора мыши с одной фотографии на другую при попадании курсора на пустую область экрана в треугольнике стало на миг появляться дефолтное изображение треугольника. Поэтому я вырезала эти кадры из видео, и проблема решилась!

Шаг 4. Также я ускорила своё видео до 250% и экспортировала в mp4.

Выгрузка видео на видеохостинг

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

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

Хочу предупредить, что интерфейс Vimeo изменился плюс теперь из России им можно полноценно пользоваться только с VPN!

Для того, чтобы выставить нужные опции, заходим справа в расширенные настройки (advanced settings).

Далее, слева, в разделе General убираем галочку «People can add to collections».

Идём в раздел Embed и убираем галочки «Like», «Watch later», «Share». Там же убираем галочки с «Profile picture», «Title», «Byline».

Это нужно для того, чтобы на Behance мы не видели дефолтный плеер с нашей аватаркой, названием видео, нашим именем, т.е., чтобы было красиво. Сохраняемся. Если найдём кнопку Save. Потому что, лично у меня, она постоянно куда-то мигрирует. Например, она может проявиться в разделе General. Главное, без паники, как учит нас Марк Аврелий!

Выгрузка видео на Behance

Шаг 1. Копируем ID нашего видео (номер видео виден в ссылке прямо над видео). Вставляем ID в следующий embed-код перед знаком вопроса:

Шаг 2. Шагаем на Behance и в нашей презентации выбираем Embed и вставляем туда наш код.

Готово! Вы восхитительны! Любуемся нашим зацикленным видео без разноцветного плеера, аватарки ит.д. и пожинаем лавры!

28 Figma-плагинов для экспорта, импорта и конвертации дизайна в разные форматы файлов, в код и из кода, в прототипы и готовые сайты, в полезные сторонние сервисы

Дарья Райт

Default export

Export Original Images — экспорт картинок из макетов в оригинальном разрешении и без обрезки

Export Original Images

html.to.design — конвертирует живые сайты в редактируемый макет Figma

html.to.design

Anima — конвертирует макеты в интерактивные анимированные прототипы или HTML-код

Convertify Sketch/XD/AE/EPS — импортирует макеты из XD в Figma, а также экспортирует проекты в After Effects, Sketch, Adobe XD и EPS

Convertify Sketch/XD/AE/EPS

Figma to HTML — конвертирует выбранные элементы в HTML

Figma to HTML

Export Image for Native — экспортирует изображения в форматах, необходимых для Android или iOS

Export Image for Native

TinyImage Compressor — сжимает экспортируемые из Figma изображения до 90% без потери качества и упаковывает в архив

TinyImage Compressor

SVG Export — экспорт в вектор с более гибкими настройками, чем стандартный

SVG Export

Design Tokens — экспортирует стили Figma и дизайн-токены в json-файл и загружает на Github

Design Tokens

Export styles to CSS variables

Export PNG with Color Profile — экспорт в PNG со встроенным цветовым профилем (включая Display P3)

Export PNG with Color Profile

Export Icon Font — экспортирует векторный шрифт в формат TrueType (.ttf)

Export Icon Font

JSON to Figma — импортирует значения переменных из JSON-файла прямо в макет (и обратно). Поможет ускорить создание однотипных компонентов с разными данными

JSON to Figma

Export Settings Helper — создаёт настройки экспорта со стандартными параметрами для iOS, Android и веба

Export Settings Helper

Pygma — плагин для экспорта в сервис публикации сайтов. То есть прямо из Figma в готовый адаптивный сайт за несколько кликов

Pygma

Awesome Icon Export — экспортирует иконки в любой текстовый формат файла

Awesome Icon Export

Favvy Favicon Exporter — автоматически генерирует и экспортирует готовые иконки (включая весь необходимый код) для вашего сайта из одного фрейма Figma за считанные секунды

Favvy Favicon Exporter

iOS Export Settings — автоматически применяет правильные настройки экспорта iOS иконок

iOS Export Settings

Marka Email Generator — конструктор писем для email-рассылок в формате HTML. Готовые письма поддерживают Gmail, Apple Mail, Outlook и другие клиенты. Также доступна мини-инструкция и шаблоны от разработчика

Marka Email Generator

ProtoPie — экспорт проекта из Figma в ProtoPie

ProtoPie

Miro — экспортирует и синхронизирует данные из Miro

Miro

Figma to HTML with Framer

Jitter — экспорт проекта в сервис интерфейсной анимации Jitter

Bravorizer — экспортирует дизайн в no-code конструктор мобильных приложений Bravo. Проверяет фреймы на готовность к экспорту, а также позволяет добавлять теги к страницам, фреймам или компонентам

Bravorizer

Zeplin — экспортирует макеты в Zeplin

Zeplin

Illustrator + SVG Import — исправляет ошибки при импорте SVG из Illustrator, и добавляет перенос через буфер обмена

Illustrator + SVG Import

Overflow for Figma — синхронизирует проекты с платформой для прототипирования Overflow, которая позволяет создавать диаграммы и кликабельные презентации

Как вставить прототип из figma в behance