Introduction to Plasmic
What is Plasmic?
Plasmic is a visual builder for the web.
You can use it to build web apps and websites, and you can use it as a visual content management system.
It lets anyone, regardless of coding background, design and build rapidly—code optional.
At the same time, it is powerful, with a deep feature set that scales to complex projects. And with codebase integration, it removes the ceiling typically associated with low-code tools.
What can I use Plasmic for?
The most common use cases for Plasmic are:
- Building web applications: internal tools, customer portals, SaaS products, etc.
- Building websites: personal portfolios, blogs, marketing websites, online stores, landing pages, etc.
- Content management: also about building websites, but based in a codebase; non-developers drag and drop components provided by developers, using Plasmic as a visual headless CMS.
These use cases are distinct, yet they share many similarities and overlapping requirements. Features that improve one often directly improve others. Plasmic embraces this commonality and serves them within a single unified visual platform.
Learn more about each use case by following the above links.
What makes Plasmic special among no-code/low-code tools?
A common criticism of no-code/low-code tools is their complexity ceiling. You’ll inevitably—sometimes very quickly—run up against the limits of what the tool lets you do. At that point, you often need to throw it away and start from scratch with code.
Another common criticism of no-code/low-code tools is that they create unmaintainable spaghetti messes. This is usually due to the tool or language’s lack of abstraction power, and its inability to let you express solutions that compose.
Plasmic confronts both issues directly with its core design. It was built to integrate deeply with codebases so that you are never limited by the low-code tool itself. And it has key abstractions such as components, expressions, state management, and more built in, giving it depth as a language.
Some more highlights of what Plasmic provides:
- Full design freedom and speedy modern design tool UX.
- Create rich interactions and behavior.
- Connect with arbitrary data source and backend integrations.
- Content creator mode: give specific collaborators a more simplified and restricted editing experience.
- Deep collaboration with multiplayer, branching, cross-project imports, and multi-workspace organizations.
- Integrate with codebases for unlimited flexibility and scale.
- Drag/drop and visually manipulate your own React components—design systems, interactions, data, behavior, and more. Extend and customize Studio with custom controls.
- Import designs from Figma, translating its proprietary vector document format into DOM/CSS.
- Powerful abstractions like components, variants, slots, composable state management, and more that promote composition and let you build and maintain at scale.
- High-performance and high-quality codegen. Supports static site generation, automatic image optimization, layout shift reduction, and more.
- Customizable design system components. Powered by react-aria. Most component libraries give you variables to tweak, but here you can completely change the structure and layout.
- Deploy/host/export anywhere.
- End-user auth and permissions.
- Versatility in use cases. The line between websites and web apps is blurred, and Plasmic is a first-class builder for the full spectrum.
How does Plasmic integrate into a codebase?
What you build in Plasmic can be consumed flexibly. The most common use case is consuming Plasmic designs like CMS content over an API, but you can also generate code into your codebase, or even publish pages to platforms like Shopify. Plasmic aims to be versatile and integrate into any environment.
Furthermore, your existing code and components can become building blocks in Plasmic that you can drag/drop and configure. They can be anything from design systems to data sources to complex interactions, and more. They can come with custom Plasmic Studio controls as well, to make the editing experience scale to any domain.
You leverage your existing SEO, analytics, core user flows, hosting, CI/CD, and other infrastructure. For anything with non-trivial interactivity, all the logic/behavior—state bindings, event handlers, etc.—are all done from your own code.
To learn more, see the Technical Overview.
Starting from Figma
Using Figma? Great! Creating from scratch in Plasmic has a number of advantages, but if you have existing Figma designs, you can import them into Plasmic using Plasmic’s best-in-class Figma-to-web converter. Note that this just gets you to a starting point, as you’ll often want to spend more effort to turn static drawings into a real usable site. Learn more about importing from Figma.
Next steps
I have more questions!
Continue learning:
We’d love to hear all your questions and thoughts! Reach us on our Slack community.