Substituí Figma por Claude Design para iteração, mas ainda preciso dele para uma tarefa crítica

Figma é algo que ainda estou aprendendo e não sou 100% fluente, então mudar para outra ferramenta não era realmente uma opção. No entanto, isso não significa que eu não tente outras opções e, como muitos de vocês provavelmente já fizeram, ultimamente tenho estado particularmente interessado em ferramentas de codificação de vibração. O objetivo principal deles é tornar o design e a codificação mais acessíveis para pessoas que não fazem nenhum dos dois, mas também há algo de gratificante em ver sua ideia ganhar vida com algumas instruções em linguagem natural.

Então, quando a Anthropic lançou o Claude Design, algumas semanas atrás, eu já adorei. O que torna o Claude Design mais interessante do que a ferramenta média de codificação vibratória ou prototipagem é que ele é, na verdade, um pouco híbrido. Ele gera designs a partir de prompts em linguagem natural, é claro, mas também fornece um pequeno conjunto de controles de design reais para brincar. Mas ainda não substitui o Figma em tudo…

Que unhas reais de Claude Design

A velocidade para conseguir algo utilizável é difícil de superar

A coisa que eu mais aprecio Projeto Cláudio é que você pode começar sem realmente saber o que realmente quer. Assim, posso abri-lo com uma ideia vaga, descrever sua atmosfera e isso me dá algo para reagir ou apreciar em segundos (às vezes minutos, se estiver em várias telas). É um ponto de partida completamente diferente de abrir uma tela em branco do Figma e tentar materializar um layout do zero – o que, quando você ainda está aprendendo, pode parecer a parte mais difícil de todo o processo.

Mas onde realmente brilha é algo chamado Tweaks. Após cada geração, Claude alterna controles de edição contextuais e controles deslizantes específicos para o que acabou de criar. Isso pode incluir paletas de cores específicas, espessuras de fonte, espaçamento, preenchimento, raio de canto ou qualquer outra coisa que considere interessante personalizar na construção. Assim, posso fazer ajustes sem reiniciar, o que significa que não gasto tantos tokens e arrisco que Claude mude algo que realmente gostei na iteração anterior. Eu disse antes que parece uma ferramenta de design dentro de outra ferramenta de design.

Também gosto de poder solicitar duas ou três variações de layout em uma única cena, esboçar diretamente na tela usando o Draw como referência ou soltar uma captura de tela de um aplicativo que gosto e Claude extrai a estrutura dele.

Mas você não pode realmente empurrar nada para Claude Design

A manipulação direta ainda é o forte do Figma

Sim, um editor que permite editar coisas é o requisito mais óbvio do planeta. Mas essa é a linha que separa a ferramenta de design real da ferramenta de codificação vibratória que cria os designs, e é onde a maior parte do tempo que você economiza é consumido no back-end. No Claude Design você encontrará um nível decente de controle como cor de fundo, família da fonte, tamanho da fonte, clique em qualquer elemento para ver suas propriedades, controles deslizantes para preenchimento ou raio do canto, etc.

Mas sua maior limitação é que nenhum dos controles permite mover elementos pela tela. Posso mudar a aparência de algo, mas não consigo arrastá-lo 10px para a esquerda ou movê-lo para outro local no layout. Para mover algo, tenho que voltar ao chat, o que significa descrever algo em palavras que eu poderia fazer em meio segundo clicando e arrastando. E não há garantia de que manterá a integridade de toda a estrutura após a reinicialização.

Pode parecer bobo e óbvio, mas o controle manual dos elementos não é negociável quando se trata de design. E o Figma reina supremo nesta área, então ainda é onde a conclusão do design realmente acontece.

Assim que o layout estiver correto, o trabalho passa para recursos que Claude Design não possui. Há layout automático para lidar automaticamente com espaçamento responsivo, restrições para informar aos elementos o que fazer quando o quadro é redimensionado e componentes para manter cada botão ou cartão consistente em todas as telas. Estes não são extras sofisticados, são a diferença entre uma maquete estática e um design que realmente perdura quando as coisas mudam. Nenhum deles pode ser solicitado (suponho que tecnicamente poderiam ser se você quisesse escrever um prompt muito detalhado especificando o tamanho e o comportamento de cada elemento, mas isso vai contra o propósito de definir o clima).

Figma é essencialmente o back-end do design e, sem esse controle manual, algo sempre atrapalhará a hierarquia visual ou o fluxo do usuário.

A prototipagem é onde isso importa ainda mais. Claude Design pode transformar absolutamente uma maquete estática em um protótipo interativo – como animações CSS, estados de cursor e até efeitos 3D. Mas você não precisa gerenciar os feeds sozinho. No Figma posso desenhar uma seta de um quadro para outro e definir exatamente o que acontece quando clico, para onde vai e como faz a transição. No Claude Design a interatividade é gerada para mim, e se eu quiser um fluxo diferente, eu cutuco e torço novamente.

De qualquer forma, você não precisa escolher lados

Basta usá-los juntos

Claude Design ainda está em beta e é bastante impressionante até agora. Enquanto isso, o Figma já existe há anos, então por que não usá-lo para preencher as lacunas da Claude Design? Claude Design para pesquisa, Figma para produção.

A versão mais simples deste fluxo de trabalho é apenas uma captura de tela de um quadro Figma bruto, colando-o no Claude Design com um prompt de humor como “use este layout, mas torne-o mais divertido” e arrastando manualmente as ideias que gosto de volta para o Figma. Já faço isso há algum tempo e funciona sem nenhuma configuração.

A grande questão era se eu poderia realmente pegar o projeto Claude Design da Claude Design e trazê-lo para o Figma como camadas editáveis. O menu de exportação possui opções para PDF, PPTX, .zip, HTML independente, envio para Canva e transferência para Claude Code, mas nenhuma opção nativa “enviar para Figma”. Mas você ainda tem opções…

Depois de alguns falsos inícios com exportação de HTML e zip, acabei com html.to.design Plug-in Figma emparelhado com isso Extensão do Chrome. Faça uma prévia do Claude Design, baixe o arquivo e arraste-o para o plugin. E isso é tudo. No Figma, ele é exibido como um quadro completo de várias camadas e tudo é editável. Agora posso finalizar meus projetos codificados por vibrato com precisão manual no Figma.

Figma ainda é a ferramenta de design certa, mas por que não usá-los juntos para preencher as lacunas uns dos outros?

Claude Design é definitivamente uma das ferramentas relacionadas ao design mais interessantes que já usei. É uma ferramenta de prototipagem, uma espécie de ferramenta de codificação vibratória, uma espécie de ferramenta de design… é um pouco de tudo. Mas não é um substituto para o Figma. O Figma Make pode substituir o conteúdo para criar prompts, mas não pode fazer o que o Figma faz na previsão. De qualquer forma, não acho que seja necessário, porque você pode simplesmente usá-los juntos. Claude por experimentar, Figma por juntar tudo e criar um protótipo preciso e funcional.