Figma Code to canvas: Protótipo de alta fidelidade com IA

Organizando o ambiente - Apresentação

Apresentando os instrutores

Olá! Bem-vindo a mais um curso aqui na Alura. Vamos nos apresentar antes de começar. Sou Matheus Vilaim, Product Designer, especialista em Design System e autor do livro "Design System: Mais Além do Layout" pela Casa do Código.

Audiodescrição: Matheus é uma pessoa de pele branca, com cabelo, sobrancelhas, barba e olhos castanho-escuros. Seu cabelo é bastante curto, enquanto a barba é longa, cobrindo praticamente todo o pescoço. Ele usa óculos de cor madeira e veste uma camisa bege. À sua frente, há um microfone sustentado por um braço articulado. Atrás dele, há uma estante com alguns livros e figuras de Harry Potter. Além disso, há uma grade com algumas credenciais de eventos penduradas e, no chão, uma costela-de-adão com uma nova folha nascendo.

Introduzindo as ferramentas e objetivos do curso

Neste curso, vamos trabalhar com grandes novidades em inteligência artificial. Temos à disposição ferramentas importantes que utilizamos no nosso dia a dia na construção de produtos digitais.

Uma das ferramentas é o Figma, que agora está muito mais conhecida e é focada principalmente por equipes de design, por pessoas que trabalham com design de interfaces e experiência. Temos também ferramentas de IA como ChatGPT, Codex e Cloud Code, que estão muito mais presentes na área de conhecimento de desenvolvimento de engenharia, tanto front-end quanto back-end. Algo importante que podemos fazer é unir essas duas ferramentas como uma só e trabalhar em um projeto onde possamos fazer com que essas duas ferramentas se comuniquem entre si. Ou seja, podemos pegar algo que está no Figma e levá-lo para o código, da mesma forma que podemos pegar algo que está no código e passá-lo para o Figma. Tudo isso será abordado ao longo do curso, criando um projeto completo onde analisamos um painel com uma interface um pouco desatualizada, que apresenta alguns problemas de acessibilidade e usabilidade, e como podemos solucionar isso usando a própria IA. Utilizaremos o Figma para ter uma visão geral de toda a interface, pensar em modelos diferentes, em respostas diferentes e, claro, como tomamos todas essas informações que criamos e tabulamos, levando isso para uma inteligência artificial e fazendo o caminho inverso, ou seja, do código para o design e depois do design para o código.

Explicando o público-alvo e a importância do curso

Como mencionado, teremos um projeto relacionado a isso dentro deste curso. Vamos trabalhar nele tanto para prática quanto para portfólio, e qualquer tipo de ajuda que precisar, saiba que estamos aqui. Lembrando que este não é um curso apenas para designers, nem apenas para quem trabalha em desenvolvimento; é um curso para quem trabalha com produto digital. Na era da inteligência artificial, não podemos continuar negligenciando as ferramentas e dizendo que apenas certo time pode usar esta ou aquela ferramenta. Precisamos ter uma visão geral de tudo, pois, no final, é uma construção de produto, e a inteligência artificial veio para ficar. Este curso é feito para pessoas que trabalham com produtos digitais, seja em design, desenvolvimento, PM ou PO. Este curso foi feito para você, e espero vê-lo no próximo vídeo. Até então, obrigado!

Organizando o ambiente - Conhecendo o Codex

Apresentando o Codex

Para começar, queremos mostrar um pouco desta ferramenta sensacional que utilizamos praticamente todos os dias: o Codex. O Codex possui uma interface muito semelhante à de qualquer IA com a qual já tenhamos interagido. É a ferramenta de desenvolvimento da OpenAI. Diferentemente de outras ferramentas de desenvolvimento que encontramos por aí, o Codex nos permite trabalhar apenas com o chat GPT. No campo de texto abaixo, nosso campo de prompt, há um pequeno espaço para escolher qual GPT queremos utilizar. Recentemente, foi lançado o 5.4, então temos o 5.4 normal, o mini, o 5.3 Codex, 5.2 Codex, 5.2.5.1 Codex Max e o 5.1 Codex Mini. Podemos selecionar qual linguagem, qual LLM da OpenAI queremos usar.

Sempre que abrimos o Codex, ele nos pergunta em qual projeto queremos trabalhar e começa a listá-los dentro das threads. Criamos uma pasta chamada "Projeto Teste" apenas para experimentarmos um pouco. Fomos em "Add New Project", buscamos em nosso computador e já aparece aqui dentro. Se quisermos adicionar mais, parecerá como se fossem várias conversas. Dentro de um projeto, podemos ter várias conversas, pois podemos estar trabalhando em várias funcionalidades, em diferentes execuções e desenvolvimentos.

Explorando funcionalidades do Codex

Em geral, podemos criar uma nova thread dentro do Codex. Temos uma área de automações, então, conforme executamos certos comandos, podemos pedir ao Codex que nos traga algumas coisas automaticamente, sem que precisemos solicitá-las. Por exemplo, ele possui alguns relatórios de status, documentações, atualizações, que o próprio Codex pode nos enviar, como fazer um resumo das atividades que realizamos no Git, para enviar no que chamam de stand-up, que aqui no Brasil chamamos de 'daily'. Há outras funcionalidades, preparativos para releases, e claro, ao descer, encontramos várias outras, da mesma forma que podemos criar uma automação própria para nosso projeto.

Também temos skills (habilidades). Por padrão, já vem com três instaladas: OpenAI Docs, Skill Creator e Skill Installer. Mas há muitas habilidades que podemos instalar. Existem várias ferramentas que conhecemos: GitHub, Figma, desenvolvimento de jogos, Notion, captura de tela, Verse, entre outras. Podemos até criar slides com o Codex. No entanto, estaremos mais focados na parte de desenvolvimento, aplicação, e integração com Figma, entre outros. Assim como podemos criar uma nova automação, também podemos criar uma nova skill.

Ajustando configurações e raciocínio no Codex

Voltando à área de nossas threads, de nossos prompts para criar, há algo interessante: ao lado do campo para selecionar o modelo de linguagem, há outro campo para selecionar o nível de raciocínio, chamado "select reasoning effort". Quanto mais preciso for, mais ele trabalhará dentro do comando solicitado. Por padrão, está em median, mas podemos ajustá-lo para low, high ou extra high. Isso ajudará na quantidade de problemas complexos que poderá resolver em um tempo determinado, para um tipo de problema apresentado. Às vezes, uma funcionalidade requer maior complexidade para ser desenvolvida, então as opções high ou extra high podem ser as mais importantes. No entanto, é importante lembrar que, assim como qualquer prompt que escrevemos no próprio chat GPT, no Gemini ou em qualquer IA, isso consome tokens. Temos aqui o chat GPT pago, então temos um Codex com um plano separado, com mais tokens para gastar. Contudo, se sempre usarmos extra high, nossos tokens se esgotarão mais rapidamente, e aparecerá um aviso informando que já gastamos todo o limite do dia, sendo necessário esperar os 30 dias para renovar o mês de faturamento e continuar usando o Codex para determinada funcionalidade.

Também temos toda a área de configurações, onde podemos alterar a aparência, informações gerais, personalização e trabalhar com MCP. Vamos explorar isso no próximo vídeo. Vamos fazer um teste. Assim como podemos abrir o Google Antigravity, abrir o chat e fazer algumas solicitações, isso fica muito mais concentrado no Codex, que é mais especializado para trabalhar em desenvolvimento. Usar o Codex é mais prático, pois podemos abrir vários chats separados e pedir que todos trabalhem simultaneamente. Assim, podemos deixar o desenvolvimento em andamento, mesmo que leve algum tempo.

Realizando um teste prático com o Codex

Podemos minimizar a ferramenta, realizar outras tarefas, levantar, tomar um café, e ela continuará trabalhando por nós. É muito mais prático usar o Codex como aliado do que utilizar outro tipo de ferramenta. Vamos minimizar o Google Antigravity e depois veremos como ele funcionará nesta construção. O que vamos pedir aqui? Vamos dar um comando muito simples: criar um site tipo portfólio com três projetos de UX como exemplo. Não vamos deixar em DistroArraig, vamos colocá-lo em mídia. Para nós, está mais do que perfeito. E enviamos o comando.

Ah, bem, está pedindo a configuração aqui. Instalamos o Codex em nosso computador para que possamos fazer as configurações juntos. Pronto, já demos a permissão aqui no Windows. Agora vamos enviar. Ele começará a processar aqui. Vai analisar nosso prompt, que foi extremamente simples. Não fornecemos muitos detalhes sobre se queremos com HTML, CSS, JS puro ou se queremos trabalhar com React ou com Vue.js. Se queremos usar imagens, se é Light ou Dark Mode, não demos detalhes. Então, ele inventará desde o início. E para ele, o que queremos, o que precisamos? Ele começará a trabalhar aqui. Já começou a executar algumas coisas. E conforme vai trabalhando, nos dá alguns feedbacks.

Analisando o resultado do teste

O que ele disse aqui? Já informou que alguma lista falhou no meio deste processo. Mas acima disse que montará o portfólio com três projetos de UX como exemplo, mantendo tudo consistente com o que já existia no workspace. Primeiro, vamos inspecionar a estrutura do projeto para entender a stack. Bem, ele inspecionou. E provavelmente esse foi o erro, talvez, porque o projeto está literalmente vazio, como aparecia aqui embaixo. O workspace está vazio. Vamos tentar entregar um site estático. Ok, então ele fará isso sem nenhum tipo de framework. Criará uma landing page de portfólio com uma identidade visual própria.

Para visualizar o conteúdo do arquivo index.html que foi criado, podemos usar o seguinte comando:

Get-Content index.html

E para o arquivo de estilos styles.css, utilizamos:

Get-Content styles.css

O que vamos fazer? Note que, inclusive, já começou a carregar. E sempre nos mostra, ao lado, o tempo que leva para fazer esse desenvolvimento. E se quisermos ter um feedback de quanto está gastando de nossos tokens, cada vez que enviamos a mensagem, ele começará a mostrar esse indicador aqui ao lado, em forma circular. Passamos o cursor por cima e já podemos ver que gastou 5%. 13 mil tokens de um total de 258 mil. Então, resta 95% mais. Mas isso não é o que gastou em total neste nosso prompt. Ainda está desenvolvendo. Então, ainda há mais tokens por gastar neste processo.

Finalizando o projeto e visualizando o site

Com isso, acreditamos que já terminou. Indicou que criou index.html, criou index.css e ainda está executando algumas outras coisas. Vamos ver. Agora finalizou. Quando envia os arquivos ao final, indicando quanto código adicionou, que é o verde, e quanto código eliminou, que é o vermelho, significa que terminou. Então, o que nos disse aqui? Criou um site estático de portfólio UX com três projetos de exemplo em index.html e depois criou style.css também para a parte visual. A página inclui hero, navegação, seção de processo, três cases completos e um bloco final de contato com layout responsivo e uma identidade visual mais editorial usando uma tipografia forte, gradientes e cards com contraste.

Aqui está o conteúdo do index.html que foi gerado:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Portfólio de Marina Costa, UX Designer.">
    <title>Marina Costa | Portfólio UX</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Syne:wght@800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="page-shell">
        <div class="header-content">
            <a href="#" class="brand">MC</a>
            <nav>
                <a href="#projetos">Projetos</a>
                <a href="#processo">Processo</a>
                <a href="#contato">Contato</a>
            </nav>
        </div>
    </header>

    <main>
        <section class="hero-grid">
            <div class="hero-copy">
                <h1>Experiências digitais com clareza, ritmo e propósito.</h1>
                <p>Sou Marina Costa, designer focada em transformar jornadas confusas em produtos úteis, desejáveis e viáveis. Este portfólio reúne três projetos conceituais de UX com contexto, processo e impacto.</p>
            </div>
            <div class="hero-actions">
                <a href="#projetos" class="button button-primary">Ver projetos</a>
                <a href="#contato" class="button button-secondary">Falar comigo</a>
            </div>
            <aside class="hero-card">
                <h3>Visão rápida</h3>
                <ul>
                    <li><strong>8+</strong> anos em design digital</li>
                    <li><strong>22</strong> lançamentos acompanhados</li>
                    <li><strong>3</strong> cases destacados abaixo</li>
                </ul>
            </aside>
        </section>

        <section class="section-intro" id="processo">
            <h2>Pesquisa bem feita reduz ruído e melhora decisão.</h2>
            <div class="process-grid">
                <article>
                    <h3>Descobrir</h3>
                    <p>Entrevistas, análise de comportamento e mapeamento de oportunidades com foco no problema real.</p>
                </article>
                <article>
                    <h3>Estruturar</h3>
                    <p>Arquitetura da informação, fluxos críticos e priorização guiada por impacto e esforço.</p>
                </article>
                <article>
                    <h3>Validar</h3>
                    <p>Protótipos navegáveis, testes moderados e iteração rápida antes de investir em desenvolvimento.</p>
                </article>
            </div>
        </section>

        <section class="section-projects" id="projetos">
            <h2>Projetos em destaque</h2>
            <p>Três exemplos de projetos de UX com objetivos, método e resultado.</p>
            <div class="projects-grid">
                <article class="project-card">
                    <div class="project-meta">
                        <span class="project-tag">FINTECH</span>
                        <span class="project-year">2025</span>
                    </div>
                    <div class="project-content">
                        <h3>Fluxo de onboarding para app financeiro</h3>
                        <p>Redesenho do cadastro inicial para reduzir abandono em uma carteira digital voltada a jovens profissionais que buscavam controle simples de gastos.</p>
                    </div>
                    <div class="project-details">
                        <p><strong>Desafio:</strong> O processo exigia 11 etapas e gerava desistência logo nos primeiros minutos.</p>
                        <p><strong>Abordagem:</strong> Mapeei fricções, simplifiquei a coleta de dados e inseri feedback contextual ao longo do fluxo.</p>
                        <p><strong>Impacto:</strong> A taxa de conclusão do onboarding subiu 34% no protótipo validado com usuários.</p>
                    </div>
                </article>
                <article class="project-card alt">
                    <div class="project-meta">
                        <span class="project-tag">HEALTHTECH</span>
                        <span class="project-year">2024</span>
                    </div>
                    <div class="project-content">
                        <h3>Agendamento digital para clínica multidisciplinar</h3>
                        <p>Criação de uma experiência responsiva para marcação de consultas, com foco em pacientes recorrentes e redução de ligações para a recepção.</p>
                    </div>
                    <div class="project-details">
                        <p><strong>Desafio:</strong> Usuários não conseguiam comparar horários, convênios e especialidades sem ajuda humana.</p>
                        <p><strong>Abordagem:</strong> Reorganizei filtros, destaquei disponibilidade em tempo real e reduzi escolhas ambíguas.</p>
                        <p><strong>Impacto:</strong> O tempo médio para concluir um agendamento caiu de 6 para 2 minutos nos testes.</p>
                    </div>
                </article>
                <article class="project-card">
                    <div class="project-meta">
                        <span class="project-tag">EDTECH</span>
                        <span class="project-year">2023</span>
                    </div>
                    <div class="project-content">
                        <h3>Dashboard de aprendizagem para plataforma educacional</h3>
                        <p>Reestruturação da área do aluno para tornar progresso, metas e recomendações mais visíveis e acionáveis dentro da rotina de estudo.</p>
                    </div>
                    <div class="project-details">
                        <p><strong>Desafio:</strong> A plataforma oferecia muitos recursos, mas pouca clareza sobre o próximo passo ideal.</p>
                        <p><strong>Abordagem:</strong> Priorização visual, cards modulares e hierarquia orientada por comportamento de estudo.</p>
                        <p><strong>Impacto:</strong> A percepção de clareza da interface cresceu 41% em pesquisa pós-teste com 18 participantes.</p>
                    </div>
                </article>
            </div>
        </section>

        <section class="section-closing" id="contato">
            <div class="closing-panel">
                <h2>Do insight à interface, cada escolha precisa responder a uma necessidade real.</h2>
                <a href="mailto:marina@email.com" class="button button-primary">Fale comigo</a>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Marina Costa. Todos os direitos reservados.</p>
    </footer>
</body>
</html>

E o styles.css que complementa o visual do site:

:root {
    --bg-soft: #f8f5f2;
    --bg-soft-alpha: rgba(248, 245, 242, 0.55);
    --panel: #fff;
    --panel-strong: #f2f2f2;
    --text: #0d0d0d;
    --muted: #8e8e8e;
    --accent: #e0d4c8;
    --accent-dark: #b9a49f;
    --line: rgba(30, 31, 28, 0.12);
    --shadow: 0 24px 80px rgba(18, 18, 18, 0.14);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Manrope', sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(232, 211, 222, 0.22), transparent 32%),
        radial-gradient(circle at right, rgba(18, 64, 47, 0.14), transparent 28%),
        linear-gradient(108deg, rgba(248, 245, 242, 0.07), #f8f5f2 50%);
    min-height: 100vh;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

.page-shell {
    width: min(1440px, calc(100% - 32px));
    margin: 0 auto;
    padding: 24px 0;
}

header {
    border-bottom: 1px solid var(--line);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 24px;
    background: var(--text);
    color: var(--bg-soft);
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

nav {
    display: flex;
    gap: 24px;
}

nav a:hover {
    text-decoration: underline;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 80px 0;
    border-bottom: 1px solid var(--line);
}

.hero-copy h1 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 1.1;
    margin: 0;
}

.hero-copy p {
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 35ch;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.button {
    font-size: 1rem;
    padding: 16px 24px;
    border-radius: 99px;
    font-weight: 500;
    transition: transform 0.2s;
}

.button:hover {
    transform: scale(1.05);
}

.button-primary {
    background: var(--text);
    color: var(--bg-soft);
}

.button-secondary {
    background: var(--panel);
    border: 1px solid var(--line);
}

.hero-card {
    background: var(--bg-soft-alpha);
    border: 1px solid var(--line);
    padding: 24px;
    border-radius: 24px;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    backdrop-filter: blur(10px);
}

.hero-card h3 {
    margin: 0 0 16px;
    font-weight: 500;
}

.hero-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 16px;
}

.hero-card li {
    font-size: 1.25rem;
}

.hero-card strong {
    font-size: 2.5rem;
    font-weight: 800;
    display: block;
}

.section-intro {
    padding: 80px 0;
    text-align: center;
}

.section-intro h2 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    max-width: 20ch;
    margin: 0 auto 48px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.process-grid article {
    background: var(--panel);
    padding: 32px;
    border-radius: 24px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.process-grid h3 {
    font-size: 1.5rem;
    margin: 0 0 8px;
}

.process-grid p {
    margin: 0;
    color: var(--muted);
}

.section-projects {
    padding: 80px 0;
    text-align: center;
}

.projects-grid {
    display: grid;
    gap: 32px;
    text-align: left;
    margin-top: 48px;
}

.project-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    box-shadow: var(--shadow);
}

.project-card.alt {
    background: #111;
    color: #fff;
    border-color: #333;
}

.project-card.alt .project-tag {
    background: #333;
}

.project-card.alt p {
    color: #ccc;
}

.project-meta {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
}

.project-tag {
    background: var(--bg-soft);
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 0.875rem;
}

.project-content h3 {
    font-size: 2rem;
    margin: 0 0 16px;
}

.project-content p {
    line-height: 1.6;
    margin: 0;
    color: var(--muted);
}

.project-details {
    display: grid;
    gap: 16px;
    align-content: start;
}

.project-details strong {
    display: block;
    margin-bottom: 4px;
}

.section-closing {
    padding: 80px 0;
}

.closing-panel {
    background: var(--accent);
    padding: 80px;
    border-radius: 32px;
    text-align: center;
}

.closing-panel h2 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    max-width: 25ch;
    margin: 0 auto 32px;
}

.closing-panel .button-primary {
    background: var(--panel);
    color: var(--text);
}

footer {
    text-align: center;
    padding: 24px 0;
    color: var(--muted);
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }
    .hero-card {
        grid-row: auto;
    }
    .process-grid {
        grid-template-columns: 1fr;
    }
    .project-card {
        grid-template-columns: 1fr;
    }
    .closing-panel {
        padding: 40px;
    }
}

Se abrirmos aqui nosso Antigravity, lá estão nossos dois arquivos aparecendo. Já mostrou bastante aqui. O Antigravity quer apagar coisas que não são necessárias. Toda a estrutura do site aparecendo. Todo o arquivo CSS também aparecendo aqui. E claro, agora vamos executá-lo em nosso navegador para visualizar este nosso site. Vamos abrir a pasta e index.html. Bem, abriu aqui. Vamos ver o que nos trouxe. Experiências digitais com clareza, ritmo e propósito. Inventou uma pessoa aqui. Sou Marina Costa, designer focada em transformar jornadas confusas em produtos úteis, desejáveis e viáveis. Este portfólio reúne todos os projetos conceituais de UX com contexto, processo e impacto. Dá uma visão geral aqui. Mais de 8 anos em design digital, 22 lançamentos acompanhados, 3 cases destacados abaixo. Há uma navegação aqui. Uma navegação que inclusive tem uma animação criando uma âncora para a parte inferior do site. Criou um processo, uma metodologia que a pessoa Marina Costa usa: descobrir, estruturar e validar. E aqui abaixo estão listados os projetos. Uma fintech, fluxo de onboarding para um aplicativo financeiro. Colocou o desafio aqui. É tudo tech o que trouxe aqui. A criatividade está nas alturas. Agendamento digital para clínica multidisciplinar. Dashboard de aprendizado para a plataforma educacional. Enfim, vimos que criou um projeto completo. Não demorou muito.

Concluindo o uso do Codex e próximos passos

Vamos abrir o Codex novamente aqui. Demorou exatamente 4 minutos, aproximadamente 4 minutos, para criar 492 linhas de código. E elaborou tudo a partir de um prompt que não tinha nenhum contexto. Esta é uma ferramenta maravilhosa que vamos usar ao longo do curso. Mas isso não significa que seja a única. Além do Codex, para podermos trabalhar em nosso processo, existe outra ferramenta que também funciona muito bem, que é o Cloud Code. Mas vamos dar uma visão geral mais ampla sobre essas ferramentas e até mesmo a parte de MCP no próximo vídeo. Então, nos vemos lá. Obrigado!

Organizando o ambiente - Configurando a IA

Introduzindo ferramentas de desenvolvimento e design

Como mencionado no final do vídeo anterior, temos mais de uma ferramenta que podemos utilizar para trabalhar com o ambiente de desenvolvimento e Figma, aproveitando a função recentemente lançada, Code2Canvas. Vamos falar sobre ela.

A primeira ferramenta é o Codex, que já apresentamos. É a ferramenta da OpenAI que permite trabalhar com os modelos do ChatGPT. Outra ferramenta extremamente famosa, que inclusive iniciou essa nova funcionalidade do Figma, é o Cloud. O Cloud é outra inteligência artificial criada pela empresa Anthropic, que muitas vezes rivaliza com a OpenAI. O Cloud é uma ferramenta que pode ser usada para trabalhar com código. Podemos baixá-lo no computador e usar uma vertente chamada Cloud Code. Ambos, Codex e Cloud, têm o mesmo objetivo: trabalhar especificamente com tecnologia e engenharia.

Comparando Codex e Cloud

Um ponto importante a compartilhar é que o Cloud costuma ser a preferência da maioria das pessoas que trabalham com tecnologia, seja no desenvolvimento ou no design. No entanto, o Cloud fica dentro do terminal do computador, o que pode exigir uma curva de aprendizado maior para quem não tem familiaridade com o terminal. Não é algo extremamente complexo, mas é importante mencionar.

Na página do Codex, há uma descrição inicial dizendo que podemos testá-lo nos planos Free e Go. Existe também o plano Max, que é o mais caro da OpenAI. Podemos usar o Codex na versão gratuita. Já o Cloud, na data desta gravação, não permite isso. Para usar o Cloud Code, é necessário assinar pelo menos o plano intermediário. O Cloud pode ser baixado e usado normalmente como o ChatGPT para conversas, mas o Cloud Code específico requer uma assinatura. Assim como muitas outras IAs, o Cloud cobra os planos em dólar, o que pode variar entre 100 e 110 reais, dependendo da cotação do dólar. Mesmo assim, é uma opção preferida por muitos, pois oferece resultados tão bons quanto o Codex. Se tivermos o Cloud, podemos usá-lo. Caso contrário, o Codex é uma boa alternativa gratuita, embora com um limite de tokens menor no plano gratuito.

Explorando a função Code2Canvas no Figma

Agora, sobre o Code2Canvas. Essa função chegou ao Figma recentemente, em 17 de fevereiro de 2026. Ela permite conectar o ambiente de código com a área de design do Figma. Em vez de criar um site do zero, podemos enviar um prompt que analisa o site e o código, enviando-o para o Figma de forma rápida e eficiente. Isso resolve problemas que enfrentávamos ao usar plugins de importação de HTML no Figma, que muitas vezes resultavam em importações quebradas ou não responsivas.

Para configurar isso no Codex, é simples. Vamos em ajustes, clicamos novamente em ajustes e acessamos o menu MCP Servers. Lá, encontraremos várias opções como Linear, Notion, Figma e Playwright. Clicamos no botão de instalação para o Figma. Isso abrirá uma aba no navegador para autenticar e permitir que o Codex acesse o Figma, semelhante a um login usando o Google.

Configurando e testando o DevMode no Figma

Após isso, o próximo passo é ir ao arquivo do Figma e clicar na função DevMode. Para usar o DevMode, é necessário ter um plano estudantil ou assinar um dos planos do Figma. Caso contrário, o DevMode pode estar desabilitado. Clicamos no botão para habilitar o desktop MCP Server, e ele será ativado. Sempre que abrimos o Figma, recebemos um aviso sobre isso.

O passo seguinte é realizar testes. Pegamos nosso projeto de teste, um portfólio, e pedimos para refatorá-lo, transformando-o em React para deixá-lo mais profissional. Abrimos o editor de código, no caso, o VSCode, e remodelamos todo o projeto, que antes era estático, com apenas um arquivo index.html e o estilo style.css, transformando-o em React, tornando-o mais profissional e fácil de editar.

Solucionando problemas de execução e integração

Está fácil aqui para interagir. Pedimos que fosse executado localmente e, durante esse processo, quando foi executado e aberto no navegador, não aparecia nenhuma informação. Solicitamos que fosse aberto e revisado, pois as informações não estavam aparecendo. O problema foi identificado, corrigido nos arquivos, com a adição de uma linha aqui e duas linhas em outros lugares, e então funcionou. Agora está rodando no navegador, perfeitamente igual a antes, apenas na versão estática. Tudo funciona perfeitamente.

Se quisermos levar tudo isso para o Figma, o que faremos? Vamos fechar o navegador, voltar ao Codex, criar uma nova conversa e fazer o seguinte: criar a interface do site no Figma. Não podemos apenas pedir que crie a interface do site no Figma. Precisamos indicar qual arquivo deve ser criado, pois não será inventado um arquivo do zero. Temos um arquivo aqui, que foi criado, e vamos clicar com o botão direito na aba, selecionar "copiar link", ou podemos ir até "compartilhar" e clicar no botão "copiar link" também, ambos funcionam da mesma forma. Vamos inserir esse link na conversa e enviar. Agora, aguardaremos enquanto o sistema pensa, gera a resolução e executa. Se o site não estivesse rodando localmente, faríamos isso, executando-o localmente para visualizar o site, capturar uma imagem, ver o código e então enviar tudo isso para o Figma.

Executando a integração com o Figma

O que foi identificado aqui? Encontrou um aplicativo front-end local, inclusive abriu o terminal do computador já rodando outro servidor local, confirmou que é um projeto usando Vite e React, e iniciou o servidor local. Figma foi definido como objetivo. Vamos colocar o Figma ao lado, reduzir um pouco a janela do Codex e ver se conseguimos visualizar tudo junto. O arquivo index.html foi editado, com a adição de uma linha que era um script do próprio MCP. Isso é interessante, pois o Codex, assim como o Cloud, sempre pede uma confirmação. Podemos simplesmente dizer "sim" e ele pedirá confirmação o tempo todo. Se não quisermos que peça confirmação especificamente nesta conversa, podemos dizer "sim" e executar para todos os outros comandos semelhantes. Vamos fazer isso agora, sem problemas.

O navegador foi aberto, algumas ações estão sendo executadas, e outro comando está sendo solicitado. Vamos aprovar novamente. O navegador foi aberto junto com uma janela, enviando para o Figma. O envio foi realizado. Vamos diminuir o zoom, que está bastante grande. O envio foi completo, tudo está aqui. Codex está enviando mais informações, a captura já foi enviada para o Figma, está em conversão, e tudo foi concluído, perfeito.

Avaliando o resultado final no Figma

Vamos ver se conseguimos colocar os dois juntos aqui, mas parece que tudo foi muito perfeito. Talvez tenha ocorrido algum problema, mas isso pode ser uma limitação de estilo visual do Figma. O degradê deste bloco aqui foi diferente do que está aqui, mas a parte superior parece estar igual. O degradê do fundo do site também parece estar igual à versão que está rodando no navegador. Todo o restante foi feito corretamente. Os textos na parte inferior, ah não, foi o próprio Codex que deixou escuro. Poderíamos pedir para corrigir, mas todo o restante foi enviado e ficou 100% perfeito. E tudo isso foi feito em quanto tempo? Dois minutos. Foi um processo de dois minutos para levar um site desse tamanho para o Figma e ficar, digamos, 99% fiel.

Vamos olhar as camadas? Tudo está bem organizado, camadas renomeadas, Auto Layout aplicado na maioria das informações. Em alguns lugares, de fato, não será aplicado Auto Layout, pois talvez não entenda exatamente essa configuração, mas na maioria das interfaces, nota-se que o Auto Layout está totalmente aplicado. Nosso projeto, de certa forma, pode até trazer uma maior responsividade.

Explorando funcionalidades adicionais e finalizando

Abrindo no navegador, é mais interessante, pois tem um link de captura do Figma e mostra uma janela de ferramentas fixa na parte superior. Podemos pedir novamente para enviar a tela completa para o Figma ou selecionar um arquivo, um elemento específico. Clicamos para selecionar e ele nos dá um seletor. Se quisermos, por exemplo, enviar apenas esta parte do processo, clicamos, começa a carregar e será mostrado no Figma em determinado momento. Foi enviado aqui. Está com fundo transparente, provavelmente no código também está assim, feito de uma maneira mais moderna. Mas, claro, se colocarmos um fundo igual ao do site, trará um resultado completamente semelhante. Podemos tomar blocos separados específicos em vez de pedir que leve todo o site. Isso ajuda muito se quisermos, por exemplo, fazer uma edição mais precisa apenas nesse bloco, extraímos, editamos o que for necessário e depois seguimos com as atualizações no código para enviar isso do Figma para o desenvolvimento. Fazemos os dois caminhos: do código para o Figma e do Figma para o código.

Tudo bem? Configuração fácil, muito tranquila de utilizar. Nos vemos no próximo vídeo. Até então, obrigado!

Sobre o curso Figma Code to canvas: Protótipo de alta fidelidade com IA

O curso Figma Code to canvas: Protótipo de alta fidelidade com IA possui 145 minutos de vídeos, em um total de 40 atividades. Gostou? Conheça nossos outros cursos de UX Design em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Organizando o ambiente
• Iniciando o projeto
• Corrigindo problemas com IA
• Rules e workflows
• Componentizando e atualizando o projeto