At Storytell, we have a unique process for doing rapid prototyping. Here are some steps:
(Stage 1 Ideation); First, we determine what we are designing for and what problem we are solving. We have saved a set of websites from which we can get inspiration for design ideas. We are also building a set of the Component library (see more below on Component).
(Stage 2 Figma): After the idea matures, we will go to Figma to do the static design. We also design with components in mind, which would allow reusable designs.
(Stage 3 Prototyping). After the static design looks good, we will do visual prototyping. There is a feature to mimic the link behavior in two frames. There is also a smart animation feature that makes the visual prototype looks better. We will use both features to create a visual prototype in figma.
(Stage 4 Implementation). We will do multiple rounds of visual prototyping. When the prototype is ready, we will implement it in the react. We leverage Figma’s inspect feature to get the CSS from the design prototype.
Please see here for the walkthrough video:
Please see below the Storytell Report of the walkthrough video above