Questions about Ant components

Plasmic Studio Questions
1

I just noticed the existence of the Ant component sandbox.

  1. What is the recommended way to style those components? Is there anything faster than manually editing every single color value?
  2. Are there sandboxes to other UI frameworks?
2
  1. You have to set the prop for each instance of your component manually. What you can do is create some designed components in your project and use them instead of the Antd components. For example, you can create a PrimaryButton component that just has an AntdButton with the primary color selected. Then you can use it in other components instead of the AntdButton. If, at some point, you switch the color, it would automatically change for all instances of this component.
  2. Not yet! Currently we only have native integration with Antd for design systems
3

:thumbsup: And we are taking input! Any particular framework you’re interested in?

4

I am interested in easy to setup frameworks. From my experience so far, it has been very hard to implement basic ui components that follow any style guidelines.

Beware that I am as flexible as one can be with styling. In fact, I just went for https://radix-ui.com/colors in order to define my colors pallet. All I care at the moment is speed of development and visual consistency, not aesthetics or behaviour preferences. All I want is to be able to set up a colors pallet once and from there on start dragging components without ever thinking on styling again.

Still, once I have manually imported the pallet as styling tokens, I find myself having to manually edit every single styling aspect of every component over and over again.

There are 2 things that have bothered me the most in my attempts:

  1. Not being able to generate the styling tokens from the codegen side. (As a quick fix, having a simple JSON view to edit all the values at once inside Plasmic Studio would be a great improvement).
  2. Working with plasmic-tokens in the codegen is super hard and non flexible. The THEO solution needs to be reconsidered.
    ◦ Theo has not been maintained for years
    ◦ the theo file does not export my dark mode variables, only the base ones.
    ~ps: Right now I am in the process of registering the components of unstyled libraries such as https://github.com/ariakit/ariakit and Radix Primitives. Then I will try to somehow style such components using the plasmic-tokens.~
5

Got it!

We are thinking of how to provide first class support for certain design systems to let you theme them globally.

This is the direction we are trying to take plasmic, more focus on speed of building functional frontends even with a minimum spent on selling and aesthetics.

For now, with the ant components, the best thing to do is to override the styles with sass or css. It is annoying because you have to step outside of classmic into code, and in particular css, but it is a one-time cost. The best resource for how to do this is the ant design website.

In terms of consuming the tokens from your code, is there any reason why you cannot use the tokens as CSS custom properties?