Blogs

In many Liferay projects, front-end developers often work with design mockups, static HTML pages, or existing UI prototypes. Rebuilding these into Liferay fragments and Client Extensions can be time-consuming — especially if you’re working under tight deadlines.

The Design2Liferay Chrome extension helps streamline this process by letting you visually select parts of any web page and convert them into ready-to-use Liferay components, including:

• Global CSS Client Extensions
   

• JavaScript Client Extensions
   

• Fragment Collections with reusable Fragments
   

Let’s walk through how it works and how it can help you speed up front-end development in your Liferay workspace.

Why Use Design2Liferay?

Design2Liferay is built for developers who want to:

• Quickly scaffold Liferay fragments based on design references
• Reuse existing HTML structures or prototypes
• Generate Client Extensions for styles and scripts in just a few clicks

It’s ideal for prototyping and layout development within the Liferay platform — especially when you’re working from a design system or static UI reference.

This tool is not intended for full-scale content migration or replacing existing site building workflows — it simply helps bridge designs to working Liferay components faster.

How It Works

The extension integrates directly into your Chrome browser and follows a simple flow:

1. Install the Chrome Extension

Visit design2liferay.com or find “Design2Liferay” on the Chrome Web Store to install the extension. Once added, it’ll appear in your toolbar.

2. Open Any Web Design in the Browser

Launch any page or UI prototype in Chrome — this could be:

• A local .html file
   

• A preview hosted on a test server
   

• A visual design shared via a live link
   

As long as the content renders in the browser, Design2Liferay can read and extract it.

3. Use the Extension to Capture Content

When you open the extension, you’ll see three main tabs, each representing a type of Client Extension you can generate:

• Style Sheet Tab
  Extracts the full page’s styles and wraps them as a Global CSS Client Extension for Liferay.

• JavaScript Tab
  Captures inline or external scripts and converts them into a JavaScript Client Extension.

• Elements Tab
  Lets you visually select HTML elements (like a card, header, or section) and export them as Liferay Fragments. You can select multiple components to generate a Fragment Collection.

All outputs are clean, isolated, and ready for Liferay — no manual formatting required.

4. Download and Import into Liferay

Once generated, you’ll receive a .zip file containing the Liferay-compatible structure. You can:

• Drop it into the Liferay deploy folder

• Import it into your workspace project and version it with source control

• Upload it directly through Site Admin → Fragments and Extensions

Everything is structured according to Liferay’s standards, so it just works.

Best Practices for Using Design2Liferay

• Refactor for Reusability: Once imported, you can reorganize and enhance fragments using Liferay’s Fragment Collection tools.

• Validate Layout Responsiveness: Since fragments are based on existing designs, make sure they behave responsively in your site’s theme.

Final Thoughts

The Design2Liferay Chrome extension helps front-end developers move faster when transforming static designs into functional UI components within Liferay. It’s especially useful for prototyping layouts, experimenting with fragments, or generating initial structures that can be further customized and enhanced.

Whether you’re working on a new project or prototyping ideas, this extension helps you stay focused on building — not boilerplate.

🔗 Try it out at design2liferay.com