I’m currently playing around with Penpot.
In the future I would like to generate CSS vars etc. via a CI/CD pipeline and query the design tokens from Penpot via API.
However, I couldn’t find a suitable endpoint in the documentation at MAIN API Documentation.
I would expect an endpoint which returns the same data as I would export the tokens via the ui.
Has anybody already solved this issue and could point me in the right direction?
Design tokens via API is not there at the moment, but what could work: using the get-file API-call and then parsing/mapping the tokens from the file
That’s the endpoint I tried so far, but to be honest, who wants to parse that?
The relevant part starts with ~:token.
[
"^ ",
"~:features",
[
"~#set",
[
"fdata/path-data",
"plugins/runtime",
"design-tokens/v1",
"variants/v1",
"layout/grid",
"styles/v2",
"fdata/objects-map",
"tokens/numeric-input",
"render-wasm/v1",
"components/v2",
"fdata/shape-data-type"
]
],
"~:team-id",
"~u96f1b17f-e88c-815c-8008-7b7796d3963d",
"~:permissions",
[
"^ ",
"~:type",
"~:membership",
"~:is-owner",
true,
"~:is-admin",
true,
"~:can-edit",
true,
"~:can-read",
true,
"~:is-logged",
true
],
"~:has-media-trimmed",
false,
"~:comment-thread-seqn",
0,
"~:name",
"Token Test",
"~:revn",
22,
"~:modified-at",
"~m1786790067497",
"~:vern",
0,
"~:id",
"~ub36bd1d7-4afb-801c-8008-7b98370ab135",
"~:is-shared",
true,
"~:migrations",
[
"~#ordered-set",
[
"legacy-2",
"legacy-3",
"legacy-5",
"legacy-6",
"legacy-7",
"legacy-8",
"legacy-9",
"legacy-10",
"legacy-11",
"legacy-12",
"legacy-13",
"legacy-14",
"legacy-16",
"legacy-17",
"legacy-18",
"legacy-19",
"legacy-25",
"legacy-26",
"legacy-27",
"legacy-28",
"legacy-29",
"legacy-31",
"legacy-32",
"legacy-33",
"legacy-34",
"legacy-36",
"legacy-37",
"legacy-38",
"legacy-39",
"legacy-40",
"legacy-41",
"legacy-42",
"legacy-43",
"legacy-44",
"legacy-45",
"legacy-46",
"legacy-47",
"legacy-48",
"legacy-49",
"legacy-50",
"legacy-51",
"legacy-52",
"legacy-53",
"legacy-54",
"legacy-55",
"legacy-56",
"legacy-57",
"legacy-59",
"legacy-62",
"legacy-65",
"legacy-66",
"legacy-67",
"0001-remove-tokens-from-groups",
"0002-normalize-bool-content-v2",
"0002-clean-shape-interactions",
"0003-fix-root-shape",
"0003-convert-path-content-v2",
"0005-deprecate-image-type",
"0006-fix-old-texts-fills",
"0008-fix-library-colors-v4",
"0009-clean-library-colors",
"0009-add-partial-text-touched-flags",
"0010-fix-swap-slots-pointing-non-existent-shapes",
"0011-fix-invalid-text-touched-flags",
"0012-fix-position-data",
"0013-fix-component-path",
"0013-clear-invalid-strokes-and-fills",
"0014-fix-tokens-lib-duplicate-ids",
"0014-clear-components-nil-objects",
"0015-fix-text-attrs-blank-strings",
"0015-clean-shadow-color",
"0016-copy-fills-from-position-data-to-text-node",
"0017-fix-layout-flex-dir",
"0018-remove-unneeded-objects-from-components",
"0019-fix-missing-swap-slots",
"0020-sync-component-id-with-near-main",
"0021-fix-shape-svg-attrs",
"0022-normalize-component-root-and-resync",
"0023-repair-token-themes-with-inexistent-sets",
"0024b-fix-stroke-cap-placement"
]
],
"~:version",
67,
"~:project-id",
"~u96f1b17f-e88c-815c-8008-7b7796d5102e",
"~:created-at",
"~m1786728445994",
"~:backend",
"storage",
"~:metadata",
[
"^ ",
"~:storage-ref-id",
"~u1f9345e7-caf8-4ec3-b0f4-d13a0b657343"
],
"~:data",
[
"^ ",
"~:pages",
[
"~ub36bd1d7-4afb-801c-8008-7b98370ab136"
],
"~:pages-index",
[
"^ ",
"~ub36bd1d7-4afb-801c-8008-7b98370ab136",
[
"^ ",
"~:objects",
[
"^ ",
"~u00000000-0000-0000-0000-000000000000",
[
"~#shape",
[
"^ ",
"~:y",
0,
"~:hide-fill-on-export",
false,
"~:transform",
[
"~#matrix",
[
"^ ",
"~:a",
1.0,
"~:b",
0.0,
"~:c",
0.0,
"~:d",
1.0,
"~:e",
0.0,
"~:f",
0.0
]
],
"~:rotation",
0,
"^=",
"Root Frame",
"~:width",
0.01,
"^4",
"~:frame",
"~:points",
[
[
"~#point",
[
"^ ",
"~:x",
0.0,
"~:y",
0.0
]
],
[
"^Y",
[
"^ ",
"~:x",
0.01,
"~:y",
0.0
]
],
[
"^Y",
[
"^ ",
"~:x",
0.01,
"~:y",
0.01
]
],
[
"^Y",
[
"^ ",
"~:x",
0.0,
"~:y",
0.01
]
]
],
"~:r2",
0,
"~:proportion-lock",
false,
"~:transform-inverse",
[
"^T",
[
"^ ",
"~:a",
1.0,
"~:b",
0.0,
"~:c",
0.0,
"~:d",
1.0,
"~:e",
0.0,
"~:f",
0.0
]
],
"~:r3",
0,
"~:r1",
0,
"^A",
"~u00000000-0000-0000-0000-000000000000",
"~:parent-id",
"~u00000000-0000-0000-0000-000000000000",
"~:frame-id",
"~u00000000-0000-0000-0000-000000000000",
"~:strokes",
[],
"~:x",
0,
"~:proportion",
1.0,
"~:r4",
0,
"~:selrect",
[
"~#rect",
[
"^ ",
"~:x",
0,
"~:y",
0,
"^V",
0.01,
"~:height",
0.01,
"~:x1",
0,
"~:y1",
0,
"~:x2",
0.01,
"~:y2",
0.01
]
],
"~:fills",
[
[
"^ ",
"~:fill-color",
"#FFFFFF",
"~:fill-opacity",
1
]
],
"~:flip-x",
null,
"^1:",
0.01,
"~:flip-y",
null,
"~:shapes",
[]
]
]
],
"^A",
"~ub36bd1d7-4afb-801c-8008-7b98370ab136",
"^=",
"Page 1"
]
],
"^A",
"~ub36bd1d7-4afb-801c-8008-7b98370ab135",
"~:options",
[
"^ ",
"~:components-v2",
true,
"~:base-font-size",
"16px"
],
"~:tokens-lib",
[
"~#penpot/tokens-lib",
[
"^ ",
"~:sets",
[
"~#ordered-map",
[
[
"S-Global",
[
"~#penpot/token-set",
[
"^ ",
"^A",
"~ud99c8920-8754-80ac-8008-7b9902138979",
"^=",
"Global",
"~:description",
"",
"^?",
"~m1786790067498",
"~:tokens",
[
"^1K",
[
[
"blue",
[
"~#penpot/token",
[
"^ ",
"^A",
"~ud99c8920-8754-80ac-8008-7b9ab89cef63",
"^=",
"blue",
"^4",
"~:color",
"~:value",
"#00f",
"^1M",
"",
"^?",
"~m1786729102963"
]
]
],
[
"red",
[
"^1O",
[
"^ ",
"^A",
"~uf71125b0-23e8-8048-8008-7c8344a19e2d",
"^=",
"red",
"^4",
"^1P",
"^1Q",
"#f00",
"^1M",
"",
"^?",
"~m1786790063750"
]
]
]
]
]
]
]
]
]
],
"~:themes",
[
"^1K",
[
[
"",
[
"^1K",
[
[
"__PENPOT__HIDDEN__TOKEN__THEME__",
[
"~#penpot/token-theme",
[
"^ ",
"^A",
"~u00000000-0000-0000-0000-000000000000",
"^=",
"__PENPOT__HIDDEN__TOKEN__THEME__",
"~:group",
"",
"^1M",
"",
"~:is-source",
false,
"~:external-id",
"",
"^?",
"~m1786730651119",
"^1J",
[
"^1",
[
"Global"
]
]
]
]
]
]
]
]
]
],
"~:active-themes",
[
"^1",
[
"/__PENPOT__HIDDEN__TOKEN__THEME__"
]
]
]
],
"~:colors",
[
"^ ",
"~u832d959c-3479-8092-8008-7bb085cec11e",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085cec11e",
"^=",
"gray.pale.900",
"^1P",
"#666666",
"~:opacity",
1,
"^?",
"~m1786734822269",
"~:path",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085cb83ff",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085cb83ff",
"^=",
"gray.pale.500",
"^1P",
"#a7a7a8",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085cb397f",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085cb397f",
"^=",
"gray.pale.400",
"^1P",
"#b4b4b5",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085dcaf9c",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085dcaf9c",
"^=",
"blue.shade.800",
"^1P",
"#004b66",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085dae87c",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085dae87c",
"^=",
"blue.shade.400",
"^1P",
"#0087b8",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085da42fd",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085da42fd",
"^=",
"blue.shade.300",
"^1P",
"#0097ce",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d53bfd",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d53bfd",
"^=",
"blue.pale.100",
"^1P",
"#c0ebfb",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085dc005d",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085dc005d",
"^=",
"blue.shade.700",
"^1P",
"#005a7a",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d4803a",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d4803a",
"^=",
"gray.shade.900",
"^1P",
"#212121",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d8a95a",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d8a95a",
"^=",
"blue.pale.800",
"^1P",
"#24c4fe",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d6bb1b",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d6bb1b",
"^=",
"blue.pale.400",
"^1P",
"#84dcfc",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d74278",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d74278",
"^=",
"blue.pale.500",
"^1P",
"#6ed7fd",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d36df8",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d36df8",
"^=",
"gray.shade.700",
"^1P",
"#313131",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085c8e6d9",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085c8e6d9",
"^=",
"gray.pale.200",
"^1P",
"#cbcccd",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d40036",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d40036",
"^=",
"gray.shade.800",
"^1P",
"#292929",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085cf8d36",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085cf8d36",
"^=",
"gray.shade.100",
"^1P",
"#666666",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d593b5",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d593b5",
"^=",
"blue.pale.200",
"^1P",
"#ace6fc",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d1b315",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d1b315",
"^=",
"gray.shade.400",
"^1P",
"#4a4a4a",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085da0273",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085da0273",
"^=",
"blue.shade.200",
"^1P",
"#00a8e5",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085ce16d1",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085ce16d1",
"^=",
"gray.pale.800",
"^1P",
"#7b7c7c",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085dbaf0e",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085dbaf0e",
"^=",
"blue.shade.600",
"^1P",
"#00688e",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d0286f",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d0286f",
"^=",
"gray.shade.200",
"^1P",
"#5b5b5b",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d9012c",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d9012c",
"^=",
"blue.pale.900",
"^1P",
"#00bbff",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d9892d",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d9892d",
"^=",
"blue.shade.100",
"^1P",
"#00bbff",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d0dfca",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d0dfca",
"^=",
"gray.shade.300",
"^1P",
"#525252",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085c49e28",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085c49e28",
"^=",
"gray.pale.100",
"^1P",
"#d7d8d8",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d241c8",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d241c8",
"^=",
"gray.shade.500",
"^1P",
"#414141",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d82689",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d82689",
"^=",
"blue.pale.700",
"^1P",
"#3fcbfe",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d7bbe6",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d7bbe6",
"^=",
"blue.pale.600",
"^1P",
"#58d1fd",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085ccae04",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085ccae04",
"^=",
"gray.pale.600",
"^1P",
"#9a9a9a",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085db5584",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085db5584",
"^=",
"blue.shade.500",
"^1P",
"#0077a3",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085c9c205",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085c9c205",
"^=",
"gray.pale.300",
"^1P",
"#c0c0c1",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085dd1a82",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085dd1a82",
"^=",
"blue.shade.900",
"^1P",
"#003d53",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d61bc3",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d61bc3",
"^=",
"blue.pale.300",
"^1P",
"#98e1fc",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085cd4c83",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085cd4c83",
"^=",
"gray.pale.700",
"^1P",
"#8b8c8c",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
],
"~u832d959c-3479-8092-8008-7bb085d2e261",
[
"^ ",
"^A",
"~u832d959c-3479-8092-8008-7bb085d2e261",
"^=",
"gray.shade.600",
"^1P",
"#393939",
"^1Z",
1,
"^?",
"~m1786734822269",
"^1[",
"Color Tokens Plugin"
]
]
]
]
