In-depth guide to Component Mode

Component mode is made with keeping a focus on developers involved in UI development. The entire intent is to modularise a design and break it down in components and use components separately as building blocks

We've designed it with foundations rooting from Atomic Design, and the idea of building blocks.

Example

The above example shows how the main eCommerce design (Frame 7184) can be converted into high-end frontend code by selecting(NOT removing from the design) the right frames and sections.

That is why the selection should first start with Announcement Bar section selection and conversion to code, then Nav bar, Category Filter.

One important thing to note here is that post that, we've not selected the entire grid but the individual card since the core idea is to get as many reusable code components as possible. Since the card can be reused at multiple places with just dynamic properties changing like Title, Price etc.

Next after converting just any one Card, we can reuse and build a by stacking these generated components and building layout around them

Beyond the card, since there's no reusability of Footer or Pagination Menu in this example, we've directly selected sections