# Is it possible to create breakpoints modes like in figma?

**URL:** <https://community.penpot.app/t/is-it-possible-to-create-breakpoints-modes-like-in-figma/9731>\
**Category:** Ask the community\
**Created:** [August 18, 2025, 9:45pm UTC](https://community.penpot.app/t/is-it-possible-to-create-breakpoints-modes-like-in-figma/9731 "2025-08-18T21:45:29Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mehmet\_Tuz](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/mehmet_tuz/32/8705_2.png) [@Mehmet\_Tuz](https://community.penpot.app/u/Mehmet_Tuz)\
**Post date:** [August 18, 2025, 9:45pm UTC](https://community.penpot.app/t/is-it-possible-to-create-breakpoints-modes-like-in-figma/9731/1 "2025-08-18T21:45:29Z")

</div>

Hi Everyone, I wonder that is that possible within Penpot creating modes or something esle like in Figma? Such as different typography scale or spacing for every breakpoint.

---

<div class="post-metadata">

**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:** [August 19, 2025, 9:10am UTC](https://community.penpot.app/t/is-it-possible-to-create-breakpoints-modes-like-in-figma/9731/2 "2025-08-19T09:10:40Z")

</div>

You could do this using themes and sets in design tokens, and that would translate well into the development process.

---

<div class="post-metadata">

**Author:** ![Mehmet\_Tuz](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/mehmet_tuz/32/8705_2.png) [@Mehmet\_Tuz](https://community.penpot.app/u/Mehmet_Tuz)\
**Post date:** [August 19, 2025, 9:24am UTC](https://community.penpot.app/t/is-it-possible-to-create-breakpoints-modes-like-in-figma/9731/3 "2025-08-19T09:24:19Z")

</div>

Hi Laura, thanks for your reply. So ia there any tutorial or something else for this case.

---

<div class="post-metadata">

**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:** [August 19, 2025, 10:18am UTC](https://community.penpot.app/t/is-it-possible-to-create-breakpoints-modes-like-in-figma/9731/4 "2025-08-19T10:18:52Z")

</div>

There is now 😉

Here’s a Penpot file showing how I would do this:

[Tokens and breakpoints.penpot](https://community.penpot.app/uploads/short-url/hEyhLx3BzkuKiJEf4JrP9IoOle2.penpot) (132.4 KB)

And [here’s a six second video showing you switching between (breakpoint) themes](https://share.cleanshot.com/h7hRzrFq).

---

<div class="post-metadata">

**Author:** ![Mehmet\_Tuz](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/mehmet_tuz/32/8705_2.png) [@Mehmet\_Tuz](https://community.penpot.app/u/Mehmet_Tuz)\
**Post date:** [August 19, 2025, 2:11pm UTC](https://community.penpot.app/t/is-it-possible-to-create-breakpoints-modes-like-in-figma/9731/5 "2025-08-19T14:11:59Z")

</div>

Vamos! You’re amazing Laura, thank you so much. It’s totally helpfull. Cheers.

---

<div class="post-metadata">

**Author:** ![azazy](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/azazy/32/8438_2.png) [@azazy](https://community.penpot.app/u/azazy)\
**Post date:** [August 20, 2025, 11:14am UTC](https://community.penpot.app/t/is-it-possible-to-create-breakpoints-modes-like-in-figma/9731/6 "2025-08-20T11:14:21Z")

</div>

Thank you, Laura!

I’m going to try this out, you’re doing amazing job for the community..

---

<div class="post-metadata">

**Author:** ![IvanTheGeek](https://avatars.discourse-cdn.com/v4/letter/i/8c91f0/32.png) [@IvanTheGeek](https://community.penpot.app/u/IvanTheGeek)\
**Post date:** [March 14, 2026, 8:00pm UTC](https://community.penpot.app/t/is-it-possible-to-create-breakpoints-modes-like-in-figma/9731/7 "2026-03-14T20:00:12Z")

</div>

Framing: dev role here, not design knowledge (but trying). So using themes is kind of a “hack” for not having explicate viewport settings, right? If correct, what if I do have themes? light/dark, one with different layouts, etc.

does this translate to:

- light-desktop
- light-tablet
- light-mobile
- dark-desktop
- dark-tablet
- dark-mobile

or how would these cross connect to join together to get the themes managable?

---

<div class="post-metadata">

**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:** [March 16, 2026, 11:16am UTC](https://community.penpot.app/t/is-it-possible-to-create-breakpoints-modes-like-in-figma/9731/8 "2026-03-16T11:16:03Z")

</div>

> [@IvanTheGeek](#):
>
> Framing: dev role here, not design knowledge (but trying). So using themes is kind of a “hack” for not having explicate viewport settings, right?

It’s kind of a hack, but also just translates well to CSS too. I think of it more like providing `@media` rules. Each set contains the same token, but its value is changed based on the viewport size. Which is pretty similar to writing something like this in CSS:

```css
nav { /* this might be equivalent to your default/global set */
  width: 100%; /* this could be a nav.width token */
}

@media (max-width: 1024px) { /* tablet set */
  nav {
    width: 900px; /* in the tablet set, this is the value for the nav.width token */
  }
}

@media (max-width: 1200px) { /* desktop set */
  nav {
    width: 1100px; /* in the desktop set, this is the value for the nav.width token */
  }
}

```

Arguably, we should be moving away from fixed breakpoints (and pixel sizing) but that’s a different discussion 😄

> [@IvanTheGeek](#):
>
> what if I do have themes? light/dark, one with different layouts, etc.
> 
> does this translate to:
> 
> - light-desktop
> - light-tablet
> - light-mobile
> - dark-desktop
> - dark-tablet
> - dark-mobile
> 
> or how would these cross connect to join together to get the themes managable?

Importantly, \*\*multiple themes can be active simultaneously\*\*. As you say, they cross connect. You can group them as “modes” and use the themes to determine which token sets are active when that theme is enabeld. So you don’t need to recreate all your tokens for each theme. Again, this is like CSS, in that your rules for `@media (max-width: 1200px)` and `@media (prefers-color-scheme: dark)` can be totally separate and not affect each other. (Or you can choose conditions that apply when they both interact.)

 ![Global mode with an Always-on theme, Color mode with light and dark themes, Brand mode with themes for NeonBooks, Eco Tools, and Core.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/6/6e70744999738fe38ab641b1bdaa8340f8154b08.png)

So for your list of themes:

> [@IvanTheGeek](#):
>
> - light-desktop
> - light-tablet
> - light-mobile
> - dark-desktop
> - dark-tablet
> - dark-mobile

You would have:

- Breakpoint (mode/theme group)
  - Mobile (token set)
  - Tablet (token set)
  - Desktop (token set)

- Colour (mode/theme group)
  - Light (token set)
  - Dark (token set)

Tokens can also reference other tokens. So a theme might only contain one token that has a ripple effect throughout the other tokens. (Like using a CSS custom property or variable in code.) This is how I mostly work with “breakpoint” tokens. I use it to set the width of the viewport board using a `breakpoint` token, and design everything inside that board to be responsive. Sometimes I’ll also scale a font size token `multiplier` slightly differently based on breakpoint, or have a `max-width` token for text.

You might find the demo file I made for the last hands-on session useful if you want to play with theme setup:

> [@Penpot ✕ Tokens Studio Hands-On Demo, Feb 25th](https://community.penpot.app/t/penpot-tokens-studio-hands-on-demo-feb-25th/10341/2):
>
> Here’s the file for the demo in today’s hands-on smiling_face (video above!) [Design mocks.penpot](https://community.penpot.app/uploads/short-url/is1T65CmANoJYQeb4nT8RJ2rPDN.penpot) (5.7 MB) And here’s the random color generator: [Random color generator.penpot](https://community.penpot.app/uploads/short-url/5E0Tsr3ehc5LB3uVPlfzHXOvlco.penpot) (72.4 KB) Let me know if you have any further questions or any other practical demos you’d like to see in the future!

---

<div class="post-metadata">

**Author:** ![IvanTheGeek](https://avatars.discourse-cdn.com/v4/letter/i/8c91f0/32.png) [@IvanTheGeek](https://community.penpot.app/u/IvanTheGeek)\
**Post date:** [March 16, 2026, 12:47pm UTC](https://community.penpot.app/t/is-it-possible-to-create-breakpoints-modes-like-in-figma/9731/9 "2026-03-16T12:47:27Z")

</div>

Thank you so much for expounding on this! Several key points I did not know or understand.

For the devs, a design token can be likened to a named value that can be reused. Like a let X= binding in F#, a variable or constant.

Being able to apply these to multiple groupings is they key insight to me. This solves in my head how you have the “breakpoint” and themes at the same time.

Also, been learning about graphs “on the fly” or “on the job” so to speak this past week. HTML and CSS and JS are all each graphs and when together one can interconnect the graphs. Important because ai is apparently really good at understanding graphs and pattern matching, and it starts find where there are holes in the graphs.

Ask chatgpt how HTML CSS JS are graphs.

Looking forward to watching your video!