New in Plasmic: interactive components, real-time updates, insertable templates
We’ve been quiet for some time since we’ve been heads-down on a set of foundational new features, but these are now landing—expect another announcement email soon!
Spread the word!
Are you excited about Plasmic and where it’s headed? Let others know! We want to grow a community of creators this year and we’ll need your help to do so—thank you for your support and for following along with our progress!
Made a thing? Tell us!
We’re putting together a gallery showing off what users have made in Plasmic. If you’ve made something, let us know and we’ll feature it in our forthcoming gallery. If your site is also published on the web, the showcase will give your site some extra attention while inspiring others in the Plasmic community!
Real-time watch mode
We’re thrilled to see more and larger teams adopt Plasmic. As this happens, collaboration features are coming more to the forefront.
We are starting work on this front with support for streaming real-time updates from the person editing a Plasmic project to all other viewers who have the. This way you can follow along as the editor is making tweaks and not need to reload whenever a change is made.
Please continue to let us know what other team/collaboration/organizational features are most important for you!
Built-in interactive components
We are introducing interactive components — components that you design, but comes fully interactive and accessible out of the box! We are starting out with some of the most popular requests — Select, Checkbox, and Switch.
These components are not just a set of pre-built components that you can lightly theme. Instead, you can fully customize their appearance, and build custom variants to suit your needs, just like you can for any component you design in Plasmic! With interactive components, you can easily create completely bespoke design systems. And, with tight integration with the Plasmic Studio UI, they are easy to build and even easier to use.
Here’s a video that explores designing and using a Select in your project:
We are building our components on top of the amazing React-Aria library, which means these components will come fully interactive and accessible — focus and keyboard shortcuts will just work according to best practices!
We are starting out with just three components, but we’ll be working on more. We want Plasmic to be the starting place for your design system of your site or application. If you want more components, please let us know by Slack or email.
Insertable templates and more starter projects
Plasmic's layout engine is powerful and incredibly customizable, but busy users may want a faster way to get started building out their pages. With insertable templates, users can now quickly add beautiful, fully responsive sections to their designs! We offer a rich gallery of common pre-built templates, including hero sections, pricing sections, and much more—elements common in landing pages, e-commerce storefronts, and marketing websites.
To explore these pre-builts, click on the blue plus button in the Studio and navigate to "Template blocks". This will open up a new insert menu that shows a larger gallery of visual images of all insertable templates. Once inserted, it’s a normal set of elements, so you can fully change any aspect of it.
We’ve also added a couple new starter projects! This includes a full e-commerce storefront and a brand-new landing page starter. You’ll see these the next time you click on New Project from your project dashboard.
We want Plasmic to not only be a powerful no-code tool, but also a “no-design” tool that lets anyone—designer or not—ship incredibly fast.
And more
If you know teams that may be interested in Plasmic for other environments such as Vue, Angular, vanilla HTML, or PHP/Wordpress—we’re looking for early access testers for our next iteration of PlasmicLoader, so we’d love to hear from them!
We now make it more visually clear when you are editing a variant with red selection outlines and right panel.
Can now set page metadata, include meta description for SEO and the social media sharing preview thumbnail image. Supported for Next.js.
Can now hide elements with display: none, which yields better support for building responsive pages within SSG/SSR frameworks like Next.js and Gatsby.
Repos that were created in Plasmic and published to Github Pages now support running the Github Actions workflow on all pushes to the repo. So in addition to continued changes from within Plasmic, pushing code changes will also trigger a new site deploy.
When a component instance is selected, you can now jump to the dedicated canvas for that component by pressing cmd+alt+enter (ctrl+alt+enter on Windows).
Added shift+H and shift+V to set the currently selected box to horizontal and vertical stack layouts, respectively.
Can now set the “ID” attribute on HTML elements and the “target” attribute on links.
Many more bug fixes and improvements.