Olá! Iniciamos uma nova jornada que vamos vivenciar juntos aqui na Alura. Desta vez, a proposta é utilizar a própria inteligência artificial para criar ferramentas que aprimorem nosso trabalho em design. É um grande desafio e, antes de entrarmos nos detalhes do que veremos nesta jornada, permitam-me apresentar.
Meu nome é Rodrigo Lemes, tenho mais de 25 anos de mercado e já passei por agências, por empresas de tecnologia como a Samsung, por bancos como o Itaú, por startups como a Movile, por empresas de crédito como a Boa Vista e, hoje, sou UX Principal e Diretor de Operações (Ops) no Mercado Livre. É uma grande empresa, com muitos desafios e muita conversa sobre inteligência artificial. Também sou professor universitário; ministro aulas desde 2001 em universidades, cursos de extensão e formações diversas. Aqui, nesta grande parceria com a Alura, é maravilhoso estar com vocês.
Também mantenho um canal no YouTube chamado Design Team BR. Caso ainda não conheça, procure por Design Team BR (logo verde) no YouTube, curta os vídeos e inscreva-se. Há muito conteúdo; o canal está prestes a completar 10 anos, com muitos vídeos.
Agora, avancemos para o que veremos nesta jornada. Refletimos, trocamos ideias e decidimos desenvolver, com apoio de inteligência artificial, uma ferramenta: um plugin (complemento) para o Figma, capaz de verificar nosso arquivo no Figma. O objetivo é avaliar se o arquivo que entregaremos à equipe de desenvolvimento no processo de handoff (entrega) está adequado.
Queríamos garantir que as heurísticas estivessem corretas, que cumpríssemos os critérios de usabilidade e acessibilidade, e que os componentes do design system (sistema de design) estivessem completos, sem que se detectasse nenhum problema e sem provocar quebras. Utilizando inteligência artificial e várias ferramentas, criamos um prompt (instrução) e passamos a utilizar algumas ferramentas diferentes, que vamos explorar.
Conseguimos, passo a passo, mesmo sem conhecimento prévio de código — eu não sou pessoa desenvolvedora, sou designer — gerar um plugin (extensão) que integramos ao Figma para analisar o arquivo e verificar se tudo estava de acordo com os critérios mencionados. Essa extensão atribuía uma nota, mostrava a saúde do arquivo e indicava o que estava incorreto, o que estava correto, o que precisava ser aprimorado e o que poderia ser mantido. Fomos aperfeiçoando esse plugin (extensão) com o tempo, até que se tornasse nosso assistente na verificação da qualidade dos arquivos com os quais trabalhamos.
Agora, vamos replicar exatamente esse processo juntos. Vamos criar um plugin (extensão) no Figma e mostrar, passo a passo, como fazer, sem mistério, utilizando apenas prompts (instruções), inteligência artificial e as ferramentas adequadas. A ideia é que você crie sua própria extensão — pode ser um verificador de qualidade, como o que desenvolvemos — e, se desejar, poderá ampliá-la para qualquer outra finalidade. Nosso objetivo é apresentar, passo a passo, como criar uma ferramenta com inteligência artificial para apoiar seu trabalho de design até a entrega final.
O que acha dessa proposta? Aceita o desafio? É muito motivador criarmos algo nesse nível para aprimorar nosso trabalho com o apoio de IA. Tudo pronto? Vamos criar nosso projeto com inteligência artificial. Vamos começar!
Estamos neste desafio entendendo o produto antes de começarmos a fazer qualquer coisa — codificar, construir e assim por diante. Um ponto importante é definir para que servirá este plugin (extensão). Antes de abrir qualquer editor de código e escrever qualquer linha, precisamos entender o problema. É exatamente isso que vamos ver na aula de hoje: qual é o problema real que o plugin (extensão) resolve, qual é o produto que vamos criar e como a inteligência artificial e o Claude já entram nesta etapa — não como programador, e sim como pesquisador do problema para nos apoiar.
Vamos nos deter em uma questão central: qual é o problema real nos times de design? Quantas vezes abrimos um arquivo do Figma de outra pessoa de design e ficamos sem orientação? Por exemplo: camadas sem nome, frames (quadros) sem estrutura, componentes fora do sistema de design. Cada pessoa de design organiza o arquivo à sua maneira. Quando esse arquivo chega para a pessoa desenvolvedora, o que acontece? Precisamos de uma reunião de interpretação; a pessoa desenvolvedora não sabe o que é o quê, pergunta para a pessoa de design, a pessoa de design interrompe o que estava fazendo para explicar e há retrabalho para todos os lados. Falta nomenclatura, falta Auto Layout (layout automático), há componentes desvinculados do sistema de design sem que ninguém perceba, e não há uma forma rápida de fazer uma auditoria de qualidade sobre isso.
É exatamente nesse ponto que queremos começar a desenvolver e encontrar uma ideia. Vamos ver como podemos construir um plugin (extensão) que resolva, ainda que parcialmente, esse tipo de problema. A proposta é executar esse plugin (extensão) em um arquivo do Figma e atribuir uma nota de 0 a 100, acompanhada de uma lista detalhada dos problemas encontrados.
Além disso, estamos pensando em um modo de controle de qualidade, de verificação para o handoff (entrega para desenvolvimento). A pessoa desenvolvedora poderia escrever uma pergunta sobre o arquivo — por exemplo: se o arquivo utiliza Auto Layout (layout automático) nos componentes principais — e a inteligência artificial responderia com base no conteúdo real desse arquivo.
Também podemos pensar em gerar um relatório exportável: um texto pronto para colar no Notion, em uma planilha do Excel ou em um documento, tudo com um clique.
A lição é simples: todo produto começa pelo problema. Se não entendermos o que o plugin (extensão) vai resolver, tomaremos decisões equivocadas no código mais adiante. O que definirmos hoje vai orientar cada escolha dos próximos módulos, das próximas aulas e dos seus exercícios. Por isso, é importante identificarmos, a partir de agora, o escopo no qual a inteligência artificial vai atuar para nós e conosco.
Para começar, o que podemos fazer neste momento com o Claude para nos ajudar? Vamos trazer algumas definições importantes. Estamos usando o Claude; temos o Claude Code, o Claude Coworking e outras opções. Vamos começar a trabalhar com o Claude Code. Inclusive, pagamos um plano para poder utilizá-lo.
Convém avaliar o tamanho do trabalho para decidir se vale a pena pagar mais ou mudar de plano. E não é necessário usar o Cloud (nuvem); podemos testar outras IAs que podem ser igualmente eficazes. Vale a pena realizar essa pesquisa de campo.
O que podemos fazer aqui? Vamos inserir um pedido para que a IA nos ajude a enumerar os principais problemas que surgem nos arquivos de handoff (repasse) em design, quando pessoas designers trabalham com Figma. O objetivo é ampliar nossa perspectiva e identificar oportunidades de melhoria na nossa visão sobre IA. É como, dentro de um processo de criação de produto, realizar uma pesquisa.
Estamos fazendo isso de forma simples. Poderíamos trazer mais dados e o contexto da nossa empresa. Você, por exemplo, quais elementos dentro da sua empresa apresentam problemas de handoff (repasse)? Traria esses itens, adicionaria como arquivo, como evidência. Aqui não faremos isso; a intenção é iniciar a construção dessa visão.
Com base no que foi comentado, os problemas comuns incluem:
Para iniciar a definição de um produto mais interessante, com base em pesquisa, precisamos avançar e começar a praticar esse processo. Antes de desenhar algo ou pensar no produto — e, se formos criar um plugin (extensão) no Figma —, vamos pensar como pessoas de UX (experiência de pessoa usuária). Vamos iniciar uma pesquisa para entender o cenário e identificar os elementos que podem compor uma solução que resolva o problema.
Mais do que nunca, agora, com a inteligência artificial em evidência, nós, como pessoas de design, precisamos pensar no futuro. O que queremos com esta solução? O que queremos com este site, com este aplicativo, com este plugin (extensão) no Figma? Essa visão de futuro precisa ser construída. Não podemos adotar a postura de “vamos fazendo, criando e mudando” sem direção. Precisamos saber claramente o que queremos a partir do momento em que vamos usar IA. Além disso, tokens (unidades de processamento) custam, e custam caro, tanto para empresas quanto no uso pessoal.
Para validar se os problemas de handoff (repasse) mencionados realmente ocorrem, iniciamos um experimento. O resultado mostrou que parte do que foi apontado, mesmo sem uma estruturação formal, faz sentido. Portanto, vamos explorar esse processo já pensando no que queremos alcançar no futuro.
Na jornada de criação do nosso plugin (extensão), vamos olhar para o problema dessa maneira: estruturando o que queremos validar com dados, fatos e evidências. Na sua empresa e na sua vida pessoal, quais são as evidências disponíveis para começarmos a explorar com IA e, assim, criarmos uma solução? No nosso caso, trata-se do plugin (extensão) de handoff (repasse).
Vamos iniciar o aquecimento, pois queremos definir melhor o escopo desse plugin (extensão), ainda que seja “apenas” um plugin (extensão) de Figma.
Vamos para a próxima etapa? Seguinte!
Muito bem. Vamos avançar na discussão e definir o escopo com a IA.
Temos problemas que já mostramos e que, em geral, aparecem nos momentos de handoff (transferência entre áreas), na preparação de arquivos e no objetivo do nosso plugin (extensão). Queremos definir melhor o que um plugin como este pode resolver. Podemos contar com o Claude para essa definição.
Agora vamos fechar mais a nossa visão. Como dissemos, vamos desenhar um escopo sobre isso, usando a IA para nos ajudar nessa questão. Por exemplo, com base no que solicitamos, a IA já começou a gerar uma proposta. Perfeito, vamos definir com clareza.
O problema central que resolvemos: o handoff hoje é falho; a qualidade do arquivo do Figma é invisível a olho nu. Essa definição de produto é bastante relevante para nós.
O que o plugin resolve bem? Um plugin é executado dentro do Figma e tem acesso à árvore de nós e ao documento via API (interface de programação de aplicações). Por isso, resolve muito bem tudo o que é estrutural e verificável objetivamente.
O que resolve parcialmente? Heurísticas.
O que não resolve? Isso é importante para o escopo: não julga decisões de design, não substitui anotações de documentação e não garante que o design resolva o problema da pessoa usuária.
Com isso, definimos o posicionamento. Em resumo, o plugin garante que o arquivo está bem construído; ele não torna o design “correto”, mas assegura que o arquivo esteja bem estruturado. É exatamente esse o ponto que queremos para o nosso plugin.
Agora que sabemos o que o plugin vai resolver, a próxima pergunta é: o que exatamente ele vai resolver? Qual é o limite? O que entra, talvez, na versão inicial e o que fica para depois? Isso é o escopo. Vamos defini-lo exatamente com o Claude, que é a nossa vantagem.
Vamos entender o que é o escopo e por que, no nosso caso, ele pode salvar o projeto. Na prática, vamos usar o Claude para definir exatamente o escopo deste plugin, como uma conversa de prompts (instruções). O Claude entra aqui até como um PM (gerente de produto), isto é, um product manager (gerente de produto), gerando a lista de funcionalidades de que precisamos e também priorizando qual é o nosso MVP (produto mínimo viável) a partir disso.
Este é um ponto importante para entendermos por que o escopo importa. Sem escopo, nunca vamos terminar; sempre aparece mais uma funcionalidade para adicionar, outra coisa para cobrir e assim por diante. Quando fechamos melhor o escopo, definimos o que está pronto e priorizamos o que importa agora. Isso significa foco.
Em uma visão mais ampla, quando definimos escopo, podemos nos proteger de mudanças. Quando alguém pedir uma funcionalidade nova mais adiante, o escopo decide se entra agora ou não; não tomamos essa decisão de forma improvisada. Além disso, o escopo nos ajuda a tomar decisões técnicas: cada dúvida que aparecer no caminho terá resposta a partir da visão do escopo. Por isso, é muito importante ter estas definições agora.
Vamos ao Claude para dar continuidade ao nosso trabalho, o que é muito importante neste momento.
Agora, por exemplo, vamos inserir um prompt (instrução) que escrevemos no Claude. O que estamos pedindo? Observe a estrutura deste prompt:
É muito interessante estruturar prompts dessa maneira.
Vejamos o que será gerado agora na nossa visão de definição do plugin e por que precisamos fazer esse tipo de coisa. Ao ver o resultado, provavelmente já teremos uma lista para podermos avaliar a questão do design.
Vejamos o que o Claude trouxe: escopo do plugin. Vamos ampliar um pouco.
MVP essencial:
Componentização: identificar elementos duplicados e repetidos que deveriam ser componentes. Detectar e listar as instâncias deslocadas do componente principal. Em acessibilidade, verificar contraste de cor.
Em seguida, gerar um relatório geral com:
Operação:
Requisitos operacionais:
Versões futuras:
O que definitivamente não fará:
A proposta é interessante, inclusive pela priorização. Apreciamos isso, mas podemos melhorar alguns pontos e seguimos aprimorando em conjunto.
Temos outro prompt (instrução). Agora queremos ser mais específicos sobre a questão de auto layout (layout automático). Por exemplo, pensamos que o plugin (complemento) deve verificar se os principais frames (quadros) e componentes estão usando auto layout (layout automático), não apenas se existe em algum lugar. Vamos solicitar o ajuste do MVP (produto mínimo viável) nesse contexto. Queremos ser mais específicos sobre layout (disposição). Vamos enviar para que fique mais específico para nós.
Este é um processo de iteração. O primeiro prompt (instrução) define a direção, e o follow-up (acompanhamento) corrige a rota. Não é necessário ter um prompt (instrução) perfeito na primeira tentativa. Conversar com a IA faz parte do processo, e a IA manterá o contexto da conversa; não é necessário repetir tudo.
Com o MVP (produto mínimo viável) ajustado, o pilar de auto layout (layout automático) passa a verificar:
Quanto às heurísticas, o núcleo da verificação não é checar tudo, mas apontar para os nós que importam, usando sinais como:
Fora do escopo:
Métrica ajustada no relatório:
Essa abordagem começa de forma conservadora, como recomendação típica de um(a) PM (gerente de produto), e já oferece uma definição de escopo consistente.
Um ponto que ainda não exploramos, e que podemos considerar, é avaliar heurísticas de usabilidade. Isso poderia ser feito, mas possivelmente é específico e avançado demais para este momento. Seguimos assim por ora.
O essencial é que um bom prompt (instrução) tem papel, contexto e estrutura, e o resultado raramente é final na primeira tentativa. Iterar é parte do processo, não é um erro.
No próximo passo, com o escopo definido, vamos criar os critérios de avaliação. Pensamos em nome, descrição e peso de cada critério; precisamos definir isso em conjunto. Faça um teste: comece a elaborar junto conosco, você e seu projeto, para observar como evolui. A partir daqui, é possível iterar mais e aprofundar a estruturação dessas questões de escopo e definição.
Vamos ao próximo.
LEGENDAS: Pedro Esteves.
O curso Figma: criação de ferramentas de design e plugins com IA possui 159 minutos de vídeos, em um total de 37 atividades. Gostou? Conheça nossos outros cursos de UI 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:
O Plano Plus evoluiu: agora com Luri para impulsionar sua carreira com os melhores cursos e acesso à maior comunidade tech.
2 anos de Alura
Matricule-se no plano PLUS 24 e garanta:
Jornada de estudos progressiva que te guia desde os fundamentos até a atuação prática. Você acompanha sua evolução, entende os próximos passos e se aprofunda nos conteúdos com quem é referência no mercado.
Back-end, Dados, Front-end, DevOps, Mobile, Gestão & Negócios, UX & Design, Cibersegurança, Cloud, Inteligência Artificial
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
Acesso à inteligência artificial da Alura.
No Discord, você participa de eventos exclusivos, pode tirar dúvidas em estudos colaborativos e ainda conta com mentorias em grupo com especialistas de diversas áreas.
Catálogo de tecnologia para quem é da área de Marketing
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
20% de desconto na Pós Tech
Luri Vision chegou no Plano Pro: a IA da Alura que enxerga suas dúvidas, acelera seu aprendizado e conta também com o Alura Língua que prepara você para competir no mercado internacional.
2 anos de Alura
Todos os benefícios do PLUS 24 e mais vantagens exclusivas:
Acesso ao catálogo da Casa do Código e leitura dentro da plataforma
Chat, busca, exercícios abertos, revisão de aula, geração de legenda para certificado.
Modo entrevista - Pratique situações reais e evolua com feedback personalizado
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Para quem quer atingir seus objetivos mais rápido: Luri Vision ilimitado, vagas de emprego exclusivas e mentorias para acelerar cada etapa da jornada.
2 anos de Alura
Todos os benefícios do PRO 24 e mais vantagens exclusivas:
Catálogo de tecnologia para quem é da área de Marketing
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais de forma ilimitada.
Conecte-se ao mercado com mentoria individual personalizada, vagas exclusivas e networking estratégico que impulsionam sua carreira tech para o próximo nível.
