Move your draw

About this plugin

Bring your website to life with textured, animated illustrations made in Figma Draw.

This plugin helps you add a personal, hand-crafted feel to your site by turning your brushstroke-based illustrations into animated code on Figma site.

Demo site

How to

1. Create your illustration in Figma Draw.
2. Wrap the illustration in a frame.
3. Open the plugin, select the frame, and preview the animation using different settings.
4. You can adjust most settings later in the code layer, except for the illustration color, which must be set in Figma before copying the code.
5. Copy the generated code.
6. Paste it into the code layer on your Figma Site to display the animated illustration.

Properties

Base color : The color of the illustration before the animation is finished

Delay : Add delay to the animation start, after when the layer is within the view.

Easing : Choose how the animation progresses over time (e.g., linear, ease-in, ease-out).

Mode: Defines how the paths in your illustration animate:

1. Simultaneous: All paths animate at the same time.
2. Sequential: Each path animates one after the other, only starting after the previous one finishes.
3. Stagger: Paths animate in sequence with a slight delay between each.
4. Stagger Timing (only for Stagger mode): Sets the delay between each path’s animation start. e.g. A stagger of 0.2 causes each path to start 0.2 seconds after the previous one.

Duration: Sets how long the animation runs

1. Simultaneous: Total duration of the whole animation.
2. Sequential/Stagger: Duration of each path’s animation.

Made by Seungmee

for any inquiry : @smee_leee