DEVREL-2730: component.createVariant()

src/components/PermissionsMap.tsx

@@ -57,6 +57,7 @@ export const permissionsMap: PermissionsMap = {
     getInstanceCount: { permissions: ['canAccessCanvas'] },
     getVariants: { permissions: ['canAccessCanvas'] },
     getSelectedVariant: { permissions: ['canAccessCanvas'] },
+    createVariant: { permissions: ['canModifyComponents'] },
     enterComponent: { permissions: ['canModifyComponents'] },
     openCanvas: { permissions: ['canModifyComponents'] },
     selectComponent: { permissions: ['canModifyComponents'] },

src/designer-extension-typings/components.d.ts

@@ -70,6 +70,21 @@ interface Component {
    * ```
    */
   getSelectedVariant(): Promise<Variant>;
+  /**
+   * Creates a new variant on a component. Name conflicts are resolved by auto-incrementing (e.g. "Variant" → "Variant 2").
+   * @returns A Promise resolving to the newly created Variant.
+   * @example
+   * ```ts
+   * const variant = await component.createVariant({
+   *   name: 'Secondary Hero',
+   *   isSelected: true,
+   * });
+   * console.log(variant);
+   * // { id: 'variant-123', name: 'Secondary Hero', isSelected: true }
+   * ```
+   */
+  createVariant(options: CreateVariantOptions): Promise<Variant>;
+  createVariant(options: CreateVariantOptions, sourceVariantId: string): Promise<Variant>;
   getRootElement(): Promise<null | AnyElement>;
 }
 
@@ -81,6 +96,13 @@ interface Variant {
   isSelected: boolean;
 }
 
+interface CreateVariantOptions {
+  /** The name for the new variant */
+  name: string;
+  /** Whether to select this variant immediately after creation (defaults to false) */
+  isSelected?: boolean;
+}
+
 interface SearchComponentsOptions {
   /** Fuzzy search query matching Component panel search behavior */
   q?: string;

src/examples/components.ts

@@ -114,6 +114,29 @@ export const Components = {
     */
   },
 
+  createVariant: async () => {
+    const component = (await webflow.getAllComponents())[0]
+
+    // Create a new variant and select it immediately
+    const variant = await component.createVariant({
+      name: 'Secondary Hero',
+      isSelected: true,
+    })
+    console.log(variant)
+    // { id: 'variant-123', name: 'Secondary Hero', isSelected: true }
+
+    // Name conflicts auto-increment
+    const variant2 = await component.createVariant({ name: 'Secondary Hero' })
+    console.log(variant2.name) // 'Secondary Hero 2'
+
+    // Duplicate a variant by passing its ID as the second parameter
+    const duplicateVariant = await component.createVariant({
+      name: 'Duplicate of Secondary Hero',
+      isSelected: true,
+    }, variant.id)
+    console.log(duplicateVariant.name) // 'Duplicate of Secondary Hero'
+  },
+
   createComponent: async () => {
     // Get selected element
     const rootElement = await webflow.getSelectedElement()