Как экспортировать GIF из Figma

Ссылки на устройства

• Андроид
• айфон
• Мак
• Окна
• Отсутствует устройство?

Вы ищете способ вывести свою игру для разработчиков и дизайнеров на новый уровень? Figma — это невероятный инструмент, который позволяет пользователям создавать богатые прототипы, наполненные аудио-, видео- и анимационными эффектами. Однако, чтобы должным образом протестировать ощущение и функции прототипа, вы должны иметь возможность экспортировать его в формате GIF и увидеть его в действии.

В этом руководстве объясняется, как экспортировать прототипы Figma в формате GIF с помощью ПК или мобильного устройства.

Как экспортировать в GIF в Figma на ПК

Самый простой способ экспортировать анимированные GIF-файлы из Figma — использовать плагин TinyImage. Прежде чем вы сможете запустить и использовать плагин, вам необходимо войти в свою учетную запись Figma и перейти в раздел «Сообщество».

Чтобы скачать плагин:

1. Введите «TinyImage» в поле поиска.
   
2. В разделе «Плагины» найдите значок «TinyImage Compressor».
   
3. Нажмите на кнопку установки рядом со значком.
   

Установив плагин, откройте дизайн-проект, который хотите сохранить в формате GIF. Щелкните в любом месте экрана, чтобы открыть раскрывающееся меню. Выберите «Плагины» и нажмите «TinyImage Compressor», чтобы запустить его.

Вот как создать GIF с помощью плагина:

1. В верхней части окна плагина нажмите кнопку «Создать GIF».
   
2. Выберите слои на холсте Figma. Они будут действовать как кадры вашего GIF.
   
3. В нижней части окна TinyImage коснитесь параметра «Использовать выбранные слои». Вы увидите слайд-шоу ваших слоев в центре окна в том порядке, в котором вы их выбрали.
   
4. Под предварительным просмотром щелкните значки слоев, затем перетащите их влево или вправо, чтобы изменить их порядок.
   
5. Нажмите маленькую кнопку «Воспроизвести» под слайд-шоу, чтобы отрегулировать скорость воспроизведения.
   
6. Рядом с элементами управления временной задержкой выберите, сколько раз GIF будет повторяться. Значение по умолчанию — «Бесконечный». Нажмите на опцию «Бесконечно», чтобы отключить ее, и введите желаемое количество петель в поле рядом с ней.
   
7. Отрегулируйте размер GIF в полях под параметрами временной задержки и цикла.
   
8. Если ваши слои имеют прозрачные границы, нажмите кнопку «Прозрачный фон» в нижней части окна, чтобы сделать их видимыми в GIF.
   
9. Выберите качество изображения GIF в левом нижнем углу. Лучше всего установить скорость около 80 или 90, чтобы сохранить все особенности ваших слоев.
   
10. Оставьте для элементов управления «Дизеринг» значение «Без дизеринга».
    
11. Нажмите кнопку «Экспорт GIF» в верхней части окна TinyImage.
    
12. Кадры объединятся и сформируют GIF, который автоматически загрузится и сохранится в ваших загружаемых файлах.

Примечание о слоях

Выпадающее меню над миниатюрами слоев также позволяет воспроизводить слои слева направо или справа налево. Однако для большего контроля над окончательным видом GIF лучше упорядочивать кадры вручную.

Примечание о воспроизведении

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

Как экспортировать в GIF в Figma на мобильном устройстве

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

Как экспортировать в GIF в Figma на iPhone

Чтобы сохранить свой проект в формате GIF на iPhone, вы сначала сделаете экранную запись приложения Figma и создадите GIF с помощью приложения Shortcuts.

Чтобы просмотреть запись Figma на iPhone:

1. Запустите мобильное приложение Figma и откройте проект, который хотите превратить в GIF.
2. Войдите в «Настройки» и выберите «Центр управления».
3. Выберите «Настроить элементы управления» и нажмите зеленую кнопку рядом с «Запись экрана», чтобы включить эту функцию.
4. Вернитесь в «Центр управления».
5. Нажмите кнопку «Запись экрана».
6. Нажмите красную кнопку, чтобы закончить запись.

Запись обычно хранится в вашем приложении «Фотографии».

Проверьте, не установлен ли на вашем iPhone инструмент «Ярлыки», чтобы превратить ваше видео в GIF. Вы также можете загрузить инструмент из App Store .

Вот как преобразовать видео в файл GIF на iPhone:

1. Откройте приложение, перейдите в нижнюю часть интерфейса и выберите карточку «Галерея».
   
2. Коснитесь вкладки «Быстрые команды для начинающих» под меню поиска.
3. Прокрутите экран вниз и щелкните раздел «Создать GIF».
   
4. Нажмите кнопку «Добавить ярлык», чтобы включить ярлык GIF.
   
5. Когда ярлык будет установлен, вернитесь в «Мои ярлыки».
   
6. Нажмите «Создать GIF» и выберите «ОК», чтобы связать приложение и вашу фотогалерею.
   
7. Просмотрите свои видео и выберите видео, которое вы превратите в GIF.
   
8. Используйте ползунки, чтобы выбрать, какие кадры будут включены в GIF.
   
9. Нажмите «Сохранить», чтобы сохранить изменения. Ваш новый файл GIF будет сохранен в приложении для работы с фотографиями на планшете.
   
10. Нажмите «Готово», чтобы выйти из приложения «Ярлыки».
    

Как экспортировать в GIF в Figma на устройстве Android

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

Вот как просмотреть запись Figma на Android:

1. Запустите приложение и откройте предварительный просмотр вашего проекта.
2. Дважды проведите по экрану сверху и выберите «Запись экрана». Если его там нет, попробуйте смахнуть вправо. Иногда вам придется нажать значок «Изменить» в верхней части экрана, чтобы открыть скрытое меню. Там же может быть функция «Запись экрана».
3. Нажмите на предварительный просмотр прототипа, чтобы указать, что вы хотите его записать.
4. Нажмите кнопку «Пуск». Как только обратный отсчет закончится, экран будет записан.
5. Проведите пальцем вниз и коснитесь карточки «Запись экрана», чтобы остановить запись.

Видео предварительного просмотра Figma будет сохранено в вашем фотоприложении для Android. Вы можете превратить его в GIF с помощью приложения GIPHY .

Чтобы преобразовать видео в GIF на устройстве Android:

1. Установите и запустите приложение GIPHY на своем устройстве.
   
2. Зарегистрируйтесь и создайте учетную запись GIPHY.
   
3. Нажмите кнопку «Создать» в правом верхнем углу интерфейса.
   
4. Разрешите приложению доступ к вашей камере.
   
5. Выберите видео из галереи Android.
   
6. Отрегулируйте длину видео. Приложение GIPHY позволяет пользователям вставлять в свои файлы такие элементы, как текст и наклейки.
   
7. Нажмите значок «Стрелка» в нижней части приложения.
   
8. Выберите «Поделиться GIF» и выберите «Сохранить GIF».
   

Экспорт GIF без ограничений

Являетесь ли вы опытным разработчиком или дизайнером-любителем, вы заслуживаете удобного способа показать свою работу другим в формате GIF. Вы можете просмотреть свои творения в приложении Figma, но доступ к вашим проектам может стать сложной задачей, если подключение к Интернету прервется. Пока Figma не предложит удобное решение для экспорта, вы можете полагаться на методы, которые мы изложили в статье.

Мы надеемся, что это руководство помогло вам лучше понять, как получить высококачественный GIF из ваших творений Figma, независимо от того, какое устройство вы используете.

Вы используете веб-версию или мобильную версию Figma? Какой способ экспорта GIF вы предпочитаете? Дайте нам знать в разделе комментариев ниже.