How to Import Figma Assets into Rive in One Click

If you've been moving designs from Figma into Rive, you've probably done the standard import dance: open Figma, export your frame as SVG or PNG, save it somewhere on your computer, switch to Rive, drag it into the Assets panel. It works, but it's tedious when you're building anything with more than a handful of assets.

There's a faster way that almost nobody mentions. Copy in Figma, paste directly into Rive. Two keyboard shortcuts and the asset is in your Rive file, ready to use.

Here's how it works for images and for vectors.

Step 1: Copy from Figma

Open your Figma file and select the frame, group, or element you want to bring into Rive.

For an image, right-click and choose Copy as PNG, or use Shift + Cmd + C on Mac (Shift + Ctrl + C on Windows).

For a vector, right-click and choose Copy as SVG.

That's the entire Figma side.

Step 2: Paste into Rive

Switch over to Rive and press Cmd + V (or Ctrl + V). What happens next depends on which format you copied.

If you copied a PNG: Rive creates a new Artboard sized to fit your image and drops the asset inside it automatically. You're ready to work with it immediately.

If you copied an SVG: Rive adds the SVG to your Assets panel instead of placing it on the canvas. From there, drag it into your scene whenever you're ready to use it.

The reason for the difference is that SVGs carry their full layer structure with them, and Rive preserves all of it. Every shape, every group, every path stays editable. Once you drop the SVG onto your canvas, you can expand it in the Hierarchy panel and animate any sub-element directly.

That layer preservation is the real win. You're not flattening the design and rebuilding structure manually inside Rive. The work you already did in Figma carries over.

One small thing to watch for

When you paste from Figma into Rive, the dimensions get doubled. A 400x600 frame in Figma comes in as 800x1200 in Rive. Easy to resize on the way in, but worth knowing so it doesn't catch you off guard.

Pro tip: copy only what you need

This is where the workflow really earns its keep on bigger projects. Instead of pasting an entire design and dealing with the layer noise afterwards, copy only the specific element you want.

For example, if your Figma file has a full character design but you only want to extract the sunglasses for a reusable Component, select just the sunglasses in Figma, Copy as SVG, paste into Rive. You get a clean, isolated SVG asset with its own layer hierarchy, ready to turn into a Component.

This is how I build most of my Components in the Rive Masterclass course. The Weather Buddy character you've probably seen in the course was built piece by piece this way: copy the glasses, paste them in, name the asset, repeat for the hat, the face, the body. No flattening, no cleanup, no fighting with bloated SVG hierarchies.

The full pattern

The complete workflow, end to end:

• Bringing in an image: Copy as PNG in Figma, paste in Rive, auto-Artboard with the image inside

• Bringing in a vector: Copy as SVG in Figma, paste in Rive, SVG appears in Assets panel, drag onto canvas

• Bringing in just one element: Select only the part you want before copying for cleaner, reusable Components

Three workflows, two keyboard shortcuts, zero file exports.

More Rive tips coming

This is the first in a series of practical Rive tips and shortcuts. If you want the full system, from design through rigging, animation, and shipping interactive files, the Rive Masterclass walks through it end-to-end using the Weather Buddy character you've seen in this post.

For more quick tips, subscribe to the YouTube channel. A new trick goes up every week.