Breve Resumo
Este vídeo é uma aula sobre como usar a IA para criar um Design System de forma eficiente e escalável. Guilherme Gonzalez compartilha sua experiência, desde os primeiros testes e falhas até a criação de um método replicável. Ele discute a importância de entender a IA como uma parceira, a estruturação de tokens e prompts, e a necessidade de conhecimento prévio em Design System. Além disso, aborda a relação entre velocidade e qualidade no design, e oferece um framework para a aplicação consciente da IA.
- A IA pode ser uma parceira poderosa na criação de Design Systems, mas requer clareza e conhecimento prévio.
- A estruturação de tokens e prompts é fundamental para obter resultados eficientes e de qualidade.
- A velocidade da IA não deve comprometer a qualidade e a coesão dos componentes.
- O framework DER oferece um guia para a aplicação consciente da IA no design.
- A valorização do design nas empresas depende da proatividade e do entendimento do negócio por parte dos designers.
Introdução [0:00]
Paulo Shod apresenta o episódio com Guilherme Gonzalez, especialista em Design System, que utilizou IA para criar um Design System completo em 5 dias, sem depender de uma equipe de engenharia. O episódio promete ser uma aula sobre como transformar ideias em componentes reais, lidar com tokens e variantes, documentar o processo e criar um método replicável.
Apresentação de Guilherme Gonzalez [0:46]
Guilherme Gonzalez é apresentado como especialista em Design Systems no Brasil, com experiência em grandes projetos como o do Wellhub (antigo Gympass). Ele estuda Design Systems e Atomic Design desde 2014, e compartilha seu conhecimento e experiência no assunto.
Primeiros testes com IA e design system [4:47]
Guilherme explica que Design System é complexo e a IA entende as coisas de forma pragmática, replicando o que já existe. Ele mostra a primeira versão de um Design System criado com IA, que foi um fracasso por gerar páginas em vez de componentes reutilizáveis.
Falhas na primeira versão e aprendizados [6:00]
A primeira tentativa de criar um Design System com IA resultou em páginas de documentação com elementos visuais, mas sem componentes de código reutilizáveis. Guilherme percebeu que precisava mudar a forma de pedir as coisas para a IA, focando em componentes específicos e suas características.
Criando botão com boas práticas e tokens [8:20]
Guilherme decide pedir à IA para criar um botão base reutilizável, com variações de estado e tokens desacoplados de estilo (cor, tipografia, raio de borda), baseados em um arquivo JSON. Ele define o papel da IA como especialista em Design Systems escaláveis e fornece premissas claras para a construção do componente.
Como a IA interpretou os componentes [10:30]
A IA gera o componente do botão, os tipos do botão e o JSON dos tokens, todos estruturados de acordo com as premissas definidas. Guilherme percebe que a forma como ele pede as coisas é mais importante do que o que ele pede. Ele usa o V0 no modo gratuito, com limitações de pedidos diários.
Integração com Figma e exportação via plugin [12:27]
Guilherme utiliza o Untitle UI, um Design System do Figma, como referência visual. Ele exporta as variáveis do Figma em formato JSON legível pela IA, utilizando o plugin Variables to Jason.
Exportando tokens do Figma para JSON [14:32]
As variáveis do Figma são exportadas para JSON, permitindo que a IA as utilize para gerar os tokens e aplicar os estilos aos componentes. A IA realiza o trabalho que um desenvolvedor faria, sendo guiada pelo processo.
O papel da IA como parceira de trabalho [17:40]
Guilherme enfatiza a importância de tratar a IA como uma colaboradora, formatando a entrega inicial e focando na criação de componentes reutilizáveis. Ele destaca que os tokens são a base do visual, independentemente da linguagem de programação utilizada.
Processo de estruturar tokens e prompts [19:00]
Guilherme compartilha sua experiência na construção de Design Systems, onde aprendeu que o poder está nos tokens bem estruturados. Ele assume a premissa de formatar a entrega da IA e usar uma fonte confiável para comparar o resultado com o arquivo do Figma.
Como a experiência influenciou no sucesso [22:48]
A experiência prévia de Guilherme com Design Systems, plugins do Figma e a necessidade de entregar um JSON para a equipe de desenvolvimento foram cruciais para o sucesso do projeto com IA. Ele testou vários plugins para encontrar o que exportava o JSON mais assertivo.
A diferença entre biblioteca e design system real [24:48]
Guilherme explica que Design System é um produto de tecnologia, não apenas um arquivo de referência visual no Figma. A biblioteca do Figma é um style guide, enquanto o Design System envolve código e gasto de tempo e dinheiro com desenvolvimento.
IA e velocidade vs. qualidade no design [26:09]
Guilherme discute a relação entre velocidade e qualidade no design com IA. Ele enfatiza a importância de saber pedir as coisas para a IA e usar a engenharia de prompt. Ele compara a IA a um estagiário que precisa ser guiado e ensinado.
Testando limites da IA em projeto pessoal [29:16]
Guilherme compartilha sua experiência em um projeto pessoal para criar um tabletop de RPG com IA. Ele já jogou fora várias versões e está testando o limite da IA como ferramenta de construção. Ele destaca que a IA depende de comandos e um plano de ação.
Estrutura de prompts inteligentes [33:12]
Guilherme compartilha um artigo sobre como não ser refém das IAs, com 10 lições pessoais. A IA não substitui a clareza, ela resolve o que já sabe resolver. É preciso trazer clareza para o prompt e documentar o que se quer desde o começo.
As 10 lições sobre uso consciente da IA [36:00]
A IA não é a melhor forma de começar do zero, ela manda bem quando recebe algo claro e documentado. É importante ensinar a IA a usar, corrigindo e dando caminhos. A IA aprende com o comportamento de quem usa.
Aplicando IA com documentação e Storybook [38:54]
Guilherme mostra outro projeto de Design System construído com IA no Storybook. Ele baixou toda a documentação do Storybook em arquivos MD e mandou para a IA, pedindo para construir um Design System com quatro componentes e as melhores práticas de documentação, design e front end.
Testando JSON de 14 mil linhas no Cloud Code [44:00]
Guilherme tenta aplicar um JSON de 14 mil linhas para revisar os tokens do Storybook no Cloud Code. Ele explica que o Cloud Code é uma ferramenta que roda no terminal e gera códigos de alta qualidade.
Aplicação prática de IA no dia a dia do designer [48:15]
Guilherme explica como um designer pode usar a IA no dia a dia, transformando um protótipo estático do Figma em um protótipo mocado no V0. Os desenvolvedores podem assumir o código de front end e fazer o back end em cima dele, usando a IA de forma estruturada.
Aprendizados ao vivo e erros com IA [56:33]
Guilherme e Paulo discutem a importância de mostrar a vida real de trabalhar com IA, com tentativas e erros. Eles descobrem que um JSON de 14 mil linhas não funciona no Cloud Code e que é preciso tentar outra abordagem.
Apresentação do framework DER para IA no design [58:42]
Guilherme apresenta o DARE Framework, um projeto open source para ajudar designers a usar IA no dia a dia. O framework estrutura os níveis de adesão da IA no processo de trabalho com design, desde o manual até a automação guiada.
Design System como produto real nas empresas [1:03:51]
Guilherme explica que o Design System é um produto com nome de design, mas é do desenvolvedor. Ele destaca a importância da manutenção do Design System no dia a dia e do engajamento das pessoas em usá-lo.
Maturidade do design e das empresas no Brasil [1:08:48]
Guilherme acredita que, tecnicamente, o design brasileiro está acima da média, mas sofre da síndrome do vira-lata. Ele critica a metodologia de venda de cursos e a falta de clareza sobre o que é Design System.
Limitações de cursos e o papel do contexto [1:14:00]
Guilherme explica que Design System é complexo e precisa ser ensinado no contexto incompany. Ele destaca o trabalho de Nathan Kurts, que oferece consultoria educativa de Design System.
A real valorização do design nas empresas [1:19:12]
Guilherme acredita que as empresas brasileiras não dão o real valor para o design e que isso é culpa do próprio designer, que continua tentando ser subárea de alguém. Ele defende que o design precisa ser protagonista e ter uma cadeira na mesa dos diretores.
Agradecimentos finais e despedida [1:27:13]
Paulo agradece a Guilherme pela aula e destaca a importância da sinceridade e experiência compartilhadas. Ele propõe um episódio futuro com Guilherme e Richard para ajudar os designers a terem mais relevância nas empresas. Guilherme se coloca à disposição para participar de outros episódios e discutir outros assuntos.