Component Mode and Page Mode in Dualite: Complete Explanation

‍

Dualite is an innovative AI-powered Figma plugin designed to bridge the gap between design and development. It focuses on converting Figma designs into high-quality, reusable code, with popular technologies such as Reactjs, TailwindCSS and more.

In simplest words, Dualite is a Figma Plugin that gives you the actual code of your designs with just one click. Imagine you have a magic tool that turns your drawings into real, usable things. That's kind of what Dualite does for designers and developers! 

‍

Dualite offers two modes, basically two ways to use the plugin.

1. Component Mode
2. Page Mode

Let’s break these down into the simplest terms

‍

1. Component Mode

• Component Mode in Dualite converts individual design elements into reusable code snippets called as Components which you can use in your project to maintain consistency and readability

• Example: Component Mode is like making individual puzzle pieces out of your design. Each piece (or component) can be used again and again in different places.

‍

2. Page Mode

• Page Mode in Dualite converts entire design pages into code, preserving the overall layout and structure. Page Mode lets you convert your whole design in one go

‍

Difference between Component and Page Mode

‍

• Component Mode: Simply, generates reusable code for every individual part separately known as Components

‍

• Page Mode: This generates code for your complete design at one go, in a single click

‍

Component Mode in detail

‍

Component Mode in Dualite is a powerful feature designed to convert individual design elements from Figma into reusable code snippets. This mode is particularly useful for creating consistent, modular UI components that can be easily integrated and reused across various parts of a web application. By focusing on individual elements, Component Mode ensures that the code generated is clean, efficient, and easy to maintain.

‍

When to use Component Mode

‍

• Creating a Design System for a Large Project: Suppose you are developing an e-commerce platform with a vast array of features and pages, Ensuring consistency across the application is crucial. Using Component Mode, you can convert individual designs elements like buttons, form fields, headers, footers etc into standardized, reusable components

‍

• Facilitating Collaboration: Imagine you are a part of a large team developing a complex web application. Different developers are working on different sections like user profiles, dashboards, testimonial cards etc. By using Component Mode, you can break down the design into smaller manageable pieces of components such as card design which can be used by every developer working on the project

‍

• Ensuring Reusability: Projects have multiple common elements such as a Blogging Platform have article previews, author bios, comment sections etc which needs to appear on multiple pages, with Component Mode, you can convert such elements into reusable components to use in multiple pages not only promoting reusability but saves time as well

‍

Key Features

‍

1. Reusable Code Snippets: Component Mode generates code that can be used anywhere.  Once you have the code for a button, you can use that button anywhere in your project without having to recreate it.

2. Promotes Consistency: Reusing the generated component code in the project maintains the consistency between styles of various components and the code itself

3. Fast Conversion: Component Mode is made for individual parts of a design which makes it faster and better in terms of code quality

4. Optimization for Performance: Component Mode make sure to generate optimized code for the components contributing to better User Experience

5. Easy Customization: Developer can easily customize the code without worrying about breaking changes

‍

Frameworks available for Component Mode

‍

• Framework/Library:  Reactjs
• CSS Framework/Library: CSS and TailwindCSS

‍

Page Mode in detail

‍

Dualite's Page Mode is designed to streamline the process of converting entire Figma design pages into clean, structured code. This mode focuses on preserving the overall layout and structure of a design, making it ideal for quickly generating complete web pages. By converting entire pages at once, Page Mode ensures that the integrity and visual hierarchy of the design are maintained.

‍

When to use Page Mode:

‍

• Single Page Applications: You are developing a single page application (SPA) for a restaurant and the design includes multiple sections such as menu, reviews, reservations and more. Using Page Mode, you can convert the entire Figma design into code, ensuring that each section is accurately rendered

‍

• Rapid Development for MVP and Hackathons: Suppose you are participating in a hackathon or need to develop a Minimum Viable Product (MVP). The goal is to quickly build and present a working prototype, Page Mode enables you to convert this entire design into code in a matter of minutes

‍

• Agencies or Freelancer: If you are a Freelancer or work for a Digital Agency, impressing your clients is crucial. Lets say, you are working on a Artist Portfolio website, you can convert the design into code with client can interact will give an idea of your product

‍

• Efficient Creation of Landing Pages When a marketing team wants to launch a new campaign and requires a landing page to capture leads then Page Mode  can convert the design into code preserving the layout and speeds up the process of launching a Landing Page

‍

Key Features

‍

1. Full-Page Conversion: Converts the entire design into code on a single click. No need to generate code separately for individual parts

2. Layout Preservation: Maintains the original layout and spacing in the generated code as designed in Figma. Guarantees that the generated code reflects the designer’s vision

3. Easy Customization: Generated Code is easily customizable by developers in any case of design change

‍

Frameworks available for Page Mode

‍

• Framework/Library: Reactjs and HTML
• CSS Framework/Library: CSS and TailwindCSS (when Reactjs is selected as the UI Framework/Library)

‍

Live Example

‍

1. Launch Dualite and Login with your Figma Account

‍

2. Paste Figma File Link to the input

‍

3. Select your preferred mode

‍‍

4. Select your design/frame, select frameworks and then click on "CONVERT TO CODE"

‍

5. You will see this Output Screen from where you can view your code in CodeSandBox or Download it as ZIP

‍

6. Review and integrate your code. Let’s view it in CodeSandBox

‍

7. Now, let’s switch to Component Mode with the toggle switch at the top

‍

8. Select your design/frame, select frameworks and then click on "CONVERT TO CODE"

‍

9. You will see this Output Screen from where you can view your code in CodeSandBox or Download it as ZIP

‍

10. Review and integrate your code. Let’s view it in CodeSandBox

‍

Conclusion

Both Component Mode and Page Mode in Dualite offer unique advantages depending on the project needs. Component Mode is ideal for creating reusable, consistent components that can be easily integrated across different parts of a project. Page Mode, on the other hand, is perfect for quickly converting entire designs into code, making it suitable for landing pages, single-page applications, and rapid prototyping. By understanding and utilizing these modes effectively, designers and developers can streamline their workflows and enhance productivity.

For more information and to start using Dualite, visit our official website and Product Hunt page​

‍

Author

‍

Rohan Singhvi

CEO of Dualite

LinkedIN

‍

‍