You can import the JSON file in Penpot with the import button at the bottom.
You will then have access to the default values in Tailwind : spacing (padding, margin, …), sizing, border-radius and border-width.
Feature request : this setup would benefit from a way to sort tokens by name (and maybe values), because the order of imported tokens seems to be random. I would love to have size-1, size-2, size-3, … in order to find the correct token more easily ==> this has been fixed !
Awesome contribution! Have you already submitted it to the PenpotHub? That way it could reach many more people.
About the request, tokens are shown in alphabetical order. You could get what you want by normalizing the number of digits of the numeric part. That way you could get something like “size-001”, “size-002”, (…), “size-012”…
I have a default increment scale for color tokens (-10, -20, -30, … -100) and would like to keep the names in sync as they are defined in our DS. Are there any plans for a custom order, e.g. by editing the JSON file as a start?
To improve the organization of the tokens at their panel (I assume this is the underlying need), we plan to implement group nesting in the UI. This is the story with the specifics, and I think I can share how the designs are looking at this point:
That is great news and actually perfect for all sorts of tokens-hierarchy.
But regarding our specific challenge i think a custom order or at least the option to set a custom ordering (via JSON e.g.) would be very helpful, I think Token Studio is doing that, too.
I think this would be really helpful but I also get what @don is asking. For me, my use case is that many of my tokens (within their groups) are based on a scale… smallest to biggest, lightest to darkest etc.
With these tokens, it’s easier to understand and find the tokens at a glance if they are ordered according to their scale, rather than alphabetically or by when they were added.
For example:
extraextralarge
extralarge
extrasmall
large
medium
small
is much harder to scan and understand than:
extrasmall
small
medium
large
extralarge
extraextralarge
I imagine custom ordering would probably require something more drag-and-drop like layer reordering rather than a menu of preset orders, so I appreciate this isn’t a straight-forward feature request!
I’d also fight to be able to do this from inside Penpot (though cross-compatibility with the JSON would be great and make export/import easier.) As a designer, I don’t want to have to jump into a text editor just to change the order of my tokens. Although I would if it was the only workaround!
Now I have a much better sense of the problem, thanks to both for elaborating!
Design Tokens are all about storing design decisions in a way that is agnostic to tools and platforms. Having a different order in different tools could lead to problems related to syncing and shared semantics.
I guess that’s the reason why the Tokens Studio plugin allows editing the tokens order from the JSON, and we are actually planning to do something similar. No specs yet, but we have a user story for the JSON viewer and another for the JSON editor.
I’m not implying at all that custom ordering from the UI is not a good idea. I just think there are some potential challenges we should be mindful of and we will probably start with the most obvious solutions.
