EaseKitDocs
Tutorials · Figma round trip
Documentation

Figma round trip

Import a Figma frame as layers, animate it in EaseKit, and paste key frames back into Figma for Smart Animate.

Designs live in Figma; motion is easier in EaseKit. In this walkthrough you import a frame from a Figma file, animate it, and send key moments back to Figma as editable frames that work with Smart Animate. About fifteen minutes.

1. Connect Figma once

  1. In Figma, open Settings → Security → Personal access tokens and generate a token with the scope File content: Read-only.
  2. In EaseKit, open Settings → Providers → Figma, paste the token and click Save. EaseKit checks it and confirms “Token saved”. The token is kept in your Keychain.

2. Import a frame

  1. In Figma, select a frame, right-click and choose Copy link to selection. The link must contain a node-id.
  2. In EaseKit, choose File → Import from Figma… (⇧⌘F) and paste the link, then click Import.
  3. Or paste the link on the stage with ⌘V, or into the chat: EaseKit shows Figma link detected with Import.
  4. The frame arrives as editable layers: groups with their Auto Layout, vectors as paths, text in its font, fills, gradients, strokes and shadows, and component sets as components with variants. See Import from Figma for the full list.
Import from Figma with a pasted frame link

3. Animate it

  1. Describe the motion: “Animate this onboarding screen: the illustration floats in, the title and button follow with a 60 ms stagger. Calm.”
  2. Reference exact layers with ⌘L when you want to change one part.
  3. Refine by hand in the timeline and the inspector. Keep layer names meaningful; they travel back to Figma.

4. Paste one frame back

  1. Move the playhead to the moment you want.
  2. Choose Edit → Copy as SVG (⇧⌘C).
  3. In Figma, press ⌘V. The frame arrives as editable layers named like your EaseKit layers.

5. Paste key frames for Smart Animate

  1. Choose Edit → Copy Frames for Figma….
  2. Pick how to choose the moments: Key times (at most 2–24 frames), Every N s (0.1–5 s) or Count (2–24, evenly spaced).
  3. Turn Include background on or off, and check the preview row of times.
  4. Click Copy N Frames (or Save .svg…).
  5. In Figma, press ⌘V. The frames sit in a row, each a group named like Frame – 0.40s.
  6. Turn each group into a frame, connect them in prototype mode and set the transition to Smart Animate. Because layer names repeat across frames, Figma matches them.
Key frames pasted into Figma, connected with Smart Animate

What comes across

KeptChanged or left out
Groups, gradients, strokes (dash, caps, joins, inside and outside)Background blur and glass (no SVG equivalent)
Shadows, as Figma drop and inner shadow effects3D tilt is flattened
Layer blur, masks, blend modes, trimComponents are flattened into plain layers
Text as Figma text layers; images embedded onceMotion itself: Figma gets still frames

Variations

  • Hand it to developers instead: export Motion (React) or SwiftUI from Render.
  • Design review: a share link lets the team comment on the motion itself.
  • From Claude: ask “copy the key frames of my latest animation as SVG frames for Figma”, or have Claude import the frame with import_figma.