Usando o Grok Bot: Fotomosaicos no Figma

Você já deve ter visto alguns mosaicos de três painéis no seu feed. Aqui está como criá-los com @bot no @figma.

https://x.com/kazarov_d/status/2094470313862136145

Qualquer designer sabe como fazer um, mas é um baita trabalho chato.

https://x.com/studiobakers/status/2095077637639262295

Então, deveríamos estar perguntando: "como posso usar IA para tornar isso 90% menos chato, para focar nas partes criativas e legais do design?"

O Grok Bot pode fazer exatamente isso.

Se você não se importa com o "como" e só quer um modelo do @bot, pode encontrar um aqui: https://x.ai/bot/dYpPe1PCZv2WJDVTYDwhc

Caso contrário, aqui está como construí o meu:

Construindo o fotomosaico

Minha abordagem geral com o Grok Bot é: divida em etapas como você criaria o ativo manualmente, depois peça ao @Bot para fazer exatamente o mesmo.

Neste caso, o fluxo de trabalho era um design no Figma.

https://x.com/justinsunyt/status/2096635033603756354

Isso é apenas uma tela com um ativo principal, componentizado e dividido em três painéis. Podemos fazer engenharia reversa das proporções olhando para posts existentes no X.

Pedi ao Bot para fazer exatamente isso - aqui está meu primeiro prompt otimizado.

Substitua Cursor Gothic, [link para imagem] e [inserir arquivo] pelos seus ativos.

1Faça engenharia reversa deste formato de postagem - é um fotomosaico de três imagens que se unem em uma única captura de tela larga sobre um fundo compartilhado.
2
3https://x.com/kazarov_d/status/2094470313862136145
4https://x.com/studiobakers/status/2095077637639262295
5
6- Extraia cada painel em resolução máxima e obtenha as proporções.
7
8- Recorte três painéis de exportação (esquerda / centro / direita)
9
10- Transforme em um novo design no arquivo anexado [inserir arquivo] - mantenha tudo em uma seção
11
12- Novo fundo para todos os três painéis [link para imagem] - use este ativo, não o BG do post de referência
13
14- Herói: captura de tela do cursor.com em um display 4K simulado (2× DPR). Aumente o zoom da página para que a interface e o texto sejam legíveis à distância. Confirme que a captura é realmente a página inicial (nav + título)
15
16- Sombra projetada centralizada + cantos arredondados reais na janela. Os cantos superiores da página web precisam de uma camada recortada/mascarada, senão ficarão quadrados
17
18- Chrome estilo Arc: shell Cursor ink escuro, botões de tráfego coloridos, URL centralizada em Cursor Gothic. Barra de título + texto da URL devem ocupar a altura. Inset igual à esquerda/direita/embaixo ao redor da página
19
20- Organize no Figma com componentes para que uma única colagem atualize todos os painéis - Fundo, Herói (Arc), Mestre, mais três clipes de exportação do Mestre
21
22Seu trabalho está concluído quando editar o BG ou o herói uma vez atualizar o mestre e todas as três exportações.

Após enviar o prompt, verifique seu bot a cada poucos minutos - se as coisas estiverem saindo do controle, pergunte por quê.

Talvez o bot não esteja usando o autolayout corretamente. Talvez o espaçamento esteja errado. Talvez um raio de borda precise de um ajuste.

Faça a alteração, anote por que foi necessária e integre essas coisas no seu próximo prompt.

Observando meu bot trabalhar

Alguns pontos gerais:

• Estou usando linguagem precisa. Note como chamei de "fotomosaico" e não "uma figura dentro de outra figura como três coisinhas numa coisinha"
• Eu não sabia o que era um fotomosaico, mas perguntei ao Grok "como se chama quando uma colagem de três imagens é montada para formar uma imagem maior"
• Todo prompt deve começar com a mentalidade de iniciante - como aprendo tudo o que preciso para fazer isso bem?
• Minha primeira tentativa não foi perfeita. Cheguei ao prompt acima perguntando ao Grok Bot "me diga o que você precisava de antemão para acertar de primeira"
• Esteja sempre se perguntando: "como posso duplicar esse fluxo de trabalho ou garantir que a IA possa fazer tudo na próxima vez?" Isso é algo que @poteto realmente enfatiza.
• Não usei um bot especializado para isso - apenas um genérico conectado ao Figma. Para algo pontual, tudo bem, mas para tarefas repetitivas, eu provavelmente criaria um especialista.

O Grok Bot é mais do que usar IA de forma eficaz - é sobre como usar um computador de forma eficaz.

Isso significa pensar a partir dos princípios fundamentais, comunicar-se de forma eficaz e ter paciência. Usar o Grok Bot é, principalmente, sobre resolver problemas.

O ativo finalizado

Além disso, agora tenho um ativo durável que posso reutilizar - como fiz neste post:

Reaproveitando meu ativo para um post de anúncio do iPad

Sem entender este formato, não teria conseguido fazer o anúncio do iPad em tempo hábil.

O papel do criativo é evocar emoção.

O Grok Bot me permite focar na seleção de ativos e imagens, enquanto ele cuida de todo o resto.

A pergunta mais comum que recebo é "como posso usar o Grok Bot" - aqui está uma maneira de usá-lo para design.