Utiliser Grok Bot : photomosaïques sur Figma

Vous avez peut-être vu des mosaïques à trois panneaux sur votre fil d'actualité. Voici comment les créer avec @bot dans @figma.

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

Tout designer sait comment en faire une, c'est juste un peu pénible.

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

Nous devrions donc nous demander : « comment puis-je utiliser l'IA pour rendre cela 90 % moins pénible, afin de pouvoir me concentrer sur les parties créatives et sympas du design ? »

Grok Bot peut faire exactement cela.

Si vous vous moquez du « comment » et voulez juste un modèle @bot, vous en trouverez un ici : https://x.ai/bot/dYpPe1PCZv2WJDVTYDwhc

Sinon, voici comment j'ai construit le mien :

Construire la photomosaïque

Mon approche générale avec Grok Bot est la suivante : décomposer comment vous créeriez l'actif vous-même, puis demander à @Bot de faire exactement la même chose.

Dans ce cas, le flux de travail était un design dans Figma.

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

C'est simplement un canevas avec un actif principal, composantisé et réparti sur trois panneaux. Nous pouvons rétro-ingénier les ratios d'aspect en examinant les publications existantes sur X.

J'ai demandé à Bot de faire exactement cela - voici ma première invite optimisée.

Remplacez Cursor Gothic, [lien vers l'image] et [insérer le fichier] par vos actifs.

1Reverse engineer this posting format - it's a photomosaic of three images that stitch into one wide screenshot on a shared background.
2
3https://x.com/kazarov_d/status/2094470313862136145
4https://x.com/studiobakers/status/2095077637639262295
5
6- Pull each panel at full res and get the aspect ratios.
7
8- Crop three export panels (left / center / right)
9
10- Make it a new design in the attached file [insert file] - keep it in one section
11
12- New background across all three panels [link to image] - use this asset, not the reference post's BG
13
14- Hero: screenshot of cursor.com on a simulated 4K display (2× DPR). Zoom the page so UI/type read at distance. Confirm the capture is actually the lander (nav + headline)
15
16- Centered drop shadow + real corner rounding on the window. Webpage top corners need a clipped/masked layer or they'll look square
17
18- Arc-style chrome: dark Cursor ink shell, colored traffic lights, centered URL in Cursor Gothic. Titlebar + URL text should hug height. Equal inset L/R/B around the page
19
20- Organize in Figma with components so one paste updates every panel - Background, Hero (Arc), Master, plus three export clips of Master
21
22Your work is done when editing the BG or hero once updates the master and all three exports.

Après avoir envoyé l'invite, vérifiez votre bot toutes les quelques minutes - si les choses tournent mal, demandez pourquoi.

Peut-être que le bot n'utilise pas correctement l'autolayout. Peut-être que le padding est décalé. Peut-être qu'un rayon de bordure nécessite un ajustement.

Faites le changement, notez pourquoi il était nécessaire, puis intégrez ces éléments dans votre prochaine invite.

Regarder mon bot cuisiner

Quelques points généraux :

• J'utilise un langage précis. Remarquez que j'ai appelé cela une « photomosaïque » et non « une image dans une image en trois trucs sur un truc ».
• Je ne savais pas ce qu'était une photomosaïque, mais j'ai demandé à Grok « comment appelle-t-on un collage de trois images assemblées pour former une image plus grande ? »
• Chaque invite doit partir d'un état d'esprit de débutant - comment apprendre tout ce dont j'ai besoin pour bien faire cela ?
• Mon premier essai n'était pas parfait. Je suis arrivé à l'invite ci-dessus en demandant à Grok Bot : « dis-moi ce dont tu avais besoin au départ pour réussir du premier coup ».
• Demandez-vous toujours : « comment puis-je dupliquer ce flux de travail ou m'assurer que l'IA peut tout faire la prochaine fois ? » C'est quelque chose que @poteto souligne vraiment.
• Je n'ai pas utilisé un bot spécialisé pour cela - juste un bot général connecté à Figma. Pour un usage unique, ça va, mais pour des tâches répétées, je créerais probablement un spécialiste.

Grok Bot ne se limite pas à utiliser l'IA efficacement - il s'agit d'utiliser un ordinateur efficacement.

Cela signifie une réflexion par principes premiers, une communication efficace et de la patience. Utiliser Grok Bot, c'est surtout résoudre des problèmes.

L'actif terminé

De plus, j'ai maintenant un actif durable que je peux réutiliser - comme je l'ai fait dans cette publication :

Réutiliser mon actif pour une publication d'annonce iPad

Sans comprendre ce format, je n'aurais pas pu réaliser l'annonce iPad en temps voulu.

Le rôle du créatif est d'évoquer l'émotion.

Grok Bot me permet de me concentrer sur la sélection des actifs et l'imagerie, pendant qu'il s'occupe de tout le reste.

La question la plus fréquente que je reçois est « comment puis-je utiliser Grok Bot » - voici une façon de l'utiliser pour le design.