Visual web development software and no-code solutions for building static webpages are not exactly new inventions. While no-code has many pros - especially for people or companies with simple requirements and low budgets - it can also be very limiting, and it often doesn't fit well into the development of a complex dynamic site, especially if development has already begun.
Many of the older no-code solutions are also not very performant nor expensive.
There are newer no-code tools which are more performant and are able to work more seamlessly with classic web development and hosting (webflow.com for example), but if you're reliant on a lot of custom or legacy code, or want to integrate no-code into your own dev-ops environment, Plasmic might be a solution. And a fast one at that.
What is Plasmic?
Plasmic is a no-code, collaborative visual builder for the web.
You can build pages or components and either let Plasmic host them (which is great for quick changes, or for letting an admin change Landing pages etc.), or generate REACTJS code.
With the latter approach, Plasmic is free to use and easy to integrate into a pre-existing project.
On top of that, Plasmic has created and maintains the Figma-to-Code plugin, which can greatly speed up the development of components.
A micro example
In the following simple example, a "designer" has requested the development of this simple page as an extension to a large, pre-existing project.
The page consists of a couple of SVG files, some text and some buttons.
With the Figma-to-Code plugin, you can copy and paste the entire page into Plasmic.
More practically, you can copy and paste both of the components into their own Plasmic components.
From here, it's possible to make variants of each component; these variants can be interaction variants, such as Hover, Press etc.
And now, to my favorite part.
By pressing the publish button in the top right, you can connect the project to a github project (or other git projects) and automatically generate the components - ready for use.
It's even possible to trigger other CI-CD pipelines to automate deployment or testing.
The generated view components will be put in a components/plasmic folder, and in the components folder you will find newly generated "skeleton" components that you can use to add any wanted functionality into.
Voilá
Things to be mindful of
The entire process, from Figma to code, can take minutes, or seconds, if there are no large adjustments needed.
Many Figma projects created by designers are not necessarily that easy to import.
Masked components are buggy, and it isn't easy to make good, responsive flexbox designs if the designer doesn't use auto-layout or just manually enters padding per component.
I also have to mention that Plasmic is not the only visual component creator tool, but the addition of the collaboration tools and deployment make it a powerful tool for fast development of visual components.
Resources:
Top comments (0)