Creating advanced components with Workshop in Framer

Workshop lets you generate custom components just by describing what you need. Type in a pricing calculator, interactive image card, or any functional component idea, and Workshop builds it instantly, fully editable and code-free. This walkthrough shows you how to use Workshop, Framer's built-in AI tool that transforms simple prompts into functional components. You'll see how to create everything from tilting images to cookie banners, refine designs with image references, and customize every property without touching code. The tutorial walks through building a pricing calculator step by step, showing how to add real-time tooltips, adjust slider properties, and group controls for easy editing. You'll learn how Workshop handles both visual effects and practical components like progress bars and number counters, all generated in seconds. Best of all, any component you create can be shared with teammates, and updates sync automatically across every instance. Workshop gets better the more you use it, helping bring ideas to life faster than ever. 0:00 Introduction to Workshop 0:35 Opening Workshop and UI overview 1:15 Using text prompts and image references 2:05 Building a pricing calculator 2:50 Customizing properties and styling 3:30 Adding real-time tooltips 4:10 Creating CTAs and grouped properties 4:55 Sharing components and syncing updates Topics covered: website builder, component creation, AI design tools 🌞 Start for free: https://framer.link/yt 📚 Learn more at: https://framer.link/yt-academy 💎 Join the Community: https://framer.link/yt-community 🎉 Follow on X: https://framer.link/yt-x