Figma Agent · Workflow Guide
From a client brief to a desktop + mobile website.
Hey, it's Adam 👋 You commented AGENT on my Figma agent reel. Here's the exact workflow, skills and prompts I used in the video, so you can build your own version step by step.
In partnership with Figma · #FigmaCreator · Solenne Skin is a fictional brand created for this demo.
📬 Get guides like this in your inbox every Thursday
Read it here free, or subscribe and get every new one, plus the AI news that matters.
Try the Figma Agent
In partnership with Figma
What you'll build 🏗️
A full homepage for a client, designed by the Figma agent in the client's own brand, reviewed by a senior-designer skill, refined with three hero directions, and turned into a mobile version with one command. You stay in control of every decision.
| Project | Details |
|---|---|
| Created by | Adam · @adam.godigital |
| Brand partner | Figma |
| Tools | Figma Agent + 2 Community Skills |
| Example client project | Solenne Skin, a luxury skincare homepage |
What you need ✅
- A Figma account. The Figma agent is now available on every Figma plan.
- A brand library. Your client's colours, fonts and components, published as a Figma library.
- A client brief. A short PDF with the brand, goal, audience and homepage sections.
- The two skills below. Open each link and click "Try in…" to add it to your file.
The two community skills 🧩
COMMUNITY SKILL — superfuture-design-review. A senior design critique of your file: findings ranked from blocking to polish, each with a specific fix. Use it with: /design-review — figma.com/community/skill/65434/superfuture-design-review
COMMUNITY SKILL — desktop-to-mobile. Creates a proper mobile version of a selected desktop frame, right next to it on the canvas. Use it: type / and pick it — figma.com/community/skill/72495/desktop-to-mobile
Step by step, with prompts 🔄
Step 01 — Set up your file 📁
- 1Open a new Figma Design file and click Agents in the left sidebar.
- 2Click the book icon in the prompt box and switch on your brand library.
- 3Drag your client brief PDF into the prompt box and check it shows as an attachment.
Step 02 — Design the homepage 🎨
Send this with the brief attached:
Here's the brief. Design the desktop homepage at 1440px widewith all the sections in the brief, using my brand library.Make the hero a bold full-bleed section with a huge serifheadline and the products on the right.
Step 03 — Get a senior design review 🔍
- 1Add superfuture-design-review to your file.
- 2Select the homepage, type
/design-reviewand add:
Review this homepage and list your findings, ranked fromblocking to polish, with a fix for each.
Then apply only the notes you agree with:
Apply fixes 1, 2 and 3.Step 04 — Explore three hero directions 🎭
- 1Copy the hero section onto the canvas, then duplicate it twice (Ctrl/Cmd + D).
- 2Select all three and send:
Redesign these three hero sections as three differentdirections using my brand library: first one bold and graphicwith oversized type, second one minimal with lots of emptyspace, third one editorial with the product photo as the mainfocus.
Pick your favourite, select it and send:
Replace the hero in the homepage with this one.Step 05 — Turn it into a mobile version 📱
- 1Add desktop-to-mobile to your file.
- 2Select the full homepage, type
/, choose the skill and add:
Create the mobile version of this homepage.Get better results 💡
- Publish your library first. The agent can only use your brand once the library is published and switched on.
- Add skills before you type "/". Skills only appear in the list after you click "Try in…" or save them.
- Stay the designer. Treat the review as notes, not orders. Keep the ones that fit the brand and skip the rest.
- Run prompts in parallel. Start prompts on separate frames and they build at the same time.
- Watch your AI credits. The agent uses Figma AI credits. Your balance is in the AI Balance menu.
Links 🔗
- Try the Figma Agent— psxid.figma.com/adamagent (partner link)
- superfuture-design-review— senior design critique — use with /design-review
- desktop-to-mobile— mobile version of a selected desktop frame
- Figma Community— browse more skills in the skills library
- 🎬 Watch the reel— Instagram — @adam.godigital
Made by @adam.godigital. Follow for more AI workflows.
Liked this? Get the next one in your inbox.
Every Thursday I research the latest AI systems and workflows, then break the best one down into simple steps, with prompts you can copy. Plus the AI news that changes what you can do.