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 – просто перетащите эффект на экран, и готово!
Пролистывание обложек
Ужасно, как много времени я потратил на создание прототипа с эффектом пролистывания обложек в Figma. Да, это можно сделать, но вам понадобится новый экран для каждой карточки, и управлять этим очень сложно.
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)