Погружаемся во Framer X
Довольно давно я написал статью о связи исследования и дизайна. Тогда я затрагивал общие сведения об артефактах, о том, как их использовать в дизайне, зачем и что из чего следует. Однако один интересный момент все-таки ускользнул от моего внимания.
Допустим, теперь в вашем процессе исследование и проектирование неразрывно связаны, от гипотез и инсайтов вы переходите к историям, они превращаются в сторифреймы, которые метоморфируют в cjm или workflow. Последние обрастают скетчами и становятся всё детальнее. Неотесанные wireframes превращаются в визуально отполированный макет. И на этом я свой рассказ закончил, оставив без внимания огромную дыру того, что происходит дальше.
А что происходит дальше? Макет отправляется к разработчикам, которые препарируют его, измеряют, эстимируют, да и вообще, проводят всякого рода необходимые манипуляции, чтобы превратить статичную картинку в динамичный сервис.
И как раз на этом этапе возникает много вопросов вида «а что куда ведёт?» и «а что будет если нажать вот сюда?». Invision, Marvel или Sketch Prototyping помогают снять боль, но это не панацея.
Помню, как создал прототип одностраничного сервиса с табами, при нажатии на которые менялся контент карточки. Но из-за технических ограничений Invision, пришлось нарезать несколько картинок, чтобы показать состояния. И это было ошибкой, потому как запилилось все отдельными страницами с кучей дублирующего контента на каждой. Это, конечно, редкий случай, но ясно иллюстрирует необходимость постоянного прояснения каждой детали. Гораздо проще было бы просто создать прототип взаимодействия, которое бы выглядело и ощущалось как мы задумали. Чтобы все переходы были очевидны и замкнуты, а анимации можно было бы просто копипастить.
И сейчас я вижу, что многие стремятся к такому уровню: фигма вводит плагины и добавляет gif, sketch-anima позволяет выгружать react-вёрстку, а after effects уже давно может работать с json.
Но сегодня я хотел бы поговорить не о них. Есть инструмент, в который я очень верю. И даже не потому, что он пытается закрыть пропасть между дизайнерами и разработчиками, но из-за тесного комьюнити и постоянной взаимопомощи. Прежде, чем сравнивать его с вашим текущим тулсетом, просто дайте ему шанс. Я говорю о Framer X.
Что такое Framer X?
Изначально, Framer не был отдельно-стоящим приложением. В истоках, он был просто js-библиотекой, которую использовали суровые дизайнеро-кодеры для прототипирования. Но честно скажу, порог входа был так себе: вам нужно было понять основы js, чтобы делать хоть что-то. А то, что все было сделано не на чистом js, а на coffee-script, ещё больше осложняло дело.
Благо разработчики приняли во внимание мольбы о пощаде своих пользователей и запустили Framer Studio — полноценный тул для быстрого прототипирования. Под капотом была все таже либа и coffee-script, но порог вхождения понизился колоссально. Теперь можно было прям накликивать себе анимации, и делать UI прямо внутри приложения, а также копипастить его прям из Sketch.
Звучит круто, но все ещё осталась одна проблема. В проект не мог пойти код и Framer Studio. Он так и остался тулом для прототипирования. Даже когда я впервые использовал этот инструмент для демонстрации, все были приятно поражены, но дальше просмотра параметров анимации дела не пошли. Хэндофф явно уступал тому же Invision или Zeppelin. Может потому, что его не было совсем: кроме как чтения кода, у девелопера не было возможности узнать что и как. А это, вы сами понимаете… такое.
Но команда Framer не опустила руки. Получив немного денег, они полностью переработали инструмент и выпустили его под именем Framer X. Из значительных изменений можно отметить, что coffee-script больше нет. Он уступил место React. То есть, если раньше вы ещё могли трижды подумать, прежде чем погружаться в изучение «стрёмного js», то теперь можете не бояться, что зря потратите время — typescript и поддержка ES6 являются ныне стандартами разработки, так что вы все равно будете в тренде. Не хотите кодить? Не беда, команда значительно расширила стандартный набор инструментов, а чтобы точно закрыть все потребности, создала и store — магазин готовых компонентов создаваемых сообществом (там все бесплатно). Это, а также возможность работы с компонентами вашей живой дизайн-системы, синхронизация с git, а также production-ready анимации делают Framer X действительно заслуживающим внимания.
И при всех этих изменениях, создатели инструмента все равно заявляют, что Framer X остаётся в первую очередь средой для прототипирования, а не создания готовых решений без участия разработчиков. Но я думаю, что пройдет ещё немного времени и дизайнеры станут разработчиками, а разработчики дизайнерами. А Framer X вполне может стать основным инструментом для работы.
Ну а пока, давайте поближе глянем на этого зверя.
Где раздобыть?
Всё довольно просто — framer.com поможет вам справится с этой непростой задачей. Просто качаете и регаете триалку (14 дней бесплатно, а дальше за нереальные деньги в $15 в месяц) и дело в шляпе. Осталось подождать, пока всё загрузится, установится и можно жать на заветную букву «F». Уууух, аж мурашки.
Интерфейс среды
Framer X лишь незначительно отличается от инструментов, с которыми вам приходилось иметь дело. Здесь вы по-прежнему можете найти панель свойств, ресайзов, типографики и экспорта.
А вот вместе с панелью слоев есть ещё несколько режимов: добавление элементов, код-эдитор, магазин компонентов и team-store.
Последний доступен в платной подписке для команд и представляет собой закрытое хранилище компонентов вашей команды. Если захотите потратить немного денег, дайте знать, как оно там. А пока, сконцентрируемся на всем остальном.
Панель Слоев
С первого взгляда, панель слоев мало чем отличается от уже знакомой вам, правда тут есть свои особенности.
Из-за того, что вся область работы представляет собой рендер React-компонентов, все что вы делаете сразу преобразуется в код. Это накладывает свои ограничения, например, здесь нет групп в классическом нашем представлении, так как нет их аналога в коде.
Вместо них здесь используются контейнеры или Frames. Их можно использовать и как прямоугольники или как группы. Стоит забежать немного дальше и сказать, что именно фреймы служат основой для создания анимации и взаимодействия, проще говоря, только на эти контейнеры можно навешивать события.
Как только вы начнёте вкуривать в использование контейнеров, вам сразу бросится в глаза механизм автонестинга. Он очень похож на то, что происходит в Sketch, когда вы перетягиваете слои между артбордами, только здесь вместо артбордов — фреймы, и это происходит постоянно.
Первое время вы это отрицаете, потом это вызывает лютый пригар, затем вы начинаете искать возможность это изменить, но так или иначе, вы принимаете новую парадигму.
Теперь вернёмся к панели свойств. Она ну до жути напоминает скетчовую, но за супер-тонкими мелочами, типа скругления углов или отсчёта координат. Отдельно стоит остановиться на «прилипании» и растягивании.
Ресайзы здесь настраиваются точно также, как и в знакомых вам инструментов — все тянется и плавает в зависимости от привязки. Но если раньше вы не обращали на это внимания, то здесь, из-за построения динамического взаимодействия, когда что-то схлопывается, что-то сужается и ездит, вы будете вынуждены за этим следить. Так что лучше озаботиться этим как можно раньше.
Тем более, гораздо проще показать, что и как изменяется с разрешением, чем делать 100500 скринов.
Стандартные компоненты
Кроме автонестинга и отсутствия группировки в привычном виде, округлиться вашим глазам поможет механизм работы с графикой Framer X. Из-за того, что все, что мы видим на холсте рендериться из кода,теперь нам нужно однозначно определить область с графикой . Можно, конечно и просто так начать рисовать, но будьте готовы, что ваши ваяния будут собраны в один специальный фрейм (Что довольно хорошо, с учётом лени собирать графику самостоятельно).
Все основные инструменты работы с графикой наличествуют: простые формы, кривые, булевые операции.
И при этом, работа с графикой — не самая сильная сторона Framer X, как и работа с типографикой. Она вполне приемлема, но если вы хотите прям супер-про уровень, то здесь вы его не найдёте. По крайней мере в релизах на день публикации статьи.
Но знаете что? Во фреймер можно вставлять вашу работу из Sketch. Копипаста работает не сказать, что сверх-прекрасно, из-за несовместимости некоторых фич(типа стилей или особенностей символов), но вам останется только чуть-чуть дополишить вашу работу.
Так что всю графическую работу вы можете оставить на откуп специализированным пакетам, а сами сконцентрироваться именно на проектировании взаимодействия. А в этом нам помогут другие стандартные компоненты.
Например, stack, page и scroll. Все они достаточно очевидны и при этом мощные, чтобы создавать действительно крутые вещи.
Stack решает проблему нормального распределения элементов и незаменим при построении списков, таблиц и навигации. Что-то подобное сейчас есть и в Sketch, но явно не такое гибкое, Figma точно поближе, хоть и не дотягивает.
Page позволяет вам сделать листалку чего бы то ни было: от карточек до экранов.
Со Scroll все просто: что подключите, то и будет листаться внутри области.
Работа со всеми этими компонентами строится по одному принципу: сперва назначаете область взаимодействия, а после подключаете контент, который там будет. Все просто, как дважды два.
Но настоящая магия начинается, когда вы начнёте объединять компоненты и использовать друг в друге. Например, вы можете создать два фрейма с разными списками(Stack) и подключить их как страницы (Pages), получив табы.
Из-за таких вложенностей ваш холст может выглядеть немного хаотично, в отличии от упорядоченного пространства арбордов-экранов, но в скором времени и к этому привыкаешь.
Символы и Библиотеки
Пока все выглядит довольно неплохо, но на мой взгляд, Framer X, действительно раскрывает свой потенциал в системном подходе к работе.
В уже знакомых нам инструментах используется парадигма символьных компонентов: у нас есть мастер-компонент, в копиях которого вы можете изменять какие-то свойства, так называемые оверрайды. И во Framer X сохранена эта парадигма :)
Все точно так же, за исключением того, что компоненты(так здесь называют символы) можно создать из дизайна, а можно из кода. Да-да, можно кодить дизайн. Но к этому мы ещё вернёмся, а пока — на землю.
Работа с компонентами ближе к Figma, чем Sketch. То есть наличествует частичное наследование (можно что-то двигать, а недвинутое будет как в мастере) и редактирование текста на лету (с недавнего времени сие есть и в Sketch).
Но есть и интересные различия. Например, если говорить о создании atomic-дизайн-систем, то есть некоторые улучшения работы с атомами. Так называемые shared colors. Внешне они похожи на знакомые пресеты цветов, но работают они иначе, скорее, как переменные (как в Figma).
То есть, добавляя какой-то цвет в палитру, а затем назначая его частям ваших компонентов, вы ссылаетесь на переменную. А значит, если цвет изменится, то изменится везде, где был заявлен. Чем-то этот механизм напоминает стили, только такие цвета будут работать и для текста, и для графики, и для фреймов. Причем эти цвета можно импортировать прямо в код и забыть о hex’aх.
Но если продолжать разговор про atomic-design, следующим шагом будет создание и распространение библиотеки. И в этом смысле аналогами выступают figma-components и sketch-library, которые можно шарить внутри команды используя тот же Abstract, Versions а то и Dropbox на худой конец. Framer X решает эту проблему из коробки, используя механизм паблишинга пакетов.
То есть в нём есть возможность создавать компоненты и объединять их в пакеты и опубликовать в общем магазине. Таким образом он станет доступен всем пользователям, которым будут приходить и апдейты.
Такой механизм даёт нам всем возможность окунуться в волшебный мир готовых компонентов и гибких решений, когда нам нужно спрототипировать ваше решение и провалидировать его как можно быстрее. Причём, уже сейчас многие компоненты решают боли дизайнеров, с которыми они сталкиваются каждый день: например работа с картой, генерация профилей или целые функциональные дизайн-системы.
Просто находите что-то интересненькое, устанавливаете в проект и используете.
Конечно, если вы хотите закрыть то, над чем работаете от блудливых глазок сообщества, вам придётся немного доплатить за team-plan. Зато ваши наработки будут надёжно защищены.
Положительным моментом и отличительной чертой создания таких компонентов во Framer X будет то, что компоненты интерактивные. Больше никакого нагромождения стилей. Больше никаких тысяч состояний кнопок. Всего один гибкий компонент. А в дополнение к нему вы получаете анимированные переходы между состояниями и алгоритмы сложного взаимодействия. Хоть и придется замарать руки в коде.
Работа с разработчиками
Кстати вам не обязательно все писать самому. Высшим пилотажем будет использование для дизайна той же библиотеки, что используют ваши front-end разработчики (при условии, что юзают они React). По крайней мере, я считаю, что это хлеб с маслом любой дизайн-системы.
Провернуть подобное, честно скажу, занятие не из простых, но вполне возможное. Для того команда Framer даже создала специальный инструмент — bridge. Вы никак его не увидите, у него нет UI, но он отлично справляется со своей функцией связи git-репозитория ваших разработчиков и пакета вашей библиотеки во framer-store. То есть образуется двусторонняя синхронизация.
И хоть это то, чему мы так давно стремились, я бы не советовал с этого начинать, ибо рискуете откусить кусок, которым задохнётся ваше желание дальше изучать инструмент.
Вместо этого, я бы рекомендовал попытать счастье сперва на небольших дизайн-компонентах, а после начинать бомбить код.
Кстати, вы можете начать экономить $50 на Abstract, перекатившись на обычный git. Дело в том, что проект Framer X — это обычный React-проект, не требующий дополнительных усилий на отслеживание изменений. А потому, накатить версионность проще простого: достаточно изменить тип проекта на репозиторный(сменить расширение с framerx на framerfx), а после просто закинуть в GitHub.
Вдобавок, вы получаете чуть больше лояльности от разработчиков, ибо им не нужно изучать новые инструменты, заводить новые учётки и т.д. Они просто могут использовать то, к чему привыкли.
Кстати, многие ругают Framer X за то, что он не интегрируется с hand-off сервисами, такими как InVision или Zeppelin. Дескать, как же бедные разработчики будут смотреть, что и как? На это есть простой ответ.
Для хэндофф при работе с framer X, сторонние сервисы не требуются: вы просто экспортируете для веб-превью и вуаля. В ваших руках окажется react-проект, который запускается в браузере с любимыми dev-tools разработчиков.
Прототипирование
Вот так постепенно мы подбираемся к основной сути Framer X: быстрому прототипированию. Компоненты, о которых речь шла выше бесспорно помогают ускорить процесс, но это далеко не всё, на что способен Framer. Сильной его стороной являются взаимосвязи между этими компонентами, кастомная логика и анимации, которыми можно вывести ваш прототип на новый уровень. Но обо всём по-порядку.
Из существующих решений, нам всем знакома концепция hot-spot’ов, когда на картинке выделяется область, определяется пункт назначения, выбирается модель перехода и вот у нас уже связанный прототип. В копилку можно отнести прототипирование в Figma или Sketch. И Framer имеет свой аналог быстрой связи. Он так и называется — link. Назначить его можно каждому контейнеру на вашем холсте, так что любой элемент способен стать интерактивным.
Но на этом веселье не заканчивается, я бы сказал оно только начинается. Готовы замарать руки в коде? Погнали.
Хотя на самом деле я преувеличиваю. С Framer можно работать и без особо глубоких знаний кода. Конечно что-то придётся пописать, но знаете, сложность сего действия сопоставима с забиванием значений в форму с инпутами. Просто вы делаете это, как большие дяди в специальном редакторе. Тем более, что у вас будет в распоряжении файл с примерами.
Что произошло на гифке выше? Я просто назначил фрейму функцию из файла с примерами, которая вращает его по клику. Ничего писать не пришлось. Но если вы заметили, у кнопки поменялся и цвет — а это уже немного хардового кода, которого все так боятся :) Давайте же посмотрим в глаза нашему страху.
В красном прямоугольнике то, что мне пришлось дописать… как-то не так понтово, как я расчитывал.
whileHover: { backgroundColor: colors.Mid_blue}
whileHover — это функция, которая отслеживает событие (её можно заменить на whileTap, например). За ней следуют фигурные скобки в которые помещаются параметры для изменения. В нашем случае — это backgroundColor. Через «:» присваивается новое значение. Вместо «colors.Mid_blue» вы можете поставить любой #hex, однако я намеренно показал, как можно использовать в коде shared colors.
Вот и всё. Магия? Не думаю.
Все, благодаря волшебной силе react, и умелым руками команды Framer X. Но это если не вдаваться в детали. Сейчас не время грузить вас жизненным циклом компонента и прочими премудростями, тем более, я не могу быть на 100 процентов гарантировать правильность и своих знаний в этом вопросе (уж извините).
Думаю, я покажу ещё одну штуку, и вам этого хватит с головой, если вы захотите окунуться глубже в этот чудесный мир комплексного прототипирования. Штука эта называется Overrides.
Покажу на примере.
Матерь! Что же произошло?! Так перестаньте звать инквизицию. Просто Framer X предоставляет нам возможность хранить некоторые данные в объекте Data. Уберите слабонервных и детей от экрана — нужно будет снова смотреть в код.
Как вы можете заметить, после импорта всего необходимого, идёт создание экземпляра объекта Data. И в нём, в фигурных скобках мы указываем всё, что нам нужно будет хранить (булевые переменные состояний, размеры или строки имени). Нас интересует последняя строчка перечисления — name: “Vanilla Thunder”. Именно здесь и хранится наше имя.
Ниже следует функция GetName, которую я задал компоненту «Input». Она отслеживает изменения введённых букв и записывает их в нашу переменную.
Третью функцию SetName я соединил с текстовым слоем. По сути она просто читает переменную и перезаписывает текст.
Вот и всё.
Анимации
Не так давно я узнал, что Figma добавила поддержку gif в свой продукт, чему обрадовалась значительная доля пользователей. Те, кому статичной картинки было недостаточно, теперь могут оживлять свои прототипы, показывая, как должны происходить переходы, что должно появляться и как.
Но что, если бы у нас была возможность описывать подобное не просто анимированной картинкой, а production-ready анимациями, которые разработчик может интегрировать в проект копипастой?
Такая возможность есть во Framer X, благодаря их библиотеке Motion. Она доступна, как отдельно-подключаемый модуль, так и интегрирована в сам инструмент, что делает создание анимаций простым и интересным делом. Примерчики:
Если честно, я бы хотел включить гайд по анимации во Framer X, но пост и так разросся до неимоверных размеров, да и приводить примеры из доки — такое себе.
Посему, я просто поделюсь ссылочкой на API по анимации, но если вы захотите, я с радостью посвящу этой теме отдельный пост.
Как дальше жить?
Если вас, как и меня максимально занял это инструмент, то предлагаю всем вместе его и изучать. Ребята из Framer поняли, что людям сложно и пишут просто неимоверно прекрасную спецификацию по тому, как и что делать.
Так же у Framer есть своё сообщество на Spectrum, где люди делятся идеями, отвечают на вопросы.
А также, если вы из Беларуси, то предлагаю вам вступить в сообщество и делать там тоже самое, но на русском :)
Ну и, конечно, задавайте вопросы, делитесь мнениями, ставьте палец вверх, хлопайте в ладоши…
Я же в свою очередь, напомню, что у меня есть канальчик в телеге, на котором я делюсь всякими интересностями и своим мнением о них. Только контент, хоть и не регулярный :)
Ещё раз, спасибо. желаю вам счастья-здоровья, корабль любви, чугунный мост достатка. До новых встреч.
