DS & II

Capítulo 04 - Frames

Leitura de 4 min

🚀 Capítulo 04: Frames: O Esqueleto do Layout (Tema: Wolverine)

NOTE

Este capítulo utiliza a temática de Wolverine para explicar os Frames. Crie uma estrutura forte e inquebrável para sustentar o design das suas telas!

1. 🎯 Objetivo da Aula

Compreender o que são Frames no Figma, a diferença crucial entre um Frame e um Grupo, e como eles funcionam como o esqueleto que sustenta e organiza todos os elementos do seu layout.

2. 🏢 O Cenário Prático (Seu Desafio)

O herói Wolverine tem um esqueleto revestido por um metal fictício e indestrutível chamado Adamantium. É esse esqueleto super forte que dá a estrutura para o corpo dele, permitindo que ele aguente impactos gigantescos e que seus músculos e garras tenham uma base firme para funcionar. Sem esse esqueleto de sustentação, o corpo dele seria frágil!

No Figma, o Frame é o nosso esqueleto de Adamantium!

  • Muitos iniciantes acham que o Frame serve apenas para ser a “tela do celular”.
  • Na verdade, o Frame é um super-contêiner. Você pode colocar formas, textos e até outros Frames dentro dele!
  • Ele é a estrutura que segura o seu design no lugar. Seu desafio é construir um esqueleto forte para o seu app!

🧠 Fundamentos: A Teoria Traduzida

No Figma, você pode juntar objetos de duas formas: Agrupando ou criando um Frame. Parecem iguais, mas funcionam de forma muito diferente!

👥 1. Grupos (Ctrl + G):

Um grupo é apenas uma “sacola” onde você joga as coisas dentro para movê-las juntas.

  • O grupo não tem tamanho próprio; o tamanho dele é a soma dos objetos que estão dentro.
  • Se você esticar o grupo, tudo o que está dentro estica e fica deformado!

🖼️ 2. Frames (Ctrl + Alt + G ou Tecla F):

Um Frame é como um novo mundo em miniatura (uma nova prancheta).

  • Ele tem o seu próprio tamanho, independente do que está dentro.
  • Ele tem a sua própria cor de fundo (Fill).
  • O Superpoder: Ele permite usar as regras de Constraints (Restrições), dizendo se um botão dentro dele deve ficar sempre grudado na esquerda, na direita ou esticar junto com a tela!

4. 📖 Exemplo Guiado: Frames dentro de Frames

A melhor forma de organizar um projeto profissional no Figma é aninhar Frames (um dentro do outro):

  1. Você cria um Frame gigante chamado Tela do Celular.
  2. Dentro dele, cria um Frame médio chamado Card de Produto.
  3. Dentro do card, coloca um texto e um Frame pequeno chamado Botão de Comprar. Dessa forma, se você mover o Card de Produto, o Botão de Comprar vai junto automaticamente porque ele pertence àquele esqueleto menor!

5. 🛠️ Prática Obrigatória 1: Frame ou Grupo?

Diga se você usaria um Frame ou um Grupo nas seguintes situações:

  1. Você quer apenas juntar o ícone de uma estrela e o texto “Favoritos” para arrastar os dois juntos pela tela, sem precisar de regras complexas de alinhamento.
  2. Você quer criar uma barra de navegação no topo do site que deve esticar de ponta a ponta quando o usuário abrir em uma tela de computador maior.

6. 🛠️ Prática Obrigatória 2: O Recorte do Frame

Os Frames têm uma propriedade na barra lateral direita chamada Clip Content (Cortar Conteúdo).

  1. O que acontece com um desenho que está metade dentro e metade fora do Frame quando você ativa essa caixinha do Clip Content?

7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 04 UIFigma) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.

8. 📂 Estrutura de Pastas

mod_03_design_de_interfaces_ui_ux/
├── capitulos/
│   ├── capitulo_04_frames.md
│   └── codigos/
│       └── cap04/
│           └── esqueleto_layout.txt

💡 Checkpoint de Lógica

Acostume-se a usar Frames para quase tudo! Na vida real, os programadores transformam os Frames do Figma em caixas de código (as famosas <div> no HTML). Usar Frames facilita muito o trabalho deles depois!

10. 🔥 Desafio de Fixação

Pesquise o que significa o termo Constraints no Figma e como ele ajuda a criar designs que se adaptam a celulares e computadores.

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1:

  1. Grupo (É apenas para organização simples).
  2. Frame (Exige regras de redimensionamento e alinhamento para telas diferentes). Gabarito da Prática 2:
  3. A parte do desenho que está fora dos limites do Frame fica invisível! É como se o Frame fosse uma janela: você só vê o que está dentro do espaço dele. Isso é ótimo para esconder elementos que vão entrar na tela depois através de uma animação!

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks