Компоненты

Компоненты — элементы интерфейса, которые можно многократно использовать в дизайне. Они ускоряют работу и помогают поддерживать единообразие.

1. Именование и управление компонентами

1.1 Панель «Компоненты»

Быстрее всего компоненты текущего файла можно открыть на панели Компоненты:

• нажмите Компоненты на левой панели;
• или используйте горячие клавиши Alt + 2.

1.2 Структура панели

На панели доступны:

• локальные компоненты — созданные в текущем файле;
• используемые компоненты — добавленные из других библиотек;
• включенные библиотеки — библиотеки ресурсов команды или организации.

У каждого раздела есть заголовок. Включенные библиотеки называются по именам файлов; разделы можно сворачивать и разворачивать.

Просмотр компонентов в библиотеке ресурсов

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

1.3 Связанные компоненты

Pixso определяет связи между компонентами по:

• названию: например, Design/Component/Activation, Design/Component/Hover и Design/Component/Forbidden будут объединены;
• структуре исходного файла: например, все компоненты внутри одного фрейма считаются связанными.

1.4 Управление компонентами на холсте

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

При объединении компонентов в варианты Pixso сохраняет их текущее расположение и интервалы. Рекомендуется заранее привести макет в порядок.

По умолчанию набор вариантов имеет фиолетовую пунктирную границу и не имеет заливки. Оформление можно изменить в соответствии с брендом и дизайн-системой.

2. Создание повторно используемых компонентов

Компонент можно создать из любого объекта или слоя: от простой фигуры, кнопки или текста до сложной карточки или меню.

Примечание: похожие компоненты с небольшими отличиями удобно объединять в варианты. Это упрощает библиотеку и помогает быстрее находить нужный элемент.

2.1 Создание отдельного компонента

1. Выберите слой.

2. Создайте компонент одним из способов:

• нажмите кнопку создания компонента на панели инструментов;
• щелкните выделение правой кнопкой мыши и выберите Создать компонент;
• нажмите Ctrl + Alt + K.

3. Pixso поместит слой в специальный фрейм компонента. На панели слоев компонент отмечается фиолетовым значком.

4. Добавьте описание на правой панели, чтобы соавторы и разработчики видели его на панели проверки.

2.2 Пакетное создание компонентов

По умолчанию команда Создать компонент создает один компонент, но Pixso поддерживает и пакетное создание. Источником могут быть:

• объекты и слои во фрейме;
• объекты и слои в группе;
• отдельный слой, например контур или векторная сетка;
• слои в булевой операции.

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

1. Выберите слои.
2. Откройте меню рядом с кнопкой Компонент.
3. Выберите Создать несколько компонентов.
4. Pixso создаст компонент для каждого фрейма, группы, булевой операции или контура.

3. Создание экземпляров

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

3.1 Через панель «Компоненты»

На левой панели можно искать компоненты и открывать другие библиотеки.

1. Нажмите Компоненты.

2. Найдите нужный компонент:

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

3. Перетащите компонент на холст, чтобы создать экземпляр.

3.2 Копирование компонента

В том же файле экземпляр можно создать копированием.

1. Горячие клавиши:

macOS: ⌘ Command + D

Windows: Ctrl + D

2. Перетаскивание: удерживайте ⌥ Option в macOS или Alt в Windows и перетащите компонент. Сначала отпустите кнопку мыши, затем клавишу, иначе компонент будет перемещен.

3. Копирование и вставка:

macOS: ⌘ Command + C, затем ⌘ Command + V

Windows: Ctrl + C, затем Ctrl + V

3.3 Замена экземпляра

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

Нужный компонент можно найти в текущем файле или во включенных командных библиотеках.

Выберите экземпляр, откройте меню Экземпляр на правой панели и выберите связанный компонент для замены.

3.4 Переопределение экземпляра

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

Примечание: положение вложенного слоя в экземпляре менять нельзя.

4. Отвязка экземпляра от компонента

Любой экземпляр можно отвязать от основного компонента.

1. Через меню экземпляра:

• выберите экземпляр;
• откройте меню Экземпляр на правой панели;
• нажмите Отвязать от основного компонента.

2. Через контекстное меню:

• щелкните экземпляр правой кнопкой мыши на холсте или панели Слои;
• выберите Отвязать компонент.

3. Горячие клавиши:

macOS: ⌥ Option + ⌘ Command + B

Windows: Ctrl + B

5. Редактирование основного компонента

Каждый экземпляр связан с основным компонентом. Изменения основного компонента применяются ко всем связанным экземплярам.

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

5.1 Обновление компонента

Изменять дизайн основного компонента можно только в исходном файле.

• Неопубликованный компонент: изменения автоматически применяются к локальным экземплярам.
• Опубликованный компонент: в исходном файле изменения применяются сразу; для экземпляров в других файлах их нужно опубликовать в библиотеке ресурсов.

5.2 Поиск основного компонента

1. Выберите экземпляр.
2. Откройте вкладку Дизайн на правой панели.
3. В разделе Экземпляр нажмите Перейти к основному компоненту.
4. Отредактируйте основной компонент.

Примечание: Pixso предложит команду для возврата к экземпляру.

6. Создание и использование вариантов

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

Примечание: не рекомендуется объединять в варианты разные значки. Варианты подходят для одного значка с разными размерами или взаимодействиями.

Похожие компоненты называются вариантами, а объединяющий их контейнер — набором компонентов или набором вариантов.

6.1 Создание нового варианта

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

• macOS: ⌥ Option + ⌘ Command + K
• Windows: Ctrl + Alt + K

Чтобы создать вариант:

1. Выберите компонент.

2. Нажмите + рядом с разделом Вариант на правой панели.

3. Pixso:

• создаст еще один компонент с теми же свойствами;
• объединит оба компонента как варианты в набор компонентов.

4. Измените внешний вид вариантов в соответствии с задачей.

Примечание: по умолчанию набор имеет фиолетовую пунктирную границу и не имеет заливки. Оформление можно изменить.

6.2 Объединение существующих компонентов в варианты

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

Чтобы объединить существующие компоненты:

• переименуйте их, разделяя части названия символом /;
• разместите компоненты на холсте;
• объедините их в варианты;
• задайте название свойства компонента.

6.3 Добавление вариантов в набор

Используйте любой способ:

• выберите набор компонентов и нажмите +. Значок появляется, если в наборе уже есть хотя бы один вариант;

• в разделе Вариант нажмите Новый вариант;
• перетащите другие компоненты в набор.

Примечание: при перетаскивании существующие варианты не перестраиваются автоматически.

Добавление в файл экземпляра из большого набора импортирует все варианты и может снизить скорость работы Pixso.

6.4 Настройка варианта

1. Выберите экземпляр.
2. На правой панели под названием набора настройте свойства и их значения.

6.5 Переключение между экземплярами

Экземпляр варианта заменяется так же, как обычный компонент.

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

1. Выберите экземпляр.
2. Нажмите название компонента на правой панели.
3. В меню Экземпляр выберите другой компонент.

6.6 Управление вариантами

Новые варианты по умолчанию добавляются в набор с одинаковыми интервалами. Если до объединения компоненты имели другой макет, Pixso сохраняет исходные свойства набора.

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

6.7 Свойства и значения вариантов

Свойства и значения можно задавать под свои задачи и сопоставлять с компонентами кода в дизайн-системе.

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

Значение свойства — конкретный вариант признака: например, обычное состояние, наведение, нажатие или отключенное состояние.

У всех вариантов набора одинаковый набор свойств, но каждый вариант должен иметь уникальную комбинацию значений.

6.8 Именование свойства

1. Выберите набор компонентов.
2. Найдите текущее название свойства на правой панели.
3. Нажмите его и измените.
4. Щелкните по свободной области, чтобы завершить.
5. Повторите для остальных свойств.

6.9 Имена слоев и синтаксис

Для вариантов действуют специальные правила именования: имя должно содержать сведения о свойствах и значениях. Эти сведения видны при переименовании варианта на панели Слои.

Формат: Свойство 1 = Значение, Свойство 2 = Значение, Свойство 3 = Значение. Например: Цвет = Белый, Форма = Квадрат, Тень = Да.

6.10 Публикация обновленного компонента в библиотеке команды

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

Синяя точка на панели Компоненты показывает, что есть неопубликованные изменения.

1. Откройте панель Компоненты слева и перейдите в командную библиотеку ресурсов.
2. Проверьте список добавленных, измененных и удаленных стилей и компонентов.
3. Добавьте описание изменений.
4. Нажмите Опубликовать. Pixso сообщит о результате.

Настройте свойства компонентов

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

Свойство	Что регулирует	Где создаётся
Вариант	Выбор размера, типа, состояния или другого значения	В родительском компоненте или наборе компонентов
Слой	Видимость вложенного слоя	В нужном дочернем слое
Экземпляр	Компонент, используемый вложенным экземпляром	Во вложенном экземпляре компонента
Текст	Содержимое текстового слоя	В нужном текстовом слое

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

Свойства вариантов

Выберите компонент или набор компонентов и создайте свойство варианта в разделе свойств компонента. Назовите его по назначению, например size или state, и задайте значения. У каждого варианта должно быть уникальное сочетание значений, например size=small, state=hover.

Свойства видимости слоёв

1. Выберите дочерний слой основного компонента, например значок внутри кнопки.
2. В разделе Layer на правой панели нажмите кнопку свойства.
3. Назовите свойство и укажите, виден ли слой по умолчанию.
4. Создайте экземпляр и переключайте видимость слоя с помощью его свойства.

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

Свойства экземпляров и быстрая замена

1. Выберите вложенный экземпляр в основном компоненте.
2. Создайте свойство экземпляра кнопкой в разделе Instance на правой панели.
3. Выберите экземпляр по умолчанию из локальных компонентов или подключённой библиотеки.
4. При создании свойства укажите подходящие компоненты для быстрой замены.

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

Текстовые свойства

1. Выберите текстовый слой в основном компоненте.
2. Нажмите кнопку создания свойства в разделе Content на правой панели.
3. Назовите свойство и задайте текст по умолчанию.
4. Выберите экземпляр и измените текстовое значение в его свойствах.

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

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