10 вещей, которые Framer делает лучше, чем Figma

Figma – потрясающий инструмент, но на него нельзя во всем полагаться

Я первый, кто скажет, что Figma ниспослана дизайнерам свыше.

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

Figma не случайно достигла заслуженного превосходства в сообществе дизайнеров. Тем не менее, мы не можем полагаться на один инструмент, чтобы делать ВСЕ.

Несмотря на то, что Figma, казалось бы, поглотила на своем пути Abstract, Invision, Zeplin, Sketch и остальные инструменты, Framer все еще можно считать достойным конкурентом.

Я до сих пор использую Figma для работы над интерфейсом, управления дизайн-системами, совместной работы в команде и многого другого. Однако, когда дело доходит до создания интерактивных прототипов для пользовательского тестирования или создания отпадной анимации для Dribbble, я использую функционал Framer.

Почему сообщество дизайнеров игнорирует Framer???

Давайте поговорим, как Framer поможет улучшить ваш дизайн.

Что такое Framer?

Как сказал UX Lord в своей статье Figma vs Framer: «Framer – это инструмент создания прототипов, но он может использовать реальный код для создания или настройки компонентов. Хотя кодинг может отпугнуть дизайнеров, Framer отлично работает и как самостоятельный инструмент дизайна, если вы решите вообще не кодить».

1. Поля ввода

10 вещей, которые Framer делает лучше, чем Figma

Документация по Framer – Подробнее

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

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

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

Руководство по Framer – Смотреть на YouTube

10 вещей, которые Framer делает лучше, чем Figma

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

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

3. Слайдеры

Документация по Framer – Подробнее

10 вещей, которые Framer делает лучше, чем Figma

Недавно я создал руководство по созданию слайдера auto layout в Figma, и получил отличный фидбек, но многие люди спрашивали: «Как мне заставить его работать при прототипировании?»

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

4. Эффекты свайпа

Документация по Framer – Подробнее

С различными эффектами свайпа весело играть, и ими легко пользоваться. Это напоминает мне старую версию Windows Movie Maker – просто перетащите эффект на экран, и готово!

Пролистывание обложек

Посмотреть на сайте Framer

10 вещей, которые Framer делает лучше, чем Figma

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

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

Эффект куба

Посмотреть на сайте Framer

10 вещей, которые Framer делает лучше, чем Figma

Эффект стопки

Посмотреть на сайте Framer

10 вещей, которые Framer делает лучше, чем Figma

Эффект стопки сложно реализовать в Figma, но с ним интересно поэкспериментировать, чтобы получить результат похожий на сложенные в стек кредитные карты, как в Apple Wallet.

5. Интеграция карты

Документация по Framer – Подробнее

10 вещей, которые Framer делает лучше, чем Figma

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

6. Перспектива наведения

10 вещей, которые Framer делает лучше, чем Figma

Это еще один изящный и простой в реализации прием. Опять же, таких эффектов сотни, так что ознакомьтесь с ними.

7. Звуковые эффекты и мультимедиа

10 вещей, которые Framer делает лучше, чем Figma

Если в вашем приложении есть звуковые эффекты, Framer поможет вам. Вы также можете воспроизводить музыку, видео, GIF-файлы, видеоролики Youtube и другие типы контента прямо внутри прототипа.

8. Эффект колеса

Документация по Framer – Подробнее

10 вещей, которые Framer делает лучше, чем Figma

9. Анимация лайка

Документация по Framer – Подробнее

10 вещей, которые Framer делает лучше, чем Figma

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

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

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

10. Блокнот для рисования

Документация по Framer – Подробнее

10 вещей, которые Framer делает лучше, чем Figma

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

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

10 вещей, которые Framer делает лучше, чем Figma
Мы все здесь друзья
0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Подробнее

Framer и Sketch: продуманное прототипирование

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

Как Dropbox использует Framer X и реальные данные для создания дизайна

С релизом Framer X наша команда решила перестроить Desktop Kit с нуля, используя реальные данные. Мы рады поделиться несколькими компонентами, которые мы создали в ходе первой недели наших экспериментов.

Лучшие статьи, раз в неделю, с доставкой на почту

Total
7
Share