This is the new AI product design workflow

@adrien.ninet

315.1K followers · usually 8.8K views a post

Views

45.4K

Likes

2.4K

Comments

11

Shares

188

SoundTikTok sound · Wildflowers

Promoted product

Figma Make

Why it worked

The video demonstrates a novel and efficient AI-driven design workflow, appealing to designers and developers looking to streamline their process. By showing concrete steps and the generation of real code, it highlights a significant value proposition.

Summary

This video demonstrates a new AI-powered product design workflow using Figma Make. It covers generating concepts from descriptions and references, refining designs by adjusting elements like typography and colors, and finally prototyping and deploying the design into real code.

Structure

1Introduce the AI product design workflow
2Step 1: Generate concepts using Figma Make
3Step 2: Refine the design in Figma
4Step 3: Prototype and deploy with real code

Product placement

The video showcases the use of Figma Make, an AI-powered tool for generating design concepts, refining them, and producing real code for prototypes and live sites.

On-screen text

This is AI product Step 01 Generate concepts figma app attach reference style multiple use but inspiration Step 02 Refine the Design concept and element typography the make where AI Step 03 Prototype and Deploy refined into let it working your here's not Figma Make real code every means or live

Original caption

This is the new AI product design workflow ⚡️ #figmapartner #aidesign #productdesign #uidesign #designworkflow

More from @adrien.ninet

More breakout videos from this creator.

Transcript

This is the new AI product design workflow. Step one generate concepts. Open figma make describe the app you want to build and attach visual reference to guide the style. Then open multiple projects use the same prompt but with a different inspiration. Step two, refine the design. Copy the best concept into figma and now you're in your elements. Adjust the typography, fix the spacing, dial in the colors, just make it yours. This is where you remove the AI slope. Step three, prototype and deploy. Base your refine design back into figma make and let it generate a working prototype. from your updates. And here's the thing. It's not just a mop. Make generates real code behind every screen, which means you can export it or publish it, also live sites.