# Using Tokens for Flex Layout (coming from Figma) **URL:** \ **Category:** Ask the community\ **Tags:** design\ **Created:** [May 5, 2026, 4:13pm UTC](https://community.penpot.app/t/using-tokens-for-flex-layout-coming-from-figma/10555 "2026-05-05T16:13:49Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![mf-bm](https://avatars.discourse-cdn.com/v4/letter/m/4491bb/32.png) [@mf-bm](https://community.penpot.app/u/mf-bm)\ **Post date:** [May 5, 2026, 4:13pm UTC](https://community.penpot.app/t/using-tokens-for-flex-layout-coming-from-figma/10555/1 "2026-05-05T16:13:49Z")
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: ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/7/78b0ae54d30f26b47a4e87e351351790a0850e9d.png) _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 ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [May 6, 2026, 9:22am UTC](https://community.penpot.app/t/using-tokens-for-flex-layout-coming-from-figma/10555/2 "2026-05-06T09:22:05Z")
> [@mf-bm](#): > > now I want to use those tokens during the design process … but I can’t? With your header element selected, right-click the omgPaddingM token, this will bring up a menu where you can [apply the token to any applicable properties for that element](https://penpot.app/blog/design-tokens-with-penpot/#applying-design-tokens). 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. ---
**Author:** ![mf-bm](https://avatars.discourse-cdn.com/v4/letter/m/4491bb/32.png) [@mf-bm](https://community.penpot.app/u/mf-bm)\ **Post date:** [May 6, 2026, 10:16am UTC](https://community.penpot.app/t/using-tokens-for-flex-layout-coming-from-figma/10555/3 "2026-05-06T10:16:51Z")
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. ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/0/024d120b456364a08b450a71d30eaf00ef1abbc2.png) ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/7/7ac0b603e9faffb614eff1c3851aa8649ddf66cc.png) 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. ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/3/35f6b0312359feb489e9518c03bba280ecb9216f.png) -- 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! 🙏