Introducing PlaygroundIntroducing Playground

This release brings a new code editor, animation library and world-class docs—empowering you to invent new interactions through creative coding.


Koen Bok

May 7, 2019

Framer X allows you to express many advanced interactions right from the canvas, like scrolling and paging. But what if you want to go beyond those? Often times you’ll want to create interactions no visual tool can express—interactions that use physics, real data and logic, or anything else you can imagine.

Today we’re excited to launch Playground, allowing you to write your own components in code, without limitations. It’s our biggest release of 2019 to date, and one that is completely focused on working with code right from within Framer X. The key parts of this integrated environment are:

  1. A new built-in code editor
  2. A complete prototyping library
  3. Best-in-class documentation

It’s worth noting that Playground isn’t your average code editor. We recognize that as a designer, you require a different workflow for coding, and Playground was built with that in mind. Most designers want direct feedback, a way to freely explore and play while validating ideas, a common facet of creative work. Playground allows you to get started immediately, without being blocked by complex configuration or set-ups. Everything works out-of-the-box, with enough guidance and support to empower you to do what you do best—create. Read on to find out more about everything included in the Playground release.

Meet Code

From today, you’ll notice a new panel in Framer: Code. This is where all of your code components and overrides will live, allowing you to define high-fidelity interactions without ever having to leave Framer X.

Start from scratch, or import designs from your Canvas. Importing design components allows you to add interactivity to your existing designs though code, while keeping your original components in an editable form on the canvas.

The Code tab displays the contents of your code folder and allows you to create new code components as well. Even your folder hierarchy is shown and supported. Click New to create a new component, then hit ⌘ / Ctrl + P to trigger the preview. Or install the default examples available in the new Code panel to explore the core concepts.

The possibilities are infinite

The Framer Library is what powers everything. Think of it as a set of helpers (built on React) for designing physics-based animation, touch-based gestures, and common components for scrolling, paging, and interface flows. It’s designed to allow beginners to explore unique interactions with less boundaries and more support. We’ve rebuilt the Library from the ground-up, providing more functionality than ever before. You can install the Library and use it for free in any project, anywhere. The beauty of using it within Framer X is that it comes bundled with every new project by default, allowing you to start exploring interactive ideas with zero setup required.

The Library covers all the basics you’d expect, like Layout, Color, Animation, Variants, Gestures, Transforms and so much more. But beyond that, it allows you to create an infinite mix of unique components, animations, and interactions, from custom page effects and sequenced animations to 3D dragging.

Get Started

Start by watching this introductory tutorial video on Framer Playground. You’ll learn how to create new code components, the connection between canvas and code, how to preview your work, and more.

We’ve also created brand new API documentation that covers exactly how to use the Framer Library. The documentation is split into three parts: Get Started, Library and Framer X. The first section provides examples and tutorials. The second part covers all Library properties, methods and components, while the final section covers all library-related topics related to Framer X, like property controls. Start learning today or contribute to this open source documentation.

You’ll find a few helpful links to learn more below. Feel free to reach out on Twitter or join our Facebook Community if you have any questions. We’re incredibly excited for you to get your hands on all of this—and we can’t wait to see what you create.

Like this article? Spread the word.

Sign up for our newsletter

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.