Hello there!
I’m currently trying out Penpot again, because of the new MCP release and the self host option. But before I make further moves I need to understand where Penpot lacks when it comes to my personal Figma habits.
So now I try to use tokens in Penpot, but I struggle really hard reusing them in the design panel. In Figma it’s simple to use variables … everywhere. Sure, it’s a bit hidden, but being used to it I struggle to find the equivalent of that in Penpot.
UseCase: I defined tokens for spacing (unfortunately only in pixel, nor in REM, but fine) and now I want to use those tokens during the design process … but I can’t? Maybe I’m too dumb, but I just can’t find a way to actually use the tokens I have just created in the Layout options:
So please dear community, help me to evaluate wether to make the jump, or wait a bit longer. These are tiny things, but they are bread and butter stuff that I would not want to miss.
What I found so far that might be other dealbreakers for me personally:
prototype states of nested components are not inherited (or I wasn’t able to use them properly)
Layout is my most used feature, but its accordion is default closed
import from figma variables was not working due to export import formats not adapting in json properly (naming conventions, more options in figma for different value types and so on
You can currently apply colour tokens directly from the Design (right) panel by selecting the design token (hexagon with a dot) icon when using the colour picker. I know the team is planning to add more token types to the Design panel soon.
Thank you so much for that fast response! And the link to the documentation, I couldn’t find it quick enough (I watched two videos about components, tokens but I couldn’t find it). I’m happy it works. That being said, applying a token is not visually reflected in the design panel and I need to look at two sides for one value (left tokens, right value) which is a bit counterintuitive.
Also, when I change that number in the designpanel it just removes the token, whereas in figma it’s a two step process: numbers are locked coming from a token and I need to first remove the “lock” (token), and then change the actual value → this is more straight forward userflow wise, because it gives me a visual cue as to why and what is happening.
Figma solves adding a variable/token with an on hover icon where I can apply a variable/token from my list - I don’t say it’s better than your placement of the tokens, it’s just right next to the value and that’s more comfortable mouse-wise.
--
That being said, thank you again! Knowing it’s possible is a good thing! And I hope you don’t mind me comparing Penpot to Figma all the time, it’s just that I need to do some in depth evaluation for my usual workflows before I go to my boss and say “let’s make the jump, I feel confident penpot is what we need for our future.”.
This question is solved and can be closed, but I don’t know how to do that yet either.
Thanks!
