How to Use Design2Liferay

A quick start guide to converting your web designs into Liferay components.

🧩 Introducing Design2Liferay Elements

Design2Liferay Elements is a powerful toolset that lets you visually extract, organize, and convert HTML components from any webpage into reusable Liferay Fragments — in just a few clicks.

🔍 Explore the Extension UI

Here's a quick look at the tools you'll use inside the Elements tab:

Design2Liferay Elements Overview Screenshot

Full interface showing all available tools

HTML Element Picker Tool

Element Picker – select HTML nodes visually

Extract Panel for Components

Extract Panel – preview and adjust component structure

Export Options in Design2Liferay

Export Options – ready-to-use ZIP for Liferay

⚙️ How Design2Liferay Elements Works

  • 🔍 Visually select any HTML element on the page
  • 🛠️ Organize components into groups/fragments
  • 🎯 Apply styling tokens or retain existing CSS
  • 📦 Export as a ready-to-import Liferay Fragment

🚀 Get Started Quickly

Once the extension is installed, navigate to any webpage, click the "Elements" tab in the Design2Liferay extension popup, and start selecting your components. No setup, no code — just visual design extraction and conversion.