Docs

Welcome to Framer X. Learn all about the new tools, components, store, code and more.

Introduction

Framer X is both the most easy and most advanced design tool. We think a subset of more advanced users will build components for everyone else, so the majority of users won’t write code, but visually compose interfaces with components built by others through the store. But if you enjoy writing code, Framer X will be the best environment to do so and we encourage everyone to explore it.

The idea behind Framer X is not to generate code for you, but instead to use the code you (or someone else) wrote. Auto-generated code almost never ends up in production, so it’s better to have a tool that can use code that you already have. If you already have React components built, they should work in Framer X with minimal effort. That said, everything you draw in Framer is a React component and exportable to jsx, html or static assets if you need it.

Use Cases Use Case DescriptionTopics Wireframing Quickly visualize an interactive idea, layout, user flow and information architecture.Interface, Canvas, Layout Visual Design Explore styling options for layouts, create icons and artwork and produce high-res assets for production with pixel level control.Drawing, Import, Export Interactive Quickly turn visual parts into a prototype with navigation, different screens, advanced scrolling and some interactive components. All without code.Preview, Interactive, Design Components, Store, Sharing Expert Interactive Create real products, invent your own interactions with state, data, physics, user input and combine with any other JavaScript out there.Code Components, Interactive, Code Functions, Code Library Design Infrastructure Build and manage from components to entire design systems for teams, scale them to large organizations, integrate with production.Store, Code