Composer
Mise en page et design: pages, cadres, composants et vraie typographie, avec une vue prototype et une vue code.
En un mot#
Une toile infinie pour arranger : documents multi-pages, maquettes d'écran et mises en page, avec des contrôles typographiques qui vont plus loin que « choisir une police et un corps ».
L'agencement#
| Barre de menus | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Barre d'outils | annuler/rétablir, sélection, cadre, formes, ligne, flèche, plume, texte, main, puis Margins, Guides, Baseline, et le compteur de plans de travail |
| Gauche | Pages, puis Layers · Assets · Components · Frames, puis la liste des catégories de calques |
| Centre | la toile, avec le zoom et un indicateur de page |
| Droite | Design · Prototype · Code |
| Barre d'état | plans de travail, objets, sélection, outil actif, zoom |
Ce qu'on y fait#
Pages et cadres#
Un document a des pages ; une page porte des cadres (plans de travail). C'est la différence avec Vectra, qui dessine sur un plan de travail à la fois : Composer est fait pour un jeu d'écrans ou un jeu de doubles pages.
Calques, ressources et composants#
Quatre onglets sur le même document. Les Components sont les pièces réutilisables: définies une fois, placées plusieurs fois ; modifiez la définition et chaque instance suit. Assets est ce que le document tire de l'extérieur. La liste de calques est groupée par nature: Texte, Images, Graphiques: ce qui se parcourt plus vite qu'une liste plate sur une page chargée.
Mettre en page précisément#
X, Y, L, H et un rayon d'angle, plus l'alignement et la répartition. Les Margins, Guides et la grille de Baseline sont des bascules de la barre d'outils: la grille de ligne de base est ce qui fait s'aligner un texte en colonnes sur une double page.
La typographie#
La partie qui justifie la place de Composer :
| Police, corps, interligne, approche | en nombres, pas en curseur |
| Alignement | horizontal, et vertical dans le bloc: haut, milieu, bas |
| Graisse et casse | y compris « telle que saisie » |
| Espacement de paragraphe, listes | à puces ou numérotées |
| Mode de redimensionnement | Taille fixe, Largeur auto, Hauteur auto: le bloc suit le texte, ou le texte se replie dans le bloc |
| Chaînage de texte | relier un bloc au suivant pour que le débordement s'y écoule |
| Styles de texte | nommés, réutilisables |
Prototype et code#
L'onglet Prototype relie les écrans en un parcours cliquable. L'onglet Code montre le design en code.
Variables et styles#
Deux panneaux qui font d'un document un système plutôt qu'un jeu de pages :
- Variables: des valeurs nommées (une couleur, un nombre, une chaîne) utilisées dans tout le document, avec un sélecteur de variable partout où une valeur se règle. Changez la variable, tous ses usages suivent.
- Styles: des styles de texte et d'objet nommés.
- Fills: l'éditeur de remplissage, dégradés et images compris.
Avec les Components, ce sont eux qui rendent un design piloté par des jetons : l'espace de travail DA de Vectra sait exporter des jetons de design, et Composer est là où ils servent.
Le prototypage#
Un prototype ici est un graphe posé sur les cadres que vous avez déjà dessinés. Chaque interaction est quatre choses : un déclencheur (clic ou survol), un cadre cible, une transition et une durée. Tirez depuis la poignée de connexion d'un cadre vers celui où il doit mener.
Le mode Prototype transforme le canevas en vue de flux ; le Preview Player l'exécute comme le lecteur le verrait, avec un redémarrage. Il n'y a pas de document de prototypage séparé, les cadres sont les écrans.
Le mode développeur, remettre la maquette au code#
L'onglet Inspect est l'autre moitié d'un outil de design : il lit la sélection et en produit le code, sur trois onglets de plateforme.
| Onglet | Sortie |
|---|---|
| CSS | le web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
À côté du code engendré, il rapporte les vrais chiffres qu'un développeur demande : taille, rayon, rotation, opacité, remplissage, contour, effets, police et corps, et l'espacement mesuré au parent et aux voisins : les deux distances qui décident d'une mise en page. Le code se copie dans le presse-papiers ou se télécharge.
Exporter#
L'export dans Composer est une liste de réglages, pas un choix unique : ajoutez-en plusieurs, cochez ceux à lancer, et chaque réglage coché produit son fichier en une seule passe. Chaque réglage porte :
| Format et qualité | par réglage, donc un PNG et un JPG peuvent sortir ensemble |
| Échelle et DPI | le @2x et la résolution d'impression |
| CMJN (impression) | pour la version destinée à la presse |
| Nommage | un préfixe et un suffixe, project- et @2x |
| Fond | y compris transparent, là où le format le permet |
Deux détails que le panneau énonce au lieu de vous les laisser découvrir :
- Seuls le PNG et le SVG portent la transparence. Choisir un fond transparent sur un JPG est un réglage sans effet, et le panneau le dit.
- La source d'un export est soit un nœud, soit une tranche : Create Slice fait une région d'export à partir de la sélection courante, ce qui permet d'exporter une partie d'un cadre sans découper le cadre.
Les préréglages enregistrent tout un jeu de réglages : la configuration d'export d'un projet ne s'écrit qu'une fois.
Fichiers lus et écrits#
| Format natif | .comp |
| Exports | .png · .jpg · .svg, à n'importe quelle échelle ou résolution, en RVB ou CMJN |
| Engendre | CSS · SwiftUI · Jetpack Compose |
Envoyer vers les autres ateliers#
Produit une composition, et le plan de travail actif rendu en image. Accepte du pixel art, de l'art vectoriel et des images.
Travailler à plusieurs#
Composer se synchronise comme un document: l'état complet, avec un délai d'attente, plus les actions dépêchées. Deux personnes qui modifient la même page au même instant verront l'une des deux gagner ; travaillez sur des pages différentes.
Limites et pannes courantes#
- Largeur auto et hauteur auto se battent avec une mise en page fixe. Un bloc en largeur auto ne se replie pas ; si le texte déborde du cadre, c'est en général pour cela.
- Le chaînage de texte n'est pas automatique. Un bloc affiche Non lié tant que vous ne l'avez pas chaîné.
- Les composants se propagent depuis la définition, pas depuis une instance. Modifier une instance ne met pas les autres à jour.