Import from Figma
Bring a Figma frame, component or component set in as editable layers, with Auto Layout, vectors, text, components and variants.
EaseKit imports straight from a Figma file through the Figma API. Frames keep their structure and their Auto Layout, vectors stay vectors, text stays text in its font, and a component set becomes an EaseKit component with its variants. Hover and pressed variants are wired to hover and press triggers for you. Nothing moves yet: the import is the design, ready to animate. Animate one element and the rest follows.
Connect Figma once
Importing needs a Figma personal access token, so EaseKit can read the file for you.
- In Figma, open Settings → Security → Personal access tokens (the Create token link in EaseKit opens Figma's settings) and generate a new token.
- Give it the scope File content: Read-only. EaseKit needs nothing else.
- Copy the token (it starts with
figd_). - In EaseKit, open Settings → Providers → Figma (⌘,), paste it and click Save. EaseKit checks it with Figma and says “Connected as …”, then “Token saved — Figma links in chat are detected (or press ⇧⌘F).”
The token is stored in your Mac's Keychain and sent only to api.figma.com. The Import from Figma sheet and the chat show the same Connect Figma form when no token is saved yet.
Import a frame
- In Figma, select a frame, component or component set, right-click and choose Copy link to selection.
- In EaseKit, choose File → Import from Figma… (⇧⌘F), or Import → From Figma… in the toolbar. A Figma link on the clipboard is filled in for you.
- Click Import.
- The design arrives as a new version in the current session (or a new session), with a PNG of the frame attached in the composer as a reference and the prompt started: “Animate this Figma frame “…”: ”. Describe the motion, or animate by hand.
Paste a link
- On the stage: click the stage and press ⌘V with a Figma link on the clipboard. The frame comes in as a new version. Without a token, the Import from Figma sheet opens first.
- In the chat: paste the link into the composer. EaseKit shows Figma link detected (“Import frame as animatable layers”) with an Import button.
What's kept
| In Figma | In EaseKit |
|---|---|
| Frames, groups, components, instances | Groups with the same structure and names. A frame's fill, border, radius and shadows become a background layer inside the group that stretches with it |
| Auto Layout | Auto Layout on the group: direction, gap, padding, alignment (including space between), hug and fixed sizing; children keep fixed, hug or fill and absolute position. Layers that only some variants show collapse in and out when the variant switches |
| Rectangles and ellipses | Rectangles and ellipses, with per-corner radii kept as independent corners |
| Vectors, booleans, stars, polygons, lines | Vector paths from Figma's geometry; stroke-only icons become their outlined stroke |
| Fills and strokes | Solid and gradient fills (stacked), strokes with inside, center or outside position |
| Effects | Drop and inner shadows, layer blur and background blur |
| Image fills | Image layers |
| Opacity, blend modes, rotation, masks | The same |
| Text | Text layers with their font (Google Fonts are downloaded, installed fonts used) |
| Component sets | EaseKit components: the default variant is the base and every other variant is stored as its differences, so switches tween |
| Text properties | Component props |
| Boolean properties | Visibility props on the layers they show or hide (one per layer: “Show icon”, “Show icon 2” …); instances keep their on or off |
| Instances of library components | Instances of an EaseKit component with the library's variants, when your token can open the library file. Otherwise plain groups, and the import says which |
| Instances | Instances with their variant and text values |
| Variants named Hover and Pressed | Hover and press triggers: Hover → Hover, Hover end → back, Press → Pressed, Release → back to Hover. Try them with Interactive |
A laid-out frame or a component comes in as a group (small ones get some room around them on a dark canvas); a screen-sized frame becomes the canvas, with its fill as the background. Linking a component set on its own places one instance of its default look.
Variant values are matched by name, so Default / Hover / Pressed (or Hovered, Active, Down …) in a State property are enough for the triggers. See Variants and Triggers.
From Claude (MCP)
Claude can import too: “Import this Figma button into EaseKit and animate the hover: https://www.figma.com/design/…?node-id=…”. The MCP tool import_figma takes the link (url) and an optional title, uses the token saved in EaseKit (or FIGMA_TOKEN in the MCP server's environment) and creates a new session. See the MCP tools reference.
Limits
- Library components come in with their variants only when your Figma account can open the library file; otherwise they're plain groups (their layers, without variants), and the import names them. At most 8 library component sets per import.
- Line height is kept only when it's set to a fixed value (auto line height uses the font's own).
- Very large frames are capped at 400 layers.
- Prototype connections and Smart Animate settings stay in Figma; EaseKit wires only hover and pressed variants.
Works with
- Auto Layout: animate one child and its siblings reflow.
- Animated variant switches: tune how Default, Hover and Pressed tween.
- Animate a Figma button with Auto Layout: the whole flow, start to finish.
Troubleshooting
| If this happens | Try this |
|---|---|
| Connect Figma appears | No token is saved yet. Paste one in the form or in Settings → Providers → Figma. |
| “No access (403)” | The token needs File content: Read-only, and your Figma account must be able to open that file. Create a new token if you revoked the old one. |
| Pasting on the stage does nothing | The link has no node-id. In Figma, use Copy link to selection on the frame. |
| A button came in without its variants | Its component set lives in a library file your Figma account can't open (the import says “Library components kept as groups”). Ask for access to the library, or import the component set from the library file itself. |
| Text wraps differently | A font you don't have falls back to the system font, which is wider or narrower. Install the font, or pick one in the inspector. |