🧩 Convert Web Designs to Liferay Client Extensions with Ease Using Design2Liferay Chrome Extension

If you’re a Liferay developer, you know that turning a polished HTML web page into a Liferay Client Extension involves several detailed steps — from extracting styles to structuring components and deploying assets. Design2Liferay simplifies this process, helping you move faster and stay focused on building great user experiences.

Design2Liferay Chrome Extension — a powerful tool that allows developers to capture any web page opened in Chrome and convert it into:

A Global CSS Client Extension (with all your design styles & assets)
A Fragment Collection (broken into reusable Liferay fragments with names)

This tool can seriously speed up your development cycle and reduce the repetitive grind.

⸻

What is Design2Liferay?

Design2Liferay is a Chrome Extension that lets you:
1. Extract the design of any live page you’re viewing in Chrome
2. Convert it into a Liferay-compatible Client Extension:
• Global CSS (styling)
• Fragment collection (componentized HTML)

This is particularly useful when:
• You’re handed a static HTML page by designers
• You want to port an existing site into Liferay DXP
• You need to extract reusable UI blocks as Liferay Fragments

⸻

How It Works – Step by Step

Install the Chrome Extension

Go to design2liferay.com or search Design2Liferay in the Chrome Web Store, then click Add to Chrome.

⸻

Open Your Target Web Page

Navigate to the web page you want to convert in Chrome. This could be:
• A locally hosted page
• A live design preview
• Any HTML-based page

⸻

Open the Extension

Click on the Design2Liferay extension icon in your Chrome toolbar. You’ll see two main tabs:

⸻

Global CSS Tab – Capture the Entire Design
• This tab captures:
• CSS rules
• Fonts
• Images and other static assets
• It wraps them up as a Global CSS Client Extension for Liferay

Just click Download and you’ll receive:

/your-design-global-css
├── client-extension.yaml
└── src/
├── css/
├── images/
└── fonts/

You can directly deploy this into your Liferay workspace!

⸻

Fragments Tab – Extract Reusable Components
• Highlight different areas on the page
• Assign each one a name (like “Hero Section”, “CTA Banner”, “Footer”)
• Click Extract

The extension will generate:
• A Fragments Collection
• Each named block becomes an individual fragment (HTML, CSS, JS)
• Downloaded as a ZIP ready to import into Liferay

This makes it easy to:
• Reuse components in Liferay’s page builder
• Organize your design system into maintainable blocks

⸻

Deploying the Output

After downloading the zip file:
1. Drop it into your Liferay Workspace (if it’s a global CSS or custom element extension)
2. Or go to Liferay → Fragments → Import to bring in your fragment collection

⸻

Why Use Design2Liferay?

Feature Benefit
Live Page Extraction Grab real-world web designs directly from Chrome
Fragment Naming Define reusable blocks visually
Full Asset Support Images, fonts, and external CSS all included
One-Click Download Get a production-ready Liferay extension instantly
Faster Dev Cycle Reduce frontend-to-Liferay conversion time drastically

⸻

Real Use Case Example

You’re handed a Figma prototype exported to HTML. You open it in Chrome, run Design2Liferay, assign fragment names, and download the final package. In minutes, your design is live in Liferay, complete with editable fragments and styling.

⸻

Try It Now