Suggestions for linear gradients

Plasmic Studio Questions
1

I struggle with Linears.

I cant get them to look like in Figma. I suggest either adding the line dragging functionality from Figma, or giving use the ability to paste in the css code we get from the inspection tab of Figma. (eg: linear-gradient(210.55deg, #353132 -3.02%, #2B2627 93.08%) )

I also want to note that it took me a while to figure out, that there are no Style tokens for Linears (and you meant for s to use Background mixins).

Also, I don’t think one is able to remove a color inside a Linear. The back key just deletes the marked element.

2

The linear panel definitely can use improvement, thanks for the feedback! One note - you can remove markers by dragging them away

3

In the meantime, I’m overriding those background in React.

though I’m still not satisfied with how it looks.
shadows or Linears always look smoother in Figma. And more “layered” when rendered by the browser (not because of Plasmic). Not sure why that is.

4

image.png
image.png884×416 56.5 KB

5

speaking of style overrides:
how does one override the style of a subcomponent?

In this example, sectionSettings is an element. Overriding it’s style works fine.
but searchBar and sourceButton are components

image.png
image.png1618×210 89.1 KB

6

it works for sub-components as well actually. It’s just typescript complaining.

7

We’ll fix the typing issue, thanks

8

For some reason the first screenshot you pasted above is showing up just as a gray box for me

9

if you expand the grey boy you can see that it’s a linear and it has these layered lines that I was referring to, though you can barely see it because I only took a screenshot of a small section.

10

I said, that it is working… well… the sourceButton subcomponent isn’t scaling for some reason. All it’s values are em, but it doesn’t matter because the override is simply not taking effect.
Any ideas?

11

btw, if it helps to fix the typing issue, here is the ts error on searchBar (which is applying the override, as it should)

image.png
image.png1824×358 194 KB

12

and when the searchBar line is removed (but the sourceButton line is kept) the entire component complains about unexpected extraneous props

13

By default, the component wrappers we generate (SearchBar.tsx etc) don’t accept a style prop, only the className prop. But you can just add the style prop to SearchBox.tsx and pipe it to the root, and it should work!

14

odd though, that the style prop seems to work on some components.
Would be a useful universal prop to work consistently.

15

I ended up passing it down the old fashioned way:

image.png
image.png950×128 42.3 KB

16

and inside each of those:

root={{ ref, style: {fontSize: `calc(${sizeFactor}*16px)`} }}
17

but the sourceButton still wont resize :face_with_monocle:

18

hmm could you inspect the dom and see? could be that Plasmic is outputting some style on the text that is overriding the inherited font size

19

no, nothing of the sort. the fontSize is whatever I tell it to be inside plasmic.
the override with the factor is just not taking effect

20

hmm, from the SourceButton component, what do you see as the props passed in?