Animate your Figma projects with Motion

Figma offers powerful site-building and code generation features. Motion is available to use in both.

When adding effects via the Figma Sites Interactions menu, you're generating Motion animations with no-code!

In upcoming versions of Figma, it'll be possible to generate and write your own Motion code into your Figma site.

For now, you can already add Motion code via the Figma Make beta.

Figma Make

Figma Make is an AI code generator that can generate React code from text, image, and Figma artboard prompts.

In general, it will produce Motion code simply by asking it to animate something. For instance, you can give it a screenshot of the Motion homepage and tell it to animate:

This will produce a code file with Motion already imported:

<motion.div
  className={className}
  variants={container}
  initial="hidden"
  animate="visible"
>
  {words.map((word, index) => (
    <motion.span
      key={index}
      variants={child}
      style={{ display: "inline-block", marginRight: "0.25em" }}
    >
      {word}
    </motion.span>
  ))}
</motion.div>

If your generated Make project doesn't include a motion import then you can either ask the AI to add it for you, or simply add an import to the top of your component:

import { motion } from "motion/react"

Imports

As with many AI generators, Figma Make has the tendency to import Motion via "framer-motion". This is okay! This import will work for many versions to come.

However, you can also change this manually to "motion/react" and your project will continue to work the same.

Next

With Motion set up in your Figma project, we recommend you follow the rest of the Quick Start guide to begin learning Motion for React.