UXPUB 🇺🇦 Спільнота дизайнерів

Cover image for 10 вещей, которые Framer делает лучше, чем Figma
Редакція
Редакція

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

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. Поля ввода

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

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

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

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

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

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

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

3. Слайдеры

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

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

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

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

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

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

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

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

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

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

Эффект куба

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мы все здесь друзья


Перевод статьи uxdesign.cc

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

UX Design Medium

Це курс для тих, хто вже готовий братися до потенційно складних завдань. Протягом трьох місяців ми будемо визначати й досліджувати проблеми, конвертувати дані в дизайн-рішення і, звісно, перевіряти їх ефективність.
Дізнатись більше