Figma Design Sync by Volade
Figma frames on WordPress, tokens as CSS vars.
Figma Design Sync by Volade embeds live Figma frames via [figma_frame] / [fds_frame] and maps design tokens to CSS custom properties — agency handoff without Zeplin seats or manual iframe paste.
3-step workflow
- 1Figma → Settings → Personal access tokens — copy PAT
- 2Volade → Figma Design Sync → paste PAT → Sync tokens
- 3Add [fds_frame file="ABC" node="123"] — tokens become CSS vars
Design handoff reality 2026
Clients expect pixel-perfect pages — devs paste stale iframes
Teams export PNGs, paste Figma embed codes and manually copy hex values into theme.json — then the file updates overnight.
PAT
Figma Personal Access Token (Figma itself)
Figma frame embeds, design token → CSS var sync, sync log, 4 presets and free JSON export — Personal Access Token from Figma settings, no Volade account.
Frames
Live Figma embeds
Tokens
→ CSS variables
4
Handoff presets
JSON
Free export
At a glance
Agencies still paste Figma iframes and hand-copy CSS tokens. Figma Design Sync by Volade v1.0.0 embeds frames and design tokens: shortcodes, CSS sync, four presets and JSON export — free without an account (Figma PAT required).
Screenshots
Full-page real admin UI — presets, diagnostics and detailed settings.
2026 pricing comparison
Pay for Zeplin seats, or FDS at $0
Zeplin and handoff SaaS charge per seat for specs — FDS ships frame embeds, token sync and agency presets free.
Plugin free · Figma PAT · complements Figma Dev Mode
~$12–18+/mo
Zeplin / handoff seat
$0
Figma Design Sync by Volade
Why manual iframes and copy-paste tokens break design handoff
Zeplin subscriptions, raw Figma embed iframes and hand-maintained CSS variables don't ship WordPress-native shortcodes or agency presets out of the box.
The manual handoff problem
You need live Figma on WordPress — not another iframe that breaks.
Zeplin adds a subscription layer. Raw Figma embed iframes break when files move. Manual CSS token copy drifts on every design update. Dev Mode alone doesn't write to WordPress.
- Manual iframe paste: wrong size, no token sync, stale on file rename
- Zeplin: per-seat cost, specs outside WordPress
- Manual CSS tokens: theme.json drift every sprint
- Figma Dev Mode alone: inspect only — no wp-admin bridge
- PNG exports: not responsive, not live
- No JSON handoff for agency design audits
The Volade answer
Figma PAT, frames, tokens — from wp-admin.
FDS embeds Figma frames with shortcodes, syncs design tokens to CSS variables, logs Synced/Pending/Failed/Cached, includes 4 presets and free JSON export — PAT from Figma settings only.
- Dedicated Volade → Figma Design Sync dashboard
- Shortcodes [figma_frame] and [fds_frame]
- Design tokens → CSS custom properties
- Sync log with Figma file and node refs
- Cached frame embeds for performance
- 4 presets: Agency brand, Design system tokens, Frame showcase, Client review
- Free JSON export — tokens, frames, presets, health
- wp fds status | sync | tokens | frame | preset | export
4 design handoff presets
Agency brand, Design system tokens, Frame showcase or Client review — one click, token map and frame cache preserved.
Agency brand
Client brand tokens, logo frames and primary palette mapped to CSS vars.
AgencyDesign system tokens
Spacing, typography and color primitives synced to theme variables.
DSFrame showcase
Marketing landing frames embedded with responsive sizing.
ShowcaseClient review
Read-only frame gallery for stakeholder sign-off before build.
Review4 sync log statuses
Synced, Pending, Failed and Cached — every token pull and frame embed logged with Figma file refs.
Tokens pulled and CSS vars updated.
Queued sync before API call completes.
API or PAT error — inspect payload in log.
Frame embed served from local cache.
Statuses reflect Figma API responses at sync time — tail the log after token or frame updates.
Same Figma file, live WordPress embed
Design system tokens preset — 24 CSS variables synced from Figma variables.
PAT
Figma Personal Access Token from settings.
Preset
« Design system tokens » applied — spacing + color vars.
Frame
[fds_frame] hero-home — Cached embed.
Export
fds-handoff.json for agency handoff.
Sync log preview
Agency brand — 24 tokens synced (3 frames cached)
Log exported as fds-handoff.json for the client folder or deploy checklist.
Real scenarios
What changes after activation.
Agency client launch
Before: Devs copy hex from Figma comments
After: Agency brand preset → tokens as CSS vars
Single source of truth
Design system rollout
Before: theme.json manually updated each sprint
After: Design system tokens preset syncs variables
No token drift
Stakeholder review
Before: Share Figma link clients can't open
After: Client review preset + [fds_frame] gallery
Sign-off in WordPress
Marketing landing
Before: Export PNG hero, re-export on tweak
After: Frame showcase preset — live responsive embed
Always current
What manual iframe paste and Zeplin don't ship for WordPress
Figma-native frame embeds, token → CSS var sync, shortcodes and export — in wp-admin, no Volade account required.
Figma frame embeds
Shortcodes [figma_frame] / [fds_frame] — responsive, cached.
Token → CSS vars
Design tokens map to CSS custom properties automatically.
Sync log
Every pull with status, file ref and node ID.
4 handoff presets
Agency brand, Design system, Frame showcase, Client review.
Figma PAT auth
Personal Access Token from Figma settings — no Volade signup.
JSON export
Tokens, frames, presets and health — free.
WP-CLI + REST
wp fds status/sync/tokens/frame/preset/export.
Agency handoff
Complements design-to-dev workflow on client sites.
Complements agency design handoff: designers stay in Figma — FDS embeds frames and syncs tokens to your theme CSS variables.
What teams pay for WordPress design handoff
Public pricing July 2026 — iframe paste vs Figma-native sync.
Zeplin
~$12–18+/mo
Specs and tokens outside WordPress — no [fds_frame] shortcode.
Manual Figma iframe
$0
Raw embed paste — breaks on file moves, no token sync.
Manual CSS tokens
Dev hours
Copy hex into theme.json — drift on every Figma update.
Figma Dev Mode alone
$0–15+/mo
Inspect in Figma — no WordPress embed or CSS var bridge.
Figma Design Sync by Volade
$0
Frame embeds, token → CSS vars, 4 presets, REST + WP-CLI.
WordPress design handoff landscape 2026
Iframe paste vs token sync — FDS targets Figma-native WordPress embeds, not another specs SaaS.
Manual Figma iframe
Copy embed code from Figma share dialog.
Limit: Breaks on file moves — no token sync or presets.
Zeplin
Design specs and tokens platform.
Limit: Per-seat cost — specs live outside WordPress.
Manual CSS tokens
Hand-copy colors and spacing to theme.json.
Limit: Drift on every Figma update — no sync log.
Figma Dev Mode alone
Inspect specs inside Figma.
Limit: No WordPress embed or CSS var bridge.
PNG / static export
Raster hero and section exports.
Limit: Not responsive, not live, re-export every tweak.
Do nothing
Hope devs match Figma by eye.
Limit: Pixel drift, angry clients, no audit trail.
Comparison table — 5 approaches
FDS vs Manual iframe, Zeplin, manual CSS tokens and Figma Dev Mode alone.
| Feature | FDS Volade | Manual iframe | Zeplin | Manual CSS tokens | Figma Dev Mode |
|---|---|---|---|---|---|
| Figma frame embed shortcodes | ~ | ||||
| Design tokens → CSS variables | ~ | ~ | ~ | ||
| Sync log with file refs | ~ | ||||
| 4 handoff presets | |||||
| Free JSON export | ~ | ||||
| Cached responsive embeds | ~ | ||||
| Figma PAT (no Volade account) | ~ | ||||
| Integrated WP-CLI | |||||
| No Volade account (core) | |||||
| Typical handoff cost | $0 | $0 | 12–18 $/mo | Dev hours | 0–15 $/mo |
Zeplin and Dev Mode remain valid in the design toolchain — FDS complements WordPress with Figma-native embeds, token → CSS var sync and agency presets.
Three tiers, one plugin
Embeds, tokens, shortcodes, presets and JSON export free. Volade account for REST. V+ for multisite rollup.
No account
- Frame embeds
- Token sync
- 4 presets
- Shortcodes
- Sync log
- JSON export
Volade account
- REST fds/v1
- Sync/frame via API
- Scheduled export
V+ Premium
- Multisite preset rollup
- wp fds network sync
- Agency harmonization
WP-CLI `wp fds` and REST `fds/v1` to sync tokens, embed frames, apply presets and export across staging and client sites.
WP-CLI
status, sync, tokens, frame, preset and export from SSH — `wp fds sync --file=ABC123`.
wp fds status wp fds sync --file=ABC123 wp fds tokens export wp fds frame hero-home wp fds preset agency-brand wp fds export
Multisite
Token map per site; harmonized agency presets on V+.
- Tokens per blog
- Consolidated JSON export
- Agency network presets
Download
Install the ZIP, paste your Figma PAT, embed a frame — design tokens become CSS variables in under a minute.
ZIP with Volade SDK — Volade → Figma Design Sync (or Settings → Figma Design Sync).
- 1Plugins → Add New → Upload → ZIP → Activate
- 2Volade → Figma Design Sync → paste PAT from Figma settings
- 3Sync tokens → embed frame with [fds_frame] → export JSON handoff
First embedded frame in under 60 seconds
FAQ
Figma PAT, tokens, shortcodes, multisite and Volade account.
No. Paste your Figma Personal Access Token from Figma settings — embeds, token sync and presets work without Volade signup.
Free vs V+ Premium
The extension works without an account. V+ unlocks premium on this extension and the full catalog.
| Feature | Free | V+ |
|---|---|---|
| Figma frame embeds + [figma_frame] / [fds_frame] shortcodes | ||
| Design token → CSS var sync & sync log | ||
| 4 agency-brand / design-system / showcase / review presets | ||
| Audit log & free JSON export | ||
| Programmatic fds/v1/* REST API | ||
| Multisite rollup, wp fds network sync & agency presets |
Reviews, discussions & updates
Share your experience with Figma Design Sync by Volade and follow the latest releases.
Ready to embed Figma on WordPress?
Download Figma Design Sync by Volade v1.0.0 — first frame in one minute, no Volade signup.
Download v1.0.0