Composer
Макетування та дизайн: сторінки, фрейми, компоненти й справжня типографіка, з режимом прототипу та режимом коду.
Одним рядком#
Нескінченне полотно для розкладання речей: багатосторінкові документи, дизайн екранів і макети, з типографічними налаштуваннями, що виходять за межі «обрати шрифт і розмір».
Макет#
| Menu bar | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Toolbar | скасувати/повторити, вибір, фрейм, фігури, лінія, стрілка, перо, текст, рука: далі 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 це перемикачі на панелі інструментів: сітка baseline це те, що вирівнює багатоколонковий текст через розворот.
Типографіка#
Частина, яка виправдовує місце Composer:
| Font, size, leading, tracking | як числа, а не як повзунок |
| Alignment | горизонтальне, і вертикальне в межах блоку: зверху, посередині, знизу |
| Weight і case | включно з «as typed» |
| Paragraph spacing, списки | марковані чи нумеровані |
| Resize mode | Fixed size, Auto width, Auto height: чи слідує блок за текстом, чи текст переноситься за блоком |
| Text threading | зв'язати один текстовий блок з наступним, щоб переповнення текло далі |
| Text styles | іменовані, перевикористовувані |
Prototype та код#
Вкладка 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, не переноситиметься; якщо текст виходить за межі фрейму, зазвичай причина саме в цьому.
- Text threading не автоматичний. Блок повідомляє Not linked, доки ви його не зв'яжете.
- Components поширюються від визначення, а не від екземпляра. Редагування екземпляра не оновлює інші.