Announcing Plasmic
Introducing the fun and fast way to build complex frontends with plasmic.app! Plasmic is a visual UI builder for creating pure-presentational components that you can import into any existing React codebase. For developers and designers.
On product teams today, collaboration between design and engineering can be complex and time-consuming.
Designers spend time creating free-form vector graphics, which engineers must re-create from scratch, by hand, using code targeting a completely different medium. Inevitably, issues with discrepancies, infeasibility, missing states, and inconsistencies lead to a lot of back-and-forth between the two teams — if they even get addressed at all. Ultimately, the two sources of truth are almost never in sync, and it takes a lot of repeated manual effort from both sides to even stay close to each other. And because implementing designs is not a one-time affair, but ongoing over the life of the product, these debts compound over time.
Our founding team has designed and delivered products at companies ranging from Google, Facebook, and Microsoft down to early-stage startups. We have witnessed firsthand these problems across the board, which have become so engrained that it’s easy to become blind to them. We grew frustrated by how slow and disconnected the workflows are for designers and engineers to work together.
This is why we started Plasmic. Our vision is to streamline the collaboration between designers and developers. We want tools to make crafting UIs simpler and faster, for both developers and designers, and enable both to share the same source of truth for production components. And we believe that dramatically lowering the barriers for more contributors to impact the product will help ship higher quality products.
Here is how we are going about this:
Deliver a great builder experience, focusing on speed and simplicity.
Plasmic is a UI builder for creating pure-presentational components that you can import into any existing React codebase. The editor is entirely focused on user experience — giving you a fast, fun, powerful tool with instant feedback, streamlined layout controls, multi-view editing (e.g. for responsive designs or stateful components), and rich abstractions to build consistent, maintainable UIs. It resembles free-form design tools in feel, and aims to capture the same sense of speedy iteration, while allowing you to tackle the complexities and constraints needed for production.
Enable code integration without compromising developer flexibility and control.
Once presentational components are generated from Plasmic, developers can make them come alive by attaching business logic, state, and event handlers. Unlike most design-to-code tools, this integration is not a one-time eject — instead, you can continue iterating on the design and updating the generated code, without losing any of your attached behavior. Keeping this connection between design and code persistent is key to having a single source of truth as the product evolves.
We are choosing to focus primarily on developers as a first step, as we know that building trust with developers is paramount. Plasmic’s code integration schemes prioritize flexibility and control, so that the generated code will help — not hinder — getting designs to production.
Build toward a shared source of truth across designers and developers.
Today, you can convert Figma designs to code via Plasmic’s Figma plugin. We automate the low-level translation of Figma’s document representation to DOM representations, handling constraints/layouts, blend modes, centered borders, filter effects, and much more. Once in Plasmic, you can refactor the design to use real and richer layout, a powerful component model, style abstractions, and other concepts you can only express in Plasmic. Our core workflow philosophy centers around incrementally refining the messy and exploratory into the hygienic and robust.
Beyond Figma import, we’re trying to bring designers closer to what actually ships in production. We believe a tighter workflow between designers and developers will help teams deliver better products.
In the future we see, designers and developers will be working closely together on a single source of truth; designers will be empowered to directly affect what goes into production, and developers will be able to build on top of pixel-perfect output as a starting point. We are fortunate to have initial users who have already been building amazing things in Plasmic, from web apps to Gatsby sites to controls for autonomous vehicle sensors! We are excited to start sharing our progress publicly and to engage a growing community of creators.
Today, we are starting to accept teams and companies. If you are interested in early access and influencing the direction of Plasmic, please take a few minutes to tell us about your team and tech stack in our onboarding survey, and follow us on Twitter.
