Flinto только что вышел на новый уровень со своим Дизайнером поведения

Как вы уже наверное знаете, я склоняюсь к определенному инструменту прототипирования… Да, это Flinto.

Уже некоторое время я являюсь защитником этого компаньона Sketch. Его относительно легко освоить с нуля, приятно использовать, он позволяет добиться действительно отличных результатов, оживляя Sketch-файлы. Но, до недавнего времени, и в сравнении с другими альтернативами типа Principle, в нем не хватало определенного функционала, который бы поставил его на равные с вышеупомянутым инструментом. А сейчас это изменилось.

И название этому дополнению — Designer. Behaviour Designer, т.е. Дизайнер поведения.

В этом коротком уроке из 2 частей я покажу, насколько неоценимой является эта новая возможность, и как она подняла позиции Flinto в экосистеме инструментов прототипирования.

Перед тем ,как начать, установите приложения и скачайте нужные исходники:

*Он находится в папке Tutorial Assets/Fonts.

Все приложения и исходники на месте? Отлично! Давайте сгенерируем годное поведение во Flinto.

Знакомство с Flinto

При открытии Flinto вы увидите экран-заставку. Можете его закрыть, затем сохранить новый документ, назвать его для краткого входа через плагины Sketch. Что-то вроде ‘Movie App’ отлично подойдет.

Нам не понадобится только что созданный экран, так как мы импортируем экраны из Sketch. Так что удалите его, нажав клавишу Delete или дважды кликнув на экране, и выбрав опцию Delete.

Из панели инспектора выберите размер экрана iPhone 7. Оставьте все параметры документа по умолчанию, кроме Background Color, его измените на белый #FFFFFF.

Учимся работать в Flinto: iPhone 7

Перед переходом в Sketch, нужно установить плагин под Sketch. Из панели меню выберите Flinto > Install Sketch Plugin…

Учимся работать в Flinto: ставим плагин для Sketch

Плагин установлен? Перейдем к импорту.

Импорт из Sketch

Перейдите в Sketch, и откройте ранее скачанный Sketch-файл.

Теперь нужно экспортировать экраны приложения (не Символы), так что выделите четыре экрана приложения (Launch, Home, Videos and Profile) с помощью Shift+клика.

Учимся работать в Flinto: выделяем нужные артборды в Sketch

Выберите Plugins > Send to Flinto из панели меню или используйте горячие клавиши (Shift + Ctrl + Cmd + F).

В появившемся окне задайте масштаб (Scale) 200%, размер устройства (Device Size) — iPhone 7, и убедитесь, что выделена опция Export only selected artboards, затем нажмите Send.

Учимся работать в Flinto: экспортируем артборды из Sketch в Flinto

В следующем окне проверьте, что выделен ранее сохраненный файл Flinto, и кликните Merge.

Учимся работать в Flinto: синхронизация Sketch и Flinto

Вернитесь во Flinto, вы увидите, что все экраны проимпортировались в приложение, и из панели слоев (Layers) вы также убедитесь, что иерархия слоев и групп была перенесена из файла Sketch.

Выберите пункт меню Center Canvas (центр холста) и, используя горячие клавиши (Cmd +) и (Cmd -), убедитесь, что все скрины просматриваются и отцентрированы на канвасе.

Учимся работать в Flinto: Center Canvas (центр холста)

Совет: Если (в панели слоев) названия экранов расположены не в той последовательности, что в Sketch, вы можете легко перетянуть их, выстроив в правильный порядок.

Учимся работать в Flinto: панель слоев

Экран Launch

Экран Launch — первый экран нашего приложения, и нужно, чтобы Flinto это знал. При выделенном экране отметьте галочкой опцию Home Screen (Домашний экран) в разделе Screen Properties в Инспекторе.

Учимся работать в Flinto: Screen Properties в Инспекторе

Совет: Теперь было бы неплохо активировать окно превью. Пока что там немного что можно просмотреть, но в нем вы сможете видеть изменения по мере внедрения. Кликните на иконку Preview в панели инструментов или используйте горячую клавишу (Cmd + P).

Также, если вы еще не сделали этого, скачайте приложение Flinto из iOS App Store. Мне нравится использовать функцию Preview (Cmd + P), и только потом запускать iOS-приложение. Но это на ваш выбор.

Сейчас мы добавим временной переход из экрана Launch в экран Home. Выберите Timer Link в инспекторе, и введите такие значения параметров:

  • Timeout: 2000ms
  • Target: Home

Затем кликните New Transition (Новый переход), чтобы войти в дизайнер переходов.

Учимся работать в Flinto: создание нового перехода

Совет: Вот две полезные горячие клавиши, которые пригодятся перед погружением в дизайнер переходов:

  • Превью перехода: Пробел
  • Превью перехода в замедленном варианте: Shift + пробел

Так как экран Launch будет затухать, меняясь на экран Home, нам нужно выровнять эти экраны друг относительно друга в определенном порядке. Это можно сделать просто с помощью опции Align Screens в панели инструментов, а затем из панели слоев выбрать иконку Launch и перетащить ее в верх списка.

Учимся работать в Flinto: Align Screens в панели инструментов

Нажатием пробела вы отобразите… в целом, немного. Так что нужно анимировать некоторые элементы на экране Launch. Сделаем это. Сначала нажмите пробел, чтобы перейти в конец перехода.

Учимся работать в Flinto: transition designer

Затем выберите App Logo в панели слоев, поверните на 180 градусов по оси Z, и при закрытой иконке замочка увеличьте ширину до 700.

Учимся работать в Flinto: свойства слоя

При выделенной все еще иконке, используя вспомогательные линии, отцентрируйте ее на экране launch, затем уменьшите непрозрачность до 0%.

Учимся работать в Flinto: прозрачность иконки

В панели Timing выберите Spring (UIKit), и введите настройки:

  • Duration: 300ms
  • Delay: 100ms

Учимся работать в Flinto: timing 

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

В панели Timing выберите Classic и введите параметры:

  • Duration: 300ms
  • Delay: 200ms

Учимся работать в Flinto: timing classic

Примечание: Я бегло коснусь тайминга в этом уроке, но если вы хотите детальнее изучить режимы тайминга Spring и Classic, стоит почитать документацию Flinto.
И, наконец, из панели инструментов введите название нового перехода. Я выбрал ‘Loading’. Нажмите Save & Exit

Home

Итак, сначала нужно поместить панель вкладок внутрь области просмотра. Выделите группу Tab Bar, и тащите ее на канвас, пока она не расположится внутри области, очерченной вспомогательными линиями. Если вы не уверены, сел ли элемент на корректную позицию, проверьте координату Y в панели Properties (должно быть 607).

Учимся работать в Flinto: tab bar в панели слоев

Теперь выделите группу Latest Videos, кликните на Scroll Group в панели инструментов или воспользуйтесь горячими клавишами (Option + Cmd + G).

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

Учимся работать в Flinto: направляющие

И вот настало время воспользоваться функционалом Behaviour Designer во Flinto.

ыделите обе группы Tab Bar и Content в панели слоев, кликните на Behaviour в панели инструментов или же воспользуйтесь клавишами (Cmd + B).

Учимся работать в Flinto: Behaviour Designer

В Behaviour Designer вы увидите группы, которые только что были выделены в панели слева, и вверху вы увидите начальное состояние нашего экрана. Если вы кликните на любой элемент на экране, то увидите, что сейчас они не редактируемы, что правильно, поэтому нужно добавить новое состояние (State) на наш экран, чтобы привнести какое-то движение. Нажмите на иконку с плюсом (+) рядом с Initial State и переименуйте его.

Учимся работать в Flinto: Behaviour Designer состояния

При выделенном новом состоянии потяните панель вкладок (Tab Bar) вниз, и немного за пределы области экрана.

Учимся работать в Flinto: Behaviour Designer анимируем tab bar

В панели Timing введите следующие параметры:

  • Spring (UIKit)
  • Damping (сглаживание): 1
  • Velocity (скорость): 0
  • Duration (длительность): 700ms

Будучи все еще на новом состоянии, выделите текстовый слой из группы Content, и потяните его за область просмотра. С помощью манипуляторов размера (удерживая Shift для соблюдения пропорций), уменьшите ширину до примерно 180, уменьшите непрозрачность до 10%.

Учимся работать в Flinto: меняем свойства слоя

Введите те же параметры Timing, что и для панели вкладок. И, наконец, выделите слой Banner…

Учимся работать в Flinto: меняем тайтимнги

…и в панели инспектора задайте для параметра Rotation значение 100 на оси Y, непрозрачность 0%.

Учимся работать в Flinto: задаем непрозрачность

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

Нажав пробел, вы сможете увидеть свои анимации во всей красе. Выглядит неплохо!
Но перед тем, как вы нажмете эту грозную кнопку Save & Exit (сохранить и выйти) вверху, нужно помнить, что на данный момент нет способа инициации этих анимаций внутри нашего прототипа. Нужно анимировать эти элементы на основе позиции скролла.

Давайте это исправим.

При выделенном Initial State, выделите Scroll Group в панели слоев, и используйте горячую клавишу (F) для создания ссылки.

Перетяните линию ссылки (Link Line) из группы скролла к новому состоянию, которое мы создали…

Учимся работать в Flinto: линкуем экраны

… и в появившемся окне выберите Scroll Gesture (жест скролла), кликните Done.

Учимся работать в Flinto: делаем скролл

Давайте определим диапазон скролла — как далеко пользователю нужно скроллить перед тем, как активируется новое состояние. При выделенной группе scroll вы увидите фиолетовую стрелку, которая подсвечивает текущий диапазон.

Учимся работать в Flinto: выбираем величину скролла

Потяните ее вниз (или измените параметр End в панели Gestures) примерно до 135.

Учимся работать в Flinto: настраиваем свойства скролла

Активируйте окно превью (Cmd + P), чтобы увидеть поведения в действии. Выглядит неплохо?

Выберите подходящее название для этого поведения, и кликните Save & Exit.

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

Учимся работать с Behaviour Designer (Дизайнер поведений) во Flinto: Часть 2