Move your draw

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 siteHow toCreate your illustration in Figma Draw.

Wrap the illustration in a frame.

Open the plugin, select the frame, and preview the animation using different settings.

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.

Copy the generated code.

Paste it into the code layer on your Figma Site to display the animated illustration.

PropertiesBase color : The color of the illustration before the animation is finishedDelay : 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:

Simultaneous: All paths animate at the same time.

Sequential: Each path animates one after the other, only starting after the previous one finishes.

Stagger: Paths animate in sequence with a slight delay between each.

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 runsSimultaneous: Total duration of the whole animation.

Sequential/Stagger: Duration of each path’s animation.

Play : Sets when the animation will playIn View : Play when the code layer is visible.

On Hover : Play when the code layer is hovered.

Made by Seungmeefor any inquiry : @smee_leee