“Fae is the only design-to-code tool that will let you import new design changes to code after you’ve completely refactored it.”
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...
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
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.
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
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