How to Use Design2Liferay

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

🔧 Installation

Choose the method that works best for installing the Design2Liferay Chrome extension.

🌐 Install via Chrome Web Store

The easiest way to get started is to install the extension directly from the Chrome Web Store:

🚀 Install Design2Liferay from Chrome Web Store

🛠️ Manual Installation

Prefer to install from a ZIP file or want more control? Follow the manual steps below.

  1. Extract the ZIP File
    • Locate the ZIP file on your computer.
    • Right-click and select “Extract All…” or use your preferred archive tool to extract the contents to a folder.
  2. Open Chrome Extensions Page

    Open Google Chrome and type: chrome://extensions in the address bar, then press Enter.

  3. Enable Developer Mode

    In the top-right corner of the Extensions page, toggle Developer mode to ON.

  4. Load Unpacked Extension
    • Click the “Load unpacked” button.
    • Navigate to the folder where you extracted the ZIP file.
    • Select the folder and click “Select Folder” (or “Open” on Mac).
  5. Verify Installation

    The extension should now appear in your list of installed extensions. If something’s wrong, Chrome will display an error message with details.

💡 Tip:

You can pin the extension to your toolbar by clicking the puzzle icon 🧩 in Chrome’s toolbar and selecting “Pin” next to Design2Liferay.