Коротко
Компонент в Morfa — образец элемента, от которого делают связанные копии, экземпляры: выделите фрейм и нажмите «Создать компонент» (⌥⌘K). Свойства четырёх типов — «Вариант», «Логическое», «Текст» и «Замена экземпляра» — добавляют кнопкой «+» в разделе «Компонент», а меняют на экземпляре в разделе «Экземпляр».
Виды и состояния одного элемента собирают в набор вариантов. Компоненты публикуют в библиотеку команды, а в коде они становятся React-компонентами: свойства — пропсами, варианты — union-типами.
Что такое компонент и экземпляр
Компонент, или основной компонент, — образец элемента, который собирают один раз. Экземпляр — его копия, связанная с образцом: поменяйте в компоненте скругление или цвет, и все экземпляры в файле поменяются вместе с ним.
Экземпляр можно настроить на месте: сменить текст, цвет, скрыть иконку. Такие отличия хранятся как переопределения, а всё остальное экземпляр по-прежнему берёт у образца. Во вкладке «Дизайн» у компонента есть раздел «Компонент» (у набора — «Набор вариантов», у одного варианта — «Вариант»), у экземпляра — раздел «Экземпляр» с такими действиями:
«Сбросить все изменения»
Убирает переопределения: экземпляр снова выглядит как образец.
«Отсоединить экземпляр» (⌥⌘B)
Превращает экземпляр в обычный фрейм без связи с образцом.
«Отправить изменения в основной компонент»
Переносит правки экземпляра в образец, и они расходятся по всем копиям.
«Перейти к основному компоненту»
Находит образец, даже если он на другой странице. Рядом — «Выбрать все экземпляры».
Как создать компонент и поставить экземпляр
Компонент делают из фрейма, группы или любого слоя. Обычно элемент сначала собирают на автолейауте, чтобы он растягивался под текст, и только потом превращают в компонент.
Соберите элемент
Нарисуйте фрейм, положите внутрь подпись и иконку и включите автолейаут клавишей ⇧A.
Создайте компонент
Выделите фрейм и нажмите ⌥⌘K («Создать компонент»). Если выделено несколько слоёв, команда «Создать несколько компонентов» сделает компонент из каждого.
Опишите его
В разделе «Компонент» есть поле описания: коротко напишите, для чего элемент и где его ставить.
Поставьте экземпляр
Откройте «Ассеты» (⌥2): щелчок по компоненту ставит экземпляр в центр экрана, а перетаскивание — во фрейм под курсором. Ещё один путь — «Создать экземпляр» в меню «⋯» раздела «Компонент».
Как собрать набор вариантов
Варианты — это виды и состояния одного компонента: основная и контурная кнопка, состояния «Обычная», «Наведение» и «Отключена». Все варианты лежат в одном наборе с пунктирной рамкой, а на экземпляре их переключают выпадающими списками.
Из одного компонента
Добавьте свойство «Вариант»
Выделите компонент и в разделе «Компонент» нажмите «+» рядом со словом «Свойства», затем выберите «Вариант». Компонент станет набором вариантов со свойством «Свойство 1».
Назовите свойство и значения
Щёлкните по свойству: в открывшемся окне его можно переименовать, например в «Состояние», и поменять названия значений.
Добавьте вариант
Нажмите «Добавить вариант» под списком свойств или круглый «+» под набором на холсте. В наборе появится копия выделенного варианта.
Измените копию
В разделе «Вариант» задайте ей значение, например «Наведение», и поменяйте заливку. Если у двух вариантов совпадут все значения, редактор предупредит.
Из нескольких готовых компонентов
Выделите компоненты и выберите «Объединить как варианты» — в разделе «Компоненты» или через «Действия» (⌘K). Значения редактор возьмёт из названий: компоненты «Кнопка/Основная» и «Кнопка/Контурная» станут набором «Кнопка» с двумя значениями, а имена вида «Вид=Контурная, Состояние=Наведение» сразу разложатся на два свойства.
Весь путь на примере кнопки с состояниями — в гайде как сделать кнопку с вариантами.
Какие бывают свойства компонента
Свойство — то, что меняют на экземпляре, не трогая образец. Свойства добавляют той же кнопкой «+» рядом со словом «Свойства» и выбирают тип. Новое свойство открывается с выделенным названием, так что его можно сразу переименовать.
| Тип | Что меняет на экземпляре | Как связать со слоем |
|---|---|---|
| Вариант | Выбирает один вариант из набора: вид «Контурная», состояние «Наведение» | Значения задают самим вариантам |
| Логическое | Показывает или скрывает слой, например иконку | Кнопка свойства в разделе «Слой», рядом с глазом |
| Текст | Меняет надпись: «Позже» вместо «Кнопка» | Кнопка свойства в разделе «Текст» |
| Замена экземпляра | Подменяет вложенный экземпляр другим компонентом: одну иконку на другую | Нужен ещё один компонент в файле; выбор сужают «Предпочтительные значения» |
Свойство можно завести и от слоя. Выделите слой внутри компонента, нажмите кнопку свойства в разделе «Слой» (для видимости) или «Текст» (для надписи) и выберите «Создать свойство»: редактор создаст свойство с текущим значением и сразу привяжет к нему слой. В окне свойства есть значение по умолчанию, список привязанных слоёв с кнопкой «Привязать слой» и «Удалить свойство».
Если внутри компонента лежат другие экземпляры, в меню «+» есть список «Свойства вложенных экземпляров». Отметьте вложенный экземпляр, и его свойства появятся прямо в экземпляре большого компонента: например, вид кнопки внутри карточки.
Как использовать компоненты в других файлах
Компоненты попадают в другие файлы через библиотеку. Команда «Файл → Опубликовать библиотеку…» публикует компоненты, наборы вариантов, стили и коллекции переменных; к публикации можно приложить описание «Что изменилось».
Другой файл подключает библиотеку в окне «Библиотеки» — это кнопка-книга в «Ассетах». Когда автор опубликует новую версию, в файле покажется сообщение «Доступны обновления библиотеки…», а в окне «Обновления библиотек» будет видно, что было и что стало, с кнопками «Обновить» и «Обновить все».
Библиотека видна только внутри своей команды или в личных файлах одного аккаунта. Как вести общую библиотеку, описано на странице для дизайн-систем.
Во что превращается компонент в коде
В режиме «Код» (⇧D) компонент показан как React-компонент с пропсами, а «Экспорт в React…» в меню «Файл» выгружает его в проект. Свойства становятся пропсами с типами, значения свойства «Вариант» — union-типом, а логическое свойство, которое показывает слой, — флагом вроде showIcon.
Варианты-состояния в пропсы не попадают: «Наведение», «Нажата», «Фокус» и «Отключена» становятся псевдоклассами :hover, :active, :focus-visible и :disabled.
export type ButtonProps = ComponentPropsWithRef<'button'> & {
/** «Вид»: 'primary' — «Основная», 'secondary' — «Вторичная», 'outline' — «Контурная», 'text' — «Текстовая» */
kind?: 'primary' | 'secondary' | 'outline' | 'text';
/** «Иконка» (показать слой) */
showIcon?: boolean;
};
<Button kind="outline" showIcon={false}>Позже</Button>
Роль «Разработчик» видит вкладку «Код» и не занимает место редактора в команде. Подробнее — на странице дизайн в код.
Горячие клавиши для компонентов
Клавиши те же, что в Figma, и работают на русской раскладке. На Windows и Linux вместо ⌘ нажимается Ctrl, вместо ⌥ — Alt.
- ⌥⌘K
- Создать компонент
- ⌥⌘B
- Отсоединить экземпляр
- ⌘D
- Дублировать
- ⌥2
- Открыть «Ассеты» с компонентами файла
- ⌘K
- «Действия»: найти команду по названию, например «Объединить как варианты»
Остальные сочетания собраны в списке горячих клавиш.
Чего пока нет
Компоненты устроены так же, как в Figma, но кое-что работает иначе. Это стоит знать заранее, особенно при переезде.
- Публичных библиотек и аналога Figma Community: библиотеки живут внутри команды или личных файлов.
- Связи с командными библиотеками Figma после переноса: такие экземпляры при переносе из Figma становятся обычными фреймами. Перенесите файл библиотеки, опубликуйте его как библиотеку команды и поставьте экземпляры заново.
- Стили из библиотек Figma переносятся как локальные стили файла, без связи с исходной библиотекой.