New Figma Plug-in Converts Design to Angular, React Native
WaveMaker is testing a Figma plug-in that would work with its low-code Web Studio tool to generate Angular or React Native mobile code from a Figma design. And the plan is to use artificial intelligence technologies in the future, said company co-founder and chief technology officer Deepak Anupalli.
The result is a “pixel-perfect” code rendition of the design that can then be customized by developers. This eliminates a pain point between designers, who are very visual, and developers, who are trying to figure out how to replicate that vision with code, Anupalli said. Getting that design right is 10% of the work, but it typically takes 90% of a developer’s time, he added.
“Translating these designs and creating this code is a big pain,” he said. “This process is very painful as we are talking about business design team and development team all coming together to make this successful, and it has to be repeatable.”
Figma Plug-Ins That Generate Code
There are Figma plug-ins that will convert to either Vue or React, as well as other languages such as HTML and CSS. pxCode converts Figma files to HTML code, React and Vue with its Figma to HTML service. Component Inspector, created by a Figma employee, generates React and Vue for components.
WaveMaker would be the first to support Angular with React Native Mobile, according to this list sent to us by Figma of similar offerings.
“One of the things which is very unique about Wavemaker is we provide a visual programming approach as well as model-based code generation to accelerate web and mobile app development,” Anupalli said. “We allow the code, which is generated from this platform, to be owned, customized and extended by the developers.”
Currently, the plugin works by requiring developers to use WaveMaker’s library in Figma. The library includes almost 100 components such as cards, lists, forms, and tables. The looks of each of these can be customized to match the branding of the design. The components include metadata that generates the WaveMaker markup, which is used to convert the design to code once it’s imported into WaveMaker’s tool.
The roadmap, however, is to be able to consume other standard component libraries, such as the Angular material component library in Figma or the Android UI component library, Anupalli said.
Most components are for more static sites, and keep JavaScript to a minimum, he added.
“Here we are talking about a web application with a lot of interactions in place. These are very rich components we are talking about with interaction and data,” he said.
It also can reimport a single change and update the code without having to start over, Prashant Reddy, WaveMaker’s senior director of product management, told The New Stack.
There are some types of JavaScript functions that will require customizing the code, such as adding elements to a page that aren’t part of the design. For example, if a phone number has to be a US, that validation can’t be expressed in the design so that would get passed to the developer to add as a specification.
Next Step: AI
The plan is to use generative artificial intelligence in the future so that designers could use any library and have it converted by WaveMaker.
“The ability to use a combination of computer vision or a trained model to understand design patterns and have the ability to trigger our generative code to generate the WaveMaker markup — that’s our vision,” Anupalli said. “We are seriously committed to investing time and effort in making that work for us because this is just a start what we showed you in terms of making it specific to a Figma plugin for the WaveMaker design ecosystem, but definitely there is a much bigger problem there to solve for a larger ecosystem.”
AI capabilities are still six to eight months away, Reddy said. WaveMaker isn’t the only tool planning to use AI to assist to make design simpler. Website builder Wix announced plans to use AI solutions, including an automated tool to create websites using natural language prompts.
Meanwhile, interested developers can apply to be part of the trial for WaveMaker’s existing Figma plugin.
