Компания Framer в июле 2018 года анонсировала новый продукт. Уже в сентябре он вышел в релиз из беты. Продуктовый дизайнер Павел Лаптев раскладывает по полочкам, что из себя представляет новый Framer X, какими привилегиями и недостатками обладает и чем отличается от себе подобных.

Многим дизайнерам, которые занимаются мобильными приложениями и прототипированием, знакомо название Framer Studio – это legacy продукт, инструмент для прототипирования на JavaScript, на смену которому пришел Framer X. Framer Studio все еще можно пользоваться, но его обновление прекратится. Прежде, чем начать говорить о Framer X, начнем с обзора старого Framer Studio, как прародителя нового продукта.

Старина Framer Studio

Когда-то Framer был просто JS библиотекой. Framer Studio – это графическая оболочка для Framer.js, в которой можно не только писать код, но с недавних пор еще и делать дизайн. Условно приложение было разделено на две части: design mode и code mode – в одном рисуем, в другом пишем. Но это не просто две разные части программы – через code mode можно дотягиваться до дизайна, который был создан в design mode. Хотя до середины 2017 года Framer был предназначен только для кода. Таким образом Framer перешел из разряда чисто code-ориентированных инструментов прототипирования ближе к дизайнерам.

Источник изображений: blog.prototypr.io

Он не такой как все

Framer всегда стоял особняком от остальных инструментов прототипирования. Если посмотреть на рынок такого рода инструментов, то все они в большинстве похожи между собой . Пытаясь быть неким подобием After Effects, с таймлайном, пресетами экранных переходов, некоторые из них даже позволяют повзаимодействовать с прототипом, не будучи соединенными с телефоном. То есть автономно, что очень важно для тестирования на пользователях.

Framer с самого начала выгодно отличался на фоне конкурентов. Он позволял уйти от паттернов, сделать нечто отличное – кастомную анимацию, нелинейные взаимодействия с объектами приложения и, что самое главное,  давал возможность работы с настоящими, живыми данными. То есть дизайнер мог взять JSON файл с 20 объектами фейковых кредитных карт (номер, срок карты, тариф) и сгенерировать на его основе интерактивный список карт. В другом приложении он бы потратил уйму времени, вбивая это всё вручную. Скорее всего, он бы пошел на компромисс с самим собой и попытался сэкономить время, сделав всего 2–3 карты или много карт, но только 2 из них бы были интерактивными. А на тестах говорил бы, что кликаются только первые две. Или, например, в Framer можно было бы подключить реальные данные из firebase, создать чат и прототип, который бы помнил предыдущие взаимодействия и события в прототипе. В общем, это было бы очень похоже на реальное приложение.

Сложно, но возможно

По сравнению с остальными инструментами Framer имеет высокий порог входа, так как тут необходимо знать основы кода  –  как работают переменные, синтаксис coffeeScript (JS препроцессор) или, например, что такое «циклы».

Чтобы нивелировать эту проблему, Framer имеет очень понятную и подробную документацию. А также API, методы и классы, уже написанные для создания типичных вещей, таких, как скролл, пагинация, drag`n`drop, различные виды анимаций, видео слои и прочее.

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

Но не всё так безоблачно. Высокий порог входа – не единственный фактор, который может остановить от использования данного инструмента. Это еще и скорость создания макета. В отличие от полностью UI-ных программ, где создание небольшого флоу займет около 10 минут, Framer потребует от вас значительно больше, если вы не самый опытный пользователь. Инструмент больше подходит для high-fidelity прототипов, хотя делать быстро и «грязно» в нем тоже можно.

Фишка: FramerCloud

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

Подводя итог о legacy FramerStudio, можно уверенно сказать, что данный инструмент не имеет аналогов на рынке, в отличие от Principle или InVision Studio, которые идут по другому пути. Framer же говорит: «Окей, у нас есть для тебя пресеты и шаблоны, но если ты захочешь, то для тебя не будет границ». Democracy in action. Теперь перейдем к обзору Framer X.

Что такое новый Framer X?

Новый Framer – это всё так же инструмент для прототипирования, но абсолютно новый под капотом благодаря нескольким важным отличиям.

React

Framer X – это место, где React встречает дизайн. Фактически это дает возможность писать настоящий React код и использовать все его возможности, то есть делать настоящие компоненты не только в коде, но и в дизайне.

Компоненты

Несмотря на то, что в Framer теперь есть react-компоненты, создавать их можно двумя способами — из кода и из «дизайна»:

Первый  – возможность создавать дизайн-компоненты. То есть делать компонентом любой нарисованный в canvas элемент, исключая векторную графику. Но и её можно превратить в компонент, вложив в слой, который в Framer X называется “Frame”.

Дизайн-компоненты очень схожи с компонентами в Figma. То есть существует мастер-компонент и его копия (instance). Все изменения, сделанные в мастере, немедленно отобразятся и в копии. Также присутствует возможность менять свойства копии, что очень удобно, когда вы делаете разные модификации одного компонента, как, например, кнопка.

Второй – это способ создавать компоненты из кода. Это значит, что при нажатии на копку “create component from Code” Framer X откроет редактор кода c шаблоном компонента, который вы сможете переписать. В качестве редактора кода Framer советует использовать Visual Studio Code от Microsoft. Это логично, ведь текущая версия Framer X написана с использованием TypeScript (препроцессор JS, который позволяет писать типизированный код), который также является детищем Microsoft. Кроме того, VS Code имеет много фичей для работы с TypeScript.

Итак, Framer избавились от вкладок Design mode и Code mode – теперь в программе есть единственное поле (канвас), где вы редактируете компоненты через UI. Всё, что касается кода, ложится на плечи стороннего редактора кода или IDE. Это хорошо, поскольку встроенный редактор Framer не давал ничего, кроме хинтов и автоподбора при написании. Хотя это и было полезно. Но с внешним редактором возможностей настройки гораздо больше.

Так же есть окно preview и возможность посмотреть прототип в браузере. Скопировав линк превью, можно его посмотреть и на других устройствах. Главное – подключение к одному wifi.

Смешивание компонентов

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

Дизайн

Работа над дизайном в Framer X стала похожа на Figma, только с более широкими возможностями перезаписи. Пока нет опции работать со стилями текста и цвета, но думаю, что Framer смотрит в эту сторону. В остальном всё на месте: настройка респонсивности компонента или элемента, точки привязки компонента, работа с векторной графикой с последующим экспортом . Добавилась новая оболочка для элементов Stack Component, которая позволяет позиционировать элементы относительно с использованием CSS flexbox, правда, пока пропал Page Component.

Прототипирование

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

Overrides

Overrides или дословно «перезапись» – это еще одна фича нового Framer. Если просто, то это экшены  – команды, которые можно присвоить любому из компонентов, перезаписать свойства или поведение. Overrides пишутся непосредственно внутри скрипта app.tsx, поэтому реюзабельными или компонентно-ориентированными их трудно назвать. Однако они позволяют легко перезаписывать свойства любого компонента, анимировать его, а также связывать с другими компонентами прототипа.

Framer Store

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

Устанавливается набор достаточно просто  –  нажатием одной кнопки. А дальше всем знакомым drag’n’drop компонент перетаскивается на canvas и настраивается по желанию дизайнера.

Для кого создан Framer X?

Философия Framer X осталась всё той же  –  это инструмент для людей, которые любят творить без ограничений, использовать не только зашитые в программу возможности, но и выходить за их границы, исследовать и создавать своё. Нельзя сказать, что новый Framer предназначен только для людей с бэкграундом кодера. Напротив, компания пытается расширить свою целевую аудиторию. В доказательство этому Store, компоненты и новый стиль пролинковки экранов.

Если вы дизайнер без знания кода, вам будет легко собрать прототип. Если нужен видео-компонент или аудио-плеер, его можно взять в Store. А так же легко модифицировать не только через панель настроек, но и отредактировав исходный код под свои потребности. Ну, а если вы разработчик или дизайнер со знанием кода, то тогда Framer X может стать инструментом №1.

Производительность

С этим всё стало так, как нужно. Сейчас при создании компонента он будет таким, каким вы его напишете. И нажимая кнопку inspect element в браузере, вы не схватитесь за сердце увидев DOM-дерево. Например, возьмем простой компонент div-элемент, внутри которого находится надпись – span-элемент. Давайте сравним, как это выглядит в старом и новом Framer.

Framer Studio:

Framer X:

То есть в старом Framer вместо двух элементов у нас их целых 7. Представьте, что будет, если таких объектов 20 на странице  – вместо 40 в DOM-дереве их будет уже 140. Не сложно представить, как это скажется на производительности.

Еще один плюс использования React – это собственно его реактивность. Он не работает непосредственно с DOM-деревом, которое требует много затрат и не предназначено для создания динамического пользовательского интерфейса. React же делает все расчеты «за сценой», работая с так называемым virtual DOM.

Минусы Framer X

Они есть. Это и слабая связка, интеграция дизайн-компонентов с код-компонентами, довольно таки неподробная документация  –  о многом приходится догадываться, отсутствие некоторых полезных вещей, к которым привык в старом Framer.

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

Подводя итог

• Framer X всё так же помогает дизайнерам пробить барьер «Дизайнер VS код».
• Может быть, код стал немного сложнее из-за того, что Framer X отказался от использования CoffeeScript. Но зато появилась возможность писать современный код, по стандартам ES6, чего нельзя было сделать с CoffeeScript. А значит все новые решения в разработке мы может использовать уже сейчас.
• Framer X стал быстрее, производительнее. Это действительно круто, ведь от этого зависит, какой сложности прототип в нем теперь можно собрать, какой длины сделать флоу и так далее.
• Возможность быстрой установки готовых компонентов из Store.
• При разработке компонентов  – вся сила React и работа с модулями через пакетный менеджер Yarn.
• Возможность создания без танцев с бубном валидных HTML элементов, таких как input. В предыдущем Framer для создания подобного элементарного элемента необходимо было устанавливать сторонние модули, которые не всегда работали.
• Пишут, что код станет труднее писать, ведь React не терпит «грязного» кода. А в legacy можно было накидать некачественный код за 10 минут и рабочий прототип был готов. Это не совсем так  –  React терпит такой код и даже TypeScript тут не поможет, просто изменился синтаксис его написания. А на вопросы, что и где нужно написать, какие методы использовать, ответит подробная документация.
• Визуальные инструменты для перелинковки экранов.
• Preview-режим стал лучше в плане шаринга и частоты  – ничего, кроме прототипа (хотя в будущем, возможно, сверху будет накручен дополнительный UI).
• Создание не только собственных компонентов, но так же прикручивание к ним UI контролов и модификация компонентов через панель настроек.

Заметно, что Framer думает о будущем и Framer Х – это новая ступень продукта. Более технический разбор Framer X о том, как создавать code-components и какие дополнительные инструменты использовать, можно прочитать тут.

Ранее Telegraf.design писал, чем до релиза из беты был плох и хорош новый Framer X.