How WaveMaker AutoCode works
Install the
Plugin
Autocode is available in the Figma plugin store.
Run the
Plugin
Run it on Figma designs that use Material3 design system. Don't have designs that use M3? Try building one on our Wave Design System.
Seamless Export
& Import
Autocode converts Figma UI into code, and exports it as a .zip file, import the .zip file into WaveMaker studio as a project.
Instant App
Creation
Discover a perfect app in the studio, with 100% accuracy in the translation of design elements, app navigations and intended interactions. Bind it to an API and ship it to users.
Accurate, immediate translation
Automatic component detection
Autocode detects components used in your Figma design and maps them to corresponding widgets in WaveMaker.
Prototype app links to working navigations
Designers use prototype in Figma to link pages and overlays, these get translated into page navigations in the generated code.
Accurate detection of groups
The AI model detects important groups such as Forms (single step and multi step), Lists, Cards and generates corresponding code.
Material 3 compliance
WaveMaker Widget library fully implements M3 component functionality.
Figma variable and Modes support
WaveMaker's generated code maps all the design tokens maintained as variables in the Figma UI to JSON files in the form of Style Dictionary. Modes (light, dark, high contrast) are also picked up and are available as CSS variables.
Do more
inside the Studio
Extend the code
WaveMaker's low code studio already allows you to add custom business logic as simple JavaScript to any of your pages.
Drag-and-drop components
with identical design language
Drag and drop from WaveMaker widget library and add features to your pages while staying fully complaint to your design language as defined while creating the Figma UI.

Battle tested
and secure code
- WaveMaker generates Angular code & keeps the version updated
- Support for adding Authentication, Authorisation
- i18n
- Deploy to any cloud with CDN support
- Create a team and Invite your developers to collaborate
- Code gets saved in your Github/Gitlab/Bitbucket repo. Hook up your CI/CD pipelines
Seamless and Scalable Workflow
Wave Design System and AutoCode are next gen tools for product teams who value acceleration and consistency. The Wave Design System lets design teams deliver production-ready UI and AutoCode converts the Design to Code, delivering a functional app complete with interactions and navigations.
On top of this, if you wish to create some more pages inside the studio, you can also employ WaveMaker CoPilot, an AI-powered assistant inside the WaveMaker studio, for prompt-based UI generation.
All the tools work in sync to provide developers acceleration with accuracy at scale.
