Skip to main content

React Code



Here is where you'll be spending most of your time.

The goal is to break down this code into reusable components, name the styled components in a way that you feel is best, and to get the DOM tree just right by moving nodes around or creating/deleting them.

Selecting / mousing-over nodes​

When hovering over or selecting a node in the tree or in the canvas or the styled components, the corresponding nodes will be highlighted/selected as well.

Selecting elements in the canvas works just like Figma where you drill down layer by layer. Once you select a layer you can the select it's children, etc etc.

Editing Styled Component name​

Moving Nodes​

Moving nodes around is an incredibly powerful feature in Rapidream.

Watch below as nodes are moved around. Notice what changes?

Nothing. Nothing changes.

As you move nodes around or create them or remove them, Rapidream continuously recalculates what the correct responsive styles should be in order to ensure that the React output exactly matches the design.

Think about how much friction this removes from the development flow. Just tell Rapidream what the ideal DOM structure is and we'll automatically calculate all the right styles for you.

Adding and Removing Nodes​

Generating assets from ANY part of the design​

Because Rapidream has access to all the raw SVG assets of every part of the Figma design, it allows us to offer an incredibly powerful feature.

You can select any node in the tree, check what it looks like in the Figma design, then select Convert to Image to generate a hosted URL with the entire node and its descendants converted into an SVG asset.