Card do evento1080 × 1350
Noite do Design
Traga um caderno. Vamos redesenhar juntos uma passagem de ônibus.
Confirmar presença- 1. Ajuste
- 2. Gere
- 3. Julgue
Este card está quebrado. Conserte.
Leia o briefing e use o painel de design. Quando as cinco verificações ficarem verdes, peça versões à IA.
Frame
No Figma
Aperte F para desenhar um frame e escolha um tamanho predefinido, como post do Instagram, no painel direito. Frames são as suas pranchetas.
Formato
Imagem
No Figma
Arraste uma imagem sobre uma forma para preenchê-la com a foto. O raio do canto fica no painel Design, ao lado do tamanho.
Mostrar
Sobreposição
Legenda
Layout
No Figma
O Auto layout (Shift + A) define a margem interna e o espaçamento entre os itens, para que tudo fique uniforme mesmo quando o conteúdo muda.
Alinhar
Texto
No Figma
Aperte T para adicionar texto. Salve fontes e tamanhos como estilos de texto para manter todas as telas do arquivo consistentes.
Fonte
Cor do texto
Preenchimento
No Figma
O preenchimento é a cor de uma camada. Clique na amostra para colar um código hex. Confira o contraste do texto com um plugin como o Stark.
Fundo
Botão
- Hierarquia
- Contraste 1.7:1
- Botão em destaque
- Respiro
- Cantos aninhados
- Cabe no frame ok
Primeiro deixe as cinco verificações verdes.
O básico do Figma que você vai usar todo dia
Os mesmos movimentos que você acabou de fazer, como atalhos reais do Figma. Experimente quando abrir o Figma na Unidade 1.
- F
Frame
Desenhe um frame (uma prancheta). Escolha um tamanho predefinido no painel direito.
- T
Texto
Adicione texto. Mude a fonte, o tamanho e a altura da linha no painel Design.
- RO
Retângulo e elipse
Desenhe formas básicas. Segure Shift para mantê-las quadradas ou redondas.
- ShiftA
Auto layout
Empilhe itens com margem interna e espaçamentos que continuam uniformes quando o conteúdo muda.
- Ctrl/⌘D
Duplicar
Copie uma camada no mesmo lugar e depois mova. O jeito mais rápido de criar variações.
- Alt
Medir
Selecione uma camada e segure Alt (Option) para ver a distância até qualquer coisa sob o cursor.
- Ctrl/⌘AltK
Componente
Transforme uma camada em um componente reutilizável, como um botão que você usa em todo lugar.
- Shift1
Ajustar à tela
Veja tudo o que está no canvas de uma vez. Shift 0 volta para 100%.