Framer X Beta. Часть 1. Интерфейс. Вкладка Tools. – Дизайн-кабак

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

Экран приветсвия

Теперь по порядку. На вступительном экране мы видим уже знакомые нам элементы и привычный функционал:

1. Посмотреть видео на оф. канале youtube.
2. Посмотреть заготовленные примеры.
3. Открыть страницу документации
4. Открыть страницу обновлений.
5. Список недавних/последних открытых проектов
6. Открыть/создать проект

Интерфейс Framer X Beta.

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

Как видно из гифки выше, теперь у нас есть темная тема! Night mode если точнее. Переключаться между двумя режимами можно с помощью горячих клавишь Ctrl + Cmd + N или через меню Window > Night/Day Mode.

Далее я расскажу про инструменты, слои, компоненты, магазин модулей и просмотр прототипа.

Вкладка Tools / Инструменты

Интерфейс Framer будет знаком большинству дизайнеров, которые уже имели возможность работать в любом современном редакторе для проектирования интерфейсов. Поэтому заострять внимание на всех инструментах я не стану и рассмотрю только Frame, Stack, Link, Scroll.

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

В Framer X Beta у нас больше нет влкадки Code. Однако, появились компоненты и React! Но об этом потом. Теперь рассмотрим инструменты Frame, Stack, Link и Scroll во вкладке Tools.

Frame / Фрейм

Первым инструментом на вкладке Tools будет Frame (далее Фрейм). Фрейм — это контейнер или строительный блок если хотите. Также фреймы служат нам артбордами. Создать их просто: при нажатии на клавишу F или по клику на иконку фрейма в левой панели инструментов. Далее, после выбора этого инструмента, справа активируется панель с заготовленными фреймами (артбордами) популярных устройств. Кликая по ним, можно создать фрейм. Чтобы создать фрейм произволного размера вам нужно всего лишь выбрать инструмент, сделать клик и не отпуская потянуть на нужные вам пропорции для фрейма и затем отпустить левую клавишу мыши. Для быстрого создания фрейма или добавления нескольких объектов в фрейм: Cmd + Enter

Ниже вы можете увидеть гифки, где будет показано как создавать фреймы из заготовок и как создавать их произвольного размера:

Кликаем по иконке или нажимаем клавишу F. Теперь, если рисуем с зажатой клавишей Shift, у нас будет квадратный фрейм.

Делаем то же самое без Shift и рисуем фреймы произвольной формы.

Выбрав инструмент фрейм, мы можем выбрать из панели справа заготовленные размеры фреймов популярных устройств. После клика на заготовку вкладка переключится с Tools на вкладку Layers. Нам пока туда рано. Кстати, работая какое-то время в программе, я не совсем понял почему разработчики так поступили. Ведь после использования любого инструмента на вкладке Tools вас всегда перекидывает на вкладку Layers. Извините, но иногда это бесит, но может я придираюсь. Поэтому возвращаемся на вкладку Tools и выбираем снова инструмент фрейм (или используем клавишу F). Теперь вы увидете снизу и срава от только что созданного фрейма темные области. Если по ним кликнуть, то создастся новый фрейм такого же размера. Учтите, что это работает только тогда, когда вы создаете фреймы из заготовок так как они, как уже было сказано ранее, привязаны к девайсу. Чтобы понять это просто создайте такой фрейм, затем выделите его и посмотретите на правую панель. Вы увидете Device с выпадающим списком, где текущим значением будет выбранное вами устройство. Для тех, кто уже знаком с предыдущей версией эта информация не является новой.

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

Stack / Стек

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

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

Использовать стеки легко. Вот пошаговая инструкция:

1. Нам нужно выбрать инструмент Stack на вкладке Tools кликнув по его иконке или воспользоваться клавише S.
2. Нарисовать область будущего стека, куда мы положим элементы.
3. Выделить несколько элементов и перетащить в область стека все элементы. Вы также можете это сделать перетащив каждый элемент по отдельности.
4. Настроить стек так, как вам нужно. Например, вы можете изменить направление (Direction) по горизонтали или вертикали, тип распределения (Distribute) и выравнивания (Align) элементов, расстояние между элементами (Gap), а также внутренние отступы (Padding).

Но лучше любой инструкции, наверное, это всё объяснит гифка с процессом. Я возьму карточку, которую сделал в предыдущем разделе. Продублирую ее. Изменю цвета и заголовки. Затем нарисую стек, а в финале закину карточки внутрь стека и настрою сам стек.

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

Помимо создания стеков для группы элементов, вы можете создавать стеки внутри стеков. Делая какой-то из них родителем, а другой стек дочерним элементом.

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

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

1. Поместим заголовок ‘You may also like…’ в стек. Возможно вы уже догадались, что получится в итоге.
2. Затем поместите новые виды карточек в отдельный стек
3. Оба стека поместите в третий стек.
4. В итоге получится стек родитель, в котором лежит стек с заголовком и стек с карточками шарфов.

Разумеется каждый из стеков желательно настраивать, если вам это необходимо для достижения какого-то результата.

Далее дублируем стек со свитерами. После этого добавляем получившиеся три стека в один родительский стек. Настраиваем и получаем достаточно макет построенный на стеках. В целом у меня на этом всё про стеки и теперь вы можете практиковаться самостоятельно.

В новом Framer на вкладке Tools появилось два новых инструмента, которые ускоряют и упрощают создание простых интерактивных прототипов и понижают немного порог входа. И сейчас мы их рассмотрим: Link и Scroll.

Link / Ссылка

Link — создает переходы между экранами и/или состояниями экранов. Для создания перехода вам нужно:

1. Выделить фрейм. Да, работает только с фреймами.
2. Нажать клавишу L или кликнуть из панели слева на иконку Link и выбрать тот фрейм (target — цель), переход к которому будет осуществлён.
3. Настроить сам переход (transition) и его направление (direction).

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

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

Итак. В наш файл я добавляю новый артборд, на котором создам обычную кнопку. Помним, что Link работает только с фреймами. Поэтому кнопку я создам при помощи Rectangle и Text инструментов, а затем добавлю их в фрейм. Только для наглядности того, что это работает только с фреймами. После этого я выделяю фрейм с кнопкой, затем выбираю инструмент Link и указываю экран (target), который мы увидим кликнув на кнопку.

Scroll / Скролл

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

1. Нарисовать скрол там, где он должен быть.
2. Затем прикрепить скролл к списку, который должен скролится
3. Настроить скролл.

Что касатеся настроек, то мы можем изменять направление скролла(direction), блокировку скролла сразу по двум осям: x или y (lock/unlock) и включать/отключать колесо мыши (wheel).

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

Что мы должны поменять? Вот что:

Создать фрейм с именем Scroll(или назвать как угодно) девайса iPhone 8 — это такой же девайс как у экрана со списом товаров. Добавить на этот экран Scroll компонент, выбрав и нарисовав его из вкладки Tools. Затем указать тот фрейм, который будет отображаться в скроле. Контент этого фрейма мы, собственно, и будем скролить. В целом на этом можно было бы закончить, но у нас есть блок You may also like. Контент которого расположен горизонтально. А это ещё одна возможность попрактиковаться со скролл компонентом. Итак:

Берем стек с этим блоком (scarfs). и перемещаем его на новый фрейм (scarfScroll). Размер этого нового фрейма делайте таким что бы он соответствовал контенту всего стека.

Затем заменяем оригинальный ‘You may also like’ блок на скролл компонент и настраиваем его.

Вот и всё. Теперь у нас есть построенный на стеках макет с дочерними стеками и скроллами. Последний штрих: изменить цель(target) синей кнопки на экран, где лежит скролл.

Вместо заключения у меня, как и у остальных, возниколо много вопросов: Где Page Component? Где режим Code? И т.д. Но, думается мне, ребята из Framer знают куда идут и сделают всё на достойном уровне. У всего, что есть в бете уже — большой потенциал.

Если вам понравился разбор, я продолжу. Если я где-то был не прав — напишите в комментариях. Также не забывайте о том, что есть мой курс по предыдущей версии Framer. Ссылка.