diff --git a/frontend/src/app/main/data/workspace/variants.cljs b/frontend/src/app/main/data/workspace/variants.cljs
index d0a7a203e3..acfd59a3b3 100644
--- a/frontend/src/app/main/data/workspace/variants.cljs
+++ b/frontend/src/app/main/data/workspace/variants.cljs
@@ -440,8 +440,10 @@
              cont-props   (if flex?
                             (into base-props flex-props)
                             base-props)
+             ;; The variant has no properties yet, so its variant-name is empty
              main-props   {:name name
-                           :variant-id variant-id}
+                           :variant-id variant-id
+                           :variant-name ""}
 
              stroke-props {:stroke-alignment :inner
                            :stroke-style :solid
@@ -474,9 +476,11 @@
            (cl/remove-all-fills variant-vec {:color clr/black :opacity 1})
            (when flex? (dwsl/create-layout-from-id variant-id :flex))
            (dwsh/update-shapes variant-vec #(merge % cont-props))
+           ;; Set the variant-id on the component before the main shape, so the
+           ;; shape validation after updating the main sees both in sync
+           (set-variant-id component-id variant-id)
            (dwsh/update-shapes [main-instance-id] #(merge % main-props))
-           (cl/add-stroke variant-vec stroke-props)
-           (set-variant-id component-id variant-id))
+           (cl/add-stroke variant-vec stroke-props))
 
           ;; Add the necessary number of new properties, with default values
           (rx/from