# Struggling to use Penpot Tokens and Components **URL:** \ **Category:** Ask the community\ **Tags:** design\ **Created:** [October 20, 2025, 10:20am UTC](https://community.penpot.app/t/struggling-to-use-penpot-tokens-and-components/9993 "2025-10-20T10:20:47Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![currybytes](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/currybytes/32/7138_2.png) [@currybytes](https://community.penpot.app/u/currybytes)\ **Post date:** [October 20, 2025, 10:20am UTC](https://community.penpot.app/t/struggling-to-use-penpot-tokens-and-components/9993/1 "2025-10-20T10:20:47Z")
[Site Architecture Map.penpot](https://community.penpot.app/uploads/short-url/4l4CsyhLrwFFYldDAK2ptlMeucB.penpot) (268.3 KB) Hi everyone, I made a site architecture map in Penpot but I can’t figure out why it’s not very maintainable. Problems I’ve noticed: - I don’t know how to make the pointy part of the arrow’s dimensions fixed while I can scale the lines to connect the nodes with the individual boxes. I made a workaround by making the pointy bit a component and the arrow another one, but there’s got to be a better way to do this. - The text in the box are supposedly centered but you can see “Client Template” isn’t actually centered; I’m not sure why that’s happening. - The boxes are not spaced out evenly, solely arbitrarily. I tried to use Spacing Tokens to make spacing but couldn’t figure out how to apply them. I’ve been reading the documentation and the YouTube videos and I would appreciate your help as I’m trying to convince my company to use Penpot for design work, but if I can’t figure out how to use it in a more scalable, maintainable, and responsive way then what’s the point? I only know how to make like really shoddy first-draft versions but need help to polish this site architecture map. Your help is greatly appreciated. ---
**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:** [October 20, 2025, 3:18pm UTC](https://community.penpot.app/t/struggling-to-use-penpot-tokens-and-components/9993/2 "2025-10-20T15:18:09Z")
> [@currybytes](#): > > I don’t know how to make the pointy part of the arrow’s dimensions fixed while I can scale the lines to connect the nodes with the individual boxes. I made a workaround by making the pointy bit a component and the arrow another one, but there’s got to be a better way to do this. This isn’t a terrible workaround. But the easiest solution would probably be to use stroke arrows instead of custom arrows. You can use your existing path lines and then set the end of each path to “Arrow” in the stroke settings. There are two different arrow styles, and the size of the arrow scales with the thickness of the path. If you want to customise the style of the arrow beyond these settings, I think your current approach is the best way. ![Stroke arrows.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/f/fc3e35650d416d1e45699cf61a8c8c1d52a99fed.png) > [@currybytes](#): > > The text in the box are supposedly centered but you can see “Client Template” isn’t actually centered; I’m not sure why that’s happening. This is because the text is exceeding the width of its box. You can tell this when you select the Text layer (see that the **Client** text is actually centre-aligned to the box). ![Text overflowing its box.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/d/d58fea26bd6a68b49e5a990ac5c6f67e35d7a09f.png) You can fix this by making the box wider: ![A wider box means the text is centred.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/b/bebcc2551a152a9a858da989e0e8b39938537f8e.png) I would be tempted to make each of these web page boxes into flex layouts, so that you can automate making the text box fill the width of the web page box. > [@currybytes](#): > > The boxes are not spaced out evenly, solely arbitrarily. I tried to use Spacing Tokens to make spacing but couldn’t figure out how to apply them. Do you need to make this layout responsive? I think that would be tricky but not impossible, let me know if you want pointers on how to do this (I would probably use grid layout.) If you’re using flex or grid layouts to automatically arrange your elements, then spacing tokens are valuable because they can automate the spacing in your layout. Spacing tokens only work on padding, margins, and gaps. This explains why you couldn’t work out how to use them, as there are no flex or grid layouts used in your design. For a static layout like this, where you’ve positioned elements manually, I would probably use a background guide to help align my elements. You can add a guide to any layer (I would add it to the board) from the Design panel: ![Layer with square grid guide.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/1/186e920b2554993064ce0d0dc8104b072991b41f.png) Once you have a guide, you can move and resize your elements so they fit the guide squares, creating a more uniform layout: ![Page aligned to the grid.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/b/b3700e3a64c26f36d842ed65420372a915e10d2d.png) For spacing, I would think in multiples of squares. So in a row of web pages, I might choose to consistently use four empty squares between each page. I hope that makes sense! Please let me know if there’s any specific videos or blog tutorials that would help you out in future. I always appreciate feedback and ideas 😄 ---
**Author:** ![currybytes](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/currybytes/32/7138_2.png) [@currybytes](https://community.penpot.app/u/currybytes)\ **Post date:** [October 22, 2025, 11:00am UTC](https://community.penpot.app/t/struggling-to-use-penpot-tokens-and-components/9993/3 "2025-10-22T11:00:56Z")
Thank you for the prompt help! Going above and beyond~ This is why I stick with Penpot even if I don’t know what’s happening XD. I was able to use the guide and I resized the pages to fit the squares. I don’t think I need flex or grid layouts for the sitemap, but I think I should learn how to use them since I want to make a design style guide next. [Site Architecture Map v.2.penpot](https://community.penpot.app/uploads/short-url/s7jZ2ec2s931TJsGKOdToEDQC26.penpot) (304.1 KB) It’s looking a lot better, but I think I’m still missing a couple of pieces. - Is there a way to make the arrows auto align with the center of the boxes? - The arrows are vectors. - Is there a way to make the arrows align on top of each other perfectly? Otherwise there’s like fuzziness, and like I’m zooming in like 300% to try to align perfectly but like I feel there’s some way to probably snap it on. - Even though my snap to ruler guides is enabled, the boxes don’t snap to the grids… The right box cut off on the right is because I manually like zoomed in 300% to align but I think there’s probably a less manual way of doing it. ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/5/5db1b7932b761363260650719d689613d6d0e56e.png) I now also know that you made a Penpot course so I’ll get started on those modules to help me get used to the UI and Penpot fundamentals. [Penpot UI Design Course](https://penpot.app/courses/) ---
**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:** [October 22, 2025, 3:36pm UTC](https://community.penpot.app/t/struggling-to-use-penpot-tokens-and-components/9993/4 "2025-10-22T15:36:02Z")
> [@currybytes](#): > > I don’t think I need flex or grid layouts for the sitemap, but I think I should learn how to use them since I want to make a design style guide next. These are my introductory tutorial and video on flex and grid layouts: - [Intro to Flex and Grid layouts - Hands-on live demo](https://www.youtube.com/watch?v=64O8qi51Jqc) - [Why you should use Penpot’s flexible layouts for your responsive designs](https://penpot.app/blog/penpot-flexible-layout-for-responsive-design/) I’ll get into a good use case for flex in your diagram further down 😉 > [@currybytes](#): > > Is there a way to make the arrows auto align with the center of the boxes? > > - The arrows are vectors. > [@currybytes](#): > > Is there a way to make the arrows align on top of each other perfectly? Otherwise there’s like fuzziness, and like I’m zooming in like 300% to try to align perfectly but like I feel there’s some way to probably snap it on. To help solve both of these issues, I’d recommend breaking the arrows into two parts: the connecting paths that join the pages to the previous paths, and the arrow part that points directly to each page. ![Up arrow, down arrow, and connecting line.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/a/a3e6d439e628d46b73ec82ad74e94594a8c2a28a.png) Then you can connect these components together to form the paths, while only needing to worry about overlapping the ends. In order to align the arrows to each page, I’d suggest putting the start and end arrows into the web page component, and use flex to keep the centre alignment. Starting off **making the web page component into a flex layout** : 1. I started by making the browser buttons into a flex layout by selecting the circles and adding a flex layout. This keeps the buttons aligned to each other from left to right, with an equal gap of 4 between them. ![Buttons flex layout.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/7/79ad05d687f9a7122d4718fa23c2727b2176ecfc.png) 1. Then I created a group around those buttons and made that into a flex layout. This forms the box for our browser chrome bar. (You can only really tell it has a bar background if you hide the page background.) This is another flex layout flowing from left to right, and it has a black fill background. ![Browser chrome flex layout.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/5/5ab76d6715dac8216a2ced46d8111c0ea57c4a97.png) 1. Then I added a group around the browser chrome and text for the page itself, and made it into a flex layout. This has a black fill background too. Unlike the other flex layouts, this is aligned in column layout, flowing from top to bottom. This makes the browser bar appear above the text. And it’s all centre-aligned to ensure the objects inside the page will be aligned to the centre if they don’t fill its width. ![Page flex layout.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/b/b9260f7b251c4e8f8385aee7bd27dfe41c730814.png) 1. Finally we come to the text. It doesn’t need a flex layout because its layout is dictated by its containing group, the page layer. But it has a few options we can apply to it as a flex element (an element inside a flex layout.) ![Text flex element.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/7/778c0e79a4fe91bd19fa615bc18c5927cda03f10.png) Once I made my page component, I took the two arrow components and combined them to make a **single arrow component with variants**. ![Combining components as variants.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/7/75246934f24ffe3d4ff63bf8115dfc809a7c977e.png) I gave both variants the property of direction, one variant is arrow up, the other variant is arrow down: ![Arrow variants.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/1/18da5880bebc28df0403ba5d40d20c5313a6c504.png) Now I have my arrow variants, I can make **a component that combines the arrows with the page**. 1. I select a copy of the page component and two copies of the arrow component and create a component: ![Page + connectors component.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/d/d4ec5b01cd85416367318bc12a18edf6e19c1bdd.png) 1. Then I add a flex layout to that component where the layout flows top to bottom in a column, and is centre-aligned. The flow ensures the arrows stick to the either end of the page, and the alignment ensures the arrows are always exactly centre-aligned to the page. 2. Next I create variants for the different arrow combinations in my page + connectors component. This time, using the create variants button from the component options menu to create three variants: ![Create variant.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/c/c146a6b048b151fa643c080b4f7f078f7474ace1.png) 1. I name the shared property of each variant “connectors” and then delete the arrows as needed for the variant of `connectors = in`, `connectors = out`, and `connectors = in + out`. These cover all the different arrow combinations I’ll need for the diagram. ![connectors property with a value of in.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/c/c5ae3b9d760ef82610cbe7e7bd8315d7d9619dac.png) 1. At this point, I also realised I needed an `arrow direction = both` variant for the arrows. And I could easily make that tweak without it affecting my page + connectors component: ![Variant for arrow direction both.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/6/647af936ad017b93a7a8ba10a4be4f80299c6d01.png) With all these components I can now quickly recreate the layout by dragging and dropping, only needing to add text, switch between variants, and adjust the length of the connecting lines: You can download my version of the file below: [Site Architecture Map v.2.1.penpot](https://community.penpot.app/uploads/short-url/y19ihL4FrpPhKxiZvMN5cZGzacE.penpot) (438.8 KB) Sidenote: The exact arrow path alignment was proving tricky because of the extra pixels created by the arrow head and ends. To solve this, I added an equal size board around each arrow and resized the component to fit the board. This is the same technique used to ensure icons align optimally to a grid and each other: ![variant background board technique.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/e/eb4a4c45dc31cc9115d36de0a04a4318550a8feb.png) ---
**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:** [October 22, 2025, 3:37pm UTC](https://community.penpot.app/t/struggling-to-use-penpot-tokens-and-components/9993/5 "2025-10-22T15:37:41Z")
Hahaha, I realise now this could have been a blog tutorial or hands-on demo 😂 I thought this was an interesting use case that others have mentioned before, so I really hope folks find it useful! ---
**Author:** ![schnesen](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/schnesen/32/7964_2.png) [@schnesen](https://community.penpot.app/u/schnesen)\ **Post date:** [October 23, 2025, 7:06am UTC](https://community.penpot.app/t/struggling-to-use-penpot-tokens-and-components/9993/6 "2025-10-23T07:06:24Z")
Thanks @LauraKalbag for this extra in-depth tutorial 🙂 It’s really nice to watch different approaches to solve technical challenges. Sometimes, we are so used to certain workflows or behaviours and miss to look at these challenges a litte bit differently. Good reminder that there is almost always a solution although sometimes not obvious immediately. ---
**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:** [October 23, 2025, 8:39am UTC](https://community.penpot.app/t/struggling-to-use-penpot-tokens-and-components/9993/7 "2025-10-23T08:39:06Z")
It’s a good point that we all have different approaches, and mine is not The One True Way. Everyone brings different experiences and expertise to how they do design. I’m very interested to know if anyone else would propose an alternative approach!