Как конвертировать проект Figma во Framer-прототип

В статье предоставлено пошаговое руководство о том, как наилучшим образом использовать новый рабочий процесс Figma to Framer.

Оригинал статьи

На прошлой неделе команда Framer запустила новый импортер с Figma во Framer Web, показав дизайнерам новый рабочий процесс.

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

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

«Это перенос всего, что я люблю в Figma, ко всему, что я люблю во Framer. Я целый день переключаюсь между двумя инструментами, это определенно изменит правила игры».

Max Steitle, Product Designer в Zoom

Существует два способа импортировать дизайны из Figma. Первый — прямо из панели инструментов Framer Web, где после нажатия кнопки импорта в правом верхнем углу нужно выбрать Figma. В противном случае вы можете сделать это прямо из проекта. Таким образом можно импортировать дополнительную работу в проект, который вы уже начали, эффективно объединяя проекты с двух разных платформ. Просто выберите File -> Import from Figma в меню.

Теперь вы можете взять за основу проект, который начали в Figma. После того, как вы перенесли все это во Framer Web, щелкните ПКМ по статическим элементам, которые вы хотите поменять. Нажмите «Replace with» и найдите необходимый компонент, который можно заменить плейсхолдером. Настройте цвета, шрифты и стили компонента в соответствии с остальным дизайном на панели свойств. Добавьте еще один уровень интерактивности с другими встроенными во Framer инструментами для создания прототипов. Используйте инструмент «Link» для подключения экранов и настройки переходов, а также для прокрутки карточек и другого содержимого с помощью прокрутки.

«Новый импортер Figma очень прост и понятен — я просто выбираю импорт, аутентификацию, а затем меняю статические слои на интерактивные компоненты. Затем я могу поднять свои проекты на новый уровень, используя передовые инструменты Framer для создания прототипов».

Simon Lucas, UX Prototyper в Channel 4

Magic Motion — одна из самых влиятельных функций в Framer Web. Основываясь на существующей библиотеке Framer Motion, Magic Motion открывает феноменальную силу этих анимаций для тех, кто не хочет писать код. Выберите начальный и конечный фреймы (или используйте их серию), объедините их с помощью коннектора в виде молнии, и Magic Motion выяснит, какую анимацию можно применить.

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

«Дизайн-система нашей команды находится в Figma, и мне нравится экспериментировать и создавать прототипы в Framer. Теперь я получаю выразительность и мощь построения в Framer без необходимости воссоздавать все с нуля».

Jay Stakelon, Product Designer в Dropbox

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

Есть два способа поделиться. Если вы хотите, чтобы кто-то видел только предварительный просмотр вашего прототипа, нажмите «Share» в верхнем правом углу и отправьте ему сгенерированую ссылку. Если вы хотите, чтобы они сотрудничали с вами, нажмите значок + в правом верхнем углу и добавьте их почтовые ящики. Убедитесь, что у этих людей есть права на редактирование. Помимо всего вы можете приглашать людей просто в качестве зрителей. Процесс будет абсолютно таким же, только на этот раз в настройках доступа необходимо выставить права только для просмотра. Таким образом, они смогут увидеть всё, а не только предварительный просмотр.

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

Больше интересной и разноплановой информации вы найдёте в нашем блоге и телеграм-канале.