Designand
Codein
Framer X

Design+CodexFramer

Create powerful design and code components for your app and design system

Available now

Designers can create

production-ready

React components

Framer X is the only design tool that allows you to create code components that can be used in a real React site. Your components can be the single source of truth. You can seamlessly sync your React components between Framer X and your favorite code editor. Designers can now collaborate with developers to create consistent, production-ready components.

Design+Code

The Framer X course is free. You also can check out our 12 courses about Design System, React, Swift and more. Only for the next 48 hours, get a Pro account and get 50% off Framer X.

7-day free trial

Want to learn React?

Get ready for Framer X and start learning React for designers. We'll teach you how to build and animate your entire site using React from scratch in a day.

React for designers

Powerful interactive

design and code tools

You can override pretty much anything of component layers in Framer X.
Design Components
Code Components
You can install npm libraries like Styled Components to power your components.
Group a bunch of layers and set automatic spacing and distribution. You can re-order the elements just by dragging them.
Stacks
Framer Store
You can browse the featured, the recent and the trending packages in Framer Store.

Your components

are the single source

of truth

Framer X will allow designers to get closer to high-fidelity prototyping and implementation using a shared library of components built in React. The future of design tools is here.

Start to design and code

your Framer X components

Design layouts and components from scratch and learn all the workflow of using Framer X to create a single source of truth for your team, leveraging the power of React.