Quickstart

Sign up

Sign up at app.rapidream.com and (optionally) install the Rapidream Figma plugin.

info

In a standard designer-developer team, only the designer will need to install the plugin. They can then join or create a team and push designs to the developers.

Create a new project

When first signing up you will have a project named Default Project created for you. It will have a design called Example Sign Up which is used in the tutorial.

We advise going through the tutorial, but either way you should start by creating a new project.

You can create a project either in the plugin or web.

Push a Figma design

Once the project is created, either have the designer push a design, or you can push a design yourself from the Rapidream Figma plugin.

Currently you can only push "root" frames: meaning a frame whose parent is the canvas and is not inside another frame.

For the most part, pushing even a large and complicated page will work just fine in Rapidream. You can also break the design components into separate frames and push them on their own. Because everything is just a React component in Rapidream, you can push design elements separately then assign them to a single design inside of the Rapidream web interface.

tip

Pushing designs "just works".

No need to tag any design layers or name nodes in a special way!

Once the design is pushed, Rapidream examines the design from first-principles to determine what the ideal DOM tree should look like.

Any nodes which should be merged are merged, and any nodes which are not needed (e.g. hidden) are removed.

The final result is a good, clean DOM tree.

Open your new project at app.rapidream.com and select the design that you just pushed.

Profit!

Export the code by clicking the big purple Export button. You can export just the selected component or the entire project, and the export can be as either plain React or a complete NextJS project that will work with a single run command!