Design 2 Liferay is a powerful Chrome extension that helps developers analyze and convert web designs into Liferay Client Extensions and Fragment Collections effortlessly.
Features
Extract JavaScript & CSS
Analyze page design and convert scripts and styles into Liferay-compatible extensions.
Component Extraction
Hover over elements to extract HTML and generate Editable Fragments with ease.
Effortless Integration
Convert custom web designs into reusable Liferay components in seconds.
Enhanced Productivity
Save development time by automating the design-to-code conversion process.
Auto Conversion
Convert HTML or design exports into deployable Liferay fragments, allowing for easy integration and modification.
Component Mapping
Map UI elements to existing Liferay widgets or your custom components, streamlining the integration process.
Token-Based Styling
Apply your design system tokens for consistent branding across all fragments, ensuring your design remains coherent and recognizable.
Deployment Ready
Export bundles that are ready for immediate use in your Liferay instance, reducing the time spent on manual setup and configuration.
Manual installation support
Allows users to manually install the extension via a ZIP file, giving them more control over the installation process.
Developer mode installation
Supports installation via Chrome's developer mode by loading unpacked extensions, making the extension accessible for advanced users.
Chrome Web Store availability
The extension can be conveniently installed directly from the Chrome Web Store for ease of access and updates.
JavaScript Client Extensions
Run a JS analysis job to scan and list the JavaScript files in your design. Then generate deployable ZIP files or full project files for Liferay JavaScript client extensions.
CSS Client Extensions
Analyze all CSS and embedded assets in your design to generate deployable ZIP files for Liferay CSS client extensions. There's also an option to generate full project source files.
Fragments and Fragment Collection
Capture HTML elements from your web design and convert them into Liferay fragments. You can compile a collection of fragments that can be imported into your Liferay instance.
Style Scope Management
Automatically scopes your custom CSS styles under a specific wrapper element to prevent conflicts with Liferay's built-in styles.
Local Deployment
Allows you to deploy your custom client extensions by copying a generated ZIP file to the Liferay bundle's deploy folder for locally hosted instances.
Cloud Deployment
Enables deployment of client extensions to Liferay PaaS/SaaS environments using the Liferay Cloud CLI to ensure seamless integration with cloud services.
Client Extensions Management
Provides access to manage and apply deployed client extensions through the Global Menu in Liferay, ensuring they can be used effectively across site pages.
Automatic Fragment ZIP Generation
Automatically generates a Fragment Collection ZIP file, which streamlines the process of importing design fragments into the Liferay platform.
Seamless Liferay Integration
Integrates directly with Liferay, allowing users to import design fragments easily into their Liferay sites via the site control panel.