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

Cover image for Как начать использовать Sketch и Framer X. Руководство для начинающих
Редакція
Редакція

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

Как начать использовать Sketch и Framer X. Руководство для начинающих

Это руководство расскажет, как создавать прототипы и взаимодействия, используя предварительно созданные компоненты во Framer X и доступные во Framer Store. Это может пригодиться веб-дизайнерам, не имеющим опыта кодинга, которые хотят узнать больше о взаимодействиях в интерфейсах.

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

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

Для начала вам понадобятся следующие инструменты и активы:

  • Framer X
  • Sketch
  • Пример файла Sketch: Этот файл Sketch содержит экраны дизайна, которые мы будем использовать в этом руководстве. Они являются частью Velocity UI Kit, созданногоInVision.

Это руководство предназначено для дизайнеров, использующих macOS, поскольку Framer X работает на Mac (хотя это может измениться в ближайшем будущем), приложение Sketch также предназначено только для macOS.

Перенос дизайна из Sketch

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

  • Вы привыкли к Sketch и не желаете изучать новый инструмент дизайна.
  • У вас уже есть несколько проектов в Sketch, и вы хотите создать для них взаимодействия.
  • Sketch работает намного лучше с большими файлами. У Framer X, кажется, есть некоторые проблемы при перемещении элементов.
  • Framer X все еще находится на ранних стадиях разработки в качестве инструмента дизайна, и для него существует не так много учебных пособий о том, как создавать элементы дизайна. С другой стороны, существует множество руководств по Sketch, а также множество плагинов, например, Craft, который позволяет ускорить процесс проектирования.
  • Вы найдете гораздо больше ресурсов веб-дизайна для Sketch, чем для Framer X.
  • По-прежнему не хватает руководств по некоторым параметрам, доступным во Framer X, особенно по использованию компонентов кода.

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

Скопируйте дизайн из Sketch, а затем вставьте его во Framer X

Как вы можете видеть на панели «Слои», есть те же слои, что и в Sketch.

Иногда при переносе дизайна во Framer X некоторые свойства могут быть потеряны – в данном случае это радиус границы миниатюр. Всё потому, что мы использовали в Sketch маску, а Framer X не распознает ее. Чтобы решить эту проблему, вы можете либо выбрать в Sketch группу и преобразовать ее в растровое изображение (Flatten it to Bitmap) перед вставкой во ​​Framer X, либо после переноса дизайна во Framer X дважды щелкните по фрейму элемента и вручную измените радиус на панели «Свойства».

Организация макета во Framer

Чтобы поработать над взаимодействием элементов во Framer X, нам нужно создать новый фрейм.

Фрейм аналогичен артборду в Sketch (или элементу HTML

), но является более функциональным. Фреймы действуют скорее, как контейнеры, так как фрейм может содержать другие фреймы.

Чтобы создать новый фрейм, перейдите на панель инструментов «Макет», выберите Frame и перетащите его в любую часть холста; или просто нажмите F.

Чтобы создать новый фрейм, выберите «Frame» на панели инструментов «Макет»

Во-вторых, мы зададим устройство для фрейма. Выберите фрейм и на панели «Свойства» в пункте Device выберите Apple MacBook Pro.

Чтобы задать устройство для фрейма, выберите Device на панели «Свойства»

Взгляните на статичный фрейм, который мы импортировали. Мы создадим следующие взаимодействия:

  • Заголовок (Header): Исчезает при прокрутке содержимого.
  • Кнопка Floating Action Button (FAB): состояния по умолчанию, при наведении курсора и при нажатии (default, hover и pressed).
  • Навигация (Nav): Она отображается справа налево при нажатии на FAB.
  • Контент (Content): Изменение размера при нажатии FAB.

Мы создадим взаимодействия для заголовка, навигации, FAB и контента

Сперва создайте новые фреймы поверх слоев таким образом, чтобы у вас был один фрейм для каждого из вышеперечисленных элементов взаимодействия. Например, мы добавим новый фрейм, чтобы сгруппировать все слои, которые являются частью заголовка (Cmd + Enter), и назовем этот фрейм header.

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

Для ясности измените название фрейма Apple MacBook Pro на Interactive. В следующем разделе мы создадим компонент прокрутки (Scroll component).

Скролл контента

Сперва мы продублируем (Cmd + D) фрейм и извлечем его из фрейма Static. Измените имя нового фрейма на i_content.

Продублируйте фрейм Content и извлеките его из фрейма Static

Затем мы создадим компонент Scroll на нашем интерактивном фрейме. Для этого перейдите на интерактивную панель инструментов и выберите Scroll. Перетащите в любую часть интерактивного фрейма.

В дополнение к этому, измените ширину компонента Scroll на 1141px (равную размеру фрейма Content) и расположите его на статическом фрейме в тех же координатах, что и Content (слева: 149px, сверху: 140px). Кроме того, увеличьте высоту компонента Scroll, когда он достигнет нижней части интерактивного фрейма.

Измените ширину и высоту компонента Scroll и расположите его в тех же координатах, что и фрейм Content

Далее мы подключим компонент Scroll к нашему i_content. Для этого нажмите на соединитель и подключите его к i_content.

Подключите компонент Scroll к i_content

Наконец, выберите интерактивный фрейм и нажмите Cmd + P, чтобы войти в режим предварительного просмотра. Теперь вы сможете скроллить контент.

Чтобы получить доступ к режиму предварительного просмотра, нажмите Cmd + P

Далее я объясню, как расположить заголовок и FAB (Floating Action Button), чтобы сделать их фиксированными при скроллинге без необходимости специального кодинга.

Фиксированные элементы

Мы будем располагать элементы так, чтобы они оставались фиксированными при скроллинге страницы. Для этого продублируйте фрейм заголовка и поместите его на интерактивный фрейм. Как и до этого, измените имя на i_header. Сделайте то же самое с кнопкой Floating Action Button. Ваша панель слоев должна выглядеть следующим образом.

Продублируйте фреймы заголовка и FAB и разместите их на интерактивном фрейме

Поскольку Header и FAB находятся вне компонента Scroll, они останутся фиксированными при скроллинге.

Вы можете скроллить контент, тогда как заголовок и FAB остаются фиксированными

В следующем разделе я объясню, как создать переход заголовка.

Переход заголовка

Чтобы создать переход заголовка, мы будем использовать компонент Scroll away, созданный Lukas Guschlbauer. Чтобы начать использовать этот компонент, перейдите во Framer Store, введите в строке поиска Scroll и установите компонент Scroll Away.

Найдите «Scroll» во Framer Store и установите компонент Scroll Away

Затем перейдите на панель «Компоненты», нажмите Scroll Away и поместите его на холст. Уберите фрейм заголовка из интерактивного фрейма и поместите компонент Scroll away туда, где был заголовок. Измените размер компонента, чтобы он совпадал с размером заголовка (1440x80px).

Теперь выберите компонент Scroll Away и подключите его к фрейму i_header. На панели «Свойства» можно изменить несколько свойств компонента, таких как выравнивание, эффект, направление, плавность или тайминг. Мы изменим эффект на Fade Move. Как только это будет сделано, параметры ниже изменятся соответственно.

Уберите фрейм заголовка из интерактивного фрейма и измените эффект на Fade Move

Чтобы эффект работал, нам нужна еще одна вещь. Выберите компонент Scroll Away и щелкните Override на панели «Свойства». Нажмите File и выберите New File. Затем нажмите Override и выберите UseScrollData. Потом кликните по компоненту Scroll интерактивного фрейма. Снова нажмите Override и выберите getScrollData в Override. Для предварительного просмотра результата, нажмите Cmd + P.

Переопределения – это уникальный концепт Framer X. Переопределения кода – это функции, которые позволяют компонентам взаимодействовать друг с другом. Вы можете написать их код самостоятельно и применить к любому фрейму или компоненту на холсте. Эти функции позволяют переопределять визуальные свойства, такие как непрозрачность и заливка, а также обеспечивают интерактивность и анимацию. Переопределения кода могут находиться в любом файле кода вашего проекта. Framer X интерпретирует их в зависимости от типа. Вы можете применить любое переопределение кода к любому фрейму или компоненту на холсте, выбрав «Override» на панели «Свойства».

Переход заголовка работает, но сверху есть пробел

Переход работает, но вы заметите, что сверху есть пробел. Это потому, что компонент Scroll расположен в точке y: 140. Давайте изменим это. Увеличьте высоту компонента Scroll, чтобы он занимал всю высоту интерактивного фрейма. Затем перейдите к фрейму i_content и разместите элементы в 140px от верхней части фрейма.

На фрейме i_content расположите контент в 140 пикселях от верха

Ваше взаимодействие должно быть похоже на это.

Переход заголовка при скроллинге контента

Примечание: Если необходимо, скачайте исходный файлдля этого шага.

Далее я объясню, как изменить состояние кнопки при взаимодействии с ней.

Состояния кнопок

В этом разделе мы будем работать с различными состояниями для кнопки Floating Action Button (FAB). Мы будем использовать компонент Magic Move, созданный Henrique Gusso. Итак, прежде всего, зайдите во Framer store и установите этот компонент. На панели «Компоненты» выберите этот компонент и поместите его на холст.

Сначала выберите фрейм Floating Action Button и вытащите его из интерактивного фрейма. Затем разместите компонент Magic Move там, где был FAB. Измените его размер до 72×72px.

Уберите FAB с интерактивного фрейма и поместите на его место компонент Magic Move

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

Удалите графику, импортированную из Sketch, и создайте свой собственный круг

Для различных состояний FAB нам нужно создать Мастер (Master) и три экземпляра (состояния default, hover, и pressed). Для этого выберите i_FAB, щелкните по нему правой кнопкой мыши и выберите Create component.

Чтобы создать мастер, выберите фрейм i_fab, щелкните правой кнопкой мыши, нажмите Create component

Компоненты дизайна аналогичны символам в Sketch. Поэтому, если вы хотите создать повторно используемые компоненты для вашей дизайн-системы, это очень полезный инструмент. Чтобы изменить свойства экземпляров сразу, просто выберите Мастер и измените нужные свойства. Для получения дополнительной информации обратитесь к руководству Framer X по созданию компонентов дизайна.

Теперь продублируйте мастер-фрейм i_fab 3 раза, чтобы получить экземпляры. Измените имя новых фреймов на i_fab_default, i_fab_hover и i_fab_pressed.

Чтобы создать экземпляры для состояний кнопки, продублируйте мастер 3 раза

Далее нам нужно подключить компонент Magic Move к экземплярам. Подключите Initial к i_fab_default, Hover Start к i_fab_hover, Tap к i_fab_pressed и Hover End к i_fab_default.

Подключите компонент Magic Move к экземплярам

Наконец, мы должны войти в каждое из состояний и изменить цвет и масштаб. Зайдите в i_fab_hover и измените его цвет на #2244BF. Для этого дважды кликните мышью, пока не увидите параметр «Fill» на панели «Свойства». Затем перейдите в i_fab_pressed, уменьшите его размер до 56px и измените его цвет на #172E80. Проверьте результат в режиме предварительного просмотра.

Если вы видите черный экран в режиме предварительного просмотра, проверьте совместимость компонента с вашей версией из Framer Library. Для этого перейдите на страницу компонента во Framer Store. Если пакет не совместим с вашей версией, вы увидите предупреждение. Чтобы изменить Framer Library, выберите File → Framer Library Version.

Чтобы перейти в режим предварительного просмотра, нажмите Cmd + P

В следующем разделе я объясню, как отобразить навигацию (Nav) справа налево, нажав кнопку FAB.

Примечание: Если необходимо, скачайте исходный файл для этого шага.

Открытие навигации при нажатии кнопки

Теперь мы будем работать над взаимодействием для отображения навигации при нажатии кнопки FAB. Для перехода мы снова будем использовать функцию «Link to» и компонент Magic Move.

Перейдите к статическому фрейму и продублируйте фрейм Nav. Разместите его в любой части холста и измените его имя на i_nav.

Продублируйте фрейм Nav, вытащите его из фрейма Static и измените его имя на i_nav

Теперь нам нужно создать два разных состояния для Nav. Во-первых, начальное состояние (навигация не отображается) и вторичное состояние, когда навигация отображается. Для этого создайте новый мастер с помощью i_nav (щелкните правой кнопкой мыши и выберите «Create component» или используйте сочетание клавиш Cmd + K). Теперь дважды продублируйте Мастер, чтобы получить экземпляры. Назовите их i_nav_default и i_nav_displayed.

Продублируйте мастер, чтобы получить экземпляры i_nav

Затем поместите элементы i_nav_default за пределами фрейма (справа: -80px).

Поместите i_nav_default за пределами фрейма

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

Продублируйте интерактивный фрейм

Для отображения навигации в этом новом фрейме мы создадим новый компонент Magic Move. Размер (80x392px) и позиция (сверху: 140, справа: 0) должны совпадать с фреймом Nav.

Добавьте новый компонент Magic Move на фрейм Interactive02

Затем перейдите к фрейму Interactive02, выберите компонент Magic Move и подключите его к экземплярам. i_nav_default к начальному состоянию (Initital state) и i_nav_displayed к автоматическому состоянию (Automatic state). Таким образом, при входе на этот второй фрейм, навигация будет отображаться автоматически.

Подключите компонент Magic Move к экземплярам

Теперь мы будем строить взаимодействие между экранами, связывая фреймы. Перейдите к интерактивному фрейму, выберите FAB, щелкните правой кнопкой мышиAdd Frame. Измените имя нового фрейма на interactive_fab. Нажмите L (Link to) и подключите его к фрейму Interactive02.

В интерактивном фрейме добавьте новый фрейм поверх FAB и нажмите L, чтобы подключить его к фрейму Interactive02

Измените переход на Instant и посмотрите его превью. Вы можете изменить эффект перехода между экранами на панели «Свойства».

Изменить переход на Instant

Если вы перейдете в режим предварительного просмотра, вы увидите, что при нажатии кнопки FAB отображается навигация, но нам нужно обратить вспять взаимодействие при повторном нажатии на нее. Для этого продублируйте фрейм Interactive02 (назовите его Interactive03).

На фрейме Interactive03 выберите компонент Magic Move и назначьте i_nav_displayed для Initial State, а i_nav_default для Automatic State.

Назначьте i_nav_displayed для Initial State, а i_nav_default для Automatic state на фрейме Interactive03

Наконец, нажмите L (Link to), чтобы связать interactive_fab на фрейме Interactive02 с фреймом Interactive03, а interactive_fab на фрейме Interactive03 связать с фреймом Interactive02. Не забудьте изменить на Instant эффект перехода в свойствах ссылки (Link properties).

Свяжите interactive_fab на фрейме Interactive02 с фреймом Interactive03, а interactive_fab на фрейме Interactive03 с фреймом Interactive02

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

При нажатии на кнопку FAB, навигация отображается справа налево

Примечание: Если необходимо, скачайте исходный файлдля этого шага.

Далее я объясню, как изменить размер контента при нажатии кнопки FAB.

Изменение размера контента, когда отображается навигация

Чтобы изменить размер контента при отображении навигации, мы напишем код React. Мы будем использовать Playground (редактор кода, интегрированный во Framer X), который позволяет играть с кодами React и HTML для создания продвинутой анимации.

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

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

Добавьте фрейм поверх каждого из компонентов Scroll

Далее перейдите на панель «Свойства» и нажмите Override. В File выберите App. Если вы его не видите, выберите New file. Затем нажмите Edit Code. Playground откроется автоматически.

Убедитесь, что ваш App file имеет следующую строку в верхней части. Если нет, добавьте ее:

import { Data, animate, Override, Animatable } from "framer"

Примечание: (*) Этот код работает с Framer v. 25 и последней версией API v. 1.0.7. Однако, имейте в виду, что Framer теперь рекомендует пользователям использовать функции React Hooks вместо компонентов класса. Узнайте больше на новых страницах документации по Framer API.

Мы объявим переменную с именем contentScaleValue и укажем, что ее можно анимировать. Также мы установим состояние переключателя по умолчанию, как true.

//Value by default

const contentScaleValue = Animatable(1);

let toggle = true;

Затем мы создадим функцию ResizeContent для контента, который будет масштабироваться при нажатии FAB. Кроме того, мы должны установить его originX и originY так, чтобы он масштабировался сверху слева.

//Assign to content

export const ResizeContent: Override = props => {

return {

scale: contentScaleValue,

originX: 0,

originY: 0

};

};

Далее мы создадим вторую функцию togglePosition для FAB. Мы скажем, что onTap, если переключатель – true, контент будет изменен, и состояние переключателя изменится на false. В противном случае, сделайте обратную анимацию.

//Assign to FAB

export const togglePosition: Override = props => {

return {

onTap: () => {

if (toggle) {

animate.ease(contentScaleValue, 0.9, {duration: 0.2});

toggle = false;

} else {

animate.ease(contentScaleValue, 1, {duration: 0.2});

toggle = true;

}

}

};

};

После написания этого кода выберите фрейм, созданный поверх компонентов Scroll, перейдите в раздел Override на панели свойств и выберите File: App, Override: ResizeContent. Далее выберите FAB, File: App, Override: togglePosition.

Выберите фейм поверх ваших компонентов Scroll и установите Override, как ResizeContent. Выберите FAB и установите Override на togglePosition

Убедитесь, что результат работает следующим образом.

Для предварительного просмотра взаимодействия нажмите Cmd + P

Примечание: Если необходимо, скачайте исходный файл для этого шага.

Прототипирование

Перейдите в файл Sketch и импортируйте во Framer X (скопируйте и вставьте) артборд профиля пользователя. Затем во Framer, продублируйте этот фрейм. Назовите его Interactive_user_profile.

Скопируйте артборд профиля пользователя из Sketch и вставьте его во Framer X. Затем продублируйте фрейм и назовите его «Interactive_user_profile»

Мы создадим автоматические переходы для правой боковой панели, полей вверху и контента. Уберите все фреймы из фрейма Interactive_user_profile.

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

Создайте компонент Magic Move для каждого из элементов и поместите их на фрейм Interactive_user_profile.

Создайте компонент Magic Move для анимирования элементов

Затем создайте мастер и два экземпляра для каждого из компонентов. Для боковой панели расположите первый экземпляр вне фрейма. Для полей и контента измените непрозрачность первого экземпляра на 0.

Создайте мастер и два экземпляра для каждого из компонентов

Подключите компонент Magic Move к каждому экземпляру. Задайте первому экземпляру Initial State, а второму – Automatic State.

Подключите компоненты Magic Move к экземплярам

На панели «Свойства» вы можете изменить задержку (delay) каждого из компонентов Move Magic, чтобы настроить порядок отображения. Назначьте следующие задержки:

  • Sidebar: no delay
  • First box: 0.4 delay
  • Second box: 0.6 delay
  • Third box: 0.8 delay
  • Content: 1 delay.

Измените задержку компонентов на панели «Свойства»

Перейдите к фрейму Interactive03, выберите заголовок и Link to фрейм Interactive_user_profile. На этом фрейме выберите заголовок и ссылку на интерактивный фрейм. Не забудьте изменить переход между экранами на Instant. Проверьте результаты.

Прототипирование при помощи инструмента Link

Примечание: Если необходимо, скачайтеисходный файлдля этого шага.

Cmd + P, чтобы проверить результат

Поделитесь прототипом

Чтобы поделиться прототипом, кликните FileExport Web Preview (Cmd + E). Чтобы посмотреть прототип, откройте index.html. Он запустит прототип в браузере.

Выводы

Если вы ищете дизайнерский инструмент, специализирующийся на взаимодействии, Framer X является идеальным вариантом. Framer X позволяет создавать простые переходы между экранами, микро-взаимодействия, а также создавать сложные взаимодействия с использованием кода React.

Используя Framer X, вы ускорите процесс проектирования и сможете лучше донести информацию о взаимодействии ваших проектов до команды и заинтересованных сторон.

  • Вы все еще можете создать интерфейс в Sketch и вставить свои проекты во Framer X, чтобы создать там взаимодействие элементов.
  • В этом руководстве я использовал дизайн, импортированный из Sketch, но вы также можете создавать макеты во Framer X.
  • Во Framer Store доступно несколько наборов элементов интерфейса, которые помогут вам создать свои дизайн-системы.
  • Единого подхода к построению взаимодействия во Framer X не существует. Экспериментируйте и учитесь.
  • Чтобы быстрее создавать некоторые быстрые взаимодействия, используйте предварительно созданные компоненты из Framer Store.
  • Вам просто нужны минимальные знания кодинга, чтобы начать создавать сложные взаимодействия во Framer X, и в Интернете доступно несколько руководств, чтобы начать изучать, как это сделать.

Перевод статьи Martina Pérez

Топ коментарі (0)