Composer
Макетирование и дизайн: страницы, фреймы, компоненты и настоящая типографика, с режимом прототипа и режимом кода.
Коротко#
Бесконечный холст для компоновки: многостраничные документы, макеты экранов и раскладки, с типографскими настройками, которые идут дальше, чем «выбрать шрифт и размер».
Компоновка#
| Строка меню | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Панель инструментов | отменить/повторить, выделение, фрейм, формы, линия, стрелка, перо, текст, рука, затем Margins, Guides, Baseline, и счётчик монтажных областей |
| Слева | Pages, затем Layers · Assets · Components · Frames, затем список категорий слоёв |
| Центр | холст, с масштабом и индикатором страницы |
| Справа | Design · Prototype · Code |
| Строка состояния | монтажные области, объекты, выделение, активный инструмент, масштаб |
Что вы здесь делаете#
Страницы и фреймы#
У документа есть страницы; страница содержит фреймы (монтажные области). В этом отличие от Vectra, которая рисует на одной монтажной области за раз: Composer предназначен для набора экранов или набора разворотов.
Слои, ресурсы и компоненты#
Четыре вкладки над одним документом. Components, это переиспользуемые элементы: определяете один раз, размещаете многократно, редактируете определение, и каждый экземпляр следует за ним. Assets, это то, что документ подтягивает извне. Список слоёв сгруппирован по типу (Text, Images, Graphics), что просматривается быстрее, чем плоский список на насыщенной странице.
Точная раскладка#
X, Y, W, H и радиус угла, плюс выравнивание и распределение. Margins, Guides и сетка Baseline переключаются на панели инструментов: сетка базовой линии, это то, что заставляет многоколоночный текст выравниваться по развороту.
Типографика#
Часть, ради которой существует Composer:
| Шрифт, размер, интерлиньяж, трекинг | цифрами, а не ползунком |
| Выравнивание | горизонтальное и вертикальное внутри блока: сверху, посередине, снизу |
| Начертание и регистр | включая «как введено» |
| Межабзацный интервал, списки | маркированные или нумерованные |
| Режим изменения размера | Fixed size, Auto width, Auto height: следует ли блок за текстом, или текст оборачивается по блоку |
| Связывание текста | связывает один текстовый блок со следующим, чтобы переполнение перетекало дальше |
| Стили текста | именованные, переиспользуемые |
Прототип и код#
Вкладка Prototype связывает экраны в кликабельный сценарий. Вкладка Code показывает дизайн в виде кода.
Переменные и стили#
Две панели, превращающие документ в систему, а не просто в набор страниц:
- Variables: именованные значения (цвет, число, строка), используемые по всему документу, с переключателем переменной везде, где задаётся значение. Измените переменную, и все её использования последуют за ней.
- Styles: именованные текстовые стили и стили объектов.
- Fills: редактор заливки, включая градиенты и изображения.
Вместе с Components именно они делают дизайн управляемым через токены: рабочее пространство DA в Vectra умеет экспортировать дизайн-токены, а Composer, это место, где они идут в дело.
Прототипирование#
Прототип здесь, это граф, наложенный на уже нарисованные вами фреймы. Каждое взаимодействие состоит из четырёх вещей: триггер (клик или наведение), целевой фрейм, переход и длительность. Тяните от точки подключения одного фрейма к тому, куда он должен вести.
Prototype Mode превращает холст в вид сценария; Preview Player проигрывает его так, как увидел бы читатель, с возможностью перезапуска. Отдельного документа для прототипирования не существует, фреймы, это и есть экраны.
Dev Mode: передача макета в код#
Вкладка Inspect, это другая половина инструмента дизайна: она читает выделение и производит для него код на трёх вкладках платформ.
| Вкладка | Результат |
|---|---|
| CSS | для веба |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Рядом со сгенерированным кодом она сообщает реальные цифры, которые нужны разработчику: размер, радиус, поворот, непрозрачность, заливка, обводка, эффекты, шрифт и его размер, а также интервалы, измеренные до родителя и до соседей: два расстояния, определяющие раскладку. Код копируется в буфер обмена или скачивается.
Экспорт#
Экспорт в Composer, это список настроек, а не единичный выбор: добавляйте несколько, отмечайте, какие запускать, и каждая отмеченная настройка производит свой файл за один проход. Каждая настройка несёт:
| Format и quality | для каждой настройки отдельно, поэтому PNG и JPG могут выйти вместе |
| Scale и DPI | @2x и разрешение для печати |
| CMYK (print) | для версии, предназначенной для типографии |
| Naming | префикс и суффикс, project- и @2x |
| Background | включая прозрачный, там, где это позволяет формат |
Две детали, которые панель сообщает прямо, вместо того чтобы дать вам обнаружить их самим:
- Только PNG и SVG несут прозрачность. Выбор прозрачного фона на JPG, это настройка без эффекта, и панель об этом говорит.
- Источником экспорта служит либо узел, либо срез: Create Slice создаёт область экспорта из текущего выделения, что позволяет экспортировать часть фрейма, не разрезая сам фрейм.
Presets сохраняют целый набор настроек: конфигурация экспорта для проекта пишется один раз.
Файлы: чтение и запись#
| Нативный формат | .comp |
| Экспорт | .png · .jpg · .svg, при любом масштабе или DPI, в RGB или CMYK |
| Генерирует | CSS · SwiftUI · Jetpack Compose |
Передача работы в другие студии#
Производит композицию и активную монтажную область, отрисованную как изображение. Принимает пиксельную графику, векторную графику и изображения.
Совместная работа#
Composer синхронизируется как документ: полное состояние, с задержкой, а также отправленные действия. Если два человека редактируют одну и ту же страницу в один и тот же момент, выиграет один из них; работайте на разных страницах.
Ограничения и типичные проблемы#
- Auto width и auto height конфликтуют с фиксированной раскладкой. Блок, установленный на auto width, не будет переноситься; если текст выходит за пределы фрейма, обычно причина именно в этом.
- Связывание текста не происходит автоматически. Блок показывает Not linked, пока вы его не свяжете.
- Компоненты распространяются от определения, а не от экземпляра. Редактирование экземпляра не обновляет остальные.