AI, Insert Menu

Workshop: Turn prompts into powerful components with AI

2:20

9K views

May 21, 2025

About this lesson

Introducing Workshop—turn ideas into working components just by describing them. No code. No setup. Just a quick chat. Workshop allows you to create an infinite amount of components using AI, ready to publish. Workshop generates components with property controls, so you can customize and fine-tune each component to make them your own. Workshop also makes it easy to create effects that used to feel out of reach—like an image card with an interactive 3D tilt. Just describe what you want, and it builds it for you. And we’re just getting started. From bold creative ideas to powerful utility components, you can build it all—right now. And as the AI continues to improve, so will the possibilities. Whether it’s standout visuals or smart functionality, Workshop gives everyone the tools to bring big ideas to life. We can’t wait to see what you’ll make. https://framer.com/updates/workshop

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Ever had an idea for custom components 0:02but felt blocked by code? You're not 0:04alone. That's why we built Workshop to 0:08turn ideas into working components just 0:10by describing them. Let's try it out. We 0:14can launch Workshop straight from the 0:15component panel or the quick menu. It 0:18opens a chat where we can build anything 0:20we can think of. And if we're not sure 0:22where to start, there are example 0:24prompts to help spark new ideas. Let's 0:27start with one of the examples and 0:28create an analog style clock that shows 0:31the real local time. Once the prompt is 0:34submitted, Workshop generates our new 0:36component in seconds, dropping it onto 0:38our canvas, complete with built-in 0:41properties that we can tweak to our 0:43liking. Want to add more styling,0:46properties, effects, or functionality?0:48Just keep the conversation going. We can 0:51tell Workshop what we want to change or 0:53add, and it'll update the component in 0:55real time. It even suggests ways to make 0:58your component better, so you're not 1:00just building faster, you're building 1:02smarter. Workshop also makes it easy to 1:05create effects that used to feel out of 1:07reach, like an image card with an 1:09interactive 3D tilt. Just describe what 1:12you want and it builds it for you. Like 1:14magic, but real. We can keep enhancing 1:18and experimenting by adding details to 1:20the prompt, like asking for a screen 1:22reflection or glow on hover with an 1:24adjustable intensity. Workshop instantly 1:28updates the component with those changes 1:30so you can keep pushing your ideas 1:33further. If something ever feels off,1:36just let Workshop know or roll back to a 1:39previous version. And while there's no 1:41need to touch code, the full component 1:43lives within the assets panel, ready to 1:46edit or reuse like any other code 1:48component in Framer. Workshop is just 1:51getting started. From bold, creative 1:54ideas to powerful utility components,1:56you can build it all right now. And as 1:59the AI continues to improve, so will the 2:02possibilities. Whether it's standout 2:04visuals or smart functionality, Workshop 2:07gives everyone the tools to bring big 2:09ideas to life. Workshop, custom 2:13components, zero code required, all in 2:16Framer.

TeachesAI Generation Components

Also coversHover & Press

Watch on YouTube ↗

‹ Advanced Analytics: Track clicks, build funnels, and run A/B tests

Wireframer: Kickstart your next site with AI-generated pages ›