← Journey PHASE 5b — Design system: client design system + Penpot bidirectional

Penpot Component Sync Is Wired

n8npenpotdesign-systemhomelab

Photo by Julia Taubitz on Unsplash

The second of three planned Penpot bidirectional workflows is live. Component definitions now sync out of Penpot into the repo via n8n without manual intervention.

The “Penpot Component Sync” workflow shipped. It sits alongside the token sync workflow from Phase 5a and follows the same pattern — n8n polls Penpot’s REST API, extracts component metadata, and writes structured output into the repo. No manual export step.

The trigger is a webhook from Penpot on file save, with a scheduled fallback every 15 minutes in case the webhook drops. Component names, IDs, and path mappings land in a flat JSON file the design agent can read directly.

Removed
Added
  • n8n workflow: penpot-component-sync
  • components-manifest.json
■ dani-brain/n8n-workflows
├─ penpot-component-sync.json new n8n workflow export
└─ penpot-token-sync.json existing token sync from Phase 5a

The Figma Dev seat option stays deferred. The REST API covers what the next two workflows need, and $25–45/month for inspect mode isn’t justified yet.

What this unblocks: Pattern Extract is the next workflow in the sequence. With component IDs now in the manifest, the extraction step has a stable index to query against rather than scraping Penpot’s file tree on every run.