Web & Digital · Motion & Video
Ayoub Kada's seven-step AI design workflow from Figma to App Store experiments
A product designer ships playable experiments: Figma as source of truth, Claude Code with Figma MCP, Kling or Higgsfield for motion, then App Store or live URL.
Done withFFigmaCCClaude CodeFMFigma MCPKKlingHHiggsfieldEElevenLabs
Self-initiated experiments, not client production; hire CTA; work dates not stated
WHAT THEY DID
Ayoub Kada, a product designer and design engineer, describes a seven-step pipeline he uses on playable experiments: pick one interaction, design in Figma, turn the file into code with Claude Code and the Figma MCP, build native or web effects, generate motion clips with Kling or Higgsfield, add sound, then ship to the App Store or a live URL.
STEP BY STEP
- Pick one interaction worth building, not a feature list.
- Design screens, type, spacing and states in Figma as the source of truth a model will read.
- Open Claude Code, point it at the Figma frame via Figma MCP, ask for SwiftUI or web code, then review and reject wrong structure.
- Build native or web effects (SwiftUI, WebGL, three.js, Metal, Rapier) from a precise brief.
- Generate short motion clips with Kling or Higgsfield and map them to gestures (scrub, key, loop).
- Add sound via ElevenLabs, Web Audio or recordings where the interaction is physical.
- Ship web builds to a live URL or take native builds through Xcode and App Store Connect.
HOW IT WENT
He reports the same pipeline behind experiments such as Payno (shatter-to-unfreeze card), Haribo Pick & Mix (3D gummies with Rapier physics), and others listed on ai.ayoubka.com. Live experiment URLs returned HTTP 200 on 2026-11-07.
Reported results: Pipeline behind named experiments including Payno, Haribo Pick & Mix and others; live at ai.ayoubka.com (HTTP 200).
WORTH KNOWING
A same-day first-person post that separates what AI produces from what the designer still decides, with named tools per step and an honest limit: experiments are not production software with accessibility audits, backends or test suites.
TRY IT
- Design one screen in Figma first, then point Claude Code at that frame through the Figma MCP.
- Write effect briefs as precise interaction descriptions, not vague style words.
- Treat AI video as material to scrub and key to gestures, not as a finished motion pass.
Rates the entry, not the tool.
Source: Ayoub Kada · ayoubka.comOpen as a page
- Work done: not stated in the source (Unverified: the 7 Nov 2026 post does not date when each experiment was built.)
- Source published: Nov 7, 2026
- On 4TC: added Nov 7, 2026 · checked Nov 7, 2026
About this source
Type: First-person workflow · Firsthand report · Demonstrated workflow
- My AI Design Workflow: Idea to App Store as One Designer
Ayoub Kada · ayoubka.com · Published Nov 7, 2026 (Byline 'Published on November 7, 2026'.) · Checked Nov 7, 2026
Creator's own site post. Ends with hire/contact CTA (self-promotional). No sponsorship of the AI tools named found in the post.
Access: open - AI experiments hub
Ayoub Kada · ayoubka.com · Publication date not stated (Live site; undated.) · Checked Nov 7, 2026
Live experiments hub linked from the post (demonstrated artefact).
Access: open - HARIBO Pick & Mix — Goldbears by the gram
Ayoub Kada · ayoubka.com · Publication date not stated (Live experiment; undated.) · Checked Nov 7, 2026
Named Haribo Pick & Mix experiment from the post.
Access: open
Source check: Researched from the public page; not yet re-checked by an editor. Nobody at 4TC has tested this.
Claims and where they come from
- Ayoub Kada writes that his AI design workflow runs from an idea to a working build in seven steps, with one person covering idea, Figma design, Claude and Figma MCP design-to-code, native or web code, AI video motion, sound, and App Store or live URL. (reported) [1]
- He says the experiments on his site are playable builds, not mockups. (reported) [1]
- He says he designs screens in Figma as the source of truth that a model reads, and that taste stays with him. (reported) [1]
- He says he opens a project in Claude Code, points it at a Figma frame via the Figma MCP, and asks for a SwiftUI view or web component that matches it. (reported) [1]
- He says several experiments use Kling or Higgsfield to generate short video clips that the interface then plays under user control. (reported) [1]
- He says a playable experiment is not production software and does not have accessibility audits, localization, analytics, a backend with real data, or a test suite. (reported) [1]
- Live experiment hub ai.ayoubka.com and Haribo experiment returned HTTP 200 on 2026-11-07. (observed in the source) [2][3]
4TC interpretation
Our reading, not something the source says.
Many AI-design posts stop at mockups. This one shows a designer keeping Figma as the source of taste, then using agents and generative video to reach a device-ready build.
Designer impact
Alleged [1]
He says a playable experiment is not production software and does not replace research or trust work.
- Use this pipeline for prototypes and experiments, then hand production concerns to engineering.
- Keep research and judgment outside the generate loop.
Established = documented by primary sources or the company’s own statements. Disputed = contested with evidence on both sides. Alleged = reported, not established.
Votes rate whether this entry was useful. They are not an endorsement of the tool, and don’t mean voters agree with the company’s practices.
Report an issue or correction
Share your own experience
4TC does not endorse a tool unless an explicit 4TC endorsement is shown.