EaseKitDocs
Export and share · SVG and frames for Figma
Documentation

SVG and frames for Figma

Paste a frame, or several key moments side by side, into Figma as editable layers.

Take your animation back to Figma without a plugin: EaseKit puts SVG on the clipboard that Figma turns into editable layers, named like your EaseKit layers. Several moments side by side become Smart Animate states.

Copy one frame

  1. Move the playhead to the moment you want.
  2. Choose Edit → Copy as SVG (⇧⌘C).
  3. In Figma, press ⌘V.

Copy several frames

  1. Choose Edit → Copy Frames for Figma….
  2. Pick the moments: Key times (at most 2–24 frames), Every N s (0.1–5 s) or Count (2–24 frames, evenly spaced).
  3. Choose whether to Include background, and check the times in the preview.
  4. Click Copy N Frames, or Save .svg… for a file.
  5. Paste into Figma. The frames sit in a row, 80 pt apart, each a group named like Frame – 0.40s.
Frames pasted into Figma, ready for Smart Animate

Because layer names repeat across frames, the frames work as Smart Animate states: turn each group into a frame and connect them in a prototype.

What's kept

  • Groups, gradients, strokes (dash, caps, joins, inside and outside), shadows (as Figma drop and inner shadow effects), layer blur, masks, blend modes and trim.
  • Smooth corners, approximated close to Figma's corner smoothing; independent corners as a path.
  • Text as Figma text layers. Images embedded once. Components flattened.