Composer
Layout und Design, Seiten, Frames, Components und echte Typografie, mit einer Prototype-Ansicht und einer Code-Ansicht.
In einem Satz#
Eine unendliche Leinwand zum Anordnen von Dingen: mehrseitige Dokumente, Screen-Designs und Layouts, mit typografischen Reglern, die über „eine Schrift und eine Größe wählen" hinausgehen.
Der Aufbau#
| Menu bar | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Toolbar | Undo/Redo, Select, Frame, Shapes, Line, Arrow, Pen, Type, Hand, dann Margins, Guides, Baseline, und die Artboard-Anzahl |
| Left | Pages, dann Layers · Assets · Components · Frames, dann die Layer-Kategorienliste |
| Centre | die Leinwand, mit Zoom und einer Seitenanzeige |
| Right | Design · Prototype · Code |
| Status bar | Artboards, Objekte, Auswahl, aktives Werkzeug, Zoom |
Was Sie hier tun#
Pages und Frames#
Ein Dokument hat pages; eine Page enthält frames (Artboards). Das ist der Unterschied zu Vectra, das jeweils auf einem Artboard zeichnet: Composer ist für eine Reihe von Screens oder eine Reihe von Doppelseiten gedacht.
Layers, Assets und Components#
Vier Tabs über demselben Dokument. Components sind die wiederverwendbaren Bausteine: einmal definieren, mehrfach platzieren, die Definition bearbeiten, und jede Instanz folgt. Assets ist das, was das Dokument einbindet. Die Layer-Liste ist nach Art gruppiert (Text, Images, Graphics), was sich auf einer vollen Seite schneller überfliegen lässt als eine flache Liste.
Präzise layouten#
X, Y, W, H und ein Eckenradius, dazu align and distribute. Margins, Guides und ein Baseline-Raster sind Umschalter auf der Toolbar: Das Baseline-Raster ist es, was mehrspaltigen Text über eine Doppelseite hinweg fluchten lässt.
Typografie#
Der Teil, der Composer seinen Platz verdient:
| Font, size, leading, tracking | als Zahlen, nicht als Regler |
| Alignment | horizontal, und vertikal innerhalb der Box: oben, mittig, unten |
| Weight und case | einschließlich „as typed" |
| Paragraph spacing, Listen | mit Aufzählungszeichen oder nummeriert |
| Resize mode | Fixed size, Auto width, Auto height: ob die Box dem Text folgt oder der Text sich der Box anpasst |
| Text threading | verknüpft eine Textbox mit der nächsten, sodass Überlauf weiterfließt |
| Text styles | benannt, wiederverwendbar |
Prototype und Code#
Der Tab Prototype verdrahtet Screens zu einem klickbaren Flow. Der Tab Code zeigt das Design als Code.
Variables und Styles#
Zwei Panels, die ein Dokument zu einem System machen statt zu einer Ansammlung von Seiten:
- Variables: benannte Werte (eine Farbe, eine Zahl, ein String), im ganzen Dokument verwendet, mit einem variable picker überall dort, wo ein Wert gesetzt wird. Ändern Sie die Variable, und jede Verwendung folgt.
- Styles: benannte Text- und Objektstile.
- Fills: der Fülleditor, einschließlich Verläufen und Bildern.
Zusammen mit Components machen sie ein Design token-getrieben: Der DA-Workspace von Vectra kann Design Tokens exportieren, und Composer ist der Ort, wo sie verwendet werden.
Prototyping#
Ein Prototype ist hier ein Graph über die Frames, die Sie bereits gezeichnet haben. Jede Interaktion besteht aus vier Dingen: einem trigger (Click oder Hover), einem target-Frame, einer transition und einer duration. Ziehen Sie vom Connect Handle eines Frames zu dem Frame, zu dem er führen soll.
Prototype Mode verwandelt die Leinwand in die Flow-Ansicht; der Preview Player spielt ihn ab, wie ihn ein Betrachter sehen würde, mit einem Neustart. Es gibt kein separates Prototyping-Dokument, die Frames sind die Screens.
Dev Mode, das Design an den Code übergeben#
Der Tab Inspect ist die andere Hälfte eines Design-Tools: Er liest die Auswahl aus und erzeugt den Code dafür, auf drei Plattform-Tabs.
| Tab | Output |
|---|---|
| CSS | das Web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Neben dem generierten Code meldet es die echten Zahlen, nach denen ein Entwickler fragt: Größe, Radius, Rotation, Opacity, Fill, Stroke, Effects, Font und Schriftgröße, und Abstand gemessen zum Parent und zu Siblings: die zwei Distanzen, die ein Layout bestimmen. Der Code lässt sich in die Zwischenablage kopieren oder herunterladen.
Exportieren#
Export ist in Composer eine list of settings, keine einzelne Wahl: Fügen Sie mehrere hinzu, wählen Sie aus, welche ausgeführt werden sollen, und jede ausgewählte Einstellung erzeugt in einem Durchgang ihre eigene Datei. Jede Einstellung trägt:
| Format und quality | pro Einstellung, sodass ein PNG und ein JPG gemeinsam herauskommen können |
| Scale und DPI | @2x und Druckauflösung |
| CMYK (print) | für die druckfertige Version |
| Naming | ein Präfix und ein Suffix, project- und @2x |
| Background | einschließlich transparent, wo das Format es erlaubt |
Zwei Details, die das Panel benennt, statt Sie sie entdecken zu lassen:
- Nur PNG und SVG tragen Transparenz. Einen transparenten Hintergrund für ein JPG zu wählen, ist eine Einstellung ohne Wirkung, und das Panel sagt das.
- Die source eines Exports ist entweder ein node oder eine slice: Create Slice macht aus der aktuellen Auswahl eine Exportregion, so exportieren Sie einen Teil eines Frames, ohne den Frame zu zerschneiden.
Presets speichern einen ganzen Satz von Einstellungen, sodass die Export-Konfiguration für ein Projekt nur einmal geschrieben wird.
Dateien, die es liest und schreibt#
| Native format | .comp |
| Exports | .png · .jpg · .svg, in jeder Scale oder DPI, in RGB oder CMYK |
| Generates | CSS · SwiftUI · Jetpack Compose |
Arbeit an andere Module weitergeben#
Produces eine Komposition, und das aktive Artboard als gerendertes Bild. Accepts Pixel-Art, Vektorgrafik und Bilder.
Zusammenarbeiten#
Composer synchronisiert als document: der gesamte Zustand, debounced, plus dispatchte Actions. Bearbeiten zwei Personen im selben Moment dieselbe Page, gewinnt eine von beiden; arbeiten Sie an unterschiedlichen Pages.
Grenzen und typische Stolperfallen#
- Auto width und Auto height widersprechen festen Layouts. Eine Box mit Auto width umbricht nicht; läuft Text aus dem Frame heraus, liegt das meist daran.
- Text threading passiert nicht automatisch. Eine Box meldet Not linked, bis Sie sie verketten.
- Components verbreiten sich von der Definition aus, nicht von einer Instanz. Das Bearbeiten einer Instanz aktualisiert die anderen nicht.