How to use FigmaTokens with Plasmic?

Plasmic Studio Questions
1

I’d like to learn how I might use FigmaToken json files within Plasmic. Anyone done this yet ?
https://docs.plasmic.app/learn/tokens/

Do I need to use Style Dictionary?
Can Plasmic just load this json file?
Does the import need to be Theo json file format?

2

This isn’t officially supported yet with a nice UI, but it is possible with this console script. Let me know if this works for you: https://forum.plasmic.app/t/how-to-create-style-tokens-or-mixins-from-code/1486

3

Thx - I’ll try this out

4

I get an SyntaxError:

image.png

5

Works now. Needed to remove \ :
definition = var(–token-${referenced.uuid})``

6

thx

7

Any appetite to work with the FigmaToken guys and me on getting a better integration?

As we got this workflow happening: FigmaTokens > Style Dictionary > Charkra UI > Framer. Even did a live stream on it 2 weeks back.

Would be mind blowing to just have:
FigmaTokens > Plasma

Would be amazing if Chakra UI would be tokenised as part of the package Mr Biscuit is working on?

Live stream is now on YouTube:
https://www.youtube.com/watch?v=7St9GZlJH4k

8

Hey, that does sound interesting, though I’m just putting together the pieces a bit here…how exactly would you envision this integration working?

9

Well I guess there could be various levels of integration. What would be the easiest way for Plasmic right now:

  1. Plasmic read/writes to the same Json file as FigmaTokens?
  2. Plasmic reads CSS generated by Style dictionary in a preferred format?
  3. Plasmin Charka UI package uses CSS generated by Style Dictionary?
    Mike and Esther from FigmaToken’s would be the best ones to talk ultimate integration also note that Mike is talking to Chakra UI founder to align Design Tokens structures.

For me I just need a starting point as a POC that I can sell into my workplace - Merkle (part of Dentsu).

1 Like
10

Reasons we are looking to move aware from Framer are varied, but mainly:

  1. it’s just not playing nice with rendering Chakra components
  2. We can’t get there support
11

The POC is currently a “Design system documentation/prototyping” website. I was trying show how we did not need StoryBook, ZeroHeight and that our focus should be enabling everyone to prototype, and create ideas with existing code components.

Hope I’m not rambling and always happy to jump on a call anytime, if thats better for you.

12

For now I’m trying to follow this tutorial, but get an error ButtonGroup component registration error. If I fix it, I’ll then try merge it with our github code base.
https://www.youtube.com/watch?v=RzpfG3c1wYY

13

Fixed the error.

14

I tried merging both code bases and I can’t get it to work.
Basically, I can’t generate the final figmaTokens.json file that should look like this:

{
  "colors": {
    "light": {
      "btn-primary-default-background-color": "#a855f7",
      "btn-primary-default-text-color": "#ffffff",
      "btn-primary-default-border-color": "#0ea5e9",
      "btn-primary-default-icon-color": "#ffffff",
      ...

Probably best I show you what we are trying to do so you can see clearly. And if your still interested @yang we can move forward and I’ll try loop the FigmaToken guys in.

15

Update: Managed to create the figmaTokens.json file.

16

Merged code, no errors, but still can’t see Chakra Button props values change within Plasmic.

Created a repo:
https://github.com/LincAtMerkle/plasmicPOC

17

I’m very much interested in this as well, and I’m curious if going from Theo Tokens to Style Dictionary might be helpful