--- title: "Do Figma ao código: as decisões por trás do site da Finalv1" url: "https://leal.st/pt/artigos/finalv1-do-figma-ao-codigo" answer: "A Leal fez o site da Finalv1 em código a partir do Figma pronto do Jason McCall, e não no Framer, e ele entrou no ar 12 dias depois do sim. O estúdio não paga mensalidade de plataforma, é dono de tudo e publica sozinho, e o site segue o design em qualquer tela." author: "Leonardo Leal" publisher: "Leal" published: "2026-10-15T00:00:00.000Z" modified: "2026-10-15T00:00:00.000Z" language: "pt-BR" topic: "Desenvolvimento" --- # Do Figma ao código: as decisões por trás do site da Finalv1 A Leal fez o site da Finalv1 em código a partir do Figma pronto do Jason McCall, e não no Framer, e ele entrou no ar 12 dias depois do sim. O estúdio não paga mensalidade de plataforma, é dono de tudo e publica sozinho, e o site segue o design em qualquer tela. ## Em resumo - Um Figma pronto pode ir ao ar em código em menos de duas semanas. - Em código, o site, o CMS e a hospedagem são do cliente, sem mensalidade de plataforma. - Num portfólio, o layout se adapta ao trabalho, e nenhuma imagem é cortada. - O estúdio publica projetos novos por conta própria, e o site se atualiza sozinho. O Jason McCall comanda a Finalv1, um estúdio de design de marca com clientes como Dribbble, R/GA e Baskin Robbins. Ele chegou com o site novo já desenhado no Figma e com o movimento descrito nos comentários do arquivo. A ideia era montar no Framer. ## Código em vez de Framer A gente sugeriu fazer em código. Construtor de site cobra todo mês enquanto o site existir, e o site só vive lá dentro. Em código, o site, o CMS e a hospedagem ficam no nome do estúdio, sem nada para alugar. Do sim ao site no ar, foram 12 dias. O site antigo era em WordPress, e cada projeto manteve o mesmo endereço, então os links que já circulavam por aí continuaram funcionando no site novo. ![A home da Finalv1: o logotipo gótico no topo e os dois primeiros projetos, uma ecobag escrita find the tribe e uma camisa com o logo da Planwisely] ## O design, do jeito que foi desenhado O arquivo do Jason tinha o site desenhado para quatro telas: celular, tablet, notebook e monitor grande. O site bate com cada uma delas e se ajusta sem saltos no meio do caminho, então nenhuma tela cai num buraco que o design não previu. A tipografia grande cresce junto com a tela. O texto pequeno, como rótulos e menus, mantém um tamanho confortável de ler em qualquer lugar. ![A home da Finalv1 nas quatro telas do arquivo do Figma, do celular ao monitor grande, lado a lado] ## Claro e escuro Dois pontinhos no topo trocam o site inteiro entre claro e escuro. As cores e os pontos mudam juntos, num movimento só, e o site lembra da escolha na próxima visita. [video] ## Uma abertura que continua no site O Jason desenhou a abertura como animação, e ela foi refeita a partir dela quadro a quadro: uma linha de luz abre, o F sobe e sai pelo topo, e o site entra já em movimento, sem pausa no meio. Ela toca uma vez só, na primeira visita, e nunca deixa ninguém esperando: numa conexão lenta, o site entra do mesmo jeito. [video] ## O trabalho nunca é cortado Num portfólio, o trabalho vem primeiro. Em vez de forçar todo projeto na mesma caixa, cada um ocupa o formato da própria imagem, e os vídeos seguem a mesma regra. Nada do que o estúdio fez é cortado para caber no layout. ![Dois projetos da Finalv1 na proporção inteira: uma ecobag escrita find the tribe e uma camisa com o logo da Planwisely, com número e nome embaixo] ## Leve e rápido As imagens vão no formato mais leve que cada navegador aceita, no tamanho que a tela realmente pede, e só quando estão para aparecer. Passar o mouse sobre um projeto já começa a carregar a página dele, então a primeira foto costuma estar pronta quando ela abre. ![O topo da página do projeto Planwisely no site da Finalv1: o logo da Planwisely sobre fundo off-white, abaixo da navegação] ## O Jason publica sozinho Projetos, imagens e textos saem de um painel simples. Quando o Jason publica, o site se atualiza sozinho em poucos minutos, e o painel mostra quando a mudança já está no ar. Se uma atualização fosse quebrar o site, ela simplesmente não sai. ![A seção About do site da Finalv1: um ícone K preto, a frase sobre entregar marcas ousadas e estratégicas, e as listas de serviços, clientes e contatos] Até o ícone da seção About fica na mão dele. Cada ícone sobe uma vez só, e o site adapta para o tema escuro por conta própria. [video] Astro no front-end, Sanity no CMS e GSAP com Lenis no movimento. Design da Finalv1. [O case da Finalv1](https://leal.st/work/finalv1) ## O que medimos - **Dias entre a proposta aprovada e o site no ar**: 12 days. Datas da aprovação da proposta (17 de setembro de 2026) e do lançamento em finalv1.com (29 de setembro de 2026). (2026-09-29) --- Publicado por Leal (LEAL DESIGN OFFICE LTDA.), Curitiba, Brasil. Versao canonica: https://leal.st/pt/artigos/finalv1-do-figma-ao-codigo