內容簡介
Atomic Framework Forge for Elementor (AFF) 是一款專為 Elementor 設計的外掛，提供開發者一個專屬的工作區來組織、編輯、備份及同步 CSS 變數，簡化設計系統的管理，提升開發效率。
【主要功能】
• 組織顏色系統，支援 HEX、RGB、HSL 編輯
• 管理字型變數，分類清晰易於訪問
• 數值管理，支援多種單位的編輯
• 自訂類別與子類別，反映實際設計系統
• 提供視覺顏色選擇器，生成色調與透明度變體
外掛標籤
開發者團隊
② 後台搜尋「Atomic Framework Forge for Elementor」→ 直接安裝（推薦）
原文外掛簡介
Build and manage your Elementor design system
Atomic Framework Forge for Elementor (AFF) gives developers a dedicated workspace for organizing, editing, backing up, and synchronizing the CSS variables that power Elementor V4’s atomic architecture.
Colors. Fonts. Numbers. Manage your variables in one place instead of hunting through your Elementor configuration.
Requires Elementor and Elementor Pro.
The problem
As a site built on Elementor’s new V4 Atomic framework grows, its design variables can become difficult to see, organize, and maintain. Colors accumulate. Spacing values multiply. Typography settings spread across a project. Making a change can mean searching through an increasingly complex design system.
Atomic Framework Forge gives developers a dedicated workspace for managing these variables as an organized system: find them, organize them, edit them, back them up, and synchronize them with Elementor — while keeping the developer in control of when changes are written back.
Three types of variables, one workspace
Colors — Build and maintain an organized color system.
HEX, RGB, HSL, and alpha editing with a visual color picker
Generate tints, shades, and transparency variants
Organize into categories and sub-categories
Add notes and classifications to variables
Fonts — Keep font variables organized and accessible.
Manage Elementor font variables, organized by category and sub-category
Edit font-related CSS custom properties
Preview font values within the management interface
Numbers — Manage the numeric foundation of your design system: spacing, sizing, gaps, radius, layout values, and other numeric CSS variables. Unit-aware editing for px, rem, em, %, vw, vh, ch, and CSS function values (e.g. clamp()) when needed.
Organize your design system
AFF is not limited to a flat list of variables. Create your own categories and one level of sub-categories to reflect the design system you actually use — for example, Colors organized into Brand / Neutral / Status / Surface, or Numbers into Spacing / Radius / Layout / Sizing. The categories are yours to define.
Work with Elementor — not around it
AFF reads Elementor’s V4 variable data and brings it into a dedicated management environment: fetch the variables from your active Elementor kit, organize and edit them in AFF, review which variables are synced, modified, new, orphaned, or in conflict, then commit — explicitly, when you’re ready — to write the changes back.
A deliberately controlled write process
AFF is designed around a read-first workflow. Reading Elementor data does not modify Elementor. Writing changes back is always a deliberate, user-triggered action — never automatic or in the background — preceded by a summary showing exactly what will change (modified, new, and deleted variables).
Recommended: use AFF on a staging or local development site, and export a project backup before committing changes to Elementor.
How AFF interacts with Elementor
Read: AFF reads global variables directly from the active Elementor kit’s _elementor_global_variables post meta — the same authoritative data store Elementor itself uses. This happens only when you click “Fetch Elementor Data”. It is purely read-only; nothing in Elementor is touched.
Write: When you click “Write to Elementor”, AFF writes the current variable values back to _elementor_global_variables on the kit post — the same authoritative data store, updated the same way Elementor itself updates it. This is the primary and authoritative write. As a secondary, best-effort step, AFF also patches the active kit’s generated CSS file directly, so the page reflects the change immediately instead of waiting for Elementor’s own regeneration on next load; if this secondary step is skipped or fails for any reason, Elementor’s own cache-clear and regeneration (triggered by the post meta update) still produces the correct CSS. AFF writes to no other Elementor data.
Every write is user-triggered (no background or automatic writes, ever), preceded by a confirmation dialog showing exactly what will change, and limited to variables you have managed in AFF. AFF does not touch anything else in your Elementor configuration.
Use on staging or a local development environment only. A corrupted write could damage your Elementor kit’s variable data. Always export a project backup before writing to Elementor.
Bringing an existing Elementor site into V4?
AFF can import Elementor V3 Global Colors into your AFF project — both system and custom colors. The four standard Elementor system colors are identified with their familiar roles (Primary, Secondary, Text, Accent), so you never lose track of what each color controls. Bring those colors into your V4 variable-management workflow and map your existing color system as you rebuild your site.
Projects, backups, and portability
AFF supports multiple independent projects within a WordPress site. Each project can be:
Saved — create a persistent project containing your managed variables
Backed up — every save creates a timestamped backup snapshot; up to 50 backups per project (configurable)
Restored — return to a previous backup from the project/backup picker
Exported — downloaded as a portable .atfrfo.json file
Imported — brought into another WordPress site running AFF
Know what changed
AFF shows status throughout the variable views, so you have visibility into the state of your design system before committing anything:
Synced — the AFF value matches Elementor
Modified — the value has been changed in AFF
New — the variable exists in AFF but hasn’t been committed to Elementor yet
Orphaned — AFF has a variable that no longer corresponds to current Elementor data
Conflict — AFF and Elementor contain differing information that needs your attention
A workspace built for developers
AFF uses a four-panel interface: a top menu for project, sync, print, and preferences; a navigation panel for moving through Colors, Fonts, Numbers, and their categories; the edit space for working directly with variables; and a data management panel for projects, backups, import/export, and Elementor sync. AFF’s own interface supports light and dark mode, saved per WordPress user.
Print and PDF
AFF includes a print/PDF workflow for documenting selected portions of your variable system — useful for client documentation, design-system reviews, or keeping a human-readable record of your variables.
Designed for professional Elementor development
Atomic Framework Forge is built for WordPress developers, Elementor developers, freelancers, and agencies maintaining large Elementor sites or establishing reusable design systems. If you’re building one page, Elementor may be all you need. If you’re managing the system behind many pages, AFF gives you another level of control.
Where the framework is going
The current release focuses on Variables. Future development extends the framework toward Elementor V4’s other atomic assets: Variables → Classes → Components. Classes and Components are not part of the current 1.4.3 feature set — the goal is an increasingly complete environment for managing the building blocks of an Elementor design system.
Architecture
AFF is built for future portability. The data layer contains no WordPress dependencies and is designed to be ported to a standalone Windows or Mac application in a future phase.
Credits
Developed by Jim Roberts / Jim R Forge — https://jimrforge.com
