Hello people.
I’m trying to convince my colleagues to use Penpot as our design tool. But there is capabilities that I dot not find in it already, and hope you can help me with.
1- Is there anyway to use token names in property panel instead of the value? What about generated CSS code? It will be so pleasing to see CSS variables in the code instead of hard-coded values.
2- Is there a way to use custom variables for components? Say, you want to have a button component and use it throughout the design, so and the labels would be different, of course. So how do you change it without changing the component?
Thanks for your time
Hello @Ahmadreza_Badihi!
1- There is a work in progress to allow us to select tokens and refer to them directly in the design panel, but I don’t know if there is any work being done to make that reflect in the properties or in the code output itself. Would be really nice to have that, but right now, the tool doesn’t have it.
2- The way Penpot deals with components right now points us to change every instance we add to our designs instead of saving values to properties or variables and make them a slot for content (like Figma does). So, as of right now, there’s no way to do it outside changing every instance you need to the label you want to use. If your components have variants, switching between them will retain your changes, so don’t worry about editing directly.
Hope this helps you 
3 Likes
