Framer — бесплатный инструмент для создания интерактивных прототипов
Инструменты

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

Egor Komarov
Egor Komarov

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

Framer — программа для прототипирования

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

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

Framer что-то среднее между Figma и Invision Studio.

За интерактивным дизайном будущее. Статические картинки остаются в прошлом. Комаров Егор.

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

Интерактивные компоненты Framer

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

Все компоненты кликабельны, интерактивны. И это действительно очень круто.

Вы можете в два клика вставить карту, например.

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

Вы можете добавлять интерактивные элементы Soundcloud, Youtube, слайдеров, Инстаграм, чатов и многое другое. Органичений нет никаких. Библиотека просто огромная. Этот подход выводит прототипирование на совершенно новый уровень.

Анимация Framer

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

Больше примеров анимации вы можете посмотреть на официальном сайте. Там их тьма.  

Интерфейс Framer

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

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

В платной версии есть возможно использовать отдельное приложение, но полноценной связи с веб версией там нет.

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

Если вы сильно предпочитаете работать над автономным приложением macOS и состоите в команде профессионалов, то desktop версия может быть лучшим выбором.

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

Перенос проектов между ПК и Интернетом

Проекты не синхронизируются между разными платформами. Однако вы можете загрузить проект из Интернета и открыть его desktop приложении или загрузить desktop проект в Интернет.

Превью прототипов

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

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

Готовые шаблоны

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

Для старта рекомендую вам скачать наглядный проект Volt

Скачать: https://www.framer.com/volt/

Попробовать Framer: https://www.framer.com/