Skip to content
Back to main page - Website Build Flow

How to use Demo Gallery as a Developer (Website Builder)

The Demo Gallery acts as a tangible blueprint of the Figma Library’s elements, showcasing how they translate to fully functional web components. Developers can access and modify these elements directly within Beaver Builder, ensuring fidelity between the design and the final implementation.

How the workflow operates

The Demo Gallery link https://demo.wdsgallery.com/
*Only users with specific roles can export modules

After the designers finalize the Figma mockup using the pre-built library modules, the process transitions to the developers (Website Builders). This stage bridges the gap between design and development, ensuring that the envisioned design is efficiently translated into a functional website.

Annotated Figma Design for Developers

The finalized Figma design mockup is shared with the developers, complete with comments added by the designers. Each comment in the Figma file marks the specific module used as the starting point for a section (e.g., "Header 5"). These comments serve as a roadmap for developers, helping them identify the modules used in the design.

Accessing the Demo Gallery

The developer logs into the Demo Gallery, a WordPress-based resource where all Figma Library modules have been recreated in Beaver Builder.

Access to the Demo Gallery is managed via specific user roles, ensuring proper permissions.

Searching for the Required Module

Using the module name from the Figma mockup comments (e.g., "Header 5"), the developer searches for the corresponding section in the Demo Gallery. The modules are systematically organized, making it quick and easy to locate the desired section.

Header 5 page https://demo.wdsgallery.com/module/header-5/

Exporting the Pre-Built Beaver Builder Section

Once the required module is found (e.g., "Header 5"), the developer with specific role will see the “How to export this template?” button above the module:

download (6)

After the button is pressed, the section will expand, and the short explanation will appear:

Screenshot 2024-12-18 at 08.58.21

This export process generates a file that can be seamlessly imported into the website’s environment.

Importing and Customizing the Module

The developer imports the exported Beaver Builder section into the website’s environment.

Using the Figma mockup as a guide, the developer fine-tunes the section to align with the finalized design:

  • Adjust fonts, colors, or images.
  • Refine spacing, paddings, and alignments.
  • Add any functional elements (e.g., links, animations) that were defined in the design mockup.
Table of Contents
    Video Practices
    Scroll To Top