Importing from Figma

Paste work straight from your clipboard into Lottie Creator. Copy an element in the Figma app and paste it as native, editable layers with its Motion animation, or paste an image from any source as an image layer. Both skip the export and save-to-disk steps.

Pasting Images

Copy a PNG, JPEG, or WebP from Figma, a browser, an OS screenshot, or another design tool, then paste it into Creator. The image lands as an image layer, centered on the active scene and scaled down to fit if it is larger than the scene.

How to paste an image:

1. Copy an image to your clipboard.

2. In Lottie Creator, press Cmd/Ctrl+V.

3. The image is added as an image layer, centered on the active scene.

Supported formats: PNG, JPEG, WebP

Image layers keep transform and opacity controls. To convert an image into editable vectors, see Importing Files.

Pasting Figma Motion

Copy an element in the Figma app, including its Motion keyframes, and paste it into Creator. It rebuilds as native, editable Lottie layers with the animation intact, with no SVG or Lottie export step in between.

How to paste from Figma:

1. In the Figma app, select a shape, group, or frame.

2. Copy it with Cmd/Ctrl+C.

3. In Lottie Creator, press Cmd/Ctrl+V.

What comes across:

Geometry and styling:

• •Vector paths and primitive shapes: rectangles (with independent corner radii), ellipses, arcs, polygons, stars, and lines
• •Solid and gradient fills
• •Strokes with inside or outside alignment, caps, joins, and dashes
• •Native, editable text (font, size, color, alignment, line height, and tracking)
• •Boolean operations as merge paths (union, subtract, intersect, exclude)
• •Component instances
• •Masks as track mattes, including a single mask that clips several siblings
• •Blend modes
• •Drop shadow and blur effects

Motion:

• •Translation, scale, rotation, opacity, path trim, and stroke width
• •Animated fill and stroke color
• •Cubic-bezier easing, with spring presets baked into keyframes
• •Inherited group motion (translation, rotation, and scale) baked into each layer
• •Animation presets, including stacked presets, on the timeline

Frames become nested scenes:

A single Figma frame lands as its own nested scene with its own size and timeline, dropped into the active scene as one layer. The canvas is not resized. Creator only extends the timeline to fit the animation, and nothing else reflows. Loose or multi-element selections paste flat into the active scene instead.

Limitations:

• •Some node types, such as text on a path, fall back to SVG import
• •Image fills inside a shape are not brought across
• •Seamless looping is not yet applied when the animation is shorter than the target scene