Powerful prototyping with code

Bring your design to life with code in Figma.

Install for free
Untitled
Square.onTap((event,layer) => {
layer.animate({
scale:,
rotation: ,
borderRadius:
})
})

Made by Diagram     Works with Figma

Design and CodeDesign and Code

Create powerful prototypes with JavaScript that make your design animated and interactive.

Prototyper

Simple to ComplexSimple to Complex

Prototyper is easy to get started and becomes more powerful as you go.

// Drag the brightness slider

Slider.draggable = true 
Slider.draggable.horizontal = false
Slider.draggable.constraints = {
  height: 500
}

Slider.onDragMove((event) => {
  const y = event.y - Container.y
  const brightness = y / Slider.height
  Background.opacity = brightness 
})

DiagramMade by Diagram

Be more creative with smarter design tools.

Automator

There's an automation for that

Learn more
Automator

Magician

Every little thing it does is magic

Learn more

Used by designers on these teams:

  • Twitter
  • Netflix
  • Snapchat
  • Robinhood
  • Meta
  • DoorDash
  • Cash App
  • Instacart
  • Reddit

TwitterWhat Designers Are Saying

  • Designer

    Brian Lovin

    Product Designer

    It feels really nice getting the higher fidelity control while still sitting right next to my layers on the canvas.

  • Designer

    nuelCee

    Product Designer

    Tried out Prototyper today on Figma and it's crazy. Imagine what you could achieve coding right in Figma.

  • Designer

    Junhyuk Jang

    Interaction Designer

    Framer classic vibe in Figma. prototyper.design

  • Designer

    Gavin Nelson

    Product Designer

    classic Framer returns in Prototyper. I am going to have so much fun with this

Get Started with Prototyper

Powerful prototyping with code in Figma.

Install for free

Read the docs     DiscordJoin the Discord