Home

Awesome

<img src="media/hero.gif" width="100%" max-width="600px"/>

Allows easing of gradient fills in Figma using custom cubic-bΓ©zier or step easing functions.

<img src="media/button.svg">

♻️ Refactor

This is a refactor of the original version of the plugin. Besides a frontend change from Vue to Preact, the plugin has other user-facing changes and QoL updates in its version 2.0.0:

Caveat with in-canvas preview

The in-canvas preview works by cloning the selected node and updating the cloned node's gradients on the fly. This comes with the caveat that the cloned node will enter the document's history and possibly pollute it. Even if the user closes the plugin without applying any easing function, CMD+Z'ing will restore the cloned node. However, when testing this feature it turned out that the benefit of a in-canvas easing preview outweighs the nuisance of this caveat. I'd like to hear more opinions on this.

✨ Usage

  1. Go to Plugins > Easing Gradients
  2. Select a shape with at least one gradient fill 🎨
  3. Use one of the easing function presets or drag the control handles for custom easing πŸ–οΈ
  4. Apply easing ✨

The plugin is 'gradient-agnostic' in that sense that it doesn't care about the type (linear, radial etc.) and orientation of the gradient. It takes the first and last color stop as parameters and will ease the gradient with the given easing function value. One caveat with this is that all other color steps in between are discarded.

🚧 Development

  1. npm i β€” Install dependencies
  2. npm run watch β€” Bundle the plugin and watch for changes πŸ‘οΈ

πŸ’­ Motivation

@Matan Kushner's existing Figma plugin does a great job but lacks an user interface and customizable easing functions. I took this as an opportunity to extend the plugin with a set of features.

I'm grateful for @Andreas Larsen for putting out his work on easing gradients and @Matan Kushner for creating the easing-gradient plugin β€” his project was a great guidance how to initially tackle this project.

πŸŒ€ Misc

This plugin uses the amazing create-figma-plugin library.

πŸ“ License

MIT