Как экспортировать 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 с помощью приложения «Ярлыки».

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

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

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

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

Вот как преобразовать видео в файл 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-файлов вы предпочитаете? Дайте нам знать в разделе комментариев ниже.