Welcome to Framer X. Learn all about the new tools, components, store, code and more.
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.
|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|
|Design Infrastructure||Build and manage from components to entire design systems for teams, scale them to large organizations, integrate with production.||Store, Code|