Design Tokens Support | External Feature Requests

Design Tokens Support

John Reilly

Be able to import design tokens into Protopie (Motion, Typography, Spacing, Color) via JSON file or other

July 8, 2021

ALEN KHODUZADEH

John do you have a example on how it works, I've introduced to this concept through MB Motion Blog but there is not alot of detail how things get connected, also besides Json, sometimes we do have custom Composes which has images

Judy Liu

Design tokens are crucial for the scalability of design systems. Having a central place where colours are stored enables designers to easily update colours and have the changes applied across all designs automatically. We currently have this system in Figma and it is incredibly efficient. Even having a central palette that can be accessed across a team would be better than using hex codes.

Patricia (ProtoPie Team)

Merged in a post:

Design System Tokens

ALEN KHODUZADEH

Able to Load and use Color, text, size Tokens, etc in Protopie

Have interactive Library of component to be shared among the teams

July 19, 2023

Patricia (ProtoPie Team)

ALEN KHODUZADEH Team libraries is already supported but it requires being subscribed to the Pro or Enterprise plans: https://www.protopie.io/learn/docs/interaction-libraries/getting-started

ALEN KHODUZADEH

Patricia (ProtoPie Team): Hi Patricia, I'm very familiar With ProtoPie Component Libraries, my request was about tokens

Chandramouli S

Oh yes, this would save loads of time having to key in color codes, spacing sizes, font sizes manually (especially when we have a LARGE Design System). Please consider implementing the design tokens into the system.

Christopher

We have used jsx files for After Effects and Framer to bring consistency to design through tokens.

Ira X

This would be very useful. Import AND create within ProtoPie. I also employ a set of transition/motion properties and would love reuse them throughout a project (as opposed to doing it manually at present). An example set of responses would be Opacity and Move together with their parameters (e.g. duration, delay, easing); one for incoming elements, one for outgoing elements.

Luke Han

Hi John Reilly, we would like to know more about this request. Could you provide some more explanation or examples? Thanks!

Greg Sargent

Luke Han: Design tokens are quickly becoming the standard way design teams use key-value pairs to represent repeatable design decisions. Similar to CSS Variables or just variables in general. Example: Need to color a button? Use the primary color token. 
These tokens could be loaded in via json upload or manually created and referenced via the existing variables feature. 
One possible implementation of this is similar to the way we reference functions now. When focusing the color field, a function CTA could be clicked — allowing the user to select a variable or create a function to generate the color.

Luke Han

Greg Sargent: Thanks for the detailed explanation. Understood!

Greg Sargent

Yes this would be great. At the very least the ability to set color names in the color well.