I started to work on a website design library directly implementing design tokens, and I’d be happy to hear any feedback or suggestions from fellow users.
Basically the idea is to use this library to build website wireframes (as of now, only desktop layouts are being built), that use contextual tokens directly.
I’m creating section-type components so it’s fast to stack them on top of one another when wireframing.
Here’s a short video where I show you how it works:
Hey! I just wanted to say that I think your contribution is excellent. Your library looks really complete, and I genuinely believe it’s going to be super useful for the community.
One suggestion that might add even more value: since you’re creating these as section-type components, perhaps you could consider making them responsive, adapting to different containers or viewports. It could be great to explore variants for mobile or tablet as well. Based on what I’ve seen in the video so far, and without having had the chance to try the file myself, that’s what comes to mind.
But overall, amazing work. If there’s any specific part you’d like feedback on or want to dig deeper into, I’d be more than happy to help!
This is a good idea, I’m going to create a new tokens group for responsiveness with sets to better control page width, container width and so on.
As for component variations, I’m thinking about the best way to implement it.
Most of the section components I’ve created are base on grid layouts, and I can’t see a way to change the grid structure uniquely with design tokens (we can’t use tokens as values for grid-template-columns).
I see two options:
create variants of every section component (controlled output, but more work and it has to be clear which variations are linked together (or group them))
change the grids layouts of the components when switching to tablet/mobile views (more technical but we keep only one component)
Either way, one has to manually change something on every section component when changing viewports.
I’ll try different solutions to see what’s easier for the user, but I agree that would be great to quickly transform a layout for various viewports.
Once I’ll have completed a bit more the file I’ll be happy to send it to you with the design token json file if you want to have a look, thanks!
I have a question regarding a blocking I encounter in my library development, and would be interested to hear any user thoughts about it.
The library components use tokens, which are obviously present in the library file (file A).
For example, there are tokens for section widths and paddings.
Now if I create a new file in Penpot (file B), and connect to my library (file A) to import those components, it works fine.
But:
if I need to edit the value of a token I have to open the library file (file A) to do so.
if I want to to use some tokens in file B, for example if I’m creating a layout that’s not in my library, I definitely need to have those tokens available to me.
There’s no way to sync tokens between two Penpot file (nor to connect to a token file like we do for libraries).
So currently the best option would be to export and reimport the tokens json file from File A to file B correct?
Tokens are synced through libraries and components. If you have components with tokens applied, any files using those components will reflect any changes made to the tokens. The thing is, the tokens won’t show up in the sidebar of that file — they’re there, just not visible. We know this isn’t ideal, but for now, that’s how it works.
You can also reimport the tokens from the library into the file. If they are exactly the same, they should apply without issues.
Thanks Carolina yes that’s what I ended up doing and it works fine, it doesn’t take more than 30 seconds to export and import the tokens into the working file, so that’s alright
I’ve made some changes to the way I present my tokens and themes.
Also to create responsive designs, I decided that every section exists in two variations: desktop and mobile (tablet could also be added of course).
One could also first create a page in desktop for example, and then manually adapt the section elements for another viewport. But there’s no instant way to turn a layout from desktop to mobile just by changing the value of the page width token for example.
Anyway, if anyone wants to have a look, I’m sharing the current library I started to build.
It is still at a very early stage of development, only a few sections were recreated for mobile (I started with desktop sections). And more generally speaking, my goal is to provide a larger range of layout options.
I quickly wrote a first user guide draft, I hope it’s not too confusing!
@juan.delacruz if you have time to look at it and have any feedback I’d also be very interested to hear it!
