Design with Figma
Edit and extend in Fae with no code
Publish as React components on NPM
“Fae is the only design-to-code tool that will let you import new design changes to code after you’ve completely refactored it.”
Two-way sync
Why we can do it and others can’t? We don’t export designs directly to code, we use our Fae visual programming platform as a middle-man. The visual programming structures are much easier to use for the two-way synchronisation with design. It is primarily because it can hold the references between the two worlds, but there are lots of other reasons...
JavaScript made easy
As powerful as JavaScript, as easy as no-codeIn Fae, you can use all the same tools as in JavaScript. You can use components, functions, variables, loops, expressions, etc. It is almost* 1:1 visual representation of the JavaScript. 
No-code React
Use anything from React and NPM ecosystemFae uses React on the background, which allows us using any React library from NPM. It means almost infinite possibilities.
Use react hooks for state, react-aria for accesibility, react-spring for animations, get anything else from NPM.
Add animations, accessibility, SEO/HTML properties, state, or even API calls. You can completely rewrite the code, while keeping the functional components synchronised with your Figma design.
Publish to NPM
Generate production grade React componentsAnd finally, click a publish button, and use the generated code in your JavaScript/TypeScript React project. Run "npm install @faedev/yourproject" or "yarn add @faedev/yourproject" to link the generated library to your project.
Developers
Less coding, more real workNo need to recreate all design components from scratch. Save time spent on translating design changes to code.
Designers
Designed and produced apps look the same. Finally!Seamlessly sync your Figma designs with Fae and be on the same page with developers.
Teams
Better collaboration of Designers and DevelopersNo more countless handoffs. Save significant amount of time spent on design discussions. Get the ideas to production faster. Have design and implementation synced. Use cases
Anything that can be done with React components can be created in Fae, easier.Design systemsCreate and maintain design systems where the design is always in sync with code.
Web application componentsExport components from Figma. Add visual logic in Fae and then connect to your data logic in React.
WebsitesExport whole designs from Figma, add responsivness, router, SEO/HTML headers and have a complete website in matter of hours.
Design in Figma, then sync with Fae
Sync your designs with Fae and be able to redesign anytime.Connected componentsSelect group, frame or component in Figma, click on “Sync with Fae” and voila, you have your design component connected with code. You can then change styles either in Fae of Figma and you will see the changes on the other side.
Extend your designsIn Fae you can include some additional functionality as animations, interactivity, real APIs data, computed values, or anything that can be done in React.
Nested syncIf you use connected components inside other components, Fae keeps track on what is already synced, and exports only new parts of the components. This will allow you to have perfect workflow for iterating on your designs. Use components shared with development and create new designs composed from these components.
The magic is in long-term useOne-time export is boring - the designer exports design, the developer changes something in code, the designer changes something in the design and then it’s usually impossible to put the changes together. Thanks to our two-way and nested synchronisation, when you compose your components from multiple other components, you re-export only the necessary parts, and developers have no (or minimal) additional work to integrate the new designs to code.
Figma pluginEdit properties, structure or conditional styles directly in Figma.
Power of JavaScript, ease of No-code
Create production grade components in Fae. The same capabilities of React, just easier. TypeScript supportPublish minified components to NPM along with TypeScript definitions for all the component properties.
Global optionsAka. Design tokens. Store all colors, text formats and sizes in one place.
React hooksComponents' state and lifecycle are easy and familiar to developers thanks to React hooks
Expressions and functionsDo the same things you can do in JavaScript
API CallsCall any API from your Fae component.
Web based editorEdit functionality, animations, and test your components in live environment (iFrame) with your components. This is 1:1 live (development) environment where you can create and test anything that you could make in React.
Generate React components library
Minimize CSS coding. One-time exports are obsolete. With two-way fae-design sync you always get the right components, already with all the CSS and logic done in Fae. All you need is to use the components.
Publish to NPMPublish minified components to NPM. It’s just “npm install” the package and you can use the components.
- Maintain versions of your package with SemVer
- JS and CSS are minified
- Choose browser support to maintain which polyfills are included
- Minimum dependencies - we link React as peer dependency and around 1kb of helper functions.
Development HotreloadEdit the component in Fae, and test it in your application.
- High quality Typescript and Flow types (no "any" types)
- Documentation with screenshots, choose a cloud version or fetch it to your file system
- Storybook-like playground and export of React snippets
Sign up to our beta program.