🎨For Designers

The Figma to Moxly lets you turn your static designs into clean, production-ready Moxly HTML and CSS. Add Moxly Interactions, wire up content using our powerful CMS, and one-click publish.

Good to know: Follow this guide to learn how to craft your first application with Moxly. This tutorial will introduce you to Moxly and its fundamental concepts, including Moxly-specific features, tagging systems, data binding, and more.

Figma Integrations

Demo file Figma

Moxly Material UI Kit - Quick Start | Figma CommunityFigma

Start with our demo, you will find several ready-made components, screens and icons for a quick start

Configuring

You can create designs from scratch in Figma (i.e., design without the plugin’s prebuilt layouts or structures) — just make sure you use auto layout. Then, you can make your designs responsive by setting wrap and min/max width on parent frames.

Learn more about how to create responsive designs in Figma

Customizing

Make sure all frames (including nested frames) use auto layout. And, if necessary, detach component instances to ensure you can edit the design in Moxly. You can quickly detach instances by pressing Option + Command + B (on Mac) or Control + B (on Windows).

After you create your design using auto layout, you can transfer your design to Moxly.

What is supported:

• Auto layout

• Typography styles

• Border styles

• Shadow styles

• Background images and linear gradients

• Vector and shape conversion to SVGs

• Images

• Opacity

• Absolute position