Chapter 4: Figma Motion to code

Core Idea

Animate in Figma Motion and export to real Motion code for React. Or use Motion inside Figma Sites.

Key Concepts

• Exporting Figma Motion to code: Animations can be added to shapes in Figma by clicking the add (+) button in the Animation
• Figma Sites: Figma Sites is a no-code website builder.
• Figma Make: Figma Make is an AI code generator that can generate React code from text
• FAQ: Does Figma Motion use Motion?
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

<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>

• What it demonstrates: Core usage pattern for Figma Motion to code.

Key Takeaways

1. Figma Motion to code supports Exporting Figma Motion to code.
2. Figma Motion to code supports Figma Sites.
3. Figma Motion to code supports Figma Make.

Connects To

• Motion for React: Get started - React Animation Library: related Motion doc page.
• Framer x Motion: related Motion doc page.
• React motion component: related Motion doc page.
• React Animation: related Motion doc page.