In Design Studio, you can visualize a component along with one or more of its variants, allowing you to preview the different layouts and configurations before using them in Page Builder. You can test the component using default field values or enter custom values to see how it behaves in different scenarios.
Design Studio also provides AI assistance, enabling you to modify existing variants or create entirely new ones. These variants can be saved for future use, making experimentation fast and efficient. You can even view the underlying variant code and make temporary edits to instantly see the impact on the design preview.
This capability is extremely valuable for designers and developers alike. It allows teams to validate a component’s look and feel — including all its variants — in real time, before promoting it to Page Builder. The ability to create additional variants, refine them visually, and iterate instantly within the same environment significantly accelerates the design and development workflow.
Component Data source Templates
You can provide standard values to Component data source template, and these values will then be visible when you view a component variant.
Data source template for Hero component:
Component view for Hero component:
Studio view for Hero component (“ImageBottom” variant):
Visualization values and Visualization Data Sources
If suppose, standard values for a component data source template are missing or does not have any values, you can make use of Visualization values. These visualization values are applicable for all components wherever there are no template standard values provided. Visualization values are entered for various field types as shown below.
When you click on this gear icon, you will be able to insert the default values for various field types here.
Upon clicking on “Save”, you will notice that Design Studio silently saves these values in some mock data sources (Visualization data sources), for all components.
Note that these Visualization data sources are only used for Design Studio component visualization purposes. The data source location is at “/sitecore/system/Settings/Foundation/Design Library/Data Sources”. Note that, depending upon the field types, you will see the same visualization values stored for all component mock data sources. You can also modify them as needed.
These values can be seen on Studio, if there are no standard values provided for data source templates for components and you select this Visualization data source.
Note that, at any time, for a Component on Studio view, you can override component values to the right, after unselecting any data source items
Creating a new Variant for a Component
When on Studio view, selecting an existing variant, you can seek help from AI to create a new variant for the component. You can refer this, for advanced steps using the AI prompt.
Please note that, based upon what you wish it to look like, you might have to retry multiple times from AI. Finally, you should see something like this:
You do have the option to save this variant as well, modify its code. If you save this variant, you will see it getting created as part of Headless variants in Content editor.
You will see a message to grab the code for this new variant, that you can copy for your new variant on Repository.
Modify Variant code
When you select a variant on Studio view, you always have the option to view and edit the variant code, then finally, copy over this variant code to your repository.
Some references
https://doc.sitecore.com/sai/en/users/sitecoreai/visualize-components-in-the-design-studio.html
https://developers.sitecore.com/changelog/sitecoreai/10112025/new-ai-powered-design-studio-for-component-innovation