Composer
Layout e design: páginas, frames, componentes e tipografia de verdade, com uma visão de protótipo e uma visão de código.
Em uma frase#
Um canvas infinito para organizar coisas: documentos com várias páginas, designs de tela e layouts, com controles tipográficos que vão além de "escolher uma fonte e um tamanho".
O layout#
| Barra de menus | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Barra de ferramentas | desfazer/refazer, select, frame, shapes, line, arrow, pen, type, hand: depois Margins, Guides, Baseline, e a contagem de artboards |
| Esquerda | Pages, depois Layers · Assets · Components · Frames, depois a lista de camadas por categoria |
| Centro | o canvas, com o zoom e um indicador de página |
| Direita | Design · Prototype · Code |
| Barra de status | artboards, objetos, seleção, ferramenta ativa, zoom |
O que você faz aqui#
Páginas e frames#
Um documento tem páginas; uma página guarda frames (artboards). Essa é a diferença em relação ao Vectra, que desenha num único artboard de cada vez: o Composer é para um conjunto de telas ou um conjunto de spreads.
Camadas, assets e componentes#
Quatro abas sobre o mesmo documento. Components são as peças reutilizáveis: defina uma vez, use em vários lugares, edite a definição e toda instância acompanha. Assets é o que o documento está usando. A lista de camadas é agrupada por tipo (Text, Images, Graphics), o que é mais rápido de percorrer do que uma lista plana numa página cheia.
Layout preciso#
X, Y, W, H e um raio de canto, mais align and distribute. Margins, Guides e uma grade Baseline são alternadores na barra de ferramentas: a grade de baseline é o que faz um texto em várias colunas se alinhar ao longo de um spread.
Tipografia#
A parte que justifica o Composer:
| Fonte, tamanho, entrelinha, tracking | como números, não como um slider |
| Alignment | horizontal, e vertical dentro da caixa: top, middle, bottom |
| Weight e case | incluindo "como digitado" |
| Paragraph spacing, listas | com marcadores ou numeradas |
| Resize mode | Fixed size, Auto width, Auto height: se a caixa segue o texto ou o texto se ajusta à caixa |
| Text threading | liga uma caixa de texto à próxima para que o excesso continue fluindo |
| Text styles | nomeados, reutilizáveis |
Prototype e código#
A aba Prototype conecta telas numa sequência clicável. A aba Code mostra o design como código.
Variáveis e estilos#
Dois painéis que transformam um documento num sistema em vez de um conjunto de páginas:
- Variables: valores nomeados (uma cor, um número, uma string) usados em todo o documento, com um seletor de variável onde quer que um valor seja definido. Mude a variável, todo uso acompanha.
- Styles: estilos de texto e de objeto nomeados.
- Fills: o editor de preenchimento, incluindo gradientes e imagens.
Junto com Components, é o que torna um design guiado por tokens: o espaço de trabalho DA do Vectra pode exportar design tokens, e o Composer é onde eles são usados.
Prototipagem#
Um protótipo aqui é um grafo sobre os frames que você já desenhou. Cada interação é feita de quatro coisas: um trigger (click ou hover), um frame target, uma transition e uma duration. Arraste do handle de conexão de um frame até o frame para onde ele deve levar.
O Prototype Mode transforma o canvas na visão de fluxo; o Preview Player roda tudo como o leitor veria, com um botão de reiniciar. Não há um documento de protótipo separado, os frames são as telas.
Dev Mode, entregando o design para o código#
A aba Inspect é a outra metade de uma ferramenta de design: ela lê a seleção e produz o código correspondente, em três abas de plataforma.
| Aba | Saída |
|---|---|
| CSS | a web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Junto com o código gerado, ela informa os números reais que um desenvolvedor pede: tamanho, raio, rotação, opacidade, preenchimento, traço, efeitos, fonte e tamanho de fonte, e espaçamento medido até o pai e até os irmãos: as duas distâncias que decidem um layout. O código copia para a área de transferência ou baixa.
Exportando#
Exportar no Composer é uma lista de configurações, não uma escolha só: adicione várias, selecione quais rodar, e cada configuração selecionada produz seu próprio arquivo numa única passada. Cada configuração carrega:
| Format e quality | por configuração, então um PNG e um JPG podem sair juntos |
| Scale e DPI | @2x e resolução de impressão |
| CMYK (print) | para a versão destinada à gráfica |
| Naming | um prefixo e um sufixo, project- e @2x |
| Background | incluindo transparent, onde o formato permite |
Dois detalhes que o painel afirma em vez de deixar você descobrir:
- Só PNG e SVG carregam transparência. Escolher um fundo transparente num JPG é uma configuração sem efeito, e o painel diz isso.
- A origem de uma exportação é ou um node ou uma slice: Create Slice cria uma região de exportação a partir da seleção atual, o que é como você exporta parte de um frame sem recortar o frame inteiro.
Presets salvam um conjunto inteiro de configurações, então a configuração de exportação de um projeto é escrita uma vez.
Arquivos que ele lê e grava#
| Formato nativo | .comp |
| Exporta | .png · .jpg · .svg, em qualquer escala ou DPI, em RGB ou CMYK |
| Gera | CSS · SwiftUI · Jetpack Compose |
Enviando trabalho para outros estúdios#
Produz uma composição, e o artboard ativo renderizado como imagem. Aceita pixel art, arte vetorial e imagens.
Trabalhando com outra pessoa#
O Composer sincroniza como um documento: o estado inteiro, com debounce, mais ações despachadas. Duas pessoas editando a mesma página no mesmo instante vão ter uma delas vencendo; trabalhem em páginas diferentes.
Limites e problemas comuns#
- Auto width e auto height brigam com layouts fixos. Uma caixa definida como auto width não vai quebrar linha; se o texto está saindo do frame, geralmente é por isso.
- Text threading não é automático. Uma caixa relata Not linked até você encadeá-la.
- Components se propagam a partir da definição, não de uma instância. Editar uma instância não atualiza as outras.