O plano Starter permite trabalho básico, mas tem limites de organização e colaboração.
O curso usa um arquivo, uma página e vários quadros, sem depender de recursos pagos.
O Figma guarda alterações na conta.
Aguarde a indicação de salvamento antes de sair.
Mais adiante você também salvará uma cópia local.
As telas e nomes podem mudar; procure a função descrita e confira o resultado, sem decorar posições de botões.
Álvaro guarda o endereço para não depender de encontrar o arquivo novamente.
Ficha preenchida · exemplo da aula
1Produto: Figma Design
2Arquivo: Luz de Rua
3Conferência: reabrir com permissão de edição
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Criar um arquivo de Design, nomear e confirmar que ele reabre.
Álvaro usa a ficha para conferir: conferência: reabrir com permissão de edição.
Ilustração didática criada no Codex: Tainá e Álvaro planejam as peças com fotografias e cartões. É uma cena ilustrativa, não uma captura do Figma.
Teste-se
O arquivo só permite visualizar. O que conferir antes de procurar ferramentas?
Se travou aqui, é normalSe não conseguir entrar ou editar, deixe a prática pendente. As próximas montagens exigem um arquivo acessível.
Pratique agora 0/3
Abra um arquivo que você consegue reencontrar
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando o arquivo nomeado reabre e permite edição.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Abra um arquivo que você consegue reencontrar
Produto: Figma Design — <sua decisão>
Arquivo: Luz de Rua — <sua decisão>
Conferência: reabrir com permissão de edição — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue criar e reabrir um arquivo de Figma Design.
Cola da aula
Abra um arquivo que você consegue reencontrar
Produto: Figma Design
Arquivo: Luz de Rua
Conferência: reabrir com permissão de edição
Seu próximo passo
Você já tem critérios para criar e reabrir um arquivo de Figma Design.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Use cinco regras para encontrar o problema
Material complementar · módulo 1Produção e cuidados para retomar depois da prática curta.
Figma Design é a bancada deste curso
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
Confirme acesso antes de produzir
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
A versão revisada organiza chamada, explicação e fotografia.
Anote o problema que mais atrapalha a leitura.
Escolha uma mudança ligada a ele: retirar excesso, aumentar espaço, alinhar ou criar contraste.
Use uma captura da peça ou uma anotação para guardar sua avaliação.
Se nenhum problema aparecer, registre quais critérios passaram.
O exercício termina com um diagnóstico e uma decisão, sem exigir uma reforma desnecessária.
Álvaro consegue explicar qual informação deve ser lida primeiro.
Composições autorais · não são capturas do Figma
Versão para revisar
LUZ DE RUA FOTOGRAFIA! OLHE! APRENDA! NOVA EXPERIÊNCIA!
Muitas chamadas com o mesmo destaque.
Versão organizada · exemplo didático
Luz de Rua
Aprenda a observar a cidade.
Uma mensagem, poucos estilos, espaço, repetição e contraste.
A segunda peça prioriza a chamada e amplia a fotografia. Confira os cinco critérios, sem julgar apenas pelo gosto.
3Confira a decisão pelo uso
Escolher uma mensagem e corrigir o problema que mais atrapalha sua leitura.
Álvaro usa a ficha para conferir: decisão: uma mudança justificada ou manter.
Ilustração didática criada no Codex: Muitos recortes competem com um cartão de foco único. A cena ilustra seleção; o exemplo com texto aparece no quadro da aula.
Teste-se
O título disputa atenção com quatro chamadas do mesmo tamanho. Qual mudança ataca o problema?
Se travou aqui, é normalNão precisa conhecer termos de design. Aponte o que leu primeiro e o que ficou difícil de entender.
Pratique agora 0/3
Use cinco regras para encontrar o problema
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando os cinco critérios foram conferidos e há uma decisão justificada.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Use cinco regras para encontrar o problema
Régua: cinco critérios observáveis — <sua decisão>
Diagnóstico: um problema principal ou nenhum — <sua decisão>
Decisão: uma mudança justificada ou manter — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue avaliar uma peça por mensagem, letras, espaço, repetição e leitura.
Cola da aula
Use cinco regras para encontrar o problema
Régua: cinco critérios observáveis
Diagnóstico: um problema principal ou nenhum
Decisão: uma mudança justificada ou manter
Seu próximo passo
Você já tem critérios para avaliar uma peça por mensagem, letras, espaço, repetição e leitura.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Planeje uma capa e três páginas
Material complementar · módulo 1Produção e cuidados para retomar depois da prática curta.
Clareza pode ser observada
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
Escolha uma correção por vez
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
Escolha uma cor de fundo, uma de texto e uma de destaque.
Reserve um lugar para o nome e para a numeração.
No exercício, usaremos creme, azul petróleo e ocre.
Essas escolhas ajudam a reconhecer a família sem exigir imagens idênticas.
Quem vem do Canva pode pensar em uma página do desenho.
No Figma, cada peça ficará num quadro chamado frame.
Uma página do arquivo pode conter muitos quadros.
Essa diferença evita criar vários arquivos para um único carrossel.
Álvaro distingue a página do arquivo dos quatro quadros que ela contém.
Ficha preenchida · exemplo da aula
1Capa: apresentar Luz de Rua
2Páginas: luz, detalhe e série
3Fixos: cores, letras e assinatura
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Dar uma função e uma chamada a cada quadro, mantendo uma família visual.
Álvaro usa a ficha para conferir: fixos: cores, letras e assinatura.
Ilustração didática criada no Codex: Quatro cartões compartilham cores e variam as fotos. Estão sem texto; o roteiro da prática fornece a mensagem de cada peça.
Teste-se
No Figma Design, como organizar quatro peças do mesmo carrossel?
Se travou aqui, é normalUse os quatro títulos do exemplo se estiver sem ideia. Acrescente uma frase simples para cada um.
Pratique agora 0/3
Planeje uma capa e três páginas
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando as quatro peças têm conteúdo definido e elementos fixos identificados.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Planeje uma capa e três páginas
Capa: apresentar Luz de Rua — <sua decisão>
Páginas: luz, detalhe e série — <sua decisão>
Fixos: cores, letras e assinatura — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue escrever o conteúdo de quatro peças antes de diagramar.
Cola da aula
Planeje uma capa e três páginas
Capa: apresentar Luz de Rua
Páginas: luz, detalhe e série
Fixos: cores, letras e assinatura
Seu próximo passo
Você já tem critérios para escrever o conteúdo de quatro peças antes de diagramar.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Crie um quadro com tamanho conhecido
Material complementar · módulo 1Produção e cuidados para retomar depois da prática curta.
Quatro peças, uma sequência
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
Defina os elementos que vão se repetir
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
Confira recursos e custos na conta atual. Os guias podem mostrar caminhos diferentes conforme a versão e o dispositivo.
Aula 3 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 2 · Aula 4 de 18
Crie um quadro com tamanho conhecido
Você consegue montar um quadro vertical de 1080 por 1350.
Um objeto grande no espaço de trabalho não define a peça final. O quadro delimita o que será exportado.
Em 1 minuto
Quadro: 00-Capa
Dimensões: W 1080 e H 1350
Zoom: muda a visualização, não o tamanho
1O quadro guarda dimensões e conteúdo
No arquivo Luz de Rua, escolha Frame na barra de ferramentas ou pressione F fora da edição de texto.
Desenhe um quadro vazio.
Com ele selecionado, localize W e H, largura e altura.
Defina 1080 e 1350.
Se necessário, desative a proporção vinculada.
Renomeie o quadro para 00-Capa na lista de camadas.
O formato 4:5 é o alvo deste exercício, não uma garantia de regra permanente de plataforma.
Na entrega, confira o destino real.
Uma miniatura horizontal poderá usar outro quadro de 1280 por 720.
Tainá define o tamanho antes de posicionar a fotografia.
Decisão frágil
Ajustar o zoom esperando mudar o tamanho do arquivo exportado.
Decisão verificável
Definir largura e altura do quadro, usando zoom apenas para visualizar.
Observe quais características tornam a segunda decisão conferível.
2Zoom da tela não muda o arquivo
Reduzir a visualização ajuda a ver o quadro inteiro.
Isso não altera suas dimensões.
Mudar W e H altera o quadro.
Essa distinção evita aumentar a peça quando você queria apenas enxergar melhor.
Selecione o nome 00-Capa na lista para conferir o contorno do quadro.
Deixe espaço na área de trabalho para duplicá-lo depois.
Não é preciso criar outra página do arquivo.
Vamos manter todas as peças juntas para comparar.
Álvaro reduz o zoom sem mexer nos valores W e H.
Ficha preenchida · exemplo da aula
1Quadro: 00-Capa
2Dimensões: W 1080 e H 1350
3Zoom: muda a visualização, não o tamanho
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Definir largura e altura do quadro, usando zoom apenas para visualizar.
Álvaro usa a ficha para conferir: zoom: muda a visualização, não o tamanho.
Ilustração didática criada no Codex: Os papéis mostram formatos vertical e horizontal. São uma analogia dos limites do quadro, sem reproduzir controles do programa.
Teste-se
Você diminui o zoom para 25%. O que acontece com as dimensões do quadro?
Se travou aqui, é normalSe estiver digitando texto, pressione Escape antes de F. Confirme que o item selecionado é o quadro, não uma forma interna.
Pratique agora 0/3
Crie um quadro com tamanho conhecido
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando o quadro nomeado mantém 1080 por 1350 mesmo após mudar o zoom.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Crie um quadro com tamanho conhecido
Quadro: 00-Capa — <sua decisão>
Dimensões: W 1080 e H 1350 — <sua decisão>
Zoom: muda a visualização, não o tamanho — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue montar um quadro vertical de 1080 por 1350.
Cola da aula
Crie um quadro com tamanho conhecido
Quadro: 00-Capa
Dimensões: W 1080 e H 1350
Zoom: muda a visualização, não o tamanho
Seu próximo passo
Você já tem critérios para montar um quadro vertical de 1080 por 1350.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Entenda a ordem das camadas
Material complementar · módulo 2Produção e cuidados para retomar depois da prática curta.
O quadro guarda dimensões e conteúdo
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
Zoom da tela não muda o arquivo
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
Confira recursos e custos na conta atual. Os guias podem mostrar caminhos diferentes conforme a versão e o dispositivo.
Aula 4 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 2 · Aula 5 de 18
Entenda a ordem das camadas
Você consegue organizar duas formas dentro do quadro e conferir sua sobreposição.
Quando algo desaparece, pode estar coberto ou fora do quadro. Confira a estrutura antes de redesenhar.
Em 1 minuto
Estrutura: duas formas dentro de 00-Capa
Ordem: Cartão acima de Fundo
Teste: ocultar, exibir e conferir o recorte
1Cada objeto ocupa uma camada
Selecione 00-Capa.
Use Rectangle ou R para desenhar dois retângulos sobrepostos dentro dele.
Aplique cores diferentes em Fill, o preenchimento.
Observe os dois itens na lista de camadas.
O que está acima normalmente aparece na frente.
Renomeie os retângulos Fundo e Cartão.
Na lista, arraste Cartão para cima de Fundo.
Confira a mudança na tela.
Os dois devem estar dentro de 00-Capa.
A indentação da lista mostra essa relação; arraste para dentro do quadro se estiverem soltos.
Tainá nomeia a forma antes de bloqueá-la.
Pedidos para comparar · exemplo didático
PedidoExcluir objetos ao acaso quando a fotografia some.
Faltam limites observáveis para conferir o trabalho.
PedidoConferir ordem, visibilidade e pertencimento ao quadro antes de alterar.
Há critérios claros para conferir a decisão.
Compare as duas instruções. São exemplos escritos para a aula, sem resposta simulada de ferramenta.
2Ocultar é um teste reversível
Use o controle de visibilidade de uma camada para ocultá-la e exibi-la novamente.
Se o objeto reaparece, você localizou a camada correta.
Bloquear impede alterações acidentais.
Desbloqueie quando precisar ajustar o item.
A opção Clip content do quadro recorta o conteúdo que ultrapassa seus limites.
Ela não remove o arquivo original.
Teste mover uma forma parcialmente para fora e observe o recorte.
Depois devolva a forma ao lugar e preserve apenas o que pretende usar.
Álvaro usa visibilidade para identificar um objeto sem apagá-lo.
Ficha preenchida · exemplo da aula
1Estrutura: duas formas dentro de 00-Capa
2Ordem: Cartão acima de Fundo
3Teste: ocultar, exibir e conferir o recorte
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Conferir ordem, visibilidade e pertencimento ao quadro antes de alterar.
Álvaro usa a ficha para conferir: teste: ocultar, exibir e conferir o recorte.
Ilustração didática criada no Codex: Papéis sobrepostos representam a ordem dos objetos. A cena mostra o mecanismo, não o painel de camadas do Figma.
Teste-se
O cartão existe na lista, mas está coberto por outra forma. Qual ajuste investigar?
Se travou aqui, é normalDesfazer recupera o teste recente. Faça uma mudança por vez para entender qual camada estava cobrindo o assunto.
Pratique agora 0/3
Entenda a ordem das camadas
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando a ordem foi testada e as duas formas estão dentro do quadro.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Entenda a ordem das camadas
Estrutura: duas formas dentro de 00-Capa — <sua decisão>
Ordem: Cartão acima de Fundo — <sua decisão>
Teste: ocultar, exibir e conferir o recorte — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue organizar duas formas dentro do quadro e conferir sua sobreposição.
Cola da aula
Entenda a ordem das camadas
Estrutura: duas formas dentro de 00-Capa
Ordem: Cartão acima de Fundo
Teste: ocultar, exibir e conferir o recorte
Seu próximo passo
Você já tem critérios para organizar duas formas dentro do quadro e conferir sua sobreposição.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Coloque a imagem sem cortar o assunto
Material complementar · módulo 2Produção e cuidados para retomar depois da prática curta.
Cada objeto ocupa uma camada
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
Ocultar é um teste reversível
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
Compare uma versão que corta o arco com outra que o mantém.
A foto serve para convidar a observar arquitetura.
Perder o arco pode enfraquecer essa intenção.
Se usar outra foto, defina antes qual detalhe deve permanecer.
A imagem do kit foi gerada no Codex e representa uma rua fictícia.
Ela não comprova a existência de um passeio ou local.
Você pode usar uma fotografia própria autorizada.
Guarde a fonte separada para refazer o enquadramento quando mudar o formato.
Álvaro guarda a imagem fonte para experimentar outro formato depois.
Ficha preenchida · exemplo da aula
1Fonte: imagem guardada no computador
2Modo: Fit, Fill ou Crop com motivo
3Conferência: arco da janela preservado
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Escolher o recorte preservando o detalhe que sustenta a mensagem.
Álvaro usa a ficha para conferir: conferência: arco da janela preservado.
Ilustração didática criada no Codex: Dois enquadramentos mostram o arco com margens diferentes. Compare o espaço ao redor antes de decidir o recorte da sua capa.
Teste-se
Fill corta o arco que explica a imagem. Qual é um próximo passo adequado?
Se travou aqui, é normalSe o arquivo entrar fora do quadro, localize a camada na lista e mova para 00-Capa. Não precisa importar novamente.
Pratique agora 0/3
Coloque a imagem sem cortar o assunto
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando a imagem está no quadro e o detalhe principal permanece visível.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Coloque a imagem sem cortar o assunto
Fonte: imagem guardada no computador — <sua decisão>
Modo: Fit, Fill ou Crop com motivo — <sua decisão>
Conferência: arco da janela preservado — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue inserir uma imagem e escolher entre ajuste e recorte.
Cola da aula
Coloque a imagem sem cortar o assunto
Fonte: imagem guardada no computador
Modo: Fit, Fill ou Crop com motivo
Conferência: arco da janela preservado
Seu próximo passo
Você já tem critérios para inserir uma imagem e escolher entre ajuste e recorte.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Faça três níveis de texto trabalharem juntos
Material complementar · módulo 2Produção e cuidados para retomar depois da prática curta.
Uma imagem pode preencher uma forma
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
Recorte precisa respeitar a mensagem
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
Para conferir a distância entre linhas, faça uma cópia do título.
Reduza a largura da caixa até o título ocupar duas linhas.
No controle Line height, que define a altura de linha, experimente 72 pixels com letras de tamanho 64.
Compare com um valor menor e veja se as linhas ficam apertadas.
Depois restaure a capa de uma linha e retire o teste.
Leia uma frase com acentos, como Observação da cidade.
Confira se todos os caracteres aparecem na fonte escolhida.
Depois reduza a visualização ao tamanho aproximado de uso.
Se a leitura depender de ampliar, ajuste a peça antes de acrescentar decoração.
Álvaro confere os acentos antes de duplicar a peça.
Exemplo de hierarquia · diagrama autoral
Luz de Rua
Aprenda a observar a cidade.
Exemplo didático
Três níveis visíveis. Este exemplo foi reduzido para leitura no curso; no quadro 1080 por 1350, comece com 64, 32 e 28.
3Confira a decisão pelo uso
Usar três papéis de texto e conferir tamanho, quebra e entrelinha.
Álvaro usa a ficha para conferir: revisão: acentos, quebras e entrelinha.
Ilustração didática criada no Codex: Blocos de tamanhos diferentes ilustram hierarquia. O exemplo com texto real está no quadro da aula; blocos não comprovam legibilidade.
Teste-se
As linhas do título ficam coladas. Qual propriedade atua diretamente nesse espaço?
Se travou aqui, é normalSe T escrever uma letra no texto atual, pressione Escape e selecione a ferramenta Text. Confira a camada antes de alterar propriedades.
Pratique agora 0/3
Faça três níveis de texto trabalharem juntos
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando os três textos estão editáveis, sem corte e com ordem de leitura clara.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Faça três níveis de texto trabalharem juntos
Chamada: 64 como ponto de partida — <sua decisão>
Apoio e assinatura: 32 e 28 — <sua decisão>
Revisão: acentos, quebras e entrelinha — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue criar chamada, apoio e assinatura com leitura clara.
Cola da aula
Faça três níveis de texto trabalharem juntos
Chamada: 64 como ponto de partida
Apoio e assinatura: 32 e 28
Revisão: acentos, quebras e entrelinha
Seu próximo passo
Você já tem critérios para criar chamada, apoio e assinatura com leitura clara.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Alinhe pelo mesmo início e repita os espaços
Material complementar · módulo 3Produção e cuidados para retomar depois da prática curta.
Texto é uma camada editável
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
Entrelinha organiza o bloco
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
Confira recursos e custos na conta atual. Os guias podem mostrar caminhos diferentes conforme a versão e o dispositivo.
Aula 7 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 3 · Aula 8 de 18
Alinhe pelo mesmo início e repita os espaços
Você consegue organizar três objetos com alinhamento e intervalos regulares.
Objetos quase alinhados criam ruído. Use os controles para conferir o que o olho percebeu.
Em 1 minuto
Seleção: três objetos do mesmo conjunto
Intervalo de teste: 24 unidades
Margem inicial do texto: 64 unidades
1A seleção define o alinhamento
Selecione três objetos do mesmo quadro, mantendo Shift ao clicar.
Use Align left para alinhar pelo início.
Confira quais objetos ficaram selecionados.
Quando apenas um está marcado, o alinhamento pode usar o quadro pai como referência.
Para treinar, use três retângulos de teste fora da capa.
Coloque-os numa coluna, selecione os três e use Tidy up ou distribuição vertical.
Observe a distância entre eles.
Ajuste para 24 no campo de espaçamento quando disponível.
Tainá seleciona só os objetos que precisam compartilhar o intervalo.
Pedidos para comparar · exemplo didático
PedidoArrastar cada item até parecer mais ou menos alinhado.
Faltam limites observáveis para conferir o trabalho.
PedidoSelecionar os objetos corretos, alinhar e conferir os intervalos.
Há critérios claros para conferir a decisão.
Compare as duas instruções. São exemplos escritos para a aula, sem resposta simulada de ferramenta.
2Margem é parte da composição
Na capa, reserve uma margem inicial de 64 unidades para a região de texto.
Ela é uma escolha deste exercício, não um padrão universal.
Confira se título, apoio e assinatura respeitam o mesmo início.
Use guias visuais e os campos de posição para ajustar.
Não aplique organização automática a toda a peça sem olhar.
O programa não conhece a importância de cada elemento.
Tidy up pode mudar posições além do desejado.
Teste numa cópia ou desfaça se a composição perder sentido.
Álvaro confere a margem da capa depois do teste separado.
Ficha preenchida · exemplo da aula
1Seleção: três objetos do mesmo conjunto
2Intervalo de teste: 24 unidades
3Margem inicial do texto: 64 unidades
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Selecionar os objetos corretos, alinhar e conferir os intervalos.
Álvaro usa a ficha para conferir: margem inicial do texto: 64 unidades.
Ilustração didática criada no Codex: A régua e as fotografias ilustram alinhamento e repetição de espaços. É uma analogia física, sem medidas exatas para copiar.
Teste-se
Tidy up alterou a composição inteira de forma indesejada. O que fazer?
Se travou aqui, é normalSe os controles não aparecerem, confira se há vários objetos selecionados. Alinhamento e distribuição são ações diferentes.
Pratique agora 0/3
Alinhe pelo mesmo início e repita os espaços
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando o teste tem três objetos alinhados e os textos da capa compartilham o mesmo início.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Alinhe pelo mesmo início e repita os espaços
Seleção: três objetos do mesmo conjunto — <sua decisão>
Intervalo de teste: 24 unidades — <sua decisão>
Margem inicial do texto: 64 unidades — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue organizar três objetos com alinhamento e intervalos regulares.
Cola da aula
Alinhe pelo mesmo início e repita os espaços
Seleção: três objetos do mesmo conjunto
Intervalo de teste: 24 unidades
Margem inicial do texto: 64 unidades
Seu próximo passo
Você já tem critérios para organizar três objetos com alinhamento e intervalos regulares.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Diferencie preenchimento, contorno e transição
Material complementar · módulo 3Produção e cuidados para retomar depois da prática curta.
A seleção define o alinhamento
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
Margem é parte da composição
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
Confira recursos e custos na conta atual. Os guias podem mostrar caminhos diferentes conforme a versão e o dispositivo.
Aula 8 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 3 · Aula 9 de 18
Diferencie preenchimento, contorno e transição
Você consegue testar cor sólida, borda e gradiente sem confundir suas funções.
Mudar a propriedade errada pode deixar a peça pesada. Descubra qual parte do objeto está sendo alterada.
Em 1 minuto
Fill: área interna
Stroke: limite do objeto
Linear: transição entre pontos
1Preenchimento ocupa, contorno delimita
Crie três quadrados de teste.
No primeiro, escolha Fill sólido azul petróleo #173B46.
No segundo, retire o preenchimento e adicione Stroke, o contorno.
Ajuste sua espessura e confira o limite.
No terceiro, experimente um preenchimento Linear, o gradiente.
No gradiente, cada ponto controla uma cor e sua opacidade.
Use azul petróleo em uma ponta e reduza a opacidade na outra.
A linha de controle muda a direção da transição.
Isso será útil para suavizar uma área atrás do texto.
Tainá usa o contorno para separar um cartão sem cobrir a imagem.
Decisão frágil
Somar borda grossa, preenchimento forte e gradiente em todos os objetos.
Decisão verificável
Usar cada propriedade para um trabalho específico e conferir o resultado.
Observe quais características tornam a segunda decisão conferível.
2A paleta precisa de papéis claros
Use creme #F7F1E6 para fundo, azul #173B46 para texto e ocre #C58B35 como destaque.
Copie cada código no campo de cor.
É uma identificação da cor, não um comando.
Não use o ocre automaticamente para texto pequeno; confira o contraste da combinação.
Retire efeitos dos quadrados para observar apenas a propriedade estudada.
Depois aplique uma escolha à capa e confira a leitura.
Um gradiente que parece bonito pode competir com a fotografia.
Mantenha somente se ajudar a separar a informação.
Álvaro identifica a cor do texto pelo código e evita escolher apenas pelo nome.
Ficha preenchida · exemplo da aula
1Fill: área interna
2Stroke: limite do objeto
3Linear: transição entre pontos
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Usar cada propriedade para um trabalho específico e conferir o resultado.
Álvaro usa a ficha para conferir: linear: transição entre pontos.
Ilustração didática criada no Codex: Amostras cheias, bordas vazadas e uma transição ilustram três funções. Os controles reais devem ser conferidos no objeto selecionado.
Teste-se
Você quer só uma moldura, sem área colorida no centro. O que configurar?
Se travou aqui, é normalSe a cor não mudar, confirme a camada selecionada. Fill de texto altera as letras; o fundo precisa de outra forma ou do próprio quadro.
Pratique agora 0/3
Diferencie preenchimento, contorno e transição
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando os três testes existem e você registrou uma escolha para a capa.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Diferencie preenchimento, contorno e transição
Fill: área interna — <sua decisão>
Stroke: limite do objeto — <sua decisão>
Linear: transição entre pontos — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue testar cor sólida, borda e gradiente sem confundir suas funções.
Cola da aula
Diferencie preenchimento, contorno e transição
Fill: área interna
Stroke: limite do objeto
Linear: transição entre pontos
Seu próximo passo
Você já tem critérios para testar cor sólida, borda e gradiente sem confundir suas funções.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Separe o texto da fotografia
Material complementar · módulo 3Produção e cuidados para retomar depois da prática curta.
Preenchimento ocupa, contorno delimita
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
A paleta precisa de papéis claros
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
Confira recursos e custos na conta atual. Os guias podem mostrar caminhos diferentes conforme a versão e o dispositivo.
Aula 9 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 4 · Aula 10 de 18
Separe o texto da fotografia
Você consegue criar uma área de leitura sem esconder o assunto principal.
Uma foto varia de claro para escuro. Uma chamada pode desaparecer em uma região e funcionar em outra.
Em 1 minuto
Ordem: foto, sobreposição, texto
Alternativa: cartão sólido para medir contraste
Teste: frase legível e assunto reconhecível
1Sobreposição precisa de ordem
Selecione 00-Capa na lista e use Duplicate no menu de contexto.
O atalho é Ctrl+D no Windows ou Cmd+D no Mac.
Trabalhe na cópia para preservar a versão atual.
Sobre a fotografia, crie um retângulo azul #173B46.
Mantenha o retângulo abaixo dos textos e acima da foto.
Diminua a opacidade do preenchimento para ver a imagem por baixo.
Ajuste a área e a intensidade olhando a frase inteira.
Não existe uma porcentagem que funcione para toda fotografia.
Se a leitura continuar instável, use um cartão de cor sólida atrás do texto.
A imagem pode continuar visível na área restante.
Tainá usa um cartão sólido quando a foto dificulta a leitura.
Decisão frágil
Colocar texto claro em qualquer parte da foto e acrescentar sombra forte.
Decisão verificável
Criar uma área estável de leitura e conferir contraste e assunto.
Observe quais características tornam a segunda decisão conferível.
Conferir contraste: Foreground Color é a cor do texto; Background Color é o fundo.
2O teste é a leitura, não o efeito
O creme #F7F1E6 sobre azul #173B46 forma a dupla de texto do exemplo.
Confira a relação no verificador indicado.
Para texto comum, use 4,5 para 1 como referência mínima.
Sobre fotografia, a relação muda conforme o ponto; um fundo sólido facilita a medição.
Compare a versão anterior e a nova no tamanho de uso.
A chamada deve ficar clara e a janela deve permanecer reconhecível.
Se a sobreposição esconder o assunto, reduza sua área ou mude a posição do texto.
Preserve a informação principal.
Álvaro confere se a janela continua reconhecível depois da sobreposição.
Ficha preenchida · exemplo da aula
1Ordem: foto, sobreposição, texto
2Alternativa: cartão sólido para medir contraste
3Teste: frase legível e assunto reconhecível
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Criar uma área estável de leitura e conferir contraste e assunto.
Álvaro usa a ficha para conferir: teste: frase legível e assunto reconhecível.
Ilustração didática criada no Codex: O acetato representa uma camada entre foto e cartão. A peça real precisa de texto legível; a cena não mede contraste.
Teste-se
A sobreposição torna a foto quase invisível. Qual ajuste preserva a função?
Se travou aqui, é normalSe o retângulo cobrir as letras, ajuste a ordem na lista de camadas. Opacidade do preenchimento e ordem resolvem problemas diferentes.
Pratique agora 0/3
Separe o texto da fotografia
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando há duas versões comparadas e uma área de leitura conferida.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Separe o texto da fotografia
Ordem: foto, sobreposição, texto — <sua decisão>
Alternativa: cartão sólido para medir contraste — <sua decisão>
Teste: frase legível e assunto reconhecível — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue criar uma área de leitura sem esconder o assunto principal.
Cola da aula
Separe o texto da fotografia
Ordem: foto, sobreposição, texto
Alternativa: cartão sólido para medir contraste
Teste: frase legível e assunto reconhecível
Seu próximo passo
Você já tem critérios para criar uma área de leitura sem esconder o assunto principal.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Use desfoque para apoiar a informação
Material complementar · módulo 4Produção e cuidados para retomar depois da prática curta.
Sobreposição precisa de ordem
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
O teste é a leitura, não o efeito
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
Confira recursos e custos na conta atual. Os guias podem mostrar caminhos diferentes conforme a versão e o dispositivo.
Aula 10 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 4 · Aula 11 de 18
Use desfoque para apoiar a informação
Você consegue testar um fundo desfocado e decidir se ele melhora a peça.
Desfoque em excesso pode virar ruído ou lentidão. Preserve um assunto nítido e teste a função do fundo.
Em 1 minuto
Layer blur: afeta a própria camada
Background blur: afeta o conteúdo atrás
Decisão: efeito ajuda ou versão simples funciona melhor
1O desfoque pode atingir camadas diferentes
Em uma cópia da capa, duplique a foto.
Coloque a duplicata abaixo da original na lista e amplie-a para preencher o quadro.
Reduza a original acima dela para deixar bordas do fundo visíveis.
Selecione somente a duplicata.
Em Effects, adicione um efeito e escolha Layer blur.
Aumente o valor aos poucos; o fundo deve perder nitidez e a foto principal continuar nítida.
Background blur funciona de outro modo: desfoca o que está atrás da forma selecionada.
Para perceber o resultado, o preenchimento dessa forma precisa ter transparência.
Use apenas quando houver conteúdo atrás e confira o efeito no conjunto.
Tainá mantém a janela principal nítida para preservar a mensagem.
Pedidos para comparar · exemplo didático
PedidoAplicar desfoque alto a tudo, inclusive ao assunto e ao texto.
Faltam limites observáveis para conferir o trabalho.
PedidoDesfocar apenas o apoio e manter informação principal nítida.
Há critérios claros para conferir a decisão.
Compare as duas instruções. São exemplos escritos para a aula, sem resposta simulada de ferramenta.
2Vidro e atmosfera são opcionais
Um cartão translúcido com desfoque pode lembrar vidro.
Ele só ajuda se o texto continuar legível.
Um cartão sólido também é válido.
Compare as duas opções sem mudar a chamada, para não confundir o motivo da melhora.
Não copie um valor alto, como 180, sem considerar o tamanho da peça.
Comece com pouco e observe.
Vários efeitos podem reduzir o desempenho.
Se a interação ficar lenta, oculte os efeitos de teste e mantenha a alternativa simples.
Álvaro prefere o cartão sólido quando o efeito não melhora a leitura.
Ficha preenchida · exemplo da aula
1Layer blur: afeta a própria camada
2Background blur: afeta o conteúdo atrás
3Decisão: efeito ajuda ou versão simples funciona melhor
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Desfocar apenas o apoio e manter informação principal nítida.
Álvaro usa a ficha para conferir: decisão: efeito ajuda ou versão simples funciona melhor.
Ilustração didática criada no Codex: A cena apresenta assunto nítido e uma versão difusa como apoio. Ilustra a diferença visual, sem mostrar o controle do Figma.
Teste-se
Você aplica Layer blur ao título e ele perde nitidez. Qual foi o comportamento?
Se travou aqui, é normalNão precisa manter o desfoque para concluir. O teste e uma decisão registrada são a entrega desta aula.
Pratique agora 0/3
Use desfoque para apoiar a informação
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando o efeito foi testado e a decisão está registrada em uma versão real.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Use desfoque para apoiar a informação
Layer blur: afeta a própria camada — <sua decisão>
Background blur: afeta o conteúdo atrás — <sua decisão>
Decisão: efeito ajuda ou versão simples funciona melhor — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue testar um fundo desfocado e decidir se ele melhora a peça.
Cola da aula
Use desfoque para apoiar a informação
Layer blur: afeta a própria camada
Background blur: afeta o conteúdo atrás
Decisão: efeito ajuda ou versão simples funciona melhor
Seu próximo passo
Você já tem critérios para testar um fundo desfocado e decidir se ele melhora a peça.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Use uma máscara para revelar um detalhe
Material complementar · módulo 4Produção e cuidados para retomar depois da prática curta.
O desfoque pode atingir camadas diferentes
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
Vidro e atmosfera são opcionais
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
Confira recursos e custos na conta atual. Os guias podem mostrar caminhos diferentes conforme a versão e o dispositivo.
Aula 11 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 4 · Aula 12 de 18
Use uma máscara para revelar um detalhe
Você consegue criar e conferir um recorte circular reversível.
Recortar o arquivo original elimina possibilidades. Uma máscara permite testar a área visível dentro da composição.
Em 1 minuto
Máscara: forma abaixo da foto
Seleção: forma e foto para criar o grupo
Revisão: detalhe visível sem perder o propósito
1A forma define a janela de visibilidade
Faça o teste fora da capa com uma cópia da fotografia.
Escolha Ellipse ou pressione O.
Desenhe a elipse mantendo Shift para formar um círculo e posicione-a sobre o detalhe desejado.
Na lista de camadas, coloque a elipse abaixo da foto.
Selecione as duas e use Use as mask no menu de contexto.
A máscara limita a parte da foto que aparece.
Confira o grupo criado na lista.
Se sumir tudo, verifique ordem, posição e seleção.
A forma da máscara não reconhece automaticamente o contorno de um objeto; ela revela a área que você desenhou.
Tainá testa o recorte numa cópia para preservar a capa.
Decisão frágil
Apagar partes da foto original para experimentar um detalhe.
Decisão verificável
Usar uma máscara reversível e conferir qual camada está sendo movida.
Observe quais características tornam a segunda decisão conferível.
2Mover a foto e mover a máscara são coisas diferentes
Dentro do grupo, selecione a fotografia para ajustar o detalhe visível.
Selecione a máscara para mudar a forma da janela.
Observe qual camada está destacada antes de arrastar.
Para desfazer o teste, use Desfazer ou retire a função de máscara.
Uma máscara circular pode destacar textura ou maçaneta, mas esconder a forma do arco.
Decida se o recorte serve à mensagem.
Não confunda máscara com remover fundo por IA.
O exercício é uma janela geométrica e não exige um serviço adicional.
Álvaro seleciona a foto dentro do grupo antes de ajustar o detalhe.
Ficha preenchida · exemplo da aula
1Máscara: forma abaixo da foto
2Seleção: forma e foto para criar o grupo
3Revisão: detalhe visível sem perder o propósito
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Usar uma máscara reversível e conferir qual camada está sendo movida.
Álvaro usa a ficha para conferir: revisão: detalhe visível sem perder o propósito.
Ilustração didática criada no Codex: O papel vazado revela uma parte da imagem. A cena é uma analogia; no Figma a máscara fica abaixo da fotografia na lista.
Teste-se
Você quer mudar o detalhe dentro do círculo sem mover o círculo. O que selecionar?
Se travou aqui, é normalConfira se a elipse está abaixo da foto e se as duas se sobrepõem. Uma máscara fora do assunto pode parecer vazia.
Pratique agora 0/3
Use uma máscara para revelar um detalhe
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando a máscara funciona e você conferiu o efeito de mover a fotografia.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Use uma máscara para revelar um detalhe
Máscara: forma abaixo da foto — <sua decisão>
Seleção: forma e foto para criar o grupo — <sua decisão>
Revisão: detalhe visível sem perder o propósito — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue criar e conferir um recorte circular reversível.
Cola da aula
Use uma máscara para revelar um detalhe
Máscara: forma abaixo da foto
Seleção: forma e foto para criar o grupo
Revisão: detalhe visível sem perder o propósito
Seu próximo passo
Você já tem critérios para criar e conferir um recorte circular reversível.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Guarde estilos para repetir escolhas
Material complementar · módulo 4Produção e cuidados para retomar depois da prática curta.
A forma define a janela de visibilidade
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
Mover a foto e mover a máscara são coisas diferentes
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
Confira recursos e custos na conta atual. Os guias podem mostrar caminhos diferentes conforme a versão e o dispositivo.
Aula 12 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 5 · Aula 13 de 18
Guarde estilos para repetir escolhas
Você consegue criar e aplicar um estilo local de texto.
Repetir valores manualmente aumenta diferenças acidentais. Um estilo reúne propriedades para usar novamente.
Em 1 minuto
Estilo: Título/Luz
Teste: dois textos vinculados respondem à edição
Separados: cor e alinhamento
1O estilo de texto guarda a forma das letras
Selecione o título e confira Inter, Bold, tamanho 64 e altura de linha 72.
Em Typography, abra o seletor de estilos e crie Título/Luz.
Aplique esse estilo a um texto de teste.
Estilos de texto guardam fonte, peso, tamanho e espaçamentos.
A cor e o alinhamento ficam separados do estilo de texto.
Confira Fill para a cor e o controle de alinhamento para a posição.
Um título pode usar o mesmo estilo tipográfico com outra cor, desde que mantenha leitura suficiente.
Tainá nomeia o estilo pela função, para reencontrá-lo.
Decisão frágil
Copiar valores parecidos em cada título e chamar isso de estilo.
Decisão verificável
Aplicar um estilo local e testar se uma mudança nele chega aos textos vinculados.
Observe quais características tornam a segunda decisão conferível.
2Edite o estilo para conferir o vínculo
Abra o estilo criado e ajuste temporariamente o tamanho para 68.
Confira o título e o texto de teste vinculados.
Depois restaure 64.
Se um deles não mudar, confira se recebeu o estilo ou apenas valores semelhantes.
Guarde uma captura dessa conferência.
O curso usa estilos locais no mesmo arquivo.
Não precisa publicar uma biblioteca para uma equipe.
Publicação e compartilhamento de bibliotecas dependem do plano.
Você também pode criar estilos de cor pelo seletor de Fill, mas isso é uma etapa separada.
Álvaro confere a cor separadamente, sem desfazer o estilo.
Ficha preenchida · exemplo da aula
1Estilo: Título/Luz
2Teste: dois textos vinculados respondem à edição
3Separados: cor e alinhamento
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Aplicar um estilo local e testar se uma mudança nele chega aos textos vinculados.
Álvaro usa a ficha para conferir: separados: cor e alinhamento.
Ilustração didática criada no Codex: Cartões com tratamento repetido ilustram consistência. No arquivo, confira o vínculo pelo nome do estilo.
Teste-se
O estilo tipográfico mudou, mas a cor não. Qual explicação corresponde ao recurso?
Se travou aqui, é normalConfira se você editou o estilo ou só um texto. Valores iguais não provam que as camadas estão vinculadas.
Pratique agora 0/3
Guarde estilos para repetir escolhas
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando dois textos usam o estilo e responderam ao teste de edição.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Guarde estilos para repetir escolhas
Estilo: Título/Luz — <sua decisão>
Teste: dois textos vinculados respondem à edição — <sua decisão>
Separados: cor e alinhamento — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue criar e aplicar um estilo local de texto.
Cola da aula
Guarde estilos para repetir escolhas
Estilo: Título/Luz
Teste: dois textos vinculados respondem à edição
Separados: cor e alinhamento
Seu próximo passo
Você já tem critérios para criar e aplicar um estilo local de texto.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Crie um componente e confira suas cópias
Material complementar · módulo 5Produção e cuidados para retomar depois da prática curta.
O estilo de texto guarda a forma das letras
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
Edite o estilo para conferir o vínculo
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
Confira recursos e custos na conta atual. Os guias podem mostrar caminhos diferentes conforme a versão e o dispositivo.
Aula 13 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 5 · Aula 14 de 18
Crie um componente e confira suas cópias
Você consegue testar uma alteração no componente principal e em duas instâncias.
Duplicar uma forma comum produz cópias independentes. Um componente permite manter uma parte repetida vinculada.
Em 1 minuto
Principal: Marca/Ponto
Instâncias: duas cópias vinculadas
Teste: cor muda no principal e nas duas cópias
1O principal funciona como uma matriz
Fora da capa, desenhe uma elipse de 32 por 32 e escolha ocre em Fill.
Selecione somente essa elipse e use Create component.
Nomeie Marca/Ponto.
Esse é o componente principal.
Duplique-o duas vezes para criar instâncias, as cópias vinculadas.
Uma instância aparece identificada como componente na lista.
Você também pode inseri-la pelo painel Assets, nos componentes locais.
Não use o principal como enfeite perdido dentro da capa.
Deixe-o numa área de referência do mesmo arquivo.
Tainá guarda o principal fora da área de exportação.
Pedidos para comparar · exemplo didático
PedidoDuplicar círculos comuns e esperar que todos mudem juntos.
Faltam limites observáveis para conferir o trabalho.
PedidoCriar o principal, inserir instâncias e testar uma propriedade sem mudanças locais.
Há critérios claros para conferir a decisão.
Compare as duas instruções. São exemplos escritos para a aula, sem resposta simulada de ferramenta.
2Teste antes de espalhar pela série
Mude a cor do principal para azul petróleo.
Confira se as duas instâncias acompanham.
Depois restaure ocre.
Neste teste, não altere individualmente a cor das instâncias.
Mudanças locais podem substituir uma propriedade herdada e mudar o resultado esperado.
Use uma instância como pequeno marcador em cada peça, se ela ajudar a leitura.
Não é necessário transformar a capa inteira em componente.
Primeiro compreenda um objeto simples.
Se uma cópia não acompanhar, confira o vínculo e alterações locais antes de refazer tudo.
Álvaro testa duas instâncias antes de repetir a marca nas páginas.
Ficha preenchida · exemplo da aula
1Principal: Marca/Ponto
2Instâncias: duas cópias vinculadas
3Teste: cor muda no principal e nas duas cópias
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Criar o principal, inserir instâncias e testar uma propriedade sem mudanças locais.
Álvaro usa a ficha para conferir: teste: cor muda no principal e nas duas cópias.
Ilustração didática criada no Codex: Três cartões repetem um pequeno marcador. A cena ilustra a repetição; o vínculo precisa ser conferido no Figma.
Teste-se
Duas instâncias sem mudanças locais devem receber uma nova cor. Onde fazer a edição?
Se travou aqui, é normalSe mudou apenas uma cópia, confira se ela é uma instância e se a cor recebeu uma alteração local.
Pratique agora 0/3
Crie um componente e confira suas cópias
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando o principal e as duas instâncias responderam ao teste de cor.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Crie um componente e confira suas cópias
Principal: Marca/Ponto — <sua decisão>
Instâncias: duas cópias vinculadas — <sua decisão>
Teste: cor muda no principal e nas duas cópias — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue testar uma alteração no componente principal e em duas instâncias.
Cola da aula
Crie um componente e confira suas cópias
Principal: Marca/Ponto
Instâncias: duas cópias vinculadas
Teste: cor muda no principal e nas duas cópias
Seu próximo passo
Você já tem critérios para testar uma alteração no componente principal e em duas instâncias.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Desenhe uma linha e avalie extensões
Material complementar · módulo 5Produção e cuidados para retomar depois da prática curta.
O principal funciona como uma matriz
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
Teste antes de espalhar pela série
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
Confira recursos e custos na conta atual. Os guias podem mostrar caminhos diferentes conforme a versão e o dispositivo.
Aula 14 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 5 · Aula 15 de 18
Desenhe uma linha e avalie extensões
Você consegue criar um traço simples e decidir se precisa de um complemento.
Procurar extensões antes de entender a tarefa pode acrescentar custo sem resolver a composição.
Em 1 minuto
Traço: três pontos e dois segmentos
Aparência: Stroke azul petróleo, espessura 4
Complemento: necessidade escrita ou nenhum
1A caneta liga pontos editáveis
Em uma área de teste, escolha Pen ou pressione P.
Clique em três posições para desenhar uma linha com dois segmentos.
Termine com Esc.
Selecione o traço, retire Fill se houver e configure Stroke em azul petróleo com espessura 4.
Use poucos pontos.
A linha deve guiar o olhar entre três detalhes, sem parecer um mapa real.
Para curvar um trecho, experimente arrastar ao criar um ponto numa cópia.
A prática obrigatória usa segmentos retos.
Não depende de ferramentas avançadas de desenho.
Tainá começa com poucos pontos para controlar o desenho.
Decisão frágil
Adicionar um complemento porque parece popular, sem uma tarefa definida.
Decisão verificável
Resolver o traço com a caneta e avaliar complementos somente diante de uma necessidade.
Observe quais características tornam a segunda decisão conferível.
2Complementos acrescentam recursos de terceiros
Antes de usar um complemento, escreva o problema que ele resolveria.
Na área de ferramentas, procure Plugins e leia descrição, responsável e condições.
Um item da comunidade pode exigir pagamento ou acesso a dados.
A existência do botão não torna o recurso necessário.
Para esta série, as formas, textos e imagens do próprio arquivo bastam.
Registre sem complemento necessário quando for esse o caso.
Recursos adicionais de desenho ou vídeo podem depender do plano.
Nenhum deles é necessário para exportar as peças estáticas do curso.
Álvaro registra que não precisa de complemento para a tarefa atual.
Ficha preenchida · exemplo da aula
1Traço: três pontos e dois segmentos
2Aparência: Stroke azul petróleo, espessura 4
3Complemento: necessidade escrita ou nenhum
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Resolver o traço com a caneta e avaliar complementos somente diante de uma necessidade.
Álvaro usa a ficha para conferir: complemento: necessidade escrita ou nenhum.
Ilustração didática criada no Codex: Uma curva aparece abaixo de três símbolos de câmera. Ela ilustra percurso visual; a prática usa três pontos e dois segmentos retos.
Teste-se
Você só precisa ligar três detalhes por uma linha. Qual primeiro caminho atende ao caso?
Se travou aqui, é normalSe aparecer um bloco preenchido, retire Fill. Se a linha sumir, confira Stroke e a espessura.
Pratique agora 0/3
Desenhe uma linha e avalie extensões
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando a linha está visível e a decisão sobre complemento tem uma justificativa.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Desenhe uma linha e avalie extensões
Traço: três pontos e dois segmentos — <sua decisão>
Aparência: Stroke azul petróleo, espessura 4 — <sua decisão>
Complemento: necessidade escrita ou nenhum — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue criar um traço simples e decidir se precisa de um complemento.
Cola da aula
Desenhe uma linha e avalie extensões
Traço: três pontos e dois segmentos
Aparência: Stroke azul petróleo, espessura 4
Complemento: necessidade escrita ou nenhum
Seu próximo passo
Você já tem critérios para criar um traço simples e decidir se precisa de um complemento.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Revise a peça com perguntas concretas
Material complementar · módulo 5Produção e cuidados para retomar depois da prática curta.
A caneta liga pontos editáveis
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
Complementos acrescentam recursos de terceiros
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
Confira recursos e custos na conta atual. Os guias podem mostrar caminhos diferentes conforme a versão e o dispositivo.
Aula 15 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 6 · Aula 16 de 18
Revise a peça com perguntas concretas
Você consegue preparar uma revisão e registrar uma decisão sobre a capa.
Perguntar apenas se ficou bonito produz respostas difíceis de usar. Uma revisão precisa mostrar o problema e o critério.
Em 1 minuto
Perguntas: mensagem principal e dificuldade de leitura
Registro: fala, interpretação e decisão em campos separados
Situação: avaliação própria feita; conversa externa feita ou pendente
1Peça uma leitura antes de explicar
Mostre a capa e pergunte: qual é a mensagem principal?
Depois pergunte o que foi difícil ler.
Registre as palavras da pessoa separadas da sua interpretação.
No Figma, Share reúne opções de acesso.
Para uma leitura, escolha visualização quando disponível, sem conceder edição desnecessária.
As permissões dependem da conta, do local do arquivo e do plano.
Rascunhos no Starter têm limites de colaboração.
A alternativa é mostrar a peça na própria tela ou enviar uma imagem exportada na próxima aula.
Não mova o arquivo para uma equipe sem conferir as condições.
Tainá anota a frase recebida antes de propor uma solução.
Decisão frágil
Pedir aprovação geral e mudar todas as cores após uma opinião.
Decisão verificável
Perguntar sobre mensagem e leitura, registrar a fala e testar uma mudança ligada ao problema.
Observe quais características tornam a segunda decisão conferível.
2Uma observação vira decisão quando tem critério
Exemplo fictício: a pessoa leu fotografia, mas não percebeu a orientação sobre observar a cidade.
Hipótese: o subtítulo está discreto.
Teste: aumentar seu destaque mantendo o título principal.
Depois compare.
Não invente um depoimento real para justificar essa alteração.
A prática curta prepara duas perguntas e registra sua própria avaliação pelos cinco critérios da aula 2.
A conversa com outra pessoa pode ocorrer depois.
Se ainda não ocorreu, escreva revisão externa pendente.
Separe comentário recebido, interpretação e decisão; não misture os três campos.
Álvaro pode mostrar a peça na tela sem liberar edição do arquivo.
Ficha preenchida · exemplo da aula
1Perguntas: mensagem principal e dificuldade de leitura
2Registro: fala, interpretação e decisão em campos separados
3Situação: avaliação própria feita; conversa externa feita ou pendente
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Perguntar sobre mensagem e leitura, registrar a fala e testar uma mudança ligada ao problema.
Álvaro usa a ficha para conferir: situação: avaliação própria feita; conversa externa feita ou pendente.
Ilustração didática criada no Codex: Tainá e Álvaro examinam fotografias juntos. A cena ilustra revisão, sem representar um depoimento ou teste real.
Teste-se
Uma pessoa disse que não leu o subtítulo. Qual registro mantém fato e hipótese separados?
Se travou aqui, é normalSe ninguém estiver disponível, faça a avaliação própria e deixe a conversa externa pendente. Não registre retorno que não aconteceu.
Pratique agora 0/3
Revise a peça com perguntas concretas
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando o roteiro e a avaliação própria estão registrados, com a conversa externa identificada.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Revise a peça com perguntas concretas
Perguntas: mensagem principal e dificuldade de leitura — <sua decisão>
Registro: fala, interpretação e decisão em campos separados — <sua decisão>
Situação: avaliação própria feita; conversa externa feita ou pendente — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue preparar uma revisão e registrar uma decisão sobre a capa.
Cola da aula
Revise a peça com perguntas concretas
Perguntas: mensagem principal e dificuldade de leitura
Registro: fala, interpretação e decisão em campos separados
Situação: avaliação própria feita; conversa externa feita ou pendente
Seu próximo passo
Você já tem critérios para preparar uma revisão e registrar uma decisão sobre a capa.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Exporte e abra o arquivo para conferir
Material complementar · módulo 6Produção e cuidados para retomar depois da prática curta.
Peça uma leitura antes de explicar
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
Uma observação vira decisão quando tem critério
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
Confira recursos e custos na conta atual. Os guias podem mostrar caminhos diferentes conforme a versão e o dispositivo.
Aula 16 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 6 · Aula 17 de 18
Exporte e abra o arquivo para conferir
Você consegue exportar uma capa em PNG e conferir o resultado fora do Figma.
Ver a composição no editor não prova que o arquivo entregue saiu correto. A conferência acontece também depois de salvar.
Em 1 minuto
Seleção: quadro 00-Capa
Formato: PNG em 1x, 1080 por 1350
Conferência: arquivo aberto fora do editor
1Exporte o quadro completo
Selecione o quadro 00-Capa na lista de camadas.
Em Export, adicione uma configuração pelo sinal de mais.
Escolha PNG e escala 1x.
Confira a prévia e exporte.
Salve o arquivo numa pasta Luz-de-Rua/entrega.
O navegador pode usar a pasta padrão de arquivos recebidos.
Abra o PNG fora do Figma.
Confira dimensões de 1080 por 1350, título inteiro, fotografia, fundo e ausência de objetos de teste.
Se sair apenas um objeto, volte e selecione o quadro.
Se o fundo sumir, confira Fill e sua inclusão na exportação.
Tainá confere a prévia antes de salvar o quadro.
Pedidos para comparar · exemplo didático
PedidoEnviar o primeiro arquivo salvo sem conferir o que foi selecionado.
Faltam limites observáveis para conferir o trabalho.
PedidoSelecionar o quadro inteiro, exportar em 1x e abrir o PNG para revisar.
Há critérios claros para conferir a decisão.
Compare as duas instruções. São exemplos escritos para a aula, sem resposta simulada de ferramenta.
2Escolha o formato pela entrega
PNG preserva bem textos e formas em peças estáticas.
JPG pode servir a fotografias com arquivo menor, mas não conserva transparência.
PDF atende revisão de documento; SVG conserva formas vetoriais com limitações.
Nenhum deles substitui o arquivo de trabalho editável do Figma.
Como teste adicional, exporte o mesmo quadro em PDF e abra o resultado.
Confira texto e efeitos: nem todos se comportam igual em cada formato.
Para o projeto final, vamos entregar quatro PNGs em 1x.
A cópia editável será guardada separadamente na aula seguinte.
Álvaro abre o arquivo salvo para verificar se a capa está inteira.
Ficha preenchida · exemplo da aula
1Seleção: quadro 00-Capa
2Formato: PNG em 1x, 1080 por 1350
3Conferência: arquivo aberto fora do editor
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Selecionar o quadro inteiro, exportar em 1x e abrir o PNG para revisar.
Álvaro usa a ficha para conferir: conferência: arquivo aberto fora do editor.
Ilustração didática criada no Codex: Uma pasta reúne quatro imagens. A cena ilustra a entrega organizada, não comprova arquivos exportados do Figma.
Teste-se
A imagem exportada contém só um círculo. Qual primeira correção verificar?
Se travou aqui, é normalConfira qual camada está selecionada. Exportar um objeto isolado não entrega os demais elementos do quadro.
Pratique agora 0/3
Exporte e abra o arquivo para conferir
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando o PNG abre fora do Figma e contém a capa completa nas dimensões planejadas.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Exporte e abra o arquivo para conferir
Seleção: quadro 00-Capa — <sua decisão>
Formato: PNG em 1x, 1080 por 1350 — <sua decisão>
Conferência: arquivo aberto fora do editor — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue exportar uma capa em PNG e conferir o resultado fora do Figma.
Cola da aula
Exporte e abra o arquivo para conferir
Seleção: quadro 00-Capa
Formato: PNG em 1x, 1080 por 1350
Conferência: arquivo aberto fora do editor
Seu próximo passo
Você já tem critérios para exportar uma capa em PNG e conferir o resultado fora do Figma.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Complete a série e guarde uma cópia editável
Material complementar · módulo 6Produção e cuidados para retomar depois da prática curta.
Exporte o quadro completo
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
Escolha o formato pela entrega
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
2A imagem pronta e o arquivo editável têm funções diferentes
No menu principal, procure File e Save a local copy.
Salve uma cópia .fig do seu próprio arquivo.
Essa cópia serve para retomar a edição.
PNGs servem para visualizar e distribuir as peças.
Guarde também a imagem fonte e uma nota com data e endereço do arquivo online.
A prática de dez minutos é a conferência final, depois de produzir as páginas.
Reserve de oito a doze horas para o curso completo com as montagens.
Se faltar uma peça, mantenha a entrega pendente.
Não confunda o kit de referência com uma série criada por você no Figma.
Álvaro guarda a cópia editável junto da nota para retomar depois.
Ficha preenchida · exemplo da aula
1Série: capa, luz, detalhe e série
2Entrega: quatro PNGs abertos e conferidos
3Arquivo: cópia .fig, fonte e nota com data e endereço
Use esta ficha como referência. Troque o exemplo pelo seu próprio projeto.
3Confira a decisão pelo uso
Conferir quatro PNGs, a cópia .fig, a imagem fonte e a nota do projeto.
Álvaro usa a ficha para conferir: arquivo: cópia .fig, fonte e nota com data e endereço.
Ilustração didática criada no Codex: As quatro fotografias reunidas representam a ideia de série. A entrega real inclui texto e deve ser criada e conferida no Figma.
Teste-se
Você precisa mudar um título depois da entrega. Qual material preserva a edição do projeto?
Se travou aqui, é normalSe falta uma página, produza-a antes da conferência final. A lista ajuda a localizar a pendência, sem transformar ausência em conclusão.
Pratique agora 0/3
Complete a série e guarde uma cópia editável
Reserve 10 minutos de trabalho ativo para este recorte. Acesso à conta e processamento podem exigir tempo adicional. Pronto quando os quatro PNGs estão conferidos e a cópia .fig foi salva com a fonte e a nota.
Use referências próprias ou autorizadas. Identifique imagens ilustrativas e preserve os originais. Recursos de IA podem depender de conta e plano; confira antes de gerar.
Projeto: Luz de Rua
Aula: Complete a série e guarde uma cópia editável
Série: capa, luz, detalhe e série — <sua decisão>
Entrega: quatro PNGs abertos e conferidos — <sua decisão>
Arquivo: cópia .fig, fonte e nota com data e endereço — <sua decisão>
Arquivo ou quadro conferido:
Decisão: manter ou ajustar
Pendência real:
Ao cumprir os passos, você consegue conferir quatro peças exportadas e uma cópia local do projeto.
Cola da aula
Complete a série e guarde uma cópia editável
Série: capa, luz, detalhe e série
Entrega: quatro PNGs abertos e conferidos
Arquivo: cópia .fig, fonte e nota com data e endereço
Seu próximo passo
Você já tem critérios para conferir quatro peças exportadas e uma cópia local do projeto.
Guarde a entrega desta aula na pasta do projeto. Ela será usada na etapa seguinte.
Próximo passo: Aplique o sistema em uma nova peça e compare com as regras documentadas.
Material complementar · módulo 6Produção e cuidados para retomar depois da prática curta.
Aplique as escolhas às quatro peças
Experimente com calma
Repita em uma cópia da peça, alterando apenas uma escolha. Compare antes de manter a mudança.
O que observar
Nomes e posições dos controles podem variar. Confira a seleção e sua permissão de edição antes de procurar o recurso.
A imagem pronta e o arquivo editável têm funções diferentes
Experimente com calma
Guarde a versão anterior e registre o que mudou na leitura. Uma mudança sem melhora pode ser desfeita.
O que observar
O caso Luz de Rua é fictício. As imagens são ilustrações do Codex; os diagramas mostram o método, não a interface real do Figma.
