Дизайн и анимации на основе кода: создаём прототипы во Framer

Руководство по эффективному применению инструмента.

Конспект переводчика Николая Геллара.

Framer — это программа для прототипирования и дизайна, основанная на коде. В статье мы рассмотрим основные концепции удобного прототипирования для дизайнеров и разработчиков. И попробуем воспроизвести один из переходов, найденных в приложении Design+Code.

Скачайте файлы проекта, чтобы следовать этому руководству. Для начала работы нужно открыть файл DesignCode-Chapter-New.framer, либо смотрите уже готовое решение.

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

Может быть разбита на четыре основные части.

Здесь у нас есть инструменты для создания артбордов, прямоугольников, овалов, текста, масштабирования рабочей области, а внизу — встроенная панель иконок.

Как и большинство других инструментов проектирования, Framer имеет панель слоёв. Однако есть некоторые ключевые отличия. Рассмотрим их более подробно позже, чтобы понять, как работают слои во Framer.

Рабочую область можно использовать для создания артбордов для разных телефонов, планшетов, часов, рабочих столов и даже телевизоров.

При выборе слоя на артборде появляется список доступных свойств для стилизации макета.

Может быть разделена на пять частей.

Боковая панель очень похожа на панель в режиме дизайна: есть разные инструменты для быстрой анимации слоёв, можно импортировать проекты из других приложений, нажав кнопку импорта. Есть возможность быстро получить доступ к документации по Framer или проверить свой код.

Она показывает все слои так же, как в режиме дизайна. При наведении курсора на какой-либо из слоёв на панели можно легко идентифицировать его в окне предварительного просмотра. Если щёлкнуть правой кнопкой мыши по любому из слоёв, появятся функции: добавить анимацию, состояние или событие.

С помощью Framer легко начать кодить. Он имеет привлекательную и полезную подсветку синтаксиса, нижняя часть области редактора зарезервирована для отображения ошибок, которые есть в коде. Ещё есть полезная функция — Smart Autocomplete (понимает код и даёт подсказки с учётом контекста).

Это область с отображением прототипа, которая даёт визуальный фидбек в реальном времени.

С верхней части панели навигации можно выбрать различные типы устройств и отсоединить окно предварительного просмотра.

Чтобы получить к ней доступ, нужно щёлкнуть на значок редактирования. На этой панели — различные свойства анимации, состояния или события.

Во Framer есть функция Auto-code, которая сохраняет код с визуальными изменениями. Если изменить слой из окна предварительного просмотра, появятся изменения ещё в двух местах: на панели свойств и в области редактора кода.

Основные сведения о Framer.

Слои во Framer похожи на слои в любом другом инструменте проектирования, но есть несколько небольших различий. Все привыкли к концепции группировки в Sketch: выбираем два или более слоёв и создаём с ними группу.

Технически во Framer нет групп. Вместо этого слои «вложены», как div в веб-странице. Взгляните на артборд Page2. Он имеет несколько дочерних слоёв. iOSGuide находится в верхней части этого дерева и сам содержит несколько дочерних слоёв. iOSGuideImage содержит заголовок и основной текст.

Эти текстовые слои вложены, и хотя они отображаются на панели слоёв ниже iOSGuideImage, они находятся над изображением и всё ещё видны на холсте.

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

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

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

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

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

Слои во Framer не похожи на слои в Sketch. При создании их можно стилизировать и добавлять изображения, тексты и видео. Один слой может разделяться на несколько слоёв, есть функция анимации. Это строительные блоки Framer.

Анимация — это то, что оживляет слои. Можно анимировать свойства слоя: цвет фона, высоту, ширину, размер, непрозрачность, радиус рамки и так далее.

В состояниях хранятся наборы свойств слоя. Можно создавать несколько состояний и переключаться между ними или анимировать их.

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

Для этого примера будем работать только на вкладке «Код». На вкладке «Дизайн» уже добавлены проекты и выбраны все слои, которые будут использованы в работе. В примере мы будем повторять анимацию, когда при нажатии на одну из карточек разделов эта карточка разворачивается, показывая содержимое раздела. А затем мы будем анимировать закрытие карточки.

Первая часть кода будет сосредоточена на настройке различных элементов на артборде, но в частях «Переход 1» (открытие события) и «Переход 2» (закрытие события) мы будем работать над сворачиванием и разворачиванием анимаций соответственно.

Перед переходом к весёлой части зададим настройки для урока.

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

И, наконец, мы зададим состояния по умолчанию для кнопок «Play» и «Close».

Вынесем за пределы холста кнопку «Close», затем уменьшим кнопку «Play» до .5 и зададим непрозрачность 0.

Выделим весь этот код, щёлкнем правой кнопкой мыши и выберем «Fold». Вот где функция Framer «Code Fold» действительно проявляет себя. Это создаст новый раздел для этого кода.

Хорошо держать его в стороне от основного кода, чтобы он был чистым.

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

Сделаем его дочерним слоем PageView, который является слоем из артборда Chapters. Затем устанавливаем положение Y. Поскольку у PageComponent теперь есть PageView как родительский слой, любые значения позиции, которые он задаёт, относятся к его родительскому объекту.

Когда мы устанавливаем Y-позицию на 60, то на самом деле мы делаем отступ 60px вниз от верхней части слоя PageView. Чтобы компенсировать это позиционирование, мы установили высоту PageComponent с простым вычислением. Это быстрый способ установить значение свойства слоя, если вы не хотите устанавливать его вручную.

Поскольку этот PageComponent должен прокручиваться только по горизонтали, мы установили scrollVertical в значение «false». Установка contentInset дает страницам некоторый запас слева и справа. Не стесняйтесь играть с некоторыми из этих значений, чтобы увидеть, как они меняют макет.

Теперь PageComponent настроен, но ему нужен контент. Для этого добавим страницы в PageComponent.

pageComp.addPage(Page1)
pageComp.addPage(Page2)

Код внутри скобок — это слой или артборд, который мы хотим установить в качестве содержимого этой страницы.

Важно чтобы некоторые состояния были заданы для элементов, чтобы мы могли анимировать переходы между ними. Давайте настроим кнопку «Play».

Здесь у нас есть два состояния «Show» и «Hide». Думайте о состояниях как способе хранения свойств, между которыми мы можем переключаться. Мы также добавили опции анимации, чтобы получить хороший переход между этими двумя состояниями, контролируемыми spring-кривой, которую мы создали ранее. Давайте сделаем то же самое с кнопкой «Close».

Затем сохраним некоторые свойства по умолчанию из iOS Guide, которые потребуется использовать позже.

Подобно тому, что мы сделали с кнопками «Play» и «Close» выше, создадим состояния для iOSGuide и изображения внутри него.

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

Мы хотим, чтобы переход начался при нажатии iOSGuide. Для этого используем событие onTap.

iOSGuide.onTap ->

Когда это произойдет, удалим его из PageComponent и parent на экране Chapters. Когда событие расширяется, оно не обрезается своим родительским слоем и появляется выше всего остального.

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

Чтобы сделать это, используем одно из свойств iOSGuide, сохранённое ранее, — «screenFrame». Во Framer это свойство получает точное положение и размер элемента на экране.

this.parent = Chapters
this.screenFrame = origPos

Пока будем использовать «this».

Затем изменим внешний вид строки состояния и поместим под ней iOSGuide. Это необязательно, но при разработке для iOS хорошей практикой является использование как светлых, так и тёмных версий строки состояния, поэтому при изменении контекста, в котором он отображается, всегда есть хороший контраст.

StatusLight.visible = true
StatusDark.visible = false
this.placeBehind(StatusLight)

Используем ранее установленные нами состояния и анимируем iOSGuide и iOSGuideImage для этих состояний.

this.animate("Open")
iOSGuideImage.animate("Expanded")

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

Теперь у нас должен быть переход между экранами. Сейчас нет способа отменить это. Нужно показать кнопки «Close» и «Play». Чтобы сделать это, снова будем использовать animate () и перейдём в состояние «Show» для каждого состояния, чтобы оживить их. Мы также разместим их над iOSGuide, чтобы убедиться, что они видны.

closeBtn.animate("Show")
closeBtn.placeBefore(iOSGuide)
playBtn.animate("Show")
playBtn.placeBefore(iOSGuide)

Нужен способ закрыть экран статьи и вернуться к главам (Chapters). Для этого добавим к кнопке закрытия событие «onTap» и вернём компоненты обратно в их начальные состояния.

Последнее, что нужно сделать — вернуть iOSGuide в PageComponent, когда заканчивается анимация закрытия. Для этого установим текущее состояние iOSGuide «Close». Мы собираемся проверить, когда прекратит анимацию onAnimationEnd, но не хотим возвращать её обратно в PageComponent, когда заканчивается анимация открытия.

Мы использовали оператор «if», чтобы проверить, является ли текущее состояние iOSGuide «Close», и если да, сделать что-нибудь. В этом случае — вернуть её в Page1 в PageComponent и установить её свойства X и Y обратно в начальные значения внутри Page1, которые мы сохранили в origX и origY ранее в прототипе.

Теперь можно нажать на карточку: она открывается, а после нажатия на кнопку закрытия сворачивается. К прототипу можно добавить рамку iPhone X.

#дизайн #инструменты