Vibe coding

Motion is increasingly the animation library of choice for vibe coding editors. Vibe coding is a super fun way to hack on animations.

Between Framer's Workshop, Figma Make, and v0 by Vercel, there are a number of ways to get into it for both designer and developer-minded people.

Framer Workshop

In any Framer project, it's possible to hit Cmd-K to launch the Workshop plugin. Here, you can enter a prompt and Framer will create a code component based on that prompt.

From here, it's possible to further customise with your own prompts or by using the auto suggestions.

But you can also edit the code directly yourself.

If Workshop has imported Motion, it will always import via "framer-motion"

Likewise, if you want to import Motion yourself, import via "framer-motion" to ensure best compatibility and performance within your Framer site.

Every Motion for React API is available to use within the code editor. Just ensure APIs are imported via "framer-motion" instead of "motion/react".

Figma Make

Figma Make is Figma's vibe coding tool. You can access it via the Figma dashboard.

Make presents you with a prompt input that accepts your pre-existing Figma frames, as well as images and text.

When importing Motion, Figma Make still has a tendency to import from "framer-motion". It is recommended you change this to "motion/react". In the future, Code Layers will make it possible to embed generated code directly into your site. Because Figma Sites already run "motion/react", changing this import will ensure compatibility and performance with your site.

v0

v0 is a developer-focused AI editor by Vercel. The easiest way to get started with Motion in v0 is by opening a Motion for React example, and clicking the "source" button.

This will open the source code for the example, and in the bottom right there's an "edit with AI" button:

This button will open the example in v0.

Note: The source functionality for some examples are Motion+ exclusive.