Lição 2 de 7 · 10 min
Monte seu estúdio
Objetivo:Deixe suas três ferramentas prontas, saiba qual trabalho cada uma faz e aprenda a se localizar no Figma.
SEU ESTÚDIO, DO ZERO
uxuiopen.comTrês ferramentas, três trabalhos. Uma ferramenta de chat com IA ajuda você a pensar, o Claude Design ajuda a explorar opções rapidamente e o Figma é onde você lapida o design final à mão. Seu diário liga tudo isso. Assista ao filme de dois minutos e depois monte o seu.
- 1 · Pensar
ChatGPT
Planos, pesquisa, ideias
- 2 · Explorar
Claude Design
Layouts, opções, apresentações
- 3 · Refinar
Figma
Lapidar à mão
- 4 · Registrar
Diário
O que você pediu e decidiu
Use uma ferramenta de chat com IA para…
- planejar um projeto e dividi-lo em etapas
- pesquisar um público ou um tema
- fazer brainstorming de nomes, títulos e ideias
- receber feedback sobre o seu raciocínio
Use o Figma para…
- montar telas e pôsteres com precisão
- controlar tipografia, cor e espaçamento à mão
- criar componentes reutilizáveis
- compartilhar designs e protótipos com outras pessoas
Figma
Sua tela. Onde você refina, organiza e entrega o trabalho.
Passos
- 1Crie uma conta gratuita.
- 2Está em uma turma? Nós verificamos você para o plano Education, então cadastre-se com o e-mail usado na inscrição.
- 3Crie um novo arquivo de design chamado "Studio".
ChatGPT
Seu parceiro de raciocínio. Planos de pesquisa, ideias, crítica e texto.
Passos
- 1Faça login.
- 2Crie um projeto chamado "Estúdio de design" para manter suas conversas juntas.
Claude e Claude Design
Seu explorador. Layouts, mockups e apresentações rápidos, e ele consegue seguir um design system.
Passos
- 1Faça login no Claude.
- 2Crie um projeto chamado "Estúdio de design".
- 3O Claude Design exige um plano pago e está em prévia de pesquisa. É opcional nesta unidade.
Aprenda a se localizar no Figma
O Figma parece cheio na primeira vez que você o abre, mas todo arquivo tem as mesmas cinco áreas. Aprenda-as uma vez e qualquer tutorial passa a fazer sentido. Clique nesta janela simplificada do Figma e encontre as cinco.
Clique em cada parte da janela do Figma para encontrar as cinco.
0 de 5 encontradasTudo no Figma fica organizado em uma árvore simples. Arquivos têm páginas, páginas têm frames e frames têm camadas. Quando você enxerga a árvore, sempre sabe onde cada coisa está.
- 📁Unidade 1 (arquivo)
- 📄Playground (página)
- #Pôster (frame)
- ▢Cabeçalho (grupo)
- TTítulo (texto)
- ◯Círculo (forma)
- 🖼Foto (imagem)
- 📄Diário (página)
- Arquivo
- Um projeto. Você pode compartilhá-lo com outras pessoas por link.
- Página
- Uma aba dentro do arquivo. Use páginas para separar o trabalho: Playground, Diário, Biblioteca de prompts.
- Frame
- Uma prancheta com tamanho definido: uma tela de celular, um pôster, um slide. Os designs vivem dentro de frames.
- Camada
- Qualquer coisa dentro de um frame: texto, formas, imagens, grupos. O painel de camadas lista todas elas.
Ler sobre uma ferramenta ensina muito pouco. Aqui está uma ferramenta de design reduzida ao essencial, nesta mesma página. Complete as seis tarefas e você terá feito tudo o que os seus primeiros dez minutos no Figma pedem.
Camadas
- Frame 1
Posição e tamanho
Auto layout
Aparência
Preenchimento
Contorno
Um arquivo vazio, um frame e seis coisas para fazer. Pressione V para mover, F para desenhar um frame, T para texto e R para um retângulo — as mesmas teclas que o Figma usa.
- 1
Dê um nome ao frame
Selecione-o na lista de camadas e digite um nome de verdade no topo do painel Design, por exemplo “Pôster”. Ninguém consegue trabalhar num arquivo cheio de Frame 1, Frame 2, Frame 3.
- 2
Deixe-o com formato de pôster
- 3
Adicione um título
- 4
Deixe o título grande: 36 ou mais
- 5
Adicione uma forma
- 6
Comece o próximo frame
Agora faça de verdade. Abra o Figma em outra aba e repita os mesmos seis movimentos lá — as teclas são as mesmas que você acabou de usar.
Seus primeiros dez minutos no Figma
Crie um arquivo
Crie um novo arquivo de design e chame-o de "Unidade 1". Adicione mais duas páginas: "Diário" e "Biblioteca de prompts".
Desenhe um frame
Aperte F e arraste no canvas. No painel da direita, defina o frame como 1080 × 1350, o formato de um post de rede social.
Adicione texto
Aperte T, clique dentro do frame e digite um título. Com o texto selecionado, mude a fonte e o tamanho no painel da direita.
Adicione uma forma
Aperte R para um retângulo ou O para uma elipse, arraste para desenhar e escolha uma cor de preenchimento no painel da direita.
Mova e duplique
Aperte V para voltar à ferramenta de mover. Selecione algo e aperte Ctrl + D (⌘ + D no Mac) para duplicar.
Veja tudo
Aperte Shift + 1 para dar zoom até tudo caber na tela. Aperte Shift + 0 para voltar a 100%.
Palavras-chave
- Canvas
- O espaço de trabalho infinito do Figma. Role para se mover; segure Ctrl ou ⌘ enquanto rola para dar zoom.
- Preenchimento
- A cor (ou imagem) dentro de uma forma, frame ou texto.
- Auto layout
- Uma configuração do Figma que espaça os elementos automaticamente, como uma pilha. Você vai usar muito a partir da Unidade 5.
- Componente
- Uma peça reutilizável, como um botão. Mude o principal e todas as cópias são atualizadas.
Agora confira se você sabe qual ferramenta usar.
Qual ferramenta você usaria primeiro?
Rascunhar dez perguntas para uma entrevista com usuários.
Ver três direções de layout para uma landing page.
Ajustar o espaçamento da versão que você escolheu.
Transformar suas telas em um conjunto de componentes.
Receber uma crítica sincera sobre por que um layout parece carregado.
Monte o arquivo do seu estúdio
Crie o arquivo do Figma que você vai usar até o fim deste curso.
- 1Crie um arquivo chamado "UX UI Open – Unidade 1" com três páginas: Playground, Diário, Biblioteca de prompts.
- 2Na página Playground, crie três frames: um celular (390 × 844), um pôster (1080 × 1350) e um slide (1920 × 1080).
- 3Coloque um título em cada frame, usando uma fonte diferente em cada um.
- 4Renomeie cada frame para que o nome diga o que ele é.
- 5Conte na discussão que você está pronto e o que mais confundiu você.
Leia a seguir