Improve design tokens, syncing, plugins, and user restrictions within Plasmic

Hey everyone, I’ve been experimenting with Plasmic and I’ve got some ideas to share.

First off, Plasmic is awesome. But it’s more than just a typical website or app builder. It can do stuff that other tools like Webflow or Framer can’t, especially when you’re part of a big team working on a large project.

Let me break it down:

Imagine a team that wants to speed up its design and development process. They want to move from tools like Figma to something more comprehensive like Framer or even Webflow. The idea sounds great: draw a prototype, build it, add some extra code stuff with a developer, and launch it all from one place, no more back-and-forth between designers and developers. But when you try to use these tools with existing designs and codes, things can get a bit tricky, sometimes even impossible. And we can’t forget that most of the companies are already running. It’s rare when a company abandons everything and builds everything again inside a new platform like that.

Website builders are becoming more powerful, but they often overlook an important aspect for big teams: design tokens. Right now, if you want to share these design tokens between your design and dev team, it requires a lot of juggling between different tools just to TRY to share the same info in different places (like Figma, coding software, docs, etc).

I’ve been in the design and front-end field for more than 10 years. Surely, there must be a better way to make UI than to draw them and then code them.
So, I think Plasmic can bridge this gap between design and dev. It’s almost there, but here are a few ideas on what could make it even better:

1 - Design Token Support: Plasmic should work with all kinds of design tokens. Right now, it doesn’t include some things like radii (corner roundness). It could be beneficial to organize these tokens as we do with UI Frameworks like Styled-System, ChakraUI, and others.

2 - Syncing: It’s cool that Plasmic tokens can be synced to theo JSON file. But it would be even better if Plasmic allowed a two-way sync with some main tokens files.

3 - More Plugin Power: Plasmic is great at letting developers make new things for the Plasmic editor. But, I think it can do even more. A plugin system that lets us control tools on Plasmic’s canvas (like the margin and padding drag tool) and make custom code templates would be really handy. This could make integrating current code into Plasmic easier.

4 - User Restrictions: It would be awesome if we could set rules about what a user can or can’t do in the editor. For example, I want my team to use only our components, tokens, and data providers. It would be helpful to hide Plasmic’s default components.

That’s it from me for now. I just want to say, Plasmic is amazing, and I’m really excited about its future.

1 Like

Thanks for the kind words!

Great feedback, would love to add more design tokens! Libraries all have different systems of tokens, besides corner radius any others that are top of mind for you?

The user restrictions already exist! It’s called content creator mode

About tokens: Maybe a more complete set:

zIndex
opacity
colors
fonts
fontSizes
fontWeights
lineHeights
letterSpacings
sizes
spacing
radii
durations
easings
animations
blurs
borderWidths
borders
shadows
gradients
2 Likes

about the user restrictions. I was talking about developers and designers. We don’t want to let our designers or developers use anything that is out of our design system. So we can ensure consistency

+1 on all of the suggestions here

1 Like

Hi, is this something that might make it into a near term sprint? One of the design tokens that are especially needed is the opactity for color so that when setting a color you can have separate tokens for the color’s value and for its opacity.

The other tokens are also important as well since the only way to do some of them; for instance, shadows and letterSpacings, is by setting styles. Having gradients be available as a token will make it easier to build modern sites.

Secondly, having the ability to do calculations within the tokens will enable a more responsisive method of design.

Finally, being able to set specific over rides when importing a project so that the token from the imported component always gets overridden with a token from the base project when duplicating a project will really help with theme. I image the UI could look similiar to this, where you’d have the token and its option for replacement set, each time the imported component gets a new revision and you’d have to duplicate it in your project, you wouldn’t have to go through the extra effort of resetting the replacement values each time.

1 Like

Hi, just adding to the above with a demonstration of the value of having calc for tokens