Framer X Beta. Часть 2. Интерфейс. Вкладки Layers, Components и Store.

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

Ссылка на исходный файл

Вкладка Layers

Эту вкладку мы частично затрагивали в первом обзоре. На ней останавливаться не буду. Панель слоёв как в любом другом редакторе уже знакома каждому.

Вкладка Store

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

Пользоваться им достаточно просто. Заходите в Store, выбираете понравившийся пакет, нажимаете Install (установить) и компоненты появляются на вкладке Components. Чтобы удалить пакеты нужно перейти в Store и из раздела Installed нажать Uninstall выбрав в списке пакетов тот, который хотим удалить. Очень коротко и сжато о принципе работы:

Вкладка Components

Компоненты это небольшие строительные блоки интерфейса, которые мы можем компоновать в более крупные блоки, составляя целые экраны, интерфейсы и приложения.

В Framer X есть два типа компонентов, которые, в целом, одинаковые, потому что под капотом React.

Design компоненты— те, что вы рисуете на рабочей области непосредственно во Framer X. Они могут иметь базовый интерактив. Редактировать их можно внутри Framer X. И, по своей сути, работают как символы. Их также можно использовать в Code компонентах по средством импорта в редактор, но об том позже.

Code компоненты — те, что создаются при помощи кода (JS, React). Они могут быть чем угодно. Редактировать их можно только в коде, однако у нас есть возможность использовать также и design компоненты в code компонентах как было написано ранее.

Все компоненты отображаются на рабочей области и холсте, но интерактивные вещи (скрол или то, по чему можно кликать в прототипе) работают только в предпросмотре. Также компоненты можно собирать в любой виде. Так, например, design компоненты могу содержать в себе code компоненты.

Что касается того, как это выглядит на вкладке. То во вкладке Components вашего конкретного проекта будут отображаться вообще все компоненты одним списком : дизайн компоненты проекта, код компоненты проекта, и компоненты, которые были установлены из Store будут лежать в этой вкладке. Звучит это неудобно, но так и есть на самом деле. Возможно это из-за беты, но дизайн систему в Framer X вашего продукта на дизайн компонентах адекватно построить (на данный момент) не представляется возможным. Делаю такой вывод по своему опыту использования бета Framer X. Однако стоит отметить пару моментов, в которых можно оправдать такое решение со стороны команды Framer:

1. Если вы сможете протянуть из фронтенда вашу дизайн-систему в Framer X.
2. Если у вас очень мало компонентов в продукте или вы создаете такой продукт, в котором не так много элементов.
3. Если вы сами пишете с нуля систему на code компонентах (js, react).
4. Это лучше, чем ничего.

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

Design компоненты

Чтобы создать такой компонент, нам нужно:

1. Выделить любой Frame, который мы хотим превратить в компонент.
2. Перейти на вкладку Components.
3. Кликнуть на Create component в нижней части этой панели.
4. Дать имя компоненту и выбрать from Design.

Либо воспользоваться сочетанием клавишь cmd + K. После чего ваш компонент появится на вкладке Components.

Дизайн компонент имеет один master (родителя) и сколь угодно дочерних компонентов. Чтобы создать instance (копию, дочерний и т.д) компонент просто перетащите его из вкладки Components на рабочую область или, удерживая клавишу Option, перетащите master на новое место. Изменения в master компоненте влияют на все копии. В общем-то всё как в символах Sketch или в компонентах у Figma.

Копии можно создавать путём перетаскивания компонента из вкладки Components, Ctrl + C и Ctrl + V, а также удерживая клавишу Option.

Далее я буду усложнять пример. Но перед этим разберемся с иерархией компонентов, а именно: как держать компоненты в более-менее консистентном виде в Framer X. Сразу стоит отметить тот факт, что у нас нет никаких удобных переключателей между компонентами и их категориями. Когда вы даёте имя компоненту, на этом история с иерархией заканчивается (не со всем).

Итак, у нас есть компонент. Предположим, эта плашка служит нам атомом цвета для заливки чего-либо (как в скетче). Добавим этому компоненту логически правильное название — Yellow. Изменять название компонента надо непосредственно на вкладке Layers у master. На вкладке Components такой возможности нет. Окей, добавляем ещё пару цветов с названиями.

Но так хранить компоненты не очень хорошо, когда компонентов будет много. Нужны категории, чтобы ориентироваться быстрее. Чтобы их ввести, нужно (как в sketch или в figma) добавить Название категории / название компонента

Например: Color / Yellow и т.д. Что это дало? Подобное разделение с помощью слеша (/) создаёт категорию.

Второго и третьего уровней вложенности нам создавать никто не даёт. И, к сожалению, это единственный (на данный момент) способ делить компоненты на категории. Однако, я могу ошибаться.

Есть особенность в design компонентах. Если сейчас, имея эти 3 компонента, сделать копию (instance) из любого, а затем удалить его мастер, то компонент останется копией мастера и связь между мастером и копией сохранится. Просто мастер спрячется, но будет хранится на вкладке Components. А вернуть его (master) можно будет из контекстного меню компонента на вкладке Components, если кликнуть по нему правой клавишей мыши и нажать Show on Canvas. Другой способ показать мастер: на его копии вызвать контекстное меню и там выбрать: Design Component — Unhide Master. С другой стороны, если удалить мастер, который не имеет копий, то он удалится совсем, поэтому будьте осторожны. Ниже гифка для демонстрации.

Можно ли design компоненты вкладывать в другие компоненты? Да, можно. Следующий наш design компонент будет кнопкой. Затем сделаем карточку, и список карточек, используя уже знакомый нам Stack, принцип работы которого я разобрал в первой статье. И дажеиз Stack можно сделать design компонент обернув его предварительно во фрейм. Таким образом у нас получится компонент из списка карточек, где выстроенна цепочка связей. И, изменяее мастер какого-либо из компонентов, мы будем видеть изменения везде.

Итак, кнопка. Рисуем фрейм. Называем фрейм например: Button / Primary. Вставляем в него копию нашего цвета. Делаем из этого дизайн компонент (cmd + K). На кнопке должен быть текст.

Берем инструмент текст, пишем что-либо и вставляем в мастер дизайн компонента кнопки. У копий (instance) дизайн компонентов могуть быть редактируемые сущности. В частности текст. Чтобы поменять название редактируемой части с Text на, например, Title, нужно изменить это название у мастера.

Дабы не тратить время я сделал карточку из фрейма, внутри которой лежит картинка, текст заголовка, открывок текста статьи, имя автора и наш дизайн компонент кнопки. Сделал из этого дизайн компонент Card / with Image.

Как видно из видео выше, каждый текстовый блок мы можем назвать так, как это требуется нам, а также у нас появилось изображение как редактируемая сущность в копии (instance).

Теперь мы можем сделать Stack из карточек. Напомню, это делается следующим образом:

1. Берем инструмент Stack.
2. Рисуем произвольную область Stack’а
3. Помещаем в него путём перетаскивания копий нашей карточки.

Осталось лишь обернуть Stack во фрейм и сделать из этого дизайн компонент Card / Stack. И теперь мы можем управлять из мастера порядком карточек. А из компонента Stack редактировать контент. Разумеется, можно не делать из Stack компонент, но для демонстрации я решил эту возможность показать.

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

Мы также можем использовать design компоненты в code компонентах. Последние заслуживают отдельный разбор и статью. Однако слегка продемонстрирую как это выглядит на данный момент.

Чтобы создать code компонент, на вкладке Components нажимаем New Component и выбираем from code, даём название компоненту. Запуститься ваш редактор кода по умолчанию. Если же у вас его нет, то скачайте и установите VSCode.

На данном этапе мы импортируем в проект Stack из (from) “framer”

import { PropertyControls, ControlType, Stack } from “framer”;

Затем наш дизайн компонент (карточку), которая лежит на холсте (canvas)

import { CardwithImage } from “./canvas”;

Присмотритесь, пробелы убираются. Поэтому у нас Card / with Image превращается в CardwithImage.

Далее мы создаём массив постов, где каждый пост это объект, который содержит пару ключ: значение (заголовок, текст, автор и превью изображение).

После чего, внутрь Stack вставляем нашу код, где с помощью метода map перебираем данные из массива и возвращаем их в наш дизайн компонент CardwithImage. Грубо говоря как-то так:

Код компонента:

import * as React from "react";

import { PropertyControls, ControlType, Stack } from "framer";

import { CardwithImage } from "./canvas";

export class Code_stack extends React.Component<{

width: number;

height: number;

}> {

render() {

const { width, height } = this.props;

const posts = [

{

title: "Naomi Osaka’s Breakthrough Game",

text:

"The 20-year-old is poised to burst into the top tier of women’s tennis. Can she also burst Japan’s expectations of what it means to be Japanese",

author: "Brook Larmer, New York Times Magazine",

preview:

"https://images.unsplash.com/photo-1536338701933-9fb6ce505c48?ixlib=rb-0.3.5&s=c523a5236390a99427513975ddf69aba&auto=format&fit=crop&w=675&q=80"

},

{

title: "The Blind Man Who Taught Himself to See",

text:

"John Doe is entirely sightless. So how can he ride a bike on busy streets? Go hiking for days alone? By using a technique borrowed from bats.",

author: "Michael Finkel, Men's Journal",

preview:

"https://images.unsplash.com/photo-1536390438698-ad32baf17649?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=51206aff9a6d85667727dfc7a3894cad&auto=format&fit=crop&w=634&q=80"

},

{

title: "Fiction Pick of the Week: 'Wait Time'",

text: "A woman copes with her husband's terminal illness.",

author: "Katie Runde, Pithead Chapel",

preview:

"https://images.unsplash.com/photo-1536370118071-bf9d8df4f51f?ixlib=rb-0.3.5&s=ef57dedc37747f1a497b509bab8c341a&auto=format&fit=crop&w=634&q=80"

}

];

return (

{posts.map(post => (

Title={post.title}
Body={post.text}
Author={post.author}
Preview={post.preview}
/>
))}

);
}
}
Ссылка на метод map
В целом с design компонентами всё. Как будет время я попробую написать в кратце про code компоненты.
Если вам понравился разбор, я продолжу. Если я где-то был не прав — напишите в комментариях. Интересны также пожелания по следующим разборам. Также не забывайте о том, что есть мой курс по предыдущей версии Framer: ссылка.