Seu designer exporta o arquivo final do Figma às 16h47. Você abre. A seção hero fica limpa — até você verificar o frame mobile e notar que o espaçamento muda de 24px para 32px entre breakpoints sem razão documentada. Três hover states estão faltando. A paleta de cores existe em um thread do Slack de duas semanas atrás, não no arquivo. O componente button tem sete variantes, mas apenas quatro têm padding definido. Este é o gap onde projetos Figma-to-Next.js emperram: não na exportação, mas nas centenas de micro-decisões que não foram capturadas. A diferença entre um mockup e um sistema de componentes em produção é documentação que você pode executar. Aqui está o workflow em quatro fases que usamos para fechar esse gap sem arqueologia de Slack ou deploys por adivinhação.

Depois de construir dezenas de projetos Figma-to-Next.js na Social Animal, desenvolvi opiniões fortes sobre o que funciona e o que não funciona. Este guia caminha por todo o processo — não a versão teórica, mas a versão bagunçada do mundo real onde designs não são perfeitos, stakeholders mudam de ideia, e você precisa entregar algo que realmente performe bem em produção.

Figma para Next.js: O Guia Completo para Transformar Designs em Código

Índice

Por que Next.js para Projetos Figma-to-Code

Você poderia transformar designs do Figma em HTML puro. Você poderia usar Astro, Remix, ou SvelteKit. Então por que Next.js?

Alguns motivos que importam na prática:

  • O modelo de componentes React mapeia diretamente para componentes Figma. Designers pensam em componentes. React pensa em componentes. Este alinhamento não é trivial — significa que sua árvore de componentes em código pode espelhar a hierarquia de componentes no Figma, o que torna a manutenção muito mais fácil.
  • App Router com Server Components oferece flexibilidade de renderização que sites de marketing e web apps ambos precisam. Páginas estáticas? Conteúdo dinâmico server-rendered? Interatividade client-side? Você escolhe por rota.
  • Otimização de imagens é embutida. O componente next/image lida com imagens responsivas, lazy loading, e conversão de formatos — coisas que de outro modo consumiriam horas do seu tempo de build.
  • O ecossistema é massivo. Qualquer coisa que o design exigir — auth, forms, animações, integração de CMS — há uma solução bem mantida no ecossistema Next.js.

Usamos Next.js para a maioria dos nossos projetos de desenvolvimento headless CMS exatamente por essas razões. Se você está curioso sobre quando Astro pode ser melhor (dica: sites ricos em conteúdo com interatividade mínima), confira nossa página de desenvolvimento Astro.

Auditando o Arquivo Figma Antes de Escrever Qualquer Código

Este é o passo que a maioria dos desenvolvedores pula, e é o passo que economiza mais tempo. Antes de você escrever uma única linha de JSX, gaste 30-60 minutos auditando o arquivo Figma.

O que Verificar

  • Uso de Auto Layout. Se o designer usou Auto Layout consistentemente, sua vida fica dramaticamente mais fácil. Auto Layout mapeia quase 1:1 para flexbox. Se eles não usaram, você estará adivinhando espaçamento e comportamento responsivo.
  • Consistência de componentes. Os botões realmente usam um componente compartilhado, ou o designer criou 14 variantes de botão ligeiramente diferentes em frames? Abra o painel de Assets e verifique.
  • Estilos nomeados e variáveis. Variáveis Figma (lançadas em 2023, amplamente adotadas por 2025) devem definir cores, espaçamento, tipografia, e border radii. Se existem, sua extração de design token é quase automatizada. Se não existem, sinalize antes de começar a construir.
  • Frames responsivos. O design inclui breakpoints mobile, tablet, e desktop? Se é desktop-only, você precisa de uma conversa com o designer antes de prosseguir.
  • Estados faltando. Hover, focus, active, disabled, loading, error, empty — verifique se componentes interativos têm todos seus estados desenhados. Geralmente não têm. Faça uma lista.

A Conversa de Handoff

Sempre agendeio uma call de 30 minutos com o designer antes de começar a implementação. Compartilhamos tela do arquivo Figma e caminhamos por:

  1. Quais componentes são reutilizáveis vs. one-off
  2. Como o comportamento responsivo deve funcionar (não assuma — pergunte)
  3. Qualquer animação ou transição que eles tenham em mente
  4. Conteúdo que virá de um CMS vs. hardcoded

Esta única reunião elimina 80% do back-and-forth que tipicamente assola projetos design-to-code.

Figma para Next.js: O Guia Completo para Transformar Designs em Código - arquitetura

Extraindo Design Tokens do Figma

Design tokens são a ponte entre Figma e código. Cores, escalas tipográficas, unidades de espaçamento, border radii, shadows — esses precisam ser extraídos sistematicamente, não estimados.

Extração Manual (Projetos Pequenos)

Para projetos menores, usarei o Dev Mode do Figma (incluído nos planos pagos do Figma em $25/seat/mês em 2026) para inspecionar valores diretamente. Abra Dev Mode, clique em qualquer elemento, e você obtém valores de pixel exatos, cores, e propriedades de fonte.

Então mapearei para config Tailwind CSS ou CSS custom properties:

// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f4ff',
          100: '#dbe4ff',
          500: '#4c6ef5',
          600: '#3b5bdb',
          700: '#364fc7',
          900: '#1c2d7a',
        },
        surface: {
          primary: '#ffffff',
          secondary: '#f8f9fa',
          tertiary: '#f1f3f5',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        display: ['Cal Sans', 'Inter', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
      borderRadius: {
        'xl': '1rem',
        '2xl': '1.5rem',
      },
    },
  },
}

export default config

Extração Automatizada (Projetos Maiores)

Para sistemas de design maiores, use a Figma Variables API ou ferramentas como Tokens Studio (formerly Figma Tokens) para exportar design tokens em formato estruturado. Tokens Studio pode exportar para formato Style Dictionary, que você então transforma em Tailwind config, CSS variables, ou ambos.

O pipeline fica assim:

Figma Variables → Tokens Studio → Style Dictionary → tailwind.config.ts + globals.css

Esta automação se paga sozinha a primeira vez que o designer atualiza uma cor e você precisa propagá-la no codebase.

Configurando a Arquitetura do Projeto Next.js

Aqui está a estrutura de projeto que comeco para cada build Figma-to-Next.js:

src/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   ├── globals.css
│   └── (routes)/
├── components/
│   ├── ui/           # Primitives: Button, Input, Card, Badge
│   ├── layout/       # Header, Footer, Container, Section
│   ├── sections/     # Hero, Features, Testimonials, CTA
│   └── patterns/     # Composed: PricingCard, TeamMember
├── lib/
│   ├── utils.ts
│   └── fonts.ts
├── styles/
│   └── tokens.css    # Design token CSS variables
└── types/
    └── index.ts

Decisões Chave de Setup

Abordagem de styling: Tailwind CSS é meu padrão para projetos Figma-to-code. A abordagem utility-first significa que posso traduzir padding: 24px, gap: 16px, border-radius: 12px do Figma diretamente para p-6 gap-4 rounded-xl sem context-switching. Se o projeto exigir uma biblioteca de componentes como shadcn/ui, Tailwind já é a base.

Carregamento de fontes: Sempre use next/font para self-host de fontes. Aqui está meu típico setup:

// lib/fonts.ts
import { Inter } from 'next/font/google'
import localFont from 'next/font/local'

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})

export const calSans = localFont({
  src: '../assets/fonts/CalSans-SemiBold.woff2',
  variable: '--font-display',
  display: 'swap',
})

Server vs. Client Components: Padrão é Server Components. Apenas adicione 'use client' quando você realmente precisar de browser APIs, event handlers, ou React hooks. Uma página de marketing típica pode ter 90% Server Components com pequenas ilhas interativas.

Construindo a Biblioteca de Componentes

Aqui é onde a maioria do trabalho acontece. Minha abordagem: trabalhe do menor componente para cima.

Componentes Atômicos Primeiro

Comece com o que Figma chama de "componentes" e o que chamamos de primitivos:

// components/ui/Button.tsx
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-xl font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        primary: 'bg-brand-600 text-white hover:bg-brand-700',
        secondary: 'bg-surface-secondary text-gray-900 hover:bg-surface-tertiary',
        ghost: 'text-gray-600 hover:bg-surface-secondary hover:text-gray-900',
      },
      size: {
        sm: 'h-9 px-3 text-sm',
        md: 'h-11 px-5 text-sm',
        lg: 'h-13 px-7 text-base',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
    },
  }
)

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export function Button({ className, variant, size, ...props }: ButtonProps) {
  return (
    <button
      className={cn(buttonVariants({ variant, size }), className)}
      {...props}
    />
  )
}

Note como os nomes de variantes e tamanhos mapeiam diretamente para o que existe no Figma. Se o designer tem um componente Button com variantes "Primary", "Secondary", e "Ghost" no Figma — seu código deve espelhar esses nomes exatos.

Compondo Seções

Uma vez que primitivos são construídos, componha-os em seções de página:

// components/sections/Hero.tsx
import { Button } from '@/components/ui/Button'
import { Container } from '@/components/layout/Container'

export function Hero() {
  return (
    <section className="py-24 md:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <h1 className="font-display text-4xl tracking-tight text-gray-900 md:text-6xl">
            Transforme seus designs em
            <span className="text-brand-600"> websites em produção</span>
          </h1>
          <p className="mt-6 text-lg leading-relaxed text-gray-600">
            Construímos websites Next.js rápidos e acessíveis a partir de seus arquivos Figma.
          </p>
          <div className="mt-10 flex items-center justify-center gap-4">
            <Button size="lg">Comece agora</Button>
            <Button variant="secondary" size="lg">Saiba mais</Button>
          </div>
        </div>
      </Container>
    </section>
  )
}

Ferramentas de Figma para Code Assistidas por IA em 2026

Vamos falar sobre o elefante na sala: ferramentas de IA que afirmam converter Figma para código automaticamente. Testei todas as principais. Aqui está uma avaliação honesta.

Ferramenta Melhor para Qualidade de Código Suporte de Framework Preço (2026)
Fusion (Builder.io) Equipes usando CMS Builder.io Bom — respeita design systems React, Next.js, Vue Incluído nos planos Builder.io ($50+/mês)
Kombai Usuários de VS Code querendo coding assistido por IA Muito bom — gera planos editáveis React, Next.js, Angular Free tier + $20/mês Pro
Locofy.ai Protótipos rápidos e MVPs Decente — precisa limpeza React, Next.js, Gatsby Free tier + $8-25/mês
Anima Exportação HTML/React responsiva Justo — estrutural mas não pronto para produção React, Vue, HTML Free tier + $39/mês
Figma to Code Plugin Snippets rápidos de HTML Básico — bom ponto de partida HTML, Tailwind Grátis
v0 (Vercel) Gerando UI a partir de descrições Bom para componentes React, Next.js Free tier + $20/mês Pro

Minha Avaliação Honesta

Nenhuma dessas ferramentas produz código que eu enviaria diretamente para produção sem modificação significativa. Nenhuma. Aqui está o porquê:

  • Elas geram markup mas raramente entendem a arquitetura de componentes do seu projeto
  • Elas não sabem sobre seus padrões de fetching de dados, integração de CMS, ou estrutura de API
  • Elas frequentemente produzem CSS inchado ou naming de classes inconsistente
  • Elas perdem requisitos de acessibilidade regularmente

Onde ferramentas de IA realmente ajudam: Uso Kombai e v0 para gerar scaffolding inicial de componentes, especialmente para layouts complexos. Obter um ponto de partida que está 60-70% correto economiza tempo real. Também uso Cursor com screenshots do Figma colados como contexto para acelerar a implementação seção-a-seção.

O workflow que realmente funciona: IA gera rascunho grosseiro → desenvolvedor humano reestrutura, otimiza, e integra → QA pega os inevitáveis problemas.

Se você está avaliando se faz DIY ou trabalha com uma agência, confira nossas capacidades de desenvolvimento Next.js para ver como lidamos com todo o pipeline.

Lidando com Design Responsivo da Forma Certa

Aqui é onde projetos Figma-to-code comumente caem. O design tem um mockup desktop e um mockup mobile. Talvez um tablet se você tiver sorte. Mas o comportamento real entre breakpoints? Isso não está na cabeça de ninguém.

Implementação Mobile-First

Sempre programe mobile-first e adicione complexidade em breakpoints maiores:

<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
  {features.map((feature) => (
    <FeatureCard key={feature.id} {...feature} />
  ))}
</div>

Padrões Responsivos Comuns do Figma

Padrão Figma Implementação CSS/Tailwind
Grid 3-colunas → stacks mobile grid grid-cols-1 md:grid-cols-3
Side-by-side → stack revertido flex flex-col-reverse md:flex-row
Hidden mobile hidden md:block
Tamanhos de fonte diferentes text-2xl md:text-4xl lg:text-5xl
Scroll horizontal mobile flex overflow-x-auto md:grid md:grid-cols-4
Navegação → hamburger Client component com state toggle

Container Queries (O Power Move Subestimado)

Em 2026, container queries têm suporte excelente de browser (95%+ globalmente). Eles são perfeitos para componentes que precisam se adaptar baseado na largura do parent ao invés do viewport:

@container (min-width: 400px) {
  .card-layout {
    flex-direction: row;
  }
}

Tailwind v4 tem suporte nativo a container queries com variantes @container.

Tipografia e Espaçamento: Onde a Maioria dos Projetos Falha

Estimo que 60% das reclamações "não parece com o design" vêm de tipografia e espaçamento, não layout ou cores.

Checklist de Tipografia

  • Font weight: Figma mostra "Semi Bold" que é font-semibold (600), não font-bold (700). Fácil de errar.
  • Line height: Figma usa line heights fixos (como 28px), Tailwind usa valores relativos (como leading-7). Converta cuidadosamente.
  • Letter spacing: Frequentemente negligenciado. -2% letter spacing do Figma traduz para tracking-tight.
  • Font features: Alguns designs usam OpenType features como tabular numbers (font-variant-numeric: tabular-nums) ou estilísticos alternados. Verifique o painel de propriedades de texto do Figma.

Sistema de Espaçamento

Se o designer usou uma grid de 8px (a maioria usa em 2026), sua vida fica fácil — a escala de espaçamento padrão do Tailwind já é baseada em incrementos de 4px. p-4 = 16px, p-6 = 24px, p-8 = 32px.

Mas observe espaçamento irregular. Se o design tem 20px de padding em algum lugar, isso é p-5 no Tailwind (que é 20px). Se tem 18px — e isso acontece mais do que você pensa — você arredonda para o passo mais próximo ou estende sua escala de espaçamento.

Pipeline de Imagens, Ícones e Assets

Imagens

Sempre use next/image para imagens raster:

import Image from 'next/image'

<Image
  src="/hero-image.webp"
  alt="Product dashboard showing analytics"
  width={1200}
  height={800}
  priority  // Add for above-the-fold images
  className="rounded-2xl"
/>

Exporte imagens do Figma em resolução 2x para displays retina. Use formato WebP. Para imagens hero, típicamente exporto em 2400x1600 e deixo next/image lidar com sizing responsivo.

Ícones

Não exporte ícones como imagens. Use uma biblioteca de ícones ou SVGs inline:

  1. Lucide React — minha escolha padrão. Limpos, consistentes, 1000+ ícones. Tree-shakeable.
  2. Heroicons — ótimo se o design usa Heroicons (comum com designs Tailwind UI).
  3. SVGs Customizados — para ícones brand-specific, exporte do Figma como SVG e crie componentes React.
import { ArrowRight, Check, X } from 'lucide-react'

<ArrowRight className="h-5 w-5" />

Animações e Interações

O modo prototype do Figma mostra transições e interações, mas traduzir estas para código requer interpretação.

Animações CSS-First

Para efeitos hover simples e transições, fique com CSS:

<button className="transform transition-all duration-200 hover:scale-105 hover:shadow-lg">
  Comece Agora
</button>

Framer Motion para Animações Complexas

Para animações scroll-triggered, transições de página, ou sequências complexas:

'use client'

import { motion } from 'framer-motion'

export function FadeInSection({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-100px' }}
      transition={{ duration: 0.5, ease: 'easeOut' }}
    >
      {children}
    </motion.div>
  )
}

Lembre: isto tem que ser um Client Component. Mantenha o wrapper de animação fino e passe Server Components como children quando possível.

Conectando a um Headless CMS

A maioria de sites de marketing construídos a partir de designs Figma precisam de um CMS para pelo menos algum conteúdo. Aqui é onde desenvolvimento headless CMS se torna crítico.

O padrão que mais uso com App Router do Next.js:

// app/blog/[slug]/page.tsx
import { getPostBySlug } from '@/lib/cms'
import { notFound } from 'next/navigation'

export async function generateStaticParams() {
  const posts = await getAllPosts()
  return posts.map((post) => ({ slug: post.slug }))
}

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug)
  if (!post) notFound()

  return (
    <article className="prose prose-lg mx-auto max-w-3xl">
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  )
}

Este é um Server Component por padrão — sem 'use client' necessário. Os dados do CMS são fetched no build time (com ISR para atualizações), lhe dando page loads rápidos e conteúdo fresco.

Garantia de Qualidade e Comparação de Design

Aqui está meu checklist de QA para todo projeto Figma-to-Next.js:

  1. Comparação de overlay visual — Use uma ferramenta como PixelSnap ou a extensão de browser "PerfectPixel" para sobrepor a exportação do Figma em cima de sua página construída. Busco uma match de 95%+, não pixel-perfect. Pixel perfection absoluto em todos browsers e tamanhos de tela é um mito.

  2. Auditoria Lighthouse — Busque 90+ em todos os quatro scores. Para nossos projetos, típicamente atingimos 95+ em Performance, 100 em Accessibility, 100 em Best Practices, e 100 em SEO.

  3. Testes cross-browser — Chrome, Firefox, Safari (especialmente Safari — sempre é Safari). Teste em dispositivos iOS reais, não apenas simulação de mobile Chrome DevTools.

  4. Navegação por teclado — Tab por cada elemento interativo. Focus rings devem estar visíveis e lógicos.

  5. Teste de stress de conteúdo — O que acontece quando uma headline é 3x mais longa que o placeholder? Quando uma imagem é um aspecto ratio diferente? Conteúdo real de CMS quebrará designs que apenas funcionaram com lorem ipsum perfeito.

Otimização de Performance

Um design bonito que score 40 em Lighthouse é um fracasso. Aqui está o que faço em todo projeto:

  • Lazy load imagens below-fold (Next.js faz isto por padrão)
  • Preload de fontes críticas com next/font
  • Minimize Client Components — cada fronteira 'use client' adiciona JavaScript
  • Use dynamic imports para componentes pesados: const Chart = dynamic(() => import('./Chart'), { ssr: false })
  • Otimize scripts terceirizados com next/script e strategy="lazyOnload"

Um site Next.js bem construído a partir de designs Figma deve score 90+ em Lighthouse sem esforços heroicos de otimização. Se está score menor, você provavelmente tem muitos Client Components ou imagens não otimizadas.

Se você está procurando ajuda com um projeto Figma-to-Next.js e quer esses tipos de resultados, dê uma olhada em nossos preços ou entre em contato diretamente.

FAQ

Quanto tempo leva para converter um design Figma para um website Next.js?

Depende muito da complexidade do projeto. Um site de marketing de 5 páginas com um design system limpo tipicamente leva 2-4 semanas para um desenvolvedor experiente. Uma web application complexa com dezenas de componentes únicos, animações customizadas, e integração de CMS pode levar 6-12 semanas. A qualidade do arquivo Figma importa muito — arquivos bem organizados com componentes consistentes podem reduzir tempo de desenvolvimento em 30-50%.

Ferramentas de IA podem automatizar completamente a conversão Figma para Next.js?

Ainda não. Em meados de 2026, ferramentas como Fusion do Builder.io, Kombai, e Locofy.ai podem gerar pontos de partida úteis, mas nenhuma produz código pronto para produção sem intervenção humana significativa. Elas são melhor usadas como aceleradores — gerando os primeiros 60-70% do markup — enquanto um desenvolvedor lida com arquitetura, otimização, acessibilidade, e integração de CMS.

Devo usar Tailwind CSS ou CSS Modules para projetos Figma-to-code?

Tailwind CSS é melhor fit para a maioria de projetos Figma-to-code. Designs do Figma são expressados como valores concretos (cores, espaçamento em pixel, tamanhos de font), e as utility classes do Tailwind mapeiam diretamente para esses valores. CSS Modules funcionam bem mas adicionam uma camada de abstração que desacelera o processo de tradução. A exceção: se sua equipe já tem uma base de código CSS Modules madura, manter consistência pode superar os benefícios de velocidade de tradução.

Qual é a melhor forma de lidar com design tokens do Figma em Next.js?

Use Figma Variables (ou plugin Tokens Studio) para exportar tokens em formato estruturado, então transforme-os na configuração do seu sistema de styling. Para Tailwind, isto significa estender tailwind.config.ts. Para CSS custom properties, gere um arquivo tokens.css. A ferramenta Style Dictionary do Amazon é excelente para transformar tokens entre formatos. Mantenha o pipeline automatizado para que mudanças de design token se propaguem para código sem trabalho manual.

Como lido com design responsivo quando o arquivo Figma tem apenas mockups desktop?

Isto é comum. Primeiro, conversa com o designer e estabeleça expectativas de comportamento responsivo. Então implemente mobile-first, fazendo decisões de layout baseadas em seu entendimento da intenção do design. Use CSS Grid e Flexbox para criar layouts naturalmente responsivos. Onde você está inseguro, protipe e obtenha feedback de designer na build responsiva ao vivo — é muito mais rápido iterar em uma implementação responsiva real do que voltar e desenhear mais frames estáticas.

Preciso do plano pago do Figma para fazer desenvolvimento Figma-to-code apropriado?

O plano gratuito funciona para inspeção básica, mas Dev Mode do Figma (disponível em planos pagos em $25/seat/mês em 2026) oferece features significativamente melhores de handoff de desenvolvimento: snippets de código CSS, inspeção de propriedades de componente, medidas precisas, e exportação de assets. Para projetos profissionais, vale a pena o custo. Sua alternativa é usar o plugin gratuito Figma to Code ou uma ferramenta externa como Locofy.ai.

Que score Lighthouse devo buscar para um build Figma-to-Next.js?

Busque 90+ em todas as categorias (Performance, Accessibility, Best Practices, SEO). Next.js lhe dá um forte ponto de partida, mas você pode facilmente despencar seu score de Performance com imagens não otimizadas, muitos Client Components, ou scripts terceirizados pesados. Para nossos projetos na Social Animal, típicamente atingimos 95+ em Performance ao manter limites de Client Component mínimos e usar next/image para todos gráficos raster.

Como mantenho o design Figma e codebase Next.js sincronizados ao longo do tempo?

Este é o desafio contínuo. Use design tokens como a fonte única de verdade — quando cores, tipografia, ou espaçamento mudam no Figma, atualize os tokens e regenere sua config Tailwind. Para mudanças no nível de componente, estabeleça um processo: designers atualizam o componente Figma, documentam o que mudou, e desenvolvedores atualizam o componente React correspondente. Ferramentas como Storybook podem ajudar ao fornecer uma referência visual que tanto designers quanto desenvolvedores podem verificar contra a fonte Figma.