UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Flow - обзор инструмента для анимации и экспорта исходников в код
Редакція
Редакція

Опубліковано

Flow - обзор инструмента для анимации и экспорта исходников в код

Что такое Flow?

Flow – это инструмент для анимации Sketch-файлов и устранения самых болезненных частей передачи приложения разработчикам. Оно устраняет разрыв между дизайном и разработкой, создавая собственный код, который может быть непосредственно включен разработчиком в более крупные и сложные проекты.

Как дизайнер, вы можете работать в Sketch, анимировать в Flow и экспортировать готовый к производству код.

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

Flow - анимация интерфейсов и передача исходников разработчикам

Погодите… Я думал это было C4 Studio!?

Было. Мы обновили и выпустили последнюю версию с новым названием, новым логотипом. Теперь приложение выглядит и ощущается по-новому.

Мы также добавили невероятное количество:

  • инфраструктуры
  • элементов управления
  • функций

... что делает эту версию готовой. Несмотря на то, что мы по-прежнему считаем этот выпуск бета-версией, мы уверены, что теперь с Flow вы можете выполнять свою повседневную работу.

Интеграция Sketch

Вы можете анимировать файлы Sketch за считанные секунды. Когда вы создали артборды «до» и «после», вы можете загрузить свой файл в Flow, который затем позволит вам выбрать два состояния для вашего перехода. Когда вы закончите, Flow анимирует все различия между двумя состояниями.

Да, это так просто.

Артборды – это состояния

При разработке анимации подумайте о своих артбордах, как о состояниях. Создайте два аналогичных артборда, такие как Menu Open и Menu Closed, а затем загрузите их в Flow.

Интерфейс

Интерфейс Flow понятный и соответствует вашим ожиданиям.

Stage

Здесь вы можете выбирать и перемещать слои.

Просмотр шкалы времени

Здесь происходит волшебство! Анимируемый слой будет иметь дорожку для каждого изменяемого свойства.

Свойства

Мощная панель, которая позволяет настраивать каждое свойство выбранного слоя.

Иерархия

Панель иерархии позволяет выбирать, группировать, скрывать и блокировать слои.

Предварительный просмотр кода

Хотите посмотреть, как выглядит ваша анимация? Выберите объект и откройте панель предварительного просмотра кода!

Анимация

Анимирование Sketch-файлов интуитивно понятное, быстрое и восхитительное.

Ключевые значения

Каждый раз, когда вы перемещаете или меняете слой в stage, новое ключевое значение появляется на временной шкале для свойств, которые вы только что отредактировали. Затем вы можете перемещать и редактировать эти ключевые значения в своем контенте.

Динамика анимации

Управляйте своими анимациями, изменяя динамику анимации между ключевыми значениями.

Расширяющиеся строки

Не можете найти трек, который ищете?

Группы и иерархии

Панель иерархии работает так, как вы ожидали, и имеет некоторые прекрасные динамические значки.

Экспорт

Конвертируйте свои анимации в фильмы или код () !

Экспорт фильма

Вы можете экспортировать свою анимацию в прекрасно сжатый файл mp4.

КООООООООООД!

Вы можете экспортировать свою анимацию в iOS, и она работает в Xcode!

Хотите попробовать Flow?

Мы активно ищем людей, которые работают в области дизайна и разработки, и хотели бы, чтобы вы попробовали Flow.

Присоединяйтесь к нам на Slack

Заходите на Slack, чтобы задать нам вопросы и оставаться на связи:

join-createwithflow-on-slack

Чтобы получить больше информации, функций и инструкции, пожалуйста, посетите:

www.createwithflow.com


Перевод статьи Flow

Найстарші коментарі (0)