Plugin Overview

Upon running the plugin, you will find Lightning flow to convert your designs to code.

The Lightning flow offers you the fastest way to convert your web designs into high-quality code.

It uses a combination of our pre-trained AI models to make your designs responsive, convert design elements into interactive ones, add relevant layer names, & create components.

Here are the steps it performs:

1. Design Optimiser: This feature optimises your design by removing unnecessary frames, grouping items together & understanding inconsistent gaps and alignments.

2. Responsiveness: In this step, we make your your designs responsive by applying different CSS properties & also apply media queries so your designs can adapt to different screen sizes.

3. Tagging: This step turns your static design elements such as buttons and inputs to interactive ones by using the appropriate HTML tags.

4. Actions / Interactions: In this step, we assign on-click actions for navigation between pages, interacting with popups and more.

5. Class Names: We generate human-readable class names for you in this step.

6. Code Components and Props: Finally, we scan the code and split it into reusable code components with props so you can easily extend the code.

Once the code is generated, you can review the decisions made by LocoAI and make any adjustments before syncing or deploying it. You can also make changes to the code using Agent Mode which lets you refine your generated UI with prompts—without manual code edits.

Lastly, we push the code generated to Builder where you can make some final adjusments before syncing or deploying it.

You can read more about the Lightning flow by clicking here.