Back to PortfolioForge Design System
Editor-specific design system for Elementor V4, built from scratch, maintained solo, consumed by a multi-squad product team.
I built Forge, the design system behind Elementor's V4 editor, from scratch and maintained it solo. It gave 4 product squads one shared language, plus the patterns and rules the team never had before, ending the inconsistencies that came from every designer deciding alone.
Introduction
Forge is the design system powering Elementor's V4 (Atomic) Editor, a ground-up rebuild of the world's most widely used WordPress page builder. I built Forge from scratch as a layer on top of Elementor's company-wide design system (EDS), giving the editor product team a dedicated system tailored to the complexity of a professional-grade editor interface.
The V4 editor introduces a fundamentally new architecture. Forge translates that architecture into a consistent, scalable UI language, covering atoms, edit panels, structure panels, slot-based layouts, and Pro/Core state distinctions across every surface.
Impact
product squads building on one shared design system
Established the design patterns and rules the team never had before, ending the UI mismatches that came from every designer deciding alone
Built and maintained single-handedly, as the sole designer on the system
Goals
- Give the V4 editor team a single source of truth for UI components, patterns, and interaction states
- Decouple editor-specific design decisions from the company-wide atom system (EDS) without creating conflicts
- Enable multi-squad parallelism: multiple designers and engineers shipping consistently without constant sync
- Reduce design-to-dev handoff friction by embedding component specs, states, and usage rules directly in Figma
- Support AI agent consumption of the design system through structured, machine-readable component documentation
My Role
As the sole designer responsible for Forge, my contributions included:
1. Architecture: designed the system hierarchy (EDS, Forge Atoms, Forge Components) and defined the slot-based panel architecture
2. Component buildout: built and maintained every component in Figma: Atoms, Atomic Forms, Edit Panels, Structure Panels, and complex stateful UI (Pro/Core, empty states, loading states)
3. Documentation: wrote usage rules, naming conventions, and handoff specs embedded directly in Figma
4. Communication: publish monthly Slack updates to the design team covering what shipped, what's unverified, and what's blocked
5. Agent tooling: built a skill system enabling AI agents to consume Forge accurately for design tasks in Cursor and Claude
Problem Statement
Building an editor like Elementor V4 creates a design complexity problem that general design systems aren't equipped to solve. EDS covers brand atoms: color, typography, iconography. But an editor interface has hundreds of unique UI states: panels that collapse, widgets with Pro gates, inputs that behave differently in edit mode vs. structure mode, empty states with divergent CTAs depending on account type.
Without a dedicated system, every designer makes local decisions. Components drift. Edge cases multiply. Dev builds from inconsistent specs.
Forge was the answer: a living, versioned system that absorbs that complexity centrally so the team doesn't have to solve it individually on every feature.
Slot-Based Panel Architecture
The most critical architectural decision in Forge was defining a slot-based model for editor panels. Instead of designing panels as one-off compositions, every panel is built from named slots: Header, Body, Footer, Toolbar, with strict rules about what can live where.
This gives engineers a predictable DOM structure to build against, and gives designers a composable system where new panels feel instantly native without custom work.
Pro/Core State System
Every component in Forge carries explicit Pro and Core state variants. This isn't just a lock icon swap: the UX of each state is designed intentionally: what's visible, what's accessible, what triggers an upsell, and what copy appears at each gate.
Maintaining this across a system of hundreds of components required a strict governance model. Any new component added to Forge must define its Pro/Core behavior before it ships.
Agent-Ready Documentation
Beyond Figma, I built a structured markdown knowledge base from Forge: a system of component spec files and rules files designed for AI agent consumption. This allows design agents (running in Cursor or Claude) to work accurately against Forge without needing to query Figma at runtime.
The system separates extractable facts (component anatomy, token usage, variant names) from institutional rules ("never stack two popups," "toast always appears bottom-right"), the latter being the most valuable and least documented part of any design system.
Future Features
Forge Tokens Sync
Automate token sync between Forge in Figma and the V4 codebase via a Tokens Studio pipeline
Contribution Model
Open Forge contributions to the broader Elementor design team with a design-readiness gate before components enter the system
Full Agent Knowledge Base
Complete the Design Cortex extraction pipeline so every Forge component is fully indexed for AI agent consumption
