# data[].attributes.body
O que são?
Protótipos de baixa fidelidade são versões simples e rápidas de um projeto. Costumam ser feitos à mão ou com ferramentas básicas, só pra mostrar a ideia geral do layout e da navegação.

# data[].attributes.body
O que são?
Protótipos de alta fidelidade são versões quase reais do produto final. Eles mostram as cores, imagens, fontes e até simulação de interações.
Feitos com ferramentas como o Figma.

# data[].attributes.body
O Figma é uma ferramenta de design de interface e prototipagem, usada para criar layouts e simular o funcionamento de sites e aplicativos. Ele funciona 100% online e permite trabalho em grupo em tempo real.
Elementos principais:

Frames: áreas de trabalho onde você monta suas telas

Shapes: formas básicas (retângulo, círculo etc.)

Components: elementos reutilizáveis (como botões padrão)

Text: inserir textos

Plugins: ferramentas extras que ajudam no design

# data[].attributes.body
HTML (HyperText Markup Language)
É a linguagem de marcação usada pra criar a estrutura de sites. Ele organiza o conteúdo (como títulos, parágrafos, imagens, links...)

# data[].attributes.body
Visual Studio Code (VSCode) é um editor de código muito usado por programadores.
Ele serve pra escrever códigos em várias linguagens, como HTML, CSS, JavaScript e mais.

# data[].attributes.body
CSS (Cascading Style Sheets)
É a linguagem usada pra estilizar o HTML. Com ele, você pode mudar cores, fontes, espaçamento, posicionamento dos elementos e muito mais.

# data[].attributes.body
Simples e rápidos de fazer

Foco na estrutura, não no design

Ideais para testes iniciais

# data[].attributes.body
Visualmente próximos do produto final

Incluem detalhes de design e navegação

Úteis para testes com usuários e apresentação para clientes

# data[].attributes.body
Interface intuitiva e limpa

Baseado na nuvem (não precisa instalar)

Permite colaboração em tempo real

Tem elementos como Frames, Shapes, Components, Text, Auto Layout

Aceita plugins que otimizam o processo de design

Ideal para criar protótipos de alta fidelidade

# data[].attributes.body
Linguagem de marcação (não é programação)

Cria a estrutura de um site

Usa “tags” (como <p>, <h1>, <img>)

Funciona junto com CSS e JavaScript

Simples de aprender

# data[].attributes.body
Define o design visual da página

Trabalha em conjunto com HTML

Separa o conteúdo (HTML) da aparência (CSS)

Permite responsividade (ajustar layout em telas pequenas)

Pode ser escrito em um arquivo separado (.css)

# data[].attributes.body
Gratuito e leve

Suporta muitas linguagens de programação

Extensões personalizáveis (como formatação de código, terminal integrado, auto-complete)

Interface amigável

Muito usado por estudantes e profissionais

# data[].attributes.body
Desenhar em um caderno como seria a tela de login de um app, com quadradinhos indicando onde vão ficar os botões e os campos de senha.

# data[].attributes.body
Usar o Figma pra criar uma tela de aplicativo com todas as cores, ícones e botões funcionando. Você pode até clicar e simular como o app funciona.

# data[].attributes.body
Criar um botão com Auto Layout, salvar como Component e reutilizar esse botão em várias telas do app, mudando só o texto.

# data[].attributes.body
<h1>Bem-vindo ao meu site!</h1>

<p>Esse é um parágrafo com informações importantes.</p>

<img src="foto.jpg" alt="Minha Foto">

# data[].attributes.body
Abrir o VSCode e criar um projeto com arquivos HTML, CSS e JavaScript, usando extensões como "Live Server" pra visualizar tudo ao vivo no navegador.

# data[].attributes.body
body {

background-color: #f0f0f0;

font-family: Arial, sans-serif;

color: #333;

}