Pular para conteúdo

Projeto 16 - Inspecionando no Figma 🎨

🎯 Objetivo

Aprender a extrair informações técnicas de um protótipo visual, transformando o design em propriedades CSS prontas para o código.

📋 Passo a Passo

  1. Acesso: Entre no site do Figma (ou use a conta criada na Aula 16).
  2. Protótipo Exemplo: Procure por um "UI Kit" gratuito na comunidade.
  3. Extração de Estilos: Escolha um "Card" ou um "Botão" e anote as seguintes informações técnicas:
    • A cor principal (Hexadecimal: ex: #000000).
    • A fonte utilizada (ex: Inter, Roboto).
    • O border-radius (arredondamento das bordas).
    • O padding (espaçamento interno).
  4. Tradução para Código: Escreva um bloco de CSS que represente exatamente o elemento que você inspecionou.

Entrega: Um print do elemento selecionado no Figma e o código CSS que você escreveu com base nele.