Integration of HTML within Liferay

[SifraBsyr12]

🏷️ Discussion Type

Question

💬 Feature/Topic Area

Code Search and Navigation

Body

Trying to convert figma html file into liferay

[thenameisnafis]

Hi,

There is usually no direct one-click conversion from a Figma-exported HTML file into Liferay. The better approach is to break the exported design into Liferay-friendly parts.

A practical process would be:

1. Clean the Figma HTML first
   Figma exports often contain absolute positioning, unnecessary wrapper divs, repeated inline styles, and non-responsive CSS. Before adding it to Liferay, clean the HTML and separate it into proper HTML, CSS, JavaScript, and assets.

2. Decide what you are building in Liferay
   If it is a page section, banner, card, hero area, footer, or reusable design block, create it as a Liferay Fragment.
   If it is a full site-wide design, use a Theme CSS Client Extension or custom theme.
   If it is a React/Vue/Angular-style frontend app, use a Custom Element Client Extension.

3. Convert design sections into fragments
   For most Figma-to-Liferay cases, fragments are the easiest option. Create one fragment for each reusable section, such as:

• Hero section
• Service cards
• Testimonial section
• Contact form layout
• Footer

Then paste the cleaned HTML into the fragment HTML area, CSS into the CSS area, and JavaScript into the JS area.

4. Move images and fonts properly
   Upload images/icons to Liferay Documents and Media, then update the image paths in your HTML/CSS. Avoid using local paths from the Figma export because they will not work after deployment.

5. Make it responsive
   Do not rely only on Figma’s fixed pixel layout. Test the page on desktop, tablet, and mobile. You may need to rewrite parts of the CSS using flexbox, grid, Bootstrap/Clay classes, or media queries.

6. Replace static content with Liferay content where needed
   If the content should be editable by non-developers, do not hardcode everything. Use editable fragment fields, web content, collections, or widgets depending on the requirement.

So the short answer is: clean the Figma HTML, divide it into reusable sections, convert those sections into Liferay fragments, upload assets into Liferay, and then adjust the CSS/JS for responsiveness and Liferay compatibility.

Also, mention your Liferay version, for example 7.4/DXP version, because the best method can depend on whether you are using fragments, themes, or client extensions.

[SifraBsyr12]

Thank you for your valuable explanation

[isnaenihidayat]

Adding another approach — especially if you're on Liferay DXP 7.4+ or Liferay Portal 7.4 GA:

Using Client Extensions (Modern Approach)

Client Extensions are the recommended modern way to integrate custom frontend code into Liferay without touching the core theme. This is especially useful when migrating Figma-exported HTML/CSS/JS.

1. Custom Element Client Extension
If your Figma design involves interactive components (carousels, tabs, modals, etc.), wrap them as a Web Component or React/Vue component and deploy via a Custom Element Client Extension:

# client-extension.yaml
type: customElement
name: my-figma-widget
htmlElementName: my-figma-widget
urls:
  - /index.js
  - cssURLs:
  -   - /index.css
  - ```
Then build your Figma HTML/CSS/JS into a standard Web Component:

```js
class MyFigmaWidget extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <!-- Your cleaned Figma HTML here -->
      <div class="hero-section">...</div>
    `;
  }
}
customElements.define('my-figma-widget', MyFigmaWidget);

2. CSS Client Extension
If you only need to apply Figma design styles globally (fonts, colors, spacing), use a Theme CSS Client Extension to inject your CSS without overriding the full theme:

# client-extension.yaml
type: themeCSS
name: figma-design-styles

3. Static Content Client Extension (IFrame / Remote App)
For fully standalone Figma pages (e.g., a landing page), deploy as a Remote App served from your own CDN/server, and embed it inside Liferay via the Remote App widget.

---

Key Advantage of Client Extensions over Fragments for this use case:

• No need to rebuild/redeploy the Liferay theme
• • Fully decoupled — frontend and Liferay backend are independent
• • Easier CI/CD pipeline for frontend teams
• • Works well with modern build tools (Vite, Webpack, etc.)

---

Quick Decision Guide:

Use Case	Recommended Approach
Small reusable sections (banner, card)	Liferay Fragment
Interactive widgets / React components	Custom Element Client Extension
Global design styles	Theme CSS Client Extension
Full standalone page	Remote App Client Extension

---

What version of Liferay are you using? The approach may differ slightly between 7.3, 7.4, or DXP 2024.x (Quarterly Release).

[SifraBsyr12]

Liferay DXP 2026.Q2.2