Creating advanced components with Workshop
In this Framer tutorial, you will learn Creating advanced components with Workshop. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.
How do I start creating a custom component with Workshop in Framer?
To open Workshop, hit command or control K to bring up the quick actions menu and select Workshop. When it opens, you’ll see a prompt field where you can start generating components right away. You can type in what you need, and Workshop will generate a fully functional custom component with no code required.
Can I use images to influence the components generated by Workshop?
Yes, you can drag images directly into the input to give Workshop more context. This can help reference a specific aesthetic, illustrate an idea, or include images you want to use as defaults in the components. The combination of text and imagery makes it easier to get the output you’re looking for.
How can I refine or customize the properties of a component generated by Workshop?
After generating a component, you can use the properties panel to tweak anything you need, such as adjusting sliders, colors, fonts, and sizes. If you want to add or group specific properties, just type your request into Workshop, and it will update the component and its properties instantly. You can also return to previous versions by scrolling through your prompt history and clicking on any earlier version.
Lesson details
Jun 13, 2025
5:34
