alexwidua / figma-easing-gradients Goto Github PK

Right now, interpolation happens (afaik) in sRGB gamma space. Since we're adding gradient stops, we can affect how the colors in the gradient are interpolated.

With a different color space, this would look more natural for example:

See photoshop's documentation

Options that might be interesting:

• Perceptual
  • oklab
  • L*a*b
• HSL / HSV
• Linear
• et cetera

When the selected gradient node is nested (Frame, Group), the cloned node (which is used to preview and apply the gradient) is cloned
to [0,0] instead of the selected node's position.

Right now the plugin adds N = 15 steps between each stop, but this could be determined better dynamically

Each segment being a linear interpolation, we could pick

• dynamically subdivide until the greatest error from the curve is less than some threshold in RGB
• dynamically subdivide to minimize noticeable changes ie based on the size that the gradient is displayed
• pick N, but optimize the locations to optimally reduce the error from the true curve (ie more in areas of greater curvature)

After using it for awhile, I wish I could click "reset" that would bring it back to its original state with just two color stops so that I could adjust the color, and then reapply the easing gradient.
(Via [at]baldur in Figma community, Comment Link)

Is there a way to do away with adjusting the spline curve manually for most use cases?

Assume two-gradient-stop case for simplicity.

I think there are two rough kinds of gradient:

Exponential Falloff

• simulates a shadow in a diffuse environment
• initial slope should be negative
• final slope should be 0

Easing

• initial and final slopes should be 0

Comparison to Photoshop model

I think the photoshop model seems slightly more intuitive for the easing case, with

• a "smoothness" parameter that roughly adjust the interpolation to hit a slope of 0 at each control point
• midpoint adjusters to adjust how the model biases the interpolation for each interval

Overall, I think that the midpoint adjusters in Ps don't lead to a nice-looking result. But, I like the idea and their function could nicely align to moving both handles in the both-slope-0 case

With my changes, it can be unintuitive where you add a gradient easing and go to change the transform on the gradient.

Then you reset the easing and the transform also resets.

Possible ways to fix?

• do a similarity comparison with the other gradients on the layer to copy over the other settings (can be tricky if they changed one of the colors)
• add a copy of the gradient in the fills, hiding the original instead of replacing. you can reset yourself by just deleting that gradient. if you change the transform on the eased gradient, then that would get copied across if they're still next to eachother in the list

Little demo with LCH interpolation on a radial gradient. I just used shift-X to swap to a stroke, though that messes up the logic I had around the saved fills a bit. So maybe this use case should be considered.

Have you considered adding support for multiple stops + respecting the starting positions of the stops? If I have a gradient with multiple color stops, right now the plugin only takes the first and last colors into account, and also places them at 0% and 100%, respectively.

This results in angular gradients having this harsh transition point at 0%