Design system: Handoff e documentação com IA

Fundamentos e preparação - Apresentação

Apresentando o curso e o instrutor

Boas-vindas a outro curso aqui na Alura.

Olá! Meu nome é Matheus Vilain; se você ainda não me conhece, vou me apresentar. Sou Product Designer (pessoa designer de produto), especialista em Design Systems (sistemas de design), e sou autor do livro Design System Más allá del Layout: Creación, Estrategia y Gobernanza.

Audiodescrição: Sou uma pessoa de pele branca; tenho cabelo, sobrancelhas, olhos e barba castanho-escuros. Meu cabelo é bem curto, diferente da barba, que é longa e cobre praticamente todo o pescoço. Visto uma camiseta preta de manga longa e uso óculos redondos de madeira. Diante de mim há um microfone preso a um braço articulado. Atrás de mim há uma estante com alguns livros e figuras de Harry Potter. Atrás da estante, há uma grade com alguns crachás de eventos pendurados.

Detalhando o que será aprendido

O que vamos aprender?

Neste curso, vamos utilizar Inteligência Artificial, mais uma vez, para otimizar todo o nosso processo — desta vez, de construção, de documentação e de hand-off (repasse). Essas são etapas fundamentais que devemos ter em uma empresa de tecnologia.

Nós, como pessoas designers, produzimos interfaces e pensamos na experiência e na usabilidade.

Tudo isso é muito importante, mas precisamos lembrar que o que construímos no Figma será desenvolvido. Toda a parte de design, em algum momento, se transformará em código. Não basta enviar uma captura de tela ou um link do Figma para a pessoa desenvolvedora. Quanto mais detalhes e insumos fornecermos — tanto no nosso guia de estilo quanto em nossas páginas, ao longo de todo o processo — mais rico e ágil será o desenvolvimento para a equipe de engenharia e para a equipe de tecnologia.

Vamos utilizar Inteligência Artificial; neste curso, nós vamos usar Cloud para controlar todo o nosso Figma, sem precisarmos mover o mouse, exceto para ações mínimas, de modo que a ferramenta produza toda a documentação e gere todo o handoff (repasse) de que precisamos, tanto do lado de design quanto no lado de Dev Mode (Modo Dev).

Ao final do curso, também vamos sair um pouco do Figma e criar uma documentação totalmente construída no Storybook, que é outro recurso, outra ferramenta muito utilizada — por exemplo, na Locaweb também a utilizamos — para documentar Design Systems (Sistemas de Design). Vamos levar todo esse conteúdo para lá.

Encerrando e convidando para o próximo vídeo

Vamos abordar esses tópicos passo a passo, com tranquilidade, ao longo das aulas.

Espero ver você no próximo vídeo. Até lá. Agradeço. [♪]

Fundamentos e preparação - O que é handoff

Propondo uma reflexão inicial

Vamos propor uma pergunta e refletir com sinceridade sobre a resposta. Quando finalizamos uma interface no Figma, como preparamos esse material e o transferimos para a equipe de desenvolvimento? Queremos que você reflita sobre como esse processo ocorre hoje na sua empresa, dentro do time em que atua. Existe contato com a área de engenharia, com a equipe de desenvolvimento, com pessoas programadoras de front-end (camada de interface), back-end (camada de servidor) e full-stack (camadas de interface e servidor)? Sabemos como esse projeto no Figma é recebido? Sabemos como é levado para desenvolvimento? Quais são as etapas executadas para realizar testes e, em seguida, enviá-lo à produção? É interessante conhecer melhor esse fluxo, porque está diretamente relacionado ao problema que está aparecendo agora na nossa tela.

Vamos utilizar o marcador para analisarmos em conjunto.

Analisando o cenário e mapeando causas

O cenário é o seguinte, e muitas pessoas passam por ele: a pessoa de design finaliza a tela no Figma, entrega o link (hiperlink) para a pessoa desenvolvedora, e o resultado implementado fica diferente do esperado. No Figma, prototipamos com cuidado, buscamos um resultado pixel perfect (precisão de pixels), seguimos a grade de 8 pontos, aplicamos as cores e a guia de estilo do design system (sistema de design). O resultado ficou muito bom. Porém, ao enviar para desenvolvimento e iniciar os testes, percebemos desalinhamentos, variações de tonalidade de cor, detalhes que não correspondem ao planejado e até diferenças de funcionalidade. O que aconteceu nesse percurso?

Por isso propusemos a pergunta inicial. Se isso acontece, vale analisarmos como o processo está ocorrendo hoje para podermos melhorá-lo. Esse descompasso costuma ocorrer por uma série de fatores, entre eles:

• Ausência de regras claras e de regras de negócio; falta de entendimento exato do objetivo, do que precisa ser feito, do que precisa ser entregue, do contexto da funcionalidade e do produto, do motivo pelo qual estamos fazendo isso e do resultado esperado.
• Falta de documentação adequada.
• Decisões não documentadas.

Questionando documentação e colaboração entre times

Recebemos uma tarefa do lado de Design/Produto, trabalhamos nela e a encaminhamos para Engenharia. A Engenharia mantém o contexto? Isso está documentado? Se o pessoal — aqui, estamos nos referindo à Engenharia e à área de Tecnologia — desejar consultar essas informações, conseguirá acessá-las com praticidade e compreendê-las?

Outra falha comum nesse processo ocorre quando Design e Desenvolvimento trabalham de forma isolada, em times diferentes, sem contato direto entre as pessoas. Nesses casos, torna-se difícil para uma pessoa de Design transmitir informações a alguém de Desenvolvimento e, da mesma forma, torna-se difícil para alguém de Desenvolvimento obter informações de uma pessoa de Design.

Introduzindo o handoff de design

Para resolver esses problemas e outros relacionados a essa estrutura — essa problemática de os resultados implementados divergirem do que o Design planejou —, trabalhamos com Randolph.

O handoff (transferência) não é mais do que um processo de transferência de decisões, e aqui nos referimos especificamente ao handoff de design. Ao falarmos apenas em handoff, quem utiliza iPhone ou Mac pode associar o termo a outro recurso. Aqui, tratamos do processo de transferência de decisões de design para o time de desenvolvimento.

Especificando a interface e garantindo fidelidade

É o momento em que, por exemplo, eu, Matheus, como designer, finalizo um determinado projeto, concluo a construção de uma funcionalidade no Figma e preciso repassar essas informações ao time de engenharia, à pessoa de tecnologia, à pessoa desenvolvedora, para que construa a solução. Essa pessoa precisa manter a fidelidade do que foi definido para garantirmos melhor execução, documentação consistente, o design system (sistema de design) bem estruturado dentro do produto, manutenção do mesmo padrão, consistência visual e acessibilidade. Assim, quando o produto for para produção, for publicado e utilizado pelas pessoas, o resultado será eficaz.

Existem inúmeras formas de validar esses processos dentro do Figma, que veremos ao longo das aulas. No entanto, nosso foco principal serão as especificações. Ao tomarmos uma interface, como a especificamos? A pessoa desenvolvedora pode ter acesso ao DevMode (modo de desenvolvimento), mas também pode não ter. Como, então, especificamos e incluímos detalhes sobre regras de uso, funcionalidade, tipos de cenário, fornecemos contexto, medidas, espaçamentos e detalhes visuais? Como transmitimos tudo isso?

Ampliando a comunicação e estruturando a documentação

Também precisamos considerar como nos comunicamos nessas documentações, nesses handoffs, com outras áreas além de desenvolvimento. Defendemos que todas as pessoas relacionadas ao produto precisam ter o contexto completo. Não é apenas a pessoa designer ou a pessoa desenvolvedora. Produto, negócio, todas as pessoas precisam ter acesso às informações e serem capazes de defendê-las. Caso não possamos fazê-lo, por exemplo, se já não estivermos na empresa, outras pessoas precisarão sustentar essas decisões. Logo, a informação deve estar acessível e clara para todas as pessoas envolvidas.

Como produzimos essa documentação considerando que outras pessoas irão consultá-la, entendendo exatamente nossos princípios de design, estilo, componentes, funcionalidades, casos de uso e acessibilidade? Podemos levantar todos esses critérios. Podemos fazer isso manualmente, abrindo nossos arquivos, editando-os e definindo a melhor forma de tratar cada ponto, além de explorar alguns exemplos — o que faremos.

Podemos, porém, agilizar todo o processo utilizando a nuvem e a inteligência artificial, trabalhando no Figma para criar toda a estrutura de handoff para nós: gerar especificações, produzir documentação e deixar tudo muito bem estruturado, de modo realmente útil para a pessoa com quem estamos trabalhando — seja a pessoa desenvolvedora ou alguém de produto. É o que começaremos a ver a partir da próxima aula.

Encerrando e apresentando próximos passos

Entendido o que é o handoff, isto é, o repasse: finalizamos nossa parte de design e a transferimos para engenharia, acompanhando a construção, mantendo a mesma linha de raciocínio e evitando que informações se percam no caminho. Nas próximas aulas, veremos como produzir isso com IA.

Até então, obrigado!

Fundamentos e preparação - Configurando o Claude

Apresentando o objetivo do curso

Vamos para a parte interessante: como usar o Claude para mover elementos no Figma por nós. Neste curso faremos poucas ações manuais; a ideia é otimizar nosso trabalho com inteligência artificial.

Todos os links e tudo o que for necessário estarão em uma publicação no nosso site. Acesse matheusvillain.com, vá à página "blog" e procure a publicação "desenhar no Figma com Claude, como usar IA para criar interfaces e controlar todo o seu Figma". O Claude realmente controlará tudo: vamos solicitar algo e ele poderá criar dentro do Figma. Isso é excelente e permite explorar além do que veremos neste curso.

Informando os pré-requisitos e instalações

Alguns avisos importantes: tudo o que vamos mostrar funciona apenas com o Claude instalado no computador e com o Figma instalado no equipamento. É necessário ter o Figma instalado localmente, pois teremos de importar um plugin no Figma, e essa funcionalidade só funciona no Figma Desktop; não funciona no Figma Online. Da mesma forma, as configurações que faremos para o Claude também funcionam apenas no Claude Desktop. Portanto, estamos falando de Windows e macOS. Pessoas que, neste momento, estiverem no Linux não conseguirão acompanhar esta parte.

Há alguns links que precisamos baixar e instalar no computador: Claude, Figma e Node.js. A instalação é simples: é o fluxo de instalação padrão, isto é, clicar em "Install" em Install (instalar), depois em Next (avançar) até concluir. Não há segredo.

Gerando o token de acesso no Figma

Com o Figma aberto, o primeiro passo é obter um token de acesso, um token que geraremos — um segredo da nossa conta — para podermos compartilhá-lo com o Claude. Assim, o Claude poderá ler e mapear nossa conta, acessar todo o nosso Figma e interagir com as informações.

Para isso, vamos à página inicial do Figma, clicamos no nosso nome de usuário e acessamos a seção Settings (configurações). Na janela que se abrir, vamos à aba Security (segurança) e descemos até a seção chamada Personal Access Tokens (tokens de acesso pessoal). Nela, criaremos um novo token em Generate new token (gerar novo token).

Podemos dar o nome que quisermos; por exemplo: Alura Test. Em relação à data de expiração, isso indica em quanto tempo o token vai expirar. Se definirmos um dia, por exemplo, amanhã no mesmo horário em que estamos gravando, o token expirará, deixará de existir e teremos de criar um novo. Qualquer aplicação que estiver usando esse token deixará de funcionar ao expirar. Podemos definir o tempo que quisermos. Abaixo, selecionaremos todas as opções; essas são as permissões que concederemos por meio do token gerado.

Ao clicar em Generate token (gerar token), será exibida uma janela com o token. Precisamos guardá-lo com cuidado: copiar, colar no Bloco de Notas e deixar separado. Não podemos perder esse token. Se fecharmos essa janela, não veremos o token novamente; ele é secreto e não deve ser compartilhado com outras pessoas ou empresas. É uma informação confidencial, exibida apenas uma vez e sem possibilidade de recuperação. Se o perdermos, teremos de criar outro, o que não é um grande problema.

Editando o arquivo de configuração do Claude

Com o token separado e o Claude já instalado, vamos à configuração do Claude. Vamos acessar a área de configurações do Claude e abrir o menu Developer (desenvolvedor). Na primeira vez que interagirmos com o Claude Desktop, a interface provavelmente exibirá apenas um botão chamado Edit config (editar configuração) na parte superior. Clicamos nesse botão para facilitar.

Ao clicar, no Windows o Windows Explorer já virá com um arquivo selecionado: Claude Desktop config. Vamos abri-lo. Se estiver no Bloco de Notas, também serve; aqui abriremos no nosso editor de código, que é o Google Antigravity. Em seguida, minimizamos a pasta, pois não será mais necessária.

Ao abrir o arquivo de configuração pela primeira vez, é muito provável que ele esteja apenas com as informações de preferência, ou seja, apenas com a seção de preference (preferência). Pode aparecer com algumas linhas a menos ou a mais; isso não importa. O relevante é que, inicialmente, ele estará apenas com essa seção de preference (preferência) configurada.

Para visualizar como esse arquivo costuma aparecer inicialmente, veja um exemplo de conteúdo com apenas preferences:

{
    "preferences": {
        "convsScheduledTaskEnabled": false,
        "convsWebSearchEnabled": true,
        "claudeSfxMode": "chat",
        "convsWellHelloEnabled": true,
        "spillwayPrefs": {},
        "starred-local-code-sessions": [],
        "starred-cowork-spaces": [],
        "starred-session-groups": [],
        "pinnedOrder": [],
        "customGroupAssignments": [],
        "customGroupOrder": []
    }
}

Configurando o mcpServers para o Figma

O que faremos é copiar todo esse bloco de código, desde a chave mcpServers até o fechamento da chave correspondente. Em seguida, no final da chave de preferences, vamos inserir uma vírgula, colar todo esse código, pressionar "Enter" e ajustar a formatação: selecionar tudo e dar um "Tab" para que fique bem indentado no arquivo.

Este é o bloco mcpServers que você deve adicionar (note o uso do comando npx para rodar o figma-console-mcp e as variáveis de ambiente, incluindo o seu token):

"mcpServers": {
  "figma-console": {
    "command": "npx",
    "args": [
      "-y",
      "figma-console-mcp@latest"
    ],
    "env": {
      "FIGMA_ACCESS_TOKEN":"figd_seuTokenAqui",
      "ENABLE_MCP_APPS": "true"
    }
  }
}

Em seguida, ao inserir uma vírgula após a chave de "preferences" e colar o bloco "mcpServers", o arquivo completo ficará assim:

{
  "preferences": {
    "quickReplyShortcut": "off",
    "convScheduledTaskEnabled": false,
    "convWebSearchEnabled": true,
    "claudeSfxMode": "chat"
  },
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": [
        "-y",
        "figma-console-mcp@latest"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_aBcDeF2023_kl1J_mNop_QRSTuVWXyZ",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

O token de acesso que estava no Figma será colocado aqui. Ele começa com figd_ e, em seguida, traz uma sequência de letras e números aleatórios. No nosso caso, já havia um token registrado, exatamente este; basta copiá-lo, colar e salvar.

Para deixar explícito onde esse valor é substituído, observe a linha de configuração do token:

"FIGMA_ACCESS_TOKEN": "figd_seuTokenAqui",

Reiniciando o Claude e validando a integração

Depois de salvar, é necessário fechar o Claude completamente — não é apenas clicar no X. Precisamos encerrar o serviço por completo, fechar e abrir novamente para reiniciar todo o processo do sistema e garantir que tudo esteja funcionando.

Voltamos à seção "Developer" e verificamos se aparece o “Figma Console”. Caso não apareça, pode acontecer — e isso é relativamente comum — de o Claude ter apagado a parte que adicionamos no arquivo de configuração do Claude Desktop. Isso pode ocorrer durante o processo de salvar ou carregar. Portanto, depois, precisamos voltar e confirmar se tudo está correto.

Importando o plugin figma desktop bridge

Vamos à última etapa para poder utilizar dentro do Figma, que é importar um plugin (extensão) que permitirá editar.

Há outro link no blog. Descendo um pouco mais, encontraremos “figma console mcp”. Precisamos creditar a esse autor incrível, tjpeter. Essa pessoa criou um plugin (extensão) que permite que o Claude, ou outra IA, conecte-se diretamente ao Figma para interagir de várias formas: não apenas ler, como também editar — Figma Design, Figma Dev Mode, tudo.

Para isso, entramos no repositório no GitHub (repositório) e baixamos como um arquivo ZIP para a máquina. No nosso caso, ele já está baixado e exportado como ZIP, com o nome “figma console mcp”, tudo certo, exatamente igual, para que possamos importar o plugin (extensão) criado dentro do Figma, que fica dentro da pasta "figma desktop bridge".

Vamos fazer o seguinte: voltamos ao Figma. Vamos fechar o plugin (extensão) que está aberto no canto. Voltamos ao Figma, abrimos qualquer arquivo, clicamos no menu principal do Figma, vamos até a janela de “Plugins”, “Development” e selecionamos “Import plugin from manifest”. O manifest.json é o arquivo que indica ao Figma todo o funcionamento; é ele que realmente permite importar o plugin (extensão). Depois de clicar, é só abrir. Não vamos executar esse passo agora porque, no nosso caso, ele já está importado.

Após importar, o processo é rápido; isso realmente não demora, e o item aparecerá. Podemos ver na aba “Plugins and Widgets” que surgirá “figma desktop bridge” com a etiqueta “Development”, o que significa que não é um plugin (extensão) publicado na comunidade, está local na máquina e foi importado para a nossa conta. Clicamos para abrir; é literalmente uma janela pequena. Deixamos aberta; não é necessário fazer mais nada com ela. Precisamos mantê-la aberta para que tudo funcione. Se, por acaso, a fecharmos e tentarmos interagir com o Claude, provavelmente receberemos um erro informando que esse plugin (extensão) está fechado.

Testando a conexão com comandos do Figma

Agora podemos voltar ao Claude e pegar o link do arquivo do Figma para testar. Como recomendação, escrevemos figma status, colamos o link do arquivo e enviamos. A ideia é que o sistema realmente consiga ler o arquivo; ele deve captar, retornar algum resultado, carregar e informar que está conectado. Esse é o resultado esperado. Com figma test, ele indicou que está na página 1 e trouxe mais informações sobre o que encontrou dentro do arquivo.

Para ilustrar, primeiro enviamos o comando de status:

Figma status

Em seguida, enviamos o status já com o link do arquivo do Figma:

Figma status https://www.figma.com/design/2dimIDcoLk6mPSeSKxXf/Figma-text?node-id=0-1&t=pP79gVziWHoPhsQC-0

Criando elementos via prompt no Figma

Se pedirmos, por exemplo, “crie um quadrado com este hexadecimal aqui” — podemos inventar um hexadecimal qualquer, sem saber exatamente a cor — no tamanho 32x32, ele criará esse quadrado dentro do Figma. No exemplo, o valor gerou um amarelo; o sistema começou a carregar e criou o quadrado no Figma. Essa é a proposta: editar diretamente. É importante manter o plugin (extensão) aberto. Na primeira conversa, o sistema perguntará se permitimos a execução no Figma; podemos deixar sempre permitido.

Um exemplo de prompt para criação do quadrado é:

Crie um quadrado #F3FA10 de tamanho 32x32

No exemplo, o quadrado amarelo foi criado com o mesmo hexadecimal enviado, f3fa10, no tamanho 32x32. A partir daqui, podemos deixar as ideias fluírem, mas nosso foco é a documentação.

Na próxima aula, começaremos a elaborar todo esse processo dentro do Figma. Nos vemos lá!

Sobre o curso Design system: Handoff e documentação com IA

O curso Design system: Handoff e documentação com IA possui 150 minutos de vídeos, em um total de 35 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:

• Fundamentos e preparação
• Handoff: especificando tokens
• Especificando componentes
• Documentação no Figma
• Documentação com Storybook