How to make element conditionally shown?

Plasmic Studio Questions
1

I have this file that gets generated with Plasmic Sync.
But I need it to generate a condition statement like here: {args.color ? ( and args.size ? (

How do I go about adding this in Plasmic UI or can you sync this code back to Plasmic some how?

      {args.color ? (
          <ColorComponent
            data-plasmic-name={"color"}
            data-plasmic-override={overrides.color}
            className={classNames("__wab_instance", sty.color)}
            color={args.color}
          />
      ) : ('')}

      {args.size ? (
      <SizeComponent
        data-plasmic-name={"size"}
        data-plasmic-override={overrides.size}
        className={classNames("__wab_instance", sty.size)}
        size={args.size}
      />
      ) : ('')}
2

You can add both ColorComponent and SizeComponent to your component, and make them conditionally visible based on whether $props.color is set or $props.size is set (right-click on “Visibility” for each component element and enter the expression to check)

3

I don’t seem to be able to right click the word “Visibility”. In the same way I can do with “size”

image.png

4

Seems to work with Dynamic Value panel:

image.png
image.png1127×491 26.5 KB