AI

Creating advanced components with Workshop in Framer

Creating advanced components with Workshop in Framer

Creating advanced components with Workshop in Framer

·

5:35

·

10K views

·

Jun 13, 2025

About this lesson

Even with a solid idea, building a custom component from scratch can be a bit of a time sink—especially if you're not writing code or just trying to move fast.

That’s where Workshop comes in. It’s Framer’s built-in AI tool that helps you go from idea to functional component with a simple prompt.

Need a pricing calculator? A tab layout? An interactive image card? Just describe it—and Workshop handles the heavy lifting, giving you something that’s not just smart, but fully editable.

In this video, we’ll walk through how it works and how you can start building better, faster.

Sign up: https://framer.link/yt

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

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

MB01HD0QWMDPHDM

0:00Workshop and Framer lets you generate 0:02custom components just by describing 0:04what you need them to do. Whether it's 0:06something visual like a tilting image or 0:09something more utilitydriven like a 0:11cookie banner, Workshop gives you a 0:13fully functional custom component with 0:16no code required.0:22To open Workshop, just hit command or 0:24control K to bring up the quick actions 0:27menu and select workshop. When it opens,0:30you'll see a prompt field where you can 0:32start generating components right away.0:35You'll also find a few example prompts 0:37to help spark ideas. Clicking on one 0:39will drop it into the input field, ready 0:42for you to edit or customize. Moving up 0:45to the top right corner of the panel,0:47we'll see an ellipsus menu. This is 0:49where we can switch between the 0:51different AI models that Workshop 0:53utilizes.0:54Workshop makes building custom 0:56components pretty straightforward. Just 0:59type in what you need and Workshop takes 1:01care of the rest. But it doesn't stop at 1:04text prompts. You can also drag images 1:06directly into the input to give Workshop 1:08more context. Whether it's referencing a 1:11specific aesthetic, illustrating an 1:13idea, or including images you want to 1:15use as defaults in the components.1:18Visuals help communicate your intent 1:21more clearly. The combination of text 1:23and imagery opens up a whole new level 1:26of creative control and makes it even 1:28easier to get the output you're looking 1:30for. And while it can create flashy 1:34interactive components like glow and 1:36glitch effects or even interactive 1:38games, Workshop is at its best when 1:41you're building practical, functional 1:43components that make your site more 1:44powerful and efficient, like scrolling 1:47progress bars, number counters,1:50slideshows, you name it. And each one is 1:53generated within seconds, all fully 1:56editable. Let's walk through a hands-on 2:00example and see how we can use Workshop 2:02to generate a component and refine its 2:04properties step by step. First, I'll 2:08start simple with something like create 2:10a pricing calculator with a slider that 2:12adjusts the number of visitors. Start 2:14pricing at $19 a month. Workshop handles 2:18the rest. And in just a few seconds,2:20I've got a clean, functional pricing 2:22calculator ready to drop onto my canvas,2:25complete with layout, placeholder 2:27content, and built-in interactions.2:30Navigating over to the properties panel,2:32we'll see that Workshop has also created 2:34a full set of customizable properties,2:37including a slider to adjust the visitor 2:40numbers, background, text, and slider 2:42color controls, and font settings, and 2:45size options. From here, we can tweak 2:48anything we need, making it easy to 2:50fine-tune our design as it evolves. But 2:53just like any part of the design 2:55process, dialing in exactly what we want 2:58usually takes a few iterations. Workshop 3:01is no exception. So, I'll grab an image 3:04of a design I've previously created for 3:06this type of component, drag it into the 3:09prompt, and type style the component 3:12like the image. Workshop takes the 3:14visual reference and does its best to 3:16match the style based on what it sees.3:19From there, I can keep refining the 3:21component however I like. Let's say I 3:24want to display the current visitor 3:26count as the slider moves. I'll just 3:28continue the conversation with workshop 3:30and type in add a tool tip below the 3:33slider that follows the thumb and shows 3:35the current visitor count in real time.3:37Workshop updates the component right 3:40away. So, from here, I'll jump into 3:42preview to test it out. And there it is,3:45a smooth realtime tool tip that tracks 3:48the slider just like we asked for. We 3:51can keep iterating from here. For 3:52instance, if we wanted to add a call to 3:54action at the bottom of the calculator,3:56just tell workshop add a CTA at the 3:58bottom of the calculator with the text 4:00start your trial. Group the properties 4:02so I can change the color, font, border 4:05radius, and font size. Workshop not only 4:08adds the CTA visually, it also generates 4:11grouped properties so I can easily 4:13adjust the look and feel without getting 4:15overwhelmed by too many properties at 4:17once. And if there's something specific 4:19you'd like to control in the properties 4:21panel, just ask. For example, if I want 4:24to adjust the size of the slider thumb,4:26I can type add a property to control the 4:28thumb size of the slider. Workshop adds 4:31it instantly, giving me a new property I 4:33can tweak right from the panel. If 4:36something ever doesn't look right, you 4:38can either give workshop updated 4:39instructions or scroll through your 4:42prompt history and click on any previous 4:44version to roll back instantly. You can 4:47also easily share any component you've 4:50created, making it simple for teammates 4:52or collaborators to drop it into their 4:54own projects. Even better, any updates 4:57you make to the original component will 4:59automatically sync across every instance 5:02it's being used. So everything stays up 5:04to date without any extra work. Workshop 5:08is a powerful tool that gets better the 5:10more you use it, helping you bring ideas 5:13to life faster than ever without writing 5:16a single line of code. And this is just 5:18the beginning of what's possible with 5:20Workshop with the only real limitation 5:22being your imagination. Thanks for 5:25watching and I'll see you in the next 5:28video.

TeachesAI Generation Components

Also coversForm Inputs Plans & Pricing Typography

Watch on YouTube ↗

‹ Localization Glossary

Generating layouts with AI using Wireframer ›

More in this topic

Connect Framer to Claude Code, Codex, Cursor, and more

Connect Framer to Claude Code, Codex, Cursor, and more

Agents2K views · 2 days ago

Content, Components, and CMS with Framer Agents

Content, Components, and CMS with Framer Agents

Agents468 views · 2 days ago

Generation, layout, and styling with Framer Agents

Generation, layout, and styling with Framer Agents

Agents886 views · 2 days ago

Framer Update: Auto Translate

Framer Update: Auto Translate

Framer Update4K views · 2 months ago

Framer Update: Auto Rename

Framer Update: Auto Rename

Framer Update5K views · 7 months ago

Wireframer: Blogs and Changelogs with CMS

Wireframer: Blogs and Changelogs with CMS

Framer Update5K views · 8 months ago

Framer Update: Wireframer Icons and Insert Sections

Framer Update: Wireframer Icons and Insert Sections

Framer Update7K views · 11 months ago

Localization Glossary

Localization Glossary

Localization2K views · 1 year ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.