Penpot Token Sync Workflow Ships
Photo by Claudio Schwarz on Unsplash
The first of three planned Penpot bidirectional n8n workflows is live. Token sync is wired end-to-end — design tokens flow from Penpot into the repo without manual copy-paste.
The Penpot Token Sync workflow is the first piece of the three-workflow bidirectional suite to land. It pulls token definitions out of Penpot via the REST API, normalises them into the internal token schema, and commits the result back to the repo — no manual export step.
- n8n workflow: penpot-token-sync.json
The n8n workflow has two nodes: an HTTP Request hitting the Penpot REST API, and a Code node that flattens the nested token groups — tokens arrive as color/brand/primary, the node emits { "color-brand-primary": { value: "#...", type: "color" } } — and merges the result into the ## Tokens section of design.md.
Component Sync and Pattern Extract are next in the queue. Component Sync is the more complex one — it has to reconcile Penpot frame IDs with existing component slugs in the repo before writing anything.
What this unblocks: With tokens flowing automatically, the Component Sync workflow can reference resolved token values directly rather than hardcoding them. That removes a manual reconciliation step that was sitting between the two workflows.