Can I make real apps with Framer?

Short answer is no, but it depends what you’re trying to do.

While Framer does bring together development and design in powerful ways, it remains primarily a design and prototyping tool, optimized for designing and creating prototypes, rather than a tool for building production websites and applications.

That said, you can bring in production components (currently only with the Framer Desktop app) or create interactive protypes using real data.

Depending on your project, that might be “real” enough.

Can I re-use my code components in a React project?

Not directly. Framer’s library of components - Frame, Stack, Scroll and Page - would not work in a regular React project.

You could copy over your code, but would need to replace those components with regular HTML elements, or motion elements, if your components involved animations.

While exporting to production isn’t a feature, importing from production is. Although currently only available with the desktop app, it is possible to import components using NPM.

Can I export my design components as React components?

No. Design components are not stored as React components, so you cannot export them except as rendered images.

Can I re-use my animations in a React project?

Yes. If you’re able to add the Framer Motion library to your project, then you can bring your animations into production with virtually no changes at all.

The full documentation for Motion can be found on the Motion API page or go straight to the the quick start section to get started right away.

Can I use my code overrides in a React project?

Not directly. However, code overrides are basically higher order components, so you may be able to reuse some of your code that way.

Can I copy the code of my design elements?

Yes you can. With the Code Handoff feature you are able to copy the CSS, JSX and SVG code straight from the Handoff panel. Find out more on the Developer Handoff article.