Последняя версия Framer действительно подводит черту под спором «должен ли дизайнер кодить» (опять же, это мое личное мнение). Никогда еще визуальным дизайнерам не представлялось лучшей возможности замарать руки в коде. В этой версии разработчики Framer реализовали идеальное сочетание дизайна и кода. Если вы опытный пользователь, и хотите вручную кодить все ваши взаимодействия, можете смело использовать Framer. Если вы — человек с опытом исключительно в визуальном дизайне и предпочитаете разрабатывать интерфейсы больше с визуальной стороны, вам также идеально подойдет Framer. Хотите освоить нечто среднее между этими двумя подходами? Framer дает и такую возможность.

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

Надеюсь, вы приступили к изучению этого урока с верой в то, что «Этот Framer уже не так страшен, как предыдущий». Этого и добивались его разработчики.

Скачайте все три ресурса:

Скачали? Установили? Приступим!

Запустите Sketch и откройте файл, который вы только что скачали. Его нужно открыть, чтобы Framer мог обратиться к нему для импорта.

Посмотрим на экраны в Sketch

Если вы посмотрите на файл Sketch, увидите 2 простеньких экрана. Один для Checkout (оплаты), а другой — для подтверждения заказа (Confirmation), который появляется, как только пользователь нажимает кнопку ‘Buy Now'. Все чертовски просто, чтобы не заблудиться в волшебном мире Framer, изучая его возможности.

Примечание: дам пару советов при создании Sketch-файлов:

  • Группируйте каждый слой, который хотите импортировать во Framer, иначе они будут проигнорированы. Да, даже если у вас всего один слой с картинкой, который надо анимировать во Framer, все равно сгруппируйте его с помощью Cmd + G
  • Используйте CamelCase для названия групп (например, thisIsMyGroup). Это требование стандарта нейминга в CoffeeScript — на этом языке программирования основан Framer. Помните, что названия групп в Sketch станут переменными во Framer, так что должны присутствовать логика и порядок.
  • Если у вас есть группа слоев в Sketch, которую вы не собираетесь анимировать или включать во взаимодействие в Framer, ее можно просто сгладить (Flatten), добавив звездочку (*) к концу названия группы (например, thisIsMyGroup*)
  • Попробуйте задать каждой группе уникальное имя. Так будет проще ссылаться на группы внутри Framer, а также сможете избежать использования бессмысленных названий вроде myGroup, myGroup1, myGroup2 и т. д… И хотя не всегда этот совет практичен, если вы используете символы в Sketch, будут случаи, когда придется следовать конвенции по именам Framer, нравится это вам или нет.

1-BYnKLrUvQzm3CBM8HMSpyw

Перейдем во Framer

При открытии приложения вы видите 4 главные области:

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

  • Insert (здесь живет магия Auto-Code)
  • Import (или используйте горячие клавиши Cmd + I и Shift + Cmd + I для повторного импорта)
  • Reload (или используйте горячие клавиши Cmd + R)

Слева у вас редактор кода, где мы сегодня немного покодим вручную, а также воспользуемся потрясающим нововведением — Auto-Code.

центральной колонке расположен раздел, выполняющий 2 функции. Большую часть времени он будет отображать экраны, и импортированные из Sketch слои, но иногда, при использовании Auto-Code, здесь будут отображаться свойства слоя, над которым вы работаете, чтобы можно было редактировать контент.

С правой стороны находится раздел превью, где вы можете просмотреть создаваемый прототип на разных устройствах. Если вы поклонник iPhone 6s в версии Rose Gold, выберите эту модель и тестируйте ее!

Примечание: дизайн, созданный в Sketch, изначально был для iPhone 6s, так что можете оставить устройство, выбранное по умолчанию.

Импорт файла Sketch

Кликните кнопку Import на панели инструментов или воспользуйтесь горячими клавишами Cmd + I для вызова окна Import.

1-EjvKYIoK2irBEs_8DUl1ew

Вы увидите, что Framer автоматически увидит файл Sketch, который сейчас открыт. Далее выберите в меню опцию 2x, так как используемые нами файлы Sketch созданы в 1x, затем кликните Import.

Теперь вы увидите, что 2 экрана проимпортировались во Framer, причем иерархия слоев из Sketch перенесена без изменений. Конечно, Framer покажет первый экран (Checkout), свойства x и y будут равны 0,0. Второй экран (Confirmation) будет располагаться за пределами области экрана устройства.

1-1HoJP1nxMEhaH8Xk1gKWgQ

В редакторе кода увидите следующее:

Order_ConfirmationA = Framer.Importer.load («imported/Order Confirmation@2x»)

Замените переменную на:

sketch = Framer.Importer.load («imported/Order Confirmation@2x»)

Что просто упрощает ссылание на ваш проект Framer.

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

Вставьте это в файл Framer:

{item, buyNowBar, Confirmation, backgroundImage, successBadge, message} = sketch

Так вы ссылаетесь на все слои Sketch, для которых мы реализуем определенное взаимодействие внутри Framer.

Теперь, вместо того, чтобы печатать так:

sketch.buyNowBar.onClick (event, layer) ->
sketch.Confirmation.states.switch («fadeIn»)

…Мы можем просто использовать…

buyNowBar.onClick (event, layer) ->
Confirmation.states.switch («fadeIn»)

Давайте я покажу видео-демо того, что мы достигнем в этом коротком уроке…

Видео примеры не совсем ваш вариант? Без проблем. Поиграйтесь с готовым прототипом здесь http://share.framerjs.com/le526ymo5hsk

Парочка анимаций на экране ‘Checkout' и еще несколько на экране ‘Confirmation' по событию click. Вуаля!

Задайте настройки по умолчанию

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

Давайте сделаем так. Вставьте эти настройки слоев (по умолчанию) для тех слоев, с которыми мы будем работать:

# Item
item.scale = 0
item.opacity = 0

# Buy Now Bar
buyNowBar.y = 1334
buyNowBar.opacity = 0

# Confirmation Screen
Confirmation.x = 0
Confirmation.opacity = 0

# Background Image
backgroundImage.scale = 1.5
backgroundImage.blur = 20

# Success Badge
successBadge.y = -900
successBadge.opacity = 0

# Message
message.scale = 0
message.opacity = 0

Чтобы вы понимали, что здесь происходит (например, со слоем item). Вы видите, что мы присвоили имя переменной…

item

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

scale

…и затем присвоили ему значение…

0

«Но теперь я не могу видеть изображение рубашки?» Да. И тут мы воспользуемся потрясающей опцией ‘Auto-Code'…

Настройка состояний в Auto-Code

Перед тем, как идти дальше, хочу упомянуть, что, несмотря на новую опцию Auto-Code, иногда все еще требуется немного ручного кода. Гораздо меньше, чем нужно было в предыдущей версии Framer, но все еще достаточно, чтобы помучиться. Поверьте, даже если вы только-только начинаете программировать, Framer со своим автозаполнением и невероятно детальной документацией окажется гораздо проще для освоения, чем вы можете себе представить. Я уверен, что в будущих обновлениях Auto-Code станет еще удобнее, чем сейчас, так что ситуация с кодом будет только улучшаться.

Состояния item

Давайте настроим некоторые состояния для слоя item, и снова переместим его на изображение.

ерейдите в меню Insert на панели инструментов вверху и выберите State > item.

1-ZFfGVGRZE6e4cB-c2VBfKw

Вы увидите, что в редакторе добавится небольшой фрагмент кода, а в центральной части экрана появится панель Properties.

1-UylGZXSsl2nlqpMKr6w0sg

И вот тут-то Auto-Code приходит на помощь. Используя панель Properties, сделайте следующие настройки:

  • Opacity: 1.00
  • Scale: 1.00

Представляете, рубашка снова на месте! Она снова появилась на экране устройства.

Но подождите! Когда вы настроили свойства, а затем обратно перешли в редактор кода, слой куда-то испарился?!

Это не проблема. Ваш слой все еще там, в только что добавленном вами состоянии. Просто кликните на иконку Edit слева от кода. Видите, слой item снова на экране устройства?

1-tiJdKebPOBHONkmR4dnbUA

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

Вы увидите, что наше состояние названо как по умолчанию (stateA). Давайте заменим это на что-то более релевантное по отношению к создаваемой анимации.

Измените его на:

item.states.add
scaleUp:
scale: 1.00
opacity: 1.00

Примечание: отступы используются для определения структуры языка, используемого во Framer (это CoffeeScript), так что не забывайте корректно расставлять доступы, или код не будет работать корректно.

Чтобы активировать анимацию на слое item (рубашка), вставьте этот код под блоком кода states:

item.states.next ()

Хвала богам прототипирования, наш слой ожил!

Используйте Cmd + R, чтобы повторно посмотреть на анимацию в деле.

Вы можете использовать альтернативный синтаксис, как, например:

item.states.switch («scaleUp»)

…но next () в конкретно этой ситуации работает уместнее.

Теперь у вас должен быть следующий фрагмент:

item.states.add
scaleUp:
scale: 1.00
opacity: 1.00

item.states.next ()

Как я ранее упоминал, большая часть кода создана с помощью Auto-Code (что серьезно экономит время по сравнению с предыдущими версиями Framer), и вам нужно просто время от времени вручную вставлять нужные цифры.

Приступим к следующей анимации на экране (посмотрите на видео для справок, если нужно). Слой buyNowBar будет выплывать с нижнего края экрана.

Как мы уже делали с предыдущим слоем, кликните на кнопку Insert на панели инструментов, и выберите State > buyNowBar.

В панели Properties вставьте следующие настройки…

  • Y: 990 (чтобы опять вернуть элемент на холст)
  • Opacity: 1.00 (чтобы сделать красивое затенение)

Измените название состояния на что-то более релевантное и добавьте в .next ()call.

buyNowBar.states.add
slideUp:
y: 990
opacity: 1.00

buyNowBar.states.next ()

Давайте зададим кнопке небольшой прыжок? Воспользуемся анимацией Curves, а точнее Spring Curve.
Добавьте этот код между блоками states. add и states. next ()…

buyNowBar.states.animationOptions =
curve: «spring (400, 30, 0)»
delay: .3

Это задаст анимацию только для состояния нашего слоя, игнорируя глобальные настройки Framer по умолчанию. У вас должно получиться следующее:

buyNowBar.states.add
slideUp:
y: 990
opacity: 1.00

buyNowBar.states.animationOptions =
curve: «spring (400, 30, 0)»
delay: .3

buyNowBar.states.next ()

Теперь нужен переход на второй экран (Confirmation). Для этого нужно просто перейти в меню Insert > State > Confirmation и затем обратно вернуть Opacity на 1.00 в панели Properties.

Confirmation.states.add
fadeIn:
opacity: 1.00

Примечание: да, фоновое изображение размыто и отмасштабировано, но нам это нужно будет для следующего состояния слоя.

Теперь нужно добавить событие клика (Click Event), когда пользователь нажимает на кнопку Buy Now, и переходы на экран Confirmation.

Перейдите в меню Insert > Event > buyNowBar > Click > Click. И в редакторе кода будет следующее:

buyNowBar.onClick (event, layer) ->

Затем нужно добавить вызов next (), который будет ссылаться на состояние fadeIn, созданное ранее.

buyNowBar.onClick (event, layer) ->
Confirmation.states.next ()

Кликните на кнопку Buy Now, и увидите переход на экран Confirmation. Прекрасно!

Перейдем к слою backgroundImage. Давайте добавим новое состояние для него…

Insert > State > backgroundImage

В панели Properties добавьте следующие параметры…

  • Scale: 1.00
  • Blur: 0

Измените название состояния на что-то более релевантное…

backgroundImage.states.add
zoomBlur:
scale: 1.00
blur: 0

Опять же, нужно добавить Click Event на кнопку Buy Now, которая по клику активирует переход на экран Confirmation.

Перейдите в меню Insert > Event > buyNowBar > Click > Click.

buyNowBar.onClick (event, layer) ->

И затем добавьте вызов next () для обращения к состоянию zoomBlur, которое вы только что создали…

buyNowBar.onClick (event, layer) ->
backgroundImage.states.next ()

Кликните на кнопку Buy Now, чтобы увидеть переход в действии. Супер!

Для завершения работы с экраном Confirmation мы добавим парочку событий. Одно для слоя successBadge, и еще одно — для слоя message (сообщение).

1-DavCtN53_tg_hr0FdZJGTA

Для слоя successBadge добавьте событие через меню Insert и измените параметры на такие:

successBadge.states.add
fadeDown:
y: 0
opacity: 1.00

Как и в случае со слоем buyNowBar, мы добавим анимацию Curve для небольшого эффекта прыжка…

successBadge.states.animationOptions =
curve: «spring (400, 30, 20)»
delay: .3

Затем назначим Click Event кнопке Buy Now, через Insert > Event > buyNowBar > Click > Click.

buyNowBar.onClick (event, layer) ->
successBadge.states.next ()

Кликните на кнопку Buy Now, чтобы просмотреть анимацию в действии.

Для слоя message проделайте те же шаги, которые я показал выше. Только задайте Scale 1.00 и Opacity 1.00.

Не забудьте привязать Click Event к кнопке Buy Now.

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

buyNowBar.onClick (event, layer) ->
Confirmation.states.next ()
backgroundImage.states.next ()
successBadge.states.next ()
message.states.next ()

Если вам немного лень напрягаться, вот весь код, который должен быть внутри проекта Framer (я вставил сюда некоторые комментарии)…

# Import file «Order Confirmation» (sizes and positions are scaled 1:2)
sketch = Framer.Importer.load («imported/Order Confirmation@2x»)
{item, buyNowBar, Confirmation, backgroundImage, successBadge, message} = sketch

########### Adjust Defaults

# Item
item.scale = 0
item.opacity = 0

# Buy Now Bar
buyNowBar.y = 1334
buyNowBar.opacity = 0

# Confirmation Screen
Confirmation.x = 0
Confirmation.opacity = 0

# Background Image
backgroundImage.scale = 1.5
backgroundImage.blur = 20

# Success Badge
successBadge.y = -900
successBadge.opacity = 0

# Message
message.scale = 0
message.opacity = 0

########### States

# Item
item.states.add
scaleUp:
scale: 1.00
opacity: 1.00

item.states.next ()
# Buy Now Bar
buyNowBar.states.add
slideUp:
y: 990
opacity: 1.00

buyNowBar.states.animationOptions =
curve: «spring (400, 30, 0)»
delay: .3

buyNowBar.states.next ()

# Confirmation Screen
Confirmation.states.add
fadeIn:
opacity: 1.00

# Background Image
backgroundImage.states.add
zoomBlur:
scale: 1.00
blur: 0

# Success Badge
successBadge.states.add
fadeDown:
y: 0
opacity: 1.00

successBadge.states.animationOptions =
curve: «spring (400, 30, 20)»
delay: .3

# Message
message.states.add
scaleUp:
scale: 1.00
opacity: 1.00

########### Events

buyNowBar.onClick (event, layer) ->
Confirmation.states.next ()
backgroundImage.states.next ()
successBadge.states.next ()
message.states.next ()

Надеюсь, этот небольшой урок по работе Sketch и Framer пролил свет на процесс прототипирования. Продолжите работу с Framer в вашем следующем проекте, вы удивитесь, насколько это удобно!

Спасибо за чтение, делитесь вашими впечатлениями в комментариях.