Penpot Theme Generator

[brunobezerra]

I guess this is where I actually should post this

Hi everyone

I’ve recently built a Penpot Theme Generator and wanted to share it with the community so you can test it, use it, and hopefully share some feedback.

Penpot Theme Generator

This tool helps you visually create design token sets and export a Penpot-compatible JSON, making token creation and management more visual and straightforward.

My name is Bruno, I’m a Product Designer / Product Owner from São Paulo, Brazil, and a Penpot enthusiast. This is my first post here, and I hope this tool is useful to others working with design systems and tokens.

Feedback is very welcome

[LauraKalbag]

Hey @brunobezerra, this looks really cool! I like how you provide a preview when creating a typography token.

Right now, the generator seems have the same capabilities for creating tokens and sets inside Penpot. Do you have plans to include any other features that would provide an extra benefit over using Penpot for creating tokens?

Some cool features I’d love from a theme generator:

• generating colour scales/ramps from a chosen colour token
• generating size scales for dimensions (and any size-related tokens)
• bulk-editing of token names
• WCAG accessibility checking of colour contrasts for colour tokens

[brunobezerra]

Hi Laura! Thanks for the comment!

I really liked the suggestions. I’ll be sure to continue with future improvements to the tool.

Some of the suggestions you gave I have considered for the launching, but kept for future versions, like the generation of color scales.

Guess I’m starting to have a roadmap

[brunobezerra]

Guess we have an 1.1 update? Updates published recently:

• New “Select all” button allowing to select all the tokens at once
• Bulk editing of token names
• Bulk deleting

Fixed:

• when changing names of a token, another token that was referencing it will have its value changed to the new token name
• default sorting was Name (A-Z), it caused tokens to move around as you renamed them; now default sorting is actually none, which fixes the behavior

[Sulcalibur]

Love this @brunobezerra - great job champ!!!

[LauraKalbag]

@brunobezerra

Guess we have an 1.1 update

These are fabulous updates, thanks @brunobezerra!

@brunobezerra

when changing names of a token, another token that was referencing it will have its value changed to the new token name

That’s such a useful feature.

Edit: I just tried this and it didn’t update the referencing tokens. Perhaps because they were in another set? I was going to share the export file, but it won’t let me because of the errors (but that’s also such a helpful feature!!)

[brunobezerra]

Hi @LauraKalbag !

I’ll take a look at it, thanks for sharing and thanks for the kind and supportive words

[gabriel]

@brunobezerra

sharing and thanks for the kind and supportive

Amazing job @brunobezerra well done!

During Penpot Fest I talked with Mike Kamingga about something similar.
Check this tool, it helps you to built accessible design systems. Once you have finished defining atoms, molecules and so on, it let´s you export design tokens.
It does support Figma, I tried to import them inside Penpot but unfortunately they don´t seem to be compatible.

You can also check this other threads.

UI Design with Penpot | Hands-On Demo, Dec. 11

Hi @LauraKalbag ! Let me suggest to take a look to Accessibility Theme Builder, I find it an amazing project. It helps you out creating an accessible design system by leading the user through a series of forms and you end up with the design tokens. I have created one example with their demo and now I´m looking how to import it into the Penpot server from Token Studio that supports import and export design tokens. They have a Figma workflow and it would be wonderful to do something similar fo…

Pencil, the Penpot Design System

Hi, Thanks a lot for sharing the design system used by Penpot. Being able to study it is very useful for understand what a design systems is and how it works. I share two questions and some reflections: How would this design system be if design tokens would have been applied? I made the experiment of importing Pencil file into the Tokens Studio instance of Penpot. It has some design tokens capabilities activated. The supported tokens right now by Tokens Studio instance are color, border ra…

[brunobezerra]

Version 1.2.1 launched

New

• Supports shades generation from a single color
• Color convertion from Hex to RGB/RGBA and vice versa.
• New "Simple view” for the color tokens, users can now have a simplified row view with all the color palette generated as opposed to the default detailed view
• When in Simple view mode, clicking/touching a color token copies its value to the clipboard

Fixed

• Renaming tokens (either in bulk or single) will update referenced tokens automatically

Demo: https://youtu.be/hc02b4pXDy4

[LauraKalbag]

@brunobezerra you’re on fire!

This is such a time-saver.

[Louis]

Wow amazing Bruno thanks for creating and sharing such a tool, this is really cool and well done!

I just had a quick glance at it but I’ll take some time to try it in the coming days

[brunobezerra]

New updates!

Penpot Theme Generator 1.3 allowed the user to export the tokens as a Penpot JSON or a CSS file:

Version 1.4 made possible users to import from in-built Libraries (besides importing you own JSON file), being shadcn/ui themes the first one:

[ImpactNeel]

Can we collaborate on expanding this product for penpot users, diving Design System including codes, animations and motions, Adoptions and many more

[brunobezerra]

Hi! That sounds interesting. How could we maybe make this happen? What do you have in mind?

[ImpactNeel]

What I have is like a roadmap, we don’t want penpot theme generator for just design tokens functionality which penpot has already, we can go deeper like create a system for not just semantic variables for components variables, Cards variables, breakpoints and also jumper variables…. A lot more, it will be penpot go to stack for beginners who are new in using penpot variants and design tokens