Composer
Maquetación y diseño: páginas, frames, componentes y tipografía real, con una vista de prototipo y una vista de código.
En una frase#
Un lienzo infinito para organizar cosas: documentos multipágina, diseños de pantalla y maquetas, con controles tipográficos que van más allá de "elige una fuente y un tamaño".
La disposición#
| Menu bar | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Toolbar | undo/redo, select, frame, shapes, line, arrow, pen, type, hand: luego Margins, Guides, Baseline, y el número de artboards |
| Left | Pages, luego Layers · Assets · Components · Frames, luego la lista de capas por categoría |
| Centre | el lienzo, con el zoom y un indicador de página |
| Right | Design · Prototype · Code |
| Status bar | artboards, objetos, selección, herramienta activa, zoom |
Qué haces aquí#
Páginas y frames#
Un documento tiene pages; una page contiene frames (artboards). Esa es la diferencia con Vectra, que dibuja sobre un solo artboard a la vez: Composer sirve para un conjunto de pantallas o un conjunto de páginas enfrentadas.
Capas, recursos y componentes#
Cuatro pestañas sobre el mismo documento. Los Components son las piezas reutilizables: se definen una vez, se colocan muchas, se edita la definición y cada instancia la sigue. Assets es lo que el documento está incorporando. La lista de capas está agrupada por tipo (Text, Images, Graphics), que se recorre más rápido que una lista plana en una página cargada.
Maqueta con precisión#
X, Y, W, H y un radio de esquina, más align y distribute. Margins, Guides y una cuadrícula Baseline son toggles en la toolbar: la cuadrícula base es lo que hace que un texto en varias columnas se alinee en toda una página enfrentada.
Tipografía#
La parte que le gana a Composer su lugar:
| Fuente, tamaño, interlineado, tracking | como números, no como un deslizador |
| Alineación | horizontal, y vertical dentro de la caja: top, middle, bottom |
| Peso y caja | incluido "as typed" |
| Espaciado de párrafo, listas | con viñetas o numeradas |
| Modo de redimensionado | Fixed size, Auto width, Auto height: si la caja sigue al texto o el texto se ajusta a la caja |
| Enlazado de texto | vincula una caja de texto con la siguiente para que el desbordamiento continúe fluyendo |
| Estilos de texto | con nombre, reutilizables |
Prototipo y código#
La pestaña Prototype conecta pantallas entre sí en un flujo clicable. La pestaña Code muestra el diseño como código.
Variables y estilos#
Dos paneles que convierten un documento en un sistema en lugar de un conjunto de páginas:
- Variables: valores con nombre (un color, un número, una cadena) usados en todo el documento, con un selector de variable en cualquier sitio donde se fija un valor. Cambia la variable, y cada uso la sigue.
- Styles: estilos de texto y de objeto con nombre.
- Fills: el editor de relleno, incluidos degradados e imágenes.
Junto con Components, son lo que hace que un diseño esté guiado por tokens: el espacio de trabajo DA de Vectra puede exportar tokens de diseño, y Composer es donde se usan.
Prototipado#
Un prototipo aquí es un grafo sobre los frames que ya dibujaste. Cada interacción son cuatro cosas: un trigger (click o hover), un frame target, una transition y una duration. Arrastra desde el conector de un frame hasta el frame al que debe llevar.
Prototype Mode convierte el lienzo en la vista de flujo; el Preview Player lo ejecuta como lo vería el lector, con un reinicio. No hay un documento de prototipado aparte, los frames son las pantallas.
Dev Mode, entregar el diseño al código#
La pestaña Inspect es la otra mitad de una herramienta de diseño: lee la selección y produce el código para ella, en tres pestañas de plataforma.
| Pestaña | Salida |
|---|---|
| CSS | la web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Junto al código generado informa de los números reales que pide un desarrollador: tamaño, radio, rotación, opacidad, relleno, trazo, efectos, fuente y tamaño de fuente, y el espaciado medido al padre y a los hermanos: las dos distancias que definen una maqueta. El código se copia al portapapeles o se descarga.
Exportar#
Exportar en Composer es una lista de ajustes, no una sola opción: añade varios, elige cuáles ejecutar, y cada ajuste seleccionado produce su propio archivo en una sola pasada. Cada ajuste lleva:
| Format y quality | por ajuste, así que un PNG y un JPG pueden salir juntos |
| Scale y DPI | @2x y resolución de impresión |
| CMYK (print) | para la versión destinada a imprenta |
| Naming | un prefijo y un sufijo, project- y @2x |
| Background | incluida transparent, donde el formato lo permite |
Dos detalles que el panel indica en lugar de dejar que los descubras:
- Solo PNG y SVG llevan transparencia. Elegir un fondo transparente en un JPG es un ajuste sin efecto, y el panel lo dice.
- El source de una exportación es un node o un slice: Create Slice crea una región de exportación a partir de la selección actual, que es cómo exportas parte de un frame sin recortar el frame.
Los Presets guardan un conjunto entero de ajustes, así que la configuración de exportación de un proyecto se escribe una sola vez.
Archivos que lee y escribe#
| Formato nativo | .comp |
| Exportaciones | .png · .jpg · .svg, a cualquier escala o DPI, en RGB o CMYK |
| Genera | CSS · SwiftUI · Jetpack Compose |
Enviar trabajo a otros estudios#
Produce una composición, y el artboard activo renderizado como imagen. Acepta pixel art, arte vectorial e imágenes.
Trabajar con otra persona#
Composer sincroniza como un documento: el estado completo, con debounce, más acciones despachadas. Dos personas editando la misma página en el mismo instante dejarán a una de ellas ganando; trabajen en páginas distintas.
Límites y problemas frecuentes#
- Auto width y auto height compiten con las maquetas fijas. Una caja fijada a auto width no va a ajustar el texto; si el texto se sale del frame, esa suele ser la razón.
- El enlazado de texto no es automático. Una caja indica Not linked hasta que la enlazas.
- Los componentes se propagan desde la definición, no desde una instancia. Editar una instancia no actualiza las demás.