Composer
Layout en ontwerp: pagina's, frames, componenten en echte typografie, met een prototypeweergave en een codeweergave.
In het kort#
Een oneindig canvas om dingen te rangschikken: documenten met meerdere pagina's, schermontwerpen en layouts, met typografische besturing die verder gaat dan "kies een lettertype en een grootte".
De indeling#
| Menu bar | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Toolbar | ongedaan maken/opnieuw doen, select, frame, vormen, lijn, pijl, pen, type, hand: dan Margins, Guides, Baseline, en het aantal artboards |
| Left | Pages, dan Layers · Assets · Components · Frames, dan de lijst met laagcategorieën |
| Centre | het canvas, met de zoom en een pagina-indicator |
| Right | Design · Prototype · Code |
| Status bar | artboards, objecten, selectie, actief gereedschap, zoom |
Wat u hier doet#
Pagina's en frames#
Een document heeft pagina's; een pagina bevat frames (artboards). Dat is het verschil met Vectra, dat op één artboard tegelijk tekent: Composer is voor een set schermen of een set spreads.
Lagen, assets en componenten#
Vier tabbladen over hetzelfde document. Components zijn de herbruikbare onderdelen: eenmaal definiëren, meerdere keren plaatsen, de definitie bewerken en elke instantie volgt mee. Assets is wat het document binnenhaalt. De laaglijst is gegroepeerd per soort (Text, Images, Graphics), wat sneller te overzien is dan een platte lijst op een drukke pagina.
Nauwkeurig indelen#
X, Y, W, H en een hoekradius, plus align and distribute. Margins, Guides en een Baseline-raster zijn schakelaars op de werkbalk: het baselineraster is wat meerkolomstekst laat uitlijnen over een spread.
Typografie#
Het deel dat Composer zijn plaats verdient:
| Font, size, leading, tracking | als getallen, niet als een schuifregelaar |
| Alignment | horizontaal, en verticaal binnen de box: boven, midden, onder |
| Weight en case | inclusief "as typed" |
| Paragraph spacing, lijsten | met opsommingstekens of genummerd |
| Resize mode | Fixed size, Auto width, Auto height: of de box de tekst volgt of de tekst zich naar de box plooit |
| Text threading | koppel de ene tekstbox aan de volgende zodat overloop verder stroomt |
| Text styles | benoemd, herbruikbaar |
Prototype en code#
Het tabblad Prototype koppelt schermen samen tot een klikbare flow. Het tabblad Code toont het ontwerp als code.
Variabelen en stijlen#
Twee panelen die een document veranderen in een systeem in plaats van een verzameling pagina's:
- Variables: benoemde waarden (een kleur, een getal, een tekst) die door het hele document worden gebruikt, met een variabelenkiezer overal waar een waarde wordt ingesteld. Verander de variabele, elk gebruik ervan volgt mee.
- Styles: benoemde tekst- en objectstijlen.
- Fills: de vulling-editor, inclusief gradiënten en afbeeldingen.
Samen met Components zijn ze wat een ontwerp token-gestuurd maakt: de DA-werkruimte van Vectra kan ontwerptokens exporteren, en Composer is waar ze worden gebruikt.
Prototyping#
Een prototype is hier een graaf over de frames die u al hebt getekend. Elke interactie bestaat uit vier dingen: een trigger (klik of hover), een doelframe, een overgang en een duur. Sleep vanaf het verbindingspunt van een frame naar het frame waar het naartoe moet leiden.
Prototype Mode verandert het canvas in de flowweergave; de Preview Player speelt het af zoals de lezer het zou zien, met een herstart. Er is geen apart prototypedocument, de frames zijn de schermen.
Dev Mode, het ontwerp overdragen aan code#
Het tabblad Inspect is de andere helft van een ontwerptool: het leest de selectie en produceert er de code voor, op drie platformtabbladen.
| Tabblad | Uitvoer |
|---|---|
| CSS | het web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Naast de gegenereerde code meldt het de echte cijfers waar een ontwikkelaar om vraagt: grootte, radius, rotatie, dekking, vulling, lijndikte, effecten, lettertype en lettergrootte, en afstand gemeten tot de ouder en tot de buren: de twee afstanden die een layout bepalen. Code wordt naar het klembord gekopieerd of gedownload.
Exporteren#
Exporteren in Composer is een lijst van instellingen, geen enkele keuze: voeg er meerdere toe, selecteer welke er moeten draaien, en elke geselecteerde instelling produceert zijn eigen bestand in één keer. Elke instelling draagt:
| Format en quality | per instelling, zodat een PNG en een JPG samen kunnen vertrekken |
| Scale en DPI | @2x en drukresolutie |
| CMYK (print) | voor de drukklare versie |
| Naming | een voorvoegsel en een achtervoegsel, project- en @2x |
| Background | inclusief transparant, waar het formaat dat toelaat |
Twee details die het paneel vermeldt in plaats van u te laten ontdekken:
- Alleen PNG en SVG dragen transparantie. Een transparante achtergrond kiezen op een JPG is een instelling zonder effect, en het paneel zegt dat ook.
- De bron van een export is ofwel een node ofwel een slice: Create Slice maakt een exportgebied van de huidige selectie, wat de manier is om een deel van een frame te exporteren zonder het frame op te knippen.
Presets slaan een hele set instellingen op, zodat de exportconfiguratie voor een project maar één keer geschreven wordt.
Bestanden die het leest en schrijft#
| Native format | .comp |
| Exports | .png · .jpg · .svg, op elke schaal of DPI, in RGB of CMYK |
| Generates | CSS · SwiftUI · Jetpack Compose |
Werk doorsturen naar andere studio's#
Produceert een compositie, en het actieve artboard gerenderd als afbeelding. Accepteert pixel art, vectorkunst en afbeeldingen.
Samenwerken met iemand anders#
Composer synchroniseert als een document: de volledige status, ontdubbeld in tijd, plus verzonden acties. Twee mensen die tegelijk dezelfde pagina bewerken, zullen zien dat één van beiden wint; werk aan verschillende pagina's.
Grenzen en veelvoorkomende valkuilen#
- Auto width en auto height botsen met vaste layouts. Een box die is ingesteld op auto width, zal niet plooien; als tekst van het frame afloopt, is dat meestal de reden.
- Text threading gebeurt niet automatisch. Een box meldt Not linked tot u hem koppelt.
- Components verspreiden zich vanuit de definitie, niet vanuit een instantie. Een instantie bewerken werkt de andere niet bij.