Class Renamer — Webflow Designer Extension · Wireframe v0.2
Default state — 6 elements selected, 2 dupes, Figma IDs present
Class Renamer6 selected
All 6
Duplicates 2
Renamed 0
DIV
div-block-14dupe
data-figma-id
display:flexflex-direction:rowgap:16px
DIV
container-3dupe
data-figma-id
display:flexflex-direction:rowgap:16px
SECT
section-7
display:flexflex-direction:columnpadding:80px 0
DIV
wrapper
display:flexflex-direction:columngap:24px
IMG
image-2
width:100%border-radius:8pxobject-fit:cover
A
link-block-1
display:inline-flexpadding:12px 24px
Identical styles, different names2 classes · same CSS
DIVdiv-block-14flex · row · gap 16px
DIVcontainer-3flex · row · gap 16px
Figma attr pillAmber pill on any element with data-figma-*. × strips it. "Strip all" in toolbar clears everything in one shot.
Type chipsColour-coded: DIV=blue, SECT=purple, A=green, IMG=amber. Visual scan aid.
Rename inputApply button inactive until typed. Turns blue with value. Confirms globally across whole project.
Dupe detectorAuto-groups elements sharing identical CSS fingerprint. Surfaced as persistent warning below list.
Re-scanRefresh icon re-reads current Webflow selection without closing the modal.
Rename validation states — all four outcomes
Class Renamer4 selected
A · Free name — safe to create
DIV
section-wrapper
display:flexflex-direction:column
B · Target exists · CSS identical — will merge
DIV
div-block-14merges
display:flexflex-direction:rowgap:16px
flex-h already exists with identical styles — element will be reassigned to the existing class.
C · Target exists · CSS different — blocked
DIV
container-3blocked
display:flexflex-direction:columngap:24px
flex-h exists but has different styles. Choose a different name.
flex-direction:row→col
gap:16px→24px
D · Session conflict — same target name, pending different CSS in this session
SECT
section-2conflict
display:flexflex-direction:columnpadding:64px 0
flex-v is also being renamed in this session with different styles (section-wrapper). Resolve the conflict first.
Post-apply — renamed tab active, orphan notice
Class Renamer3 selected
All 3
Duplicates 0
Renamed 3
DIV
div-block-14→flex-hdone
display:flexflex-direction:row
DIV
container-3→flex-hmerged
display:flexflex-direction:row
SECT
section-7→flex-vdone
display:flexflex-direction:column
Old class names are now orphaned in your project (no elements assigned). They won't affect your build but can be cleaned up via Webflow's Style Manager.