WWW… Wednesday! Plasmic: UI Builder for React

by Taylor Slattery | September 3, 2020

Perhaps the most crucial moment in the process of developing a site or app is the point at which designs are passed off from designer to developer. The visions of the designer are met with the skills of the developer to determine whether that vision is realized, or even capable of being realized. Oftentimes, these two things are not in alignment. The designers’ vision may prove incomplete or impossible to create, and a series of compromises are made on both sides until an acceptable product is arrived upon.

This often strained, but essential relationship between developers and designers has long been a point of friction in the product development workflow. In an effort to ease this friction, a number of tools have cropped up with the aim of bridging the gap between these two skill sets. Tools like Figma and Sketch allow designers to focus on what they do best, and generate code from their designs once they’re complete.

These tools appeal to both designers and developers alike, as they offer each an opportunity to compensate in an area they lack, though they tend to benefit designers a bit more. Plasmic is similar, but its feature set makes it more appealing to developers.

Plasmic is an app that allows users to create presentational components via an easy to use interface, similar to Figma or Sketch. Like these other software, its purpose is to help users reach the point of shipping sooner by reducing the aforementioned friction between designer and developer.

The tool is complete in and of itself. Users can start from scratch and quickly create production-ready components. Alternatively, Plasmic contains a plugin that will convert Figma elements into code. So whether you are starting from zero or already have a rough design, you can quickly refine your work until you’ve got something polished and ready to ship.

One of Plasmic’s strengths is its ability to edit components in place, which allows you to view them in context rather than as standalone components. The editor is fairly robust, allowing for edits of components to be expressed as variants. These variants can be used to reflect different states, like the various states of a button. These edits can be viewed side by side, as well as previewed at pixel-perfect output in live mode, allowing you to test things like hover effects in real-time.

Once you’re done designing, Plasmic makes for easy export into React. Future changes can continually merge back into the same code base so that any further edits and behaviors can be preserved while only affecting the presentational components. This makes changes easily maintainable, and grants products made with Plasmic a great deal of scalability and flexibility.

At the moment, early access to Plasmic is limited, but you can request access via this survey. For further updates, be sure to follow them on Twitter here.

Taylor is the Managing Editor of Notes on Design. Taylor is a graphic designer, illustrator, and Design Lead at Weirdsleep.

Recent Articles

Best Graphic Design Conferences in 2024

How Much Do Graphic Designers Make? 2024 Guide