Changelog

Follow @plasmicapp on Twitter to stay up to date with our progress.

2021-11-10 Making Plasmic easier and faster

Hiring founding developer advocate!

See our open role for more details! Referral reward also available.

Plasmic at Next.js Conf

In case you missed the recent epic Next.js Conf, be sure to catch all the great talks from some amazing speakers, as well as the exciting updates in both Next.js 12 and the Vercel platform’s new edge runtime.

This includes the session featuring Plasmic, and bringing visual editing to Next.js!

All-new simplified layout

We want to make creating beautiful experiences to be fast and easy for everyone, whether or not you know anything about design or responsive layout. And for power users, we want to make the editing experience as fast and enjoyable as possible.

To that end, Plasmic Studio is rolling out a brand-new simplified layout experience.

It starts with new on-canvas drag handles for controlling spacing (margin and padding). More importantly, we now selectively replace size controls with spacing controls. We want to help users fall into the “pit of success” when it comes to layout, by preventing the most common mistakes we see users making—and in many situations, users should focus on spacing rather than sizing, letting sizing be fluid and determined by the device size and content size.

Furthermore, we’ve adjusted the on-canvas drag-resizing behavior to make it harder for you to create oversized or undersized elements even on smaller screen sizes. We now prefer to set max-width and min-height (instead of just width/height) where appropriate.

Lastly, all elements—especially stacks and text elements—have new default layout settings, such as max-width on text elements to limit line length.

So now you can simply start dropping in elements, get reasonable defaults, and start drag-sizing things without ending up with broken layout on other screen sizes.

Together with the new responsive columns (below), you can now to slap together fluid, responsive pages without thinking about layout at all. Layout is pervasive throughout the page-building experience. This simplified layout experience is an important pillar in our bridge toward an easier-to-use Plasmic.

New responsive columns

Responsive columns have received significant upgrades! Responsive columns are now Plasmic’s primary tool for defining layout. They make whipping up layouts fast, easy, and responsive out-of-the-box.

You can now configure column sizing, by directly dragging on the divider in the canvas:

You can also configure column count per row and their sizing (instead of always becoming a single column):

You can also vary the configuration at multiple breakpoints, just by recording your edits using the conventional variant system:

Beautiful default design system

We have released an entirely new, fully themed set of built-in components: buttons, inputs, selects, checkboxes, switches all have been revamped. A number of these used to be completely unstyled, requiring you to first spend time crafting your own design system.

These come with a number of functional upgrades as well. Buttons for instance can behave not just as strict action buttons, but as links—much more common when building websites.

Beyond components, we now also provide a simple initial set of typographic styles as well:

We want to provide a beautiful but simple set of primitives so that you can focus on your composition, content, and user experience from the first minute.

And the moment you want to, you can still drop into editing any aspect of these components and styles to fit your theme and brand. Because these are powered by the Plume “meta” design system, you can go far beyond the usual variable-tweaking offered by most component libraries. You can completely change the layout and structure of these components, add new types of variants and transforms and transitions that they never came with, and much more—all while still knowing they’re fully functional and accessible out-of-the-box.

And more

  • Now supports the newly released Gatsby v4
  • No longer prompted for auth when opening devtools in Plasmic Studio
  • Can now add “grabbing” cursors
  • Can now set gap in the defaultStyles when registering code components
  • Can now set more types for meta props
  • Many more performance and reliability improvements to both the Studio and to codegen

2021-10-19 Image optimization, code component templates, conference talks

Automatic image optimization

Generating high-quality, production-grade assets is a core focus of Plasmic, and performance is a critical piece of this focus. Performance not only directly impacts bottom-line conversions and revenue, but since earlier this year with the Google Page Experience update, it now affects search rankings. Images are often a significant factor affecting performance.

Plasmic now serves fully optimized images. All images employ best practices that optimize for Core Web Vitals:

  • Automatically serve resized images for different window sizes and screen densities.
  • Properly preserve vertical space for dynamic-width images, to minimize content layout shift.
  • Use modern image formats (webp) if possible.
  • Lazy loads by default.

This means you can freely paste arbitrary source images straight into Plasmic and design rapidly, without having to think about manually downsizing or encoding the image. The work is inspired by components like next/image, but designed to behave as similarly as possible to normal img elements, particularly when it comes to layout.

This is being rolled out over the coming days, and will soon be enabled in all projects and included in all plans, including the free tier. You’ll be prompted to opt-in individual projects the next time you open them, which will convert all its images. After 3 months, all projects will be auto-migrated.

Presenting at Next.js Conf and Jamstack Conf

Our own Yang Zhang gave a talk at Jamstack Conf 2021 this month on the rise of some emerging approaches to page performance. Get a glimpse into the worlds of Astro, Marko, React 18, React Server Components, and more!

We’ll also be on stage at next week’s Next.js Conf this October 26, talking all about bringing visual building to Next.js. Our friends at Vercel have an amazing event in store, and it’s all-online and free—don’t miss the conference, register now!

Register for Next.js

PlayVS ships 4x faster to their logged-in app experience

PlayVS supports esports leagues around the country at the high school and collegiate level. Each season, they need to publish a lot of new design-rich content to their app. However, the typical engineering workflow of gathering requirements, engineering estimation, development, testing, code review, and release, meant that content updates were few and far between. Users frequently pointed to the stale content still being served by the app.

PlayVS needed a better solution for visual content like banners, referral pages, and featured tiles that would be shared across the application and marketing page.

Within 24 hours of deploying our first Plasmic-generated component, it proved its value. Multiple teams and stakeholders could change the content and redeploy multiple times in a day. It was instant, no developer required.

—Neel Palrecha, CTO, PlayVS

Read the full case study

And more

  • Can now define default slot contents and default styles for code components—so when your content editors insert a Menu, you can ensure they don’t get just get an empty-looking container for the Menu itself, but a full set of example MenuItems. You can even define multiple such templates. See the new examples in the docs!
  • Can now set the default typography styles of common text tags, including headers (h1–h6), paragraphs (p) and links (a).
  • Can now define font family tokens.
  • Explicitly sized items now default to having flex-shrink: 0 for more intuitive layout behavior.
  • Significant performance improvements for large projects.

2021-09-21 Design with dynamic data, Intuit case study, sticky/fixed position

Intuit ships in half the time with Plasmic

Intuit’s Marketing Technology team is responsible for driving conversions on the marketing website, which includes the conversion pages for Intuit’s flagship TurboTax product, seen by millions every day. In order to get experiments to market quickly, the team uses a homegrown CMS platform to deliver these experiments. However, this faced a number of challenges, since implementing CMS blocks is ultimately bottlenecked by engineering velocity.

With Plasmic, Intuit was able to enable teams outside of engineering to create and iterate on more A/B tests in weeks, not months. The resulting Plasmic content has been used in experiments across the marketing website and ultimately drive significant increased conversion.

“We only have a window of 6-8 weeks leading up to a tax season peak to launch experiments, where we launch, get confidence in results, and roll it into the baseline. With everything from small tweaks to big swings, Plasmic helps us more than double what we can do within this short window. We were able to find significant conversion rate lift with Plasmic.” —Nate Winn, Senior Product Manager

Read the full case study.

Design with dynamic data

Code components have changed the game for Plasmic. By bringing your own components or off-the-shelf components from npm, you can visually build with any design system, display dynamic data, and extend Plasmic with any interactions and effects you want.

Code components have just received a significant upgrade. You can now design arbitrary dynamic data displays using code components. Plasmic Studio users can drag and drop data fields (whether text or rich media), arrange them in any layout, and style them however they’d like. By adopting a standard technique of adding (1) container components that provide the data to their slot contents (children prop), and (2) components to consume and display parts of that data, you can enable this degree of flexibility via composition.

This extends to displaying collections of data. Whether you’re displaying a list of blog posts from your CMS or a grid of products from your ecommerce backend, you’ll now be able to design exactly what each item looks like, and let your component render the children in a loop over the data. With a special repeatedElement() annotation in loop over children, you can ensure Plasmic Studio smoothly handles selection/edits, so that they’re redirected to just the first occurrence of the children.

Learn more in our docs. We’ve updated all the data-driven parts of our code components expo, so you can see exactly how it’s built, clone it, and change up the design! Or check out exactly how the code components work.

Bonus tip (thanks to our users for the nudge!): you can ensure these data components work well with SSG/SSR frameworks without needing to up-front declare the required data. Today, there exist approaches like react-ssr-prepass or Apollo getDataFromTree for enabling component-level fetches on the server. This enables your editors to design with any data and without developer involvement. We’re especially excited for forthcoming server-side Suspense features in React 18!

And more

  • Plasmic Teams and Workspaces are now live. See our prior update for the details.
  • Fixed and sticky positioning is here!
  • You can now specify arbitrary HTML attributes.
  • You can now specify different horizontal and vertical overflow settings.
  • If you use @plasmicapp/loader-nextjs and it hasn’t been rendering your latest changes from Plasmic, please update the package with npm install @plasmicapp/loader-nextjs (or yarn add @plasmicapp/loader-nextjs).
  • We’ve set up a Discourse forum, where community questions and answers are made more discoverable and searchable, and includes answers from the Slack community. (Our Slack chat community is not going anywhere!)

2021-09-14 Teams and workspaces

Teams and workspaces

We are excited to be launching Teams and Workspaces soon, which have been a top request from our users!

Previously, all Plasmic projects were owned by individual user accounts. This required sharing each project with every collaborator they wanted to work with, and furthermore maintaining this across projects and collaborators over time. It was tricky to ensure everyone could always find the projects the team was working on.

With Teams in Plasmic, creating and sharing projects between collaborators is now much easier, with both projects and team members managed centrally. Furthermore, within a Team, you can group your projects together into Workspaces, and set varying Workspace-level access. On top of this foundation, we will later be adding more new team-oriented and premium features as well.

Along with these changes, we will soon begin to instate our free tier limits as advertised in our pricing page:

https://www.plasmic.app/pricing

For more information, please check out our FAQ:

https://medium.com/plasmic-app/teams-and-workspaces-faq-f241025fff3

If you are interested in getting early access, please reach out and let us know the emails of users from your team that want to try this!

And more

  • Can now specify ARIA roles and common ARIA attributes to make your designs more accessible!
  • Can now specify autocomplete attribute on input fields.
  • Can now specify variants and slots in the HTML REST API.
  • New pop-out preview window now hot-reloads your design edits as you make them.
  • We’ve significantly simplified how to register code components with the PlasmicLoader libraries—see the updated docs.
  • You can now right-click the eye icon in the left tree to specify how you want to hide the element—the default is to set display:none, but you can also choose to “not render” the element at all.
  • Can now Paste Styles onto a code component.
  • Custom fonts are now imported as part of cross-project imports.
  • @plasmicapp/host package now introduces fewer dependencies.

In case you missed it

Just some of the new things that have come out in the past month+:

  • Real-time multiplayer editing
  • Libraries for consuming designs for multiple frameworks
  • An HTML REST API that you can use from anywhere
  • CSS 2D/3D transforms

See our historical Plasmic updates!

2021-09-02 Plasmic beyond React

Beyond React: Plasmic for any stack

We’re incredibly excited to announce that Plasmic can now be used in tech stacks besides React applications.

Using a React SPA? Vue? A Wordpress/PHP setup? Another SSG like 11ty or Hugo? You can now use Plasmic across all of these environments and more!

See quickstarts and API docs for: “plain” React, Next.js, Gatsby, Vue, Nuxt, Angular, PHP, vanilla JS, and direct REST API access with curl.

Or click the Code button in Plasmic Studio to see the quickstarts right from your project, complete with the project ID and API tokens available for you to copy and paste directly into your code.

This is a milestone that we’ve been excited to get to since the inception of Plasmic, and even more so as we recently started working with teams that straddle an increasingly diverse set of environments. We’ll continue to work on making Plasmic into the most versatile, universal visual builder for any platform.

In the meantime, we’re excited to hear all your questions and feedback on the Plasmic Slack community!

New Plasmic libraries for React

We have not stopped pushing forward on the React front either!

Since its introduction, PlasmicLoader has quickly become the primary way that Next.js and Gatsby developers consume Plasmic content into their apps—anything from marketing websites to headless commerce storefronts. These libraries enable a familiar CMS-style workflow of consuming designs, without needing to manually generate, commit, and manage Plasmic code within their codebase.

Now, alongside the libraries released for frameworks beyond React, we’ve also released new libraries for Next.js and Gatsby as well. Furthermore, we’ve added a library for “plain” React as well—this works with both client-rendered SPAs and server-rendered React apps.

All the new libraries build on the same uniform foundation that consumes designs entirely over an API, rather than generating source files into your codebase at build-time. This enables modes of integration that were not possible before, such as the ability to publish Plasmic designs into your running app, without needing to trigger deployments or otherwise couple builds with Plasmic publishes. One great way to see this is with Next.js’s Incremental Static Regeneration (ISR) feature, which is as easy as adding a revalidate field to your getStaticProps!

If you are on @plasmicapp/loader, we strongly recommend upgrading to @plasmicapp/loader-nextjs or @plasmicapp/loader-gatsby. @plasmicapp/loader will continue to work, but new development will focus on the new libraries. We have docs on migrating available.

If you are using “plain” React, install @plasmicapp/loader-react. We continue to recommend codegen for developers implementing complex or stateful frontends.

Plasmic for Shopify: call for early access

We have started working with some teams that run Shopify-hosted stores. If you’re interested in early access to Plasmic’s Shopify app, please let us know!

2021-08-05 Multiplayer, CSS transforms

Multiplayer editing

We are thrilled to see more and larger teams adopt Plasmic!

As such, we are excited to announce full multiplayer editing support in Plasmic Studio. Your whole team can be in the same project, all making changes at the same time.

This is one step in a broader push for deeper team and collaboration features. Keep the feedback coming on what you’re looking for!

CSS transforms

You can now add 2D and 3D transforms to any element—rotations, scales, skews, translations, and any combination of these. Rotations in particular have been a highly requested feature!

Besides using transforms by themselves, they go great with transitions to achieve effects and microinteractions! For instance, easily make a button that lowers a bit when pressed, an image that enlarges on hover, or cards that flip around.

You can apply 3D transformations, and combine with transitions as well:

Check out all of these examples in this Plasmic project!

And more

  • Can now add backdrop filters in addition to filters. Backdrop filters affect things behind the box.

  • Can now add name attribute to input elements.

2021-07-07 Instant previews and prototypes, CSS filters

Instant previews and prototypes

We have introduced a new live preview mode!

Links fully work, so you can now do click-through prototyping of your site.

And every screen you see in preview mode is itself linkable—simply copy the URL from your address bar and share it to start getting feedback on your website.

A new toolbar along the top lets you jump to any page/component and switch to viewing any variant, without leaving preview mode.

You can also pop-out a new live preview, which shows no Plasmic Studio chrome and will behave like a normal website. This makes it possible to instantly share these links for user-testing, or even to preview from your mobile device.

Furthermore, you can switch between variants—transitions between these will just work, letting you preview and prototype things like microinteractions between the different states of your components:

(Open this simple microinteraction example project.)

Check out the new preview mode and let us know what you think!

New right pane

The right pane is central to interacting with Plasmic. We have just launched a revamped, streamlined right pane! The aim is to make it less busy, less sprawling, and more approachable—without hindering speed for those users who are ramped-up.

For instance, you can now set layout more visually and intuitively:

Padding and margin controls are tucked away:

And many more changes!

Please play with it and share your feedback, on this and on other areas of the Plasmic Studio UX!

Filters

You can now add many different types of CSS filters to your elements, everything from blurs to drop shadows:

Keep sharing what else you’d like to see!

And more

  • Keyboard shortcuts for changing font size: Cmd+Shift+< and >.
  • Keyboard shortcuts for changing font weight: Cmd+Alt+< and >.
  • Now automatically uses smarter, better-matching default fallback fonts.
  • Can now use vh sizes in your designs without elements taking up your full artboard height—you can set a virtual screen size for your artboards to determine what 100vh should be shown as.
  • Can now define “presets” for code components. Before, when Plasmic Studio users insert (say) a Material UI Button Group, they would get an empty box, and would need to assemble something more recognizable manually. With presets, developers can ensure that inserting a Button Group will also include a few Buttons, each containing some text. So presets are basically “templates” or full trees of elements that users will always get when they insert a code component.
  • When you have images inside a component, you can now expose their shown image (the src) as a prop on the component.
  • Code components can now take “choice” prop types (shown as a select).

2021-06-15 Announcing Plasmic 2.0: code components, and application-hosted Plasmic

Code components, and application-hosted Plasmic

After many months in the lab, we’re incredibly excited to announce Plasmic 2.0! This marks one of the biggest architectural shifts so far in Plasmic.

A key capability this shift enables is code components. You can now use React components from your codebase directly in Plasmic Studio! After dropping in a snippet of code into your codebase, developers can expose any component that they’ve either defined or imported, enabling Plasmic Studio users drag and drop these components into their designs.

Check out the code components launch page!

Easily insert components from the entire universe of off-the-shelf npm libraries, such as Google Maps, Youtube videos, and many more.

Register design system components, including from popular libraries like Material UI or Ant—fully functional components that adhere to your overall brand, with all your theming and customizations applied.

Or expose arbitrarily complex components from your own codebase. For instance, interactive product galleries that fetch personalized data from an ecommerce backend and use application state.

You can even introduce some pretty abstract code components, like generic “Embed Code” components, parallax tilt wrapper components, or reveal-on-scroll wrapper components. You can truly extend Plasmic with new features.

With code components, developers can provide the exact application-specific building blocks to empower the rest of their team—you can truly make Plasmic your own.

The way Plasmic supports code components is a little different than what you might have seen in other tools. It’s enabled by a foundational new feature called “application-hosted Plasmic.” In short, Plasmic has a kernel that runs from within your application—your app serves as a “host” for Plasmic. This tight integration is how you can easily and seamlessly expose code components to Plasmic. As a result, there are no restrictions on the complexity of the components used, no separate bundling shenanigans, etc. You can set the app host to be your localhost dev server (complete with hot reload working!) or your actual production site.

Simply add a snippet of code, and now you can configure any Plasmic project to use your application URL as the host. Then expose any component by calling registerComponent() on it. That’s it! See the developer docs.

You can play with code components in this example project. The host app’s source code is available on Github—see the component registrations.

This is just the start of what application hosting enables. For now, we’d love to hear your feedback on code components and what this unlocks for your team!

There’s more!

  • Can now right-click horizontal stacks and convert to responsive columns.
  • Can now set responsive columns to reverse the order of their items.
  • Can now select a text element and press Cmd+B to toggle boldness.
  • Can now rename variants from the canvas.
  • Speed and memory consumption improvements.
  • Many more bug fixes and improvements!

2021-06-08 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!

Submit to showcase

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 project open. 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.

2021-03-29 Publish websites, push to GitHub, webhooks, dedicated canvases

Publish from Plasmic

You can now publish to production straight from Plasmic Studio! Introducing the new Publish modal:

This includes pushing to GitHub, deploying websites, and integrating with custom build pipelines.

GitHub integration: You can now push commits or PRs to any GitHub repo, or trigger PlasmicLoader builds (run by GitHub Actions). You can create a brand-new repo from scratch, which lets you choose a React stack powered by Next.js, Gatsby, or Create React App. But this also works for existing repos that do not already have Plasmic installed, where we’ll inspect your codebase to auto-detect the right options to configure Plasmic with.

Website publishing: When creating a new GitHub repo, you’ll have the option to publish a full website end-to-end. This is powered by the GitHub Pages CDN, but lets you choose a “your-website-name.plasmic.site” domain. We also have instructions on how to set up a custom domain, and how to easily host with more great hosting providers including Vercel and Netlify.

This lets you instantly publish a website without touching any code or CLI. But the best part—since this is just using your GitHub repo, you can at any time start adding arbitrary React code! The repo includes a GitHub Actions workflow that will automatically build and deploy when you push commits to the main branch.

Webhook triggers: If you have a custom build pipeline—for instance, one running on Jenkins, Netlify, Vercel, GitHub Actions, or elsewhere—you can now kick off jobs using webhook integrations. This is useful if you are using PlasmicLoader or (for Codegen) have “plasmic sync” running as part of your CI/CD process.

We’re very bullish about enabling project editors in Plasmic Studio to directly publish and iterate on the content and design. More generally, we’re working on enabling users to do much more from within Plasmic Studio. Play with the new publishing features and let us know your thoughts!

Dedicated arenas

Plasmic has featured an infinite canvas of artboards from day 1—we call these spaces “arenas.” This is a paradigm that is familiar to any user coming from professional vector design tools. It affords a great deal of flexibility when it comes to how you want to set up your workspace of artboards. But the experience can also seem foreign and complicated for users not used to this paradigm. Furthermore, even for experienced users, whenever you jump into a new project, the visibility of pages and components and variants depends entirely on what artboards were laid out in the arenas.

To make Plasmic both more approachable for new users and easier to navigate in general, we’re introducing arenas that are focused on a specific page or component. The project list in the top left of the studio will now let you switch to editing a particular page or component—you don’t need to manually create artboards for everything to make them visible. Simply jump to the page or component you want to see or edit.

A powerful feature of these dedicated arenas is that they fully manage your artboards for you. Every variant of your component or page is automatically shown as a different artboard, which are grouped, positioned, and even sized automatically. Artboards and variants correspond 1:1, and you can now create new artboards to create new variants. This automation guarantees you always see all the different variants of a component, and ensures you always see the effects of your changes across all variants—no more “buried” variants. Editing a variant is also more intuitive—rather than toggling variants on/off dynamically on your current artboard, simply go to the right artboard and make your edits.

For pages, you’ll also always see the different layouts of a page across desktop and mobile—you can set up an arbitrary set of screen sizes, which will be consistently shown across all your pages.

This is one step in the direction of making Plasmic significantly easier to use and navigate, for everyone. We have many more plans in this direction—in the meantime, please keep the feedback coming!

PlasmicLoader v1.0

We previously announced PlasmicLoader for Next.js and Gatsby—this is a new way for you to consume your Plasmic designs from your code; instead of generating code into your codebase, you can simply drop in a one-time code snippet that will always load the latest published version of your Plasmic component. This enables non-developers to freely edit and publish without needing to loop in developers at all.

We just released a slew of enhancements to make PlasmicLoader a first-class citizen.

Support for pages: When you create pages and routes in your Plasmic project, the PlasmicLoader integration will automatically ensure all defined routes are served in your final running app! (Existing pages in your source repo always take precedence.)

Docs portal: When you click on the Code toolbar button, the developer docs hub now has complete docs on PlasmicLoader as well as Codegen, including an interactive API explorer showing how to render your components when using PlasmicLoader.

Component substitution API: PlasmicLoader now lets you can attach arbitrary custom code/behavior and swap in existing code components for any Plasmic component. (This is equivalent to introducing logic in wrapper components in Codegen.) See the full docs.

Check out the Developer Quickstart to get started with PlasmicLoader and let us know what you think!

create-plasmic-app

Creating a brand-new repo that is integrated with Plasmic is now a single CLI command. This is especially helpful for users who are wanting to try out Plasmic (either Codegen or PlasmicLoader) on a new codebase.

Simply run “npm init plasmic-app” or “yarn create plasmic-app”, which will take care of creating a brand-new Next.js/Gatsby/Create React App project, setting up Plasmic integration, and syncing with a project of your choice.

In addition, “plasmic sync” now features an express setup, which lets you accept all default options quickly.

This is now featured on the Developer Quickstart, in addition to the manual setup steps for adding Plasmic to an existing codebase.

Project API tokens

When you sync Plasmic designs to a codebase using either codegen (“plasmic sync”) or PlasmicLoader, you needed to authenticate as a user using the user’s API token. This meant that everyone on a team that wanted to sync (or simply start/build the project if using PlasmicLoader) needed to authenticate with Plasmic. Additionally, CI/CD jobs had to be configured with the right user secrets, and a separate user had to be provisioned for this purpose (since the tokens grant access to anything the user can access).

Now, when you first sync as an authenticated user, our tools will grab project-level API tokens for you to store into your repo. Unlike the user-level tokens, project API tokens grant read-only access to just that specific project. You’re encouraged to commit this to your repo, as the projects are generally considered to be no more sensitive than the rest of your source. This directly improves development team collaboration and CI/CD integrations.

For PlasmicLoader, these tokens will be stored in plasmic-loader.json.

And more

  • We have started our open source repo at https://github.com/plasmicapp/plasmic. Feel free to give us a star—more to come here!
  • Screen variants are now surfaced more prominently in the right pane, instead of buried under “Global Variants”. There is now also a tab in the left pane dedicated to managing and editing the screen variants you have. We are trying to make it easier and more intuitive to work with responsive designs; stay tuned!
  • You can now drag image and icon files from your desktop directly into the main canvas to insert them at your current selection.

  • You can now have stacks reverse their items. This is especially useful when creating responsive components like the following, where you want a different order on desktop vs mobile.

  • The artboard controls have been moved into a control in the top right of the artboard, so this won’t take up space in the right sidebar.
  • New projects always set you up with a default Screen Variant (breakpoint) and default new Homepage.

2021-02-18 Pages, API mode, starter projects, overhauled perf

New method of code integration with PlasmicLoader

Turning your designs into production code is Plasmic’s flagship capability. Until now, we have done this by generating code directly into your codebase. This allows you to treat Plasmic-generated code just like any React code, checked into your git repo, and deployed by your usual pipelines.

However, this means developers must always be involved in deploying design changes made in Plasmic, which introduces a lot of friction in use cases like static websites, where designs and copy-writing are mostly done by non-developers, and the produced content usually don’t require developer instrumentation.

We’re now introducing an alternative mode of consuming Plasmic designs. Rather than generating code into your codebase, you can simply drop in a one-time code snippet that will always load the latest published version of your Plasmic component. This means that designers and marketers can freely edit and publish continuously without waiting on development cycles, and developers are freed entirely from ongoing requests. These are the same workflow benefits of adopting a CMS—you can effectively use Plasmic like a headless CMS, but for authoring free-form visual content rather than schema-structured content.

This initial release is only for Next/Gatsby frameworks. For Next/Gatsby apps, this loading is done statically at site build time, so there is no dynamic run-time cost incurred. We have authored plug-ins for both frameworks that ensure Plasmic assets are rendered directly into your statically generated site.

The code snippet is as simple as the following:

<PlasmicLoader componentName="LandingPagePromotion" />

From then on, the landing page promo can be continuously updated directly from Plasmic Studio. Every time your Next/Gatsby site is built, the latest designs from Plasmic will be picked up and incorporated, without involving code or bugging developers.

As with codegen, you can still freely override anything on these components from your own code, attaching custom logic, behavior, and state/data.

This API mode is particularly well suited for websites and other applications that don’t need to attach a lot of code to the designs (where there’s lightweight coupling between the design and code). If you’re building more complex components with tighter interaction with code, then code generation into your codebase continues to be a more natural shape of integration. You can also mix and match the integration modes.

To get started, see our new Quickstart docs.

This is another step on the path to making Plasmic the most versatile visual builder, able to integrate into any application and accommodate any use case. We’re particularly excited about refining this use case and better serving our JAMstack users, so please let us know your questions and feedback!

Pages

Plasmic can be used to build complex stateful applications (such as Plasmic itself), but perhaps the most common use case for Plasmic is building websites!

To streamline this use case, we are now introducing Pages. These are similar to normal Components, with a few differences:

  • They are always sized to fill up the entire viewport.
  • You can set a route path and browser tab title for the page.
  • They are not “reusable”, so you won’t see it in the insertion menus and won’t be able to insert an instance of a Page into another component.
  • You can now point link elements (<a />) to a Page in your project, in addition to arbitrary URLs.

But the real magic happens when you use Pages in a Next or Gatsby project. We will automatically generate component files into your pages folder, named after the page route you specified in Plasmic, so they will automatically become pages you can navigate to. And we’ll replace links to other Pages with the appropriate Next and Gatsby Link components too, so page transitions are optimized for each platform.

If you are running plasmic sync for the first time, we should be able to automatically detect if you are using Next or Gatsby, and do the right thing. if you already have an existing plasmic.json file, you can just update the [platform](https://www.plasmic.app/learn/plasmic-json/#platform) field appropriately to take advantage of platform-specific code generation.

All this also works seamlessly with the new PlasmicLoader integration announced above. Once you have PlasmicLoader set up for your Next or Gatsby project, the next time you create a new Page in Plasmic, it will automatically show up in your site, without involving code or bugging developers!

Beyond creating new pages, there’s much more we want to enable you to do end-to-end from within the Studio. We’re doubling down on this direction, so please try it out and let us know what you think!

Starter projects

To make it easier for anyone to get started with Plasmic, we are introducing starter projects. These include templates and examples that you can clone from the dashboard in one click.

Quickly build a landing page, customize an e-commerce store design, dissect the high-fidelity Twitter clone, or add a signup modal to your existing site.

Check out the starters just by logging in (they’re in the Get Started section of the dashboard), and let us know what else you would like to see!

Overhauled performance

Performance is a feature, especially for a tool like Plasmic, and we’ve recently made huge strides in this department. In summary:

  • Plasmic Studio and all other pages load many times faster.
  • All drag manipulations like resizing and positioning are significantly smoother, especially for larger projects.
  • In general, edits to pages are 10x faster/snappier, especially for larger projects.
  • Code syncing is significantly faster and avoids regenerating unchanged files.

And more

  • Setting backgrounds on elements is much simpler—we no longer distinguish background-color from the rest of the layers, nor limit it to the first layer. You simply have a stack of background layers, which can include solid fill layers.
  • Figma imports are now significantly higher fidelity and result in much cleaner code output.
  • Preview mode now lets you resize the viewport, so you can more easily explore a responsive design.
  • When publishing a new version, we now show more details on exactly what have changed since the last time you published.
  • Refreshed top bar (built with Plasmic!)
  • Lots and lots of bug fixes 😅

2021-01-14 Auto-generated docs portal, responsive columns

Auto-generated developer docs portal for Plasmic projects

A central feature of Plasmic is its integration into a codebase. Plasmic components provide a rich API that optimizes for developer flexibility. Currently, the main ways to learn this API are by reading through the docs and using type completions.

Now, we’re excited to launch our auto-generated documentation portals for Plasmic projects. Here, you can browse and interactively learn about all the components from your own Plasmic project, including how to use them from code. The portal is there to help whether you’re trying to integrate your own designs or you’re handing things off to other developers.

The portal features a gallery of all components, and for each component, you can:

  • See the API for this specific component.
  • Interactively play with its variants. As you make changes, you’ll see both the rendered preview and the code editor update to reflect the activated variants.
  • Make edits in the code editor to try out different invocations of the component JSX.
  • Visually inspect the elements that constitute the component, to help elucidate the structure.

Please take a look and let us know what you’d like to see here!

Responsive columns

A very common design pattern is to have a few columns that are laid out horizontally on the desktop but switch to laid out vertically on mobile. While it was already possible to do this using the stack containers in conjunction with the Screen global variant, we’ve made it even easier by introducing a new Columns primitive! Simply specify how many columns you want and what your breakpoint should be, and it will work as you’d expect:

Reveal ancestor elements

Because layout can be very hierarchical, it can be challenging sometimes to select just the right element on the canvas, especially if the parent elements are the same size. You can now hover over the blue element tag on the canvas, and we will reveal the ancestors for easy selection:

Re-ordering variants and variant groups

You can now use drag handles on variants and variant groups to re-order them to just the way you want!

And more

  • Can now search for color tokens by their hex values (in addition to their names).
  • If you rename or delete components, icons, or images, then when you do plasmic sync, the corresponding Plasmic-managed files will also be renamed and deleted. Note that we still do not touch the wrapper component files — they may contain edits that you’ve made, and we leave it up to you to decide what to do.
  • The floating component variants toolbar will now be positioned more closely to the component you’re editing, instead of always at the top.
  • Component variants panel on the right has been refreshed for clearer organization.
  • Saving on large project files should now be much faster.
  • As usual, tons of other UI tweaks, performance improvements and bug fixes. Thanks for all the feedback, and please keep it coming!

2020-12-08 Rich text, toggle variants, streamlined insertion

Rich text editing

All text elements in Plasmic now support basic rich text editing!

While editing a text block, you can now select a snippet of text, and use command+b / command+i / command+u to bold / italicize / underline the selected text.

This is just the start, where we’ve laid the important groundwork for adding more rich text editing controls in the future. Let us know what you would like to see!

Toggle variants

In Plasmic, you’ve always been able to create variants to express the different states, responsive configurations, and other flavors of your components. These variants always belonged to a group, such as a group “Size” containing “Small” and “Large” variants, or “Type” containing “Primary” and “Outline” variants.

It’s now possible to create standalone variants outside any group, called toggle variants. For instance, if you just want to create a “Selected” variant for your Menu Item component, or an “Unread” variant for your Email Message, you can now do so directly (without creating a group). You can then easily flip this on or off on component instances.

https://www.dropbox.com/s/h4n2n9dt7di77ly/Kapture%202020-12-07%20at%2020.09.27%20%281%29.webm?dl=0

In-place insertion menu

Besides the global insert menu, Plasmic now offers a more inviting in-place insertion menu, directly located by where you would actually be inserting elements. You can also access it by pressing the “i” key.

The menu also lets you choose where you want the insertion placed by clicking any of the available options or pressing the “tab” key to cycle through them.

And more

  • Added Cmd+Shift+V shortcut to paste after the currently selected element (rather than into the current selection).
  • Artboards now auto-resize when you activate a Screen Variant.
  • More right sidebar sections are collapsed by default, to simplify the amount of information presented up front.
  • plasmic init now auto-detects when you’re in a Next.js project and suggests better defaults.
  • plasmic init now can authenticate you automatically by opening your browser (no need to find and paste your API token).
  • Now when generating images as standalone files, you can choose whether the images should be placed into your src directory (where they would be imported into the JSX via your module loader) or into your public assets directory (where they would be referenced by some absolute publicPath). You can configure the publicPath setting in plasmic.json.
  • Figma plugin icon in toolbar now displays inline guidance on how to get started importing from Figma.
  • Whether the component variants panel is collapsed or shown is now persisted.
  • Figma importer updated to handle new auto-layout settings in Figma.
  • The arenas panel is now resizable.
  • Automatically applying fixes to the flexbox implied minimum size problem for stretching flex containers, so that turning on container scrolling or text-overflow: ellipsis will work more reliably.
  • Lots of other bug fixes and improvements!

2020-11-17 CSS Modules, scrollable containers, CSS transitions

Support for CSS Modules

Initially, Plasmic code generation targeted plain CSS for styling. Importing plain CSS files is widely supported by module loaders, and CSS (importantly) enjoys widespread developer familiarity and usage.

Plasmic now additionally supports generating code using CSS Modules! CSS Modules guarantees that all the styles for a component live in one place and apply only to that component and nothing else—fixing the global scope issues of CSS. Generated class names are also shorter and more readable than in plain CSS, where Plasmic uses fully qualified BEM notation names. Furthermore, the class composition model in CSS Modules is a natural fit for Plasmic’s mixins and default styles.

CSS Modules enjoys wide support by frameworks such as create-react-app, Gatsby, and Next.js. We plan to change the default to CSS Modules in the near future.

For new projects, plasmic init will ask you to choose a styling system. To start using this in an existing Plasmic project, first upgrade your @plasmicapp/cli to the latest version. Next, edit plasmic.json so that style.scheme is set to css-modules:

"style": {
  "scheme": "css-modules"
}

Finally, run plasmic sync to update all of your synced components.

Next.js support

Next.js is one of the most popular frameworks for React, capable of everything from static JAMstack websites to server-rendered dynamic apps to the traditional React single-page application.

Now, with CSS Modules support, we’re excited to now officially support Next.js in Plasmic out-of-the-box! Additionally, Plasmic screen variants now correctly support Next.js server-side rendering.

This is just the start of Plasmic’s support for Next.js. Stay tuned, and please let us know what else you would like to see here!

Creating scrollable containers

If a container’s height or width is set to something smaller than its content, you can now make it scrollable by setting its overflow behavior to “scroll”.

While editing a project, we disable two-finger scrolling and mousewheel scrolling, since these are usually intended for panning around the canvas. Instead you’ll be able to scroll a container by explicitly dragging its scroll bar. In preview mode and in production, all scrolling behavior & interactivity will be back to normal.

Using CSS transitions to animate state changes

You can now specify CSS transitions on your elements to animate smoothly between state changes:

Right now, these are simple CSS transitions, and the usual caveats for them apply—you can’t animate from and to “auto,” or from unmounted to mounted, and there are the usual performance implications of animating styles that affect layout. We have plans for more advanced animation systems that gives you better and broader control over how things animate between states; please let us know what you’re looking for to inform our prioritization here!

Attaching metadata using component meta props

You can now attach metadata to your component instances by creating and using “meta props.”

For example, suppose you have a PriceCard component. In your design for the PricingPage, you’ve laid out three PriceCard instances, one for each SKU that you offer. But the price for each SKU should be fetched live from the database, rather than hard-coded into the design. You can now create a new “meta” prop called sku, and specify the SKU for each PriceCard instance from within Plasmic. Then, your code can make use of that information to, say, fetch the real price!

function PriceCard(props) {
  const {sku} = props;
  const price = useSkuPrice(sku);
  return <PlasmicPriceCard price={price} />;
}

In another example—suppose you want to optionally give every button an “action identifier” so you can track some analytics. You can just create an actionId meta prop on your Button component, and make use of it in your code:

function Button(props) {
  const {actionId, ...rest} = props;
  return (
    <PlasmicButton 
      {...rest} 
      onClick={e => {
        if (actionId) {
          trackAction(actionId);
        }
        rest.onClick && rest.onClick(e);
      }}
    />
  );
}

These meta props have no implications on the visual design. Instead, this effectively enables deeper communication from design to code. The design can use props to specify semantics, behavior, and more for the code.

These are also our initial steps toward introducing more general-purpose props on components (that aren’t simply exposing props on nested elements). Let us know your feedback!

And more

  • Blend modes have been added to the Effects section, making it possible to express how colors should blend through the mix-blend-mode CSS property.

  • Can now move artboards to different arenas via the context menu.
  • Our generated CSS should now be cleaner and shorter, using shorthand notation whenever possible, and looking closer to handwritten CSS.
  • Whenever you create a component, can now easily start editing that component in a new artboard via a toast message.
  • plasmic init is implicitly run and better handles missing auth.
  • The toolbar now has a status indicator for when the latest changes have not yet been synced into a codebase.
  • Old Renderer API deprecated from blackbox library codegen scheme.
  • Pressing Escape while drawing a box now cancels the draw operation.
  • Pressing Escape now de-selects current selection.
  • Fixed a few issues with Plume Select’s overlay positioning.
  • And as usual, a ton of bug fixes! Thanks for reporting them to us! 🥰

2020-11-03 Multi-variant design, auto-activated screen variants, syncing image files

Designing for multiple variants

We just rolled out a big update to variants—now it’s possible to target multiple variants at a time!

Previously, you could only specify things like, “When color=primary, make the text color blue”, which works fine as long as different variants modify different settings. Now, you are able to say, “When color=primary AND type=text, make the text color blue”, giving you more control over how your component looks as multiple variants are activated. This makes it easier to build rich, stateful components.

See this video for an example of targeting multiple variants to build out “contained” and “text” Buttons, similar to Material UI! You can also take a look at this example project.

https://www.dropbox.com/s/8gd1c04vx1qiepy/ezgif.com-gif-maker.mp4?dl=0

The main changes to the Studio are:

  • While targeting a variant, you can hover over another variant and click on the “Add to recording” button. This adds that variant to the current combination of variants you are recording changes for.
  • “Interaction variants” are now in its own section, instead of as children of individual variants. Now, if you want to change “color=primary while hovering”, you can simply target the combination of “color=primary” AND “:Hover”. Your existing projects have already been migrated to reflect this.
  • There is a new “Combinations” section in the variants panel, which lists all the combinations of variants that you have style settings for. This makes sure you don’t lose track of where your edits are.
  • While variant-targeting, you will also now see blue indicator dots in the element tree, letting you see which elements have styles set for the targeted variants at a glance.
  • When an element is selected, you will also now see blue indicator dots in the variants panel, letting you see which variants this element has styles set.

We hope these changes will make it easy for you to build more powerful components, and inspect exactly what styles have been set on which elements. We’re continuing to iterate on this feature, so please send us your feedback!

Screen variants activated by artboard size

Building responsive designs has been a core capability of Plasmic since the beginning. This is accomplished using “screen variants”—so responsive design is just another case where the full power of Plasmic’s general concept of variants comes in. This gives a high degree of flexibility—for instance, you can have mobile-first or desktop-first responsive ranges, you can choose whether the ranges are overlapping or not, and so on.

Now, we’ve made using screen variants more intuitive and streamlined. When you resize an artboard, the correct screen variants will automatically activate. You no longer need to manually remember to flip on/off the correct screen variants—simply resize your artboard to a mobile width, and your tablet and desktop screen variants will turn off, for instance.

Syncing images as separate files

We just shipped support for generating image assets as separate files rather than as base64-encoded data URIs. Using this requires your module loading system to support loading images based on their local file path in your codebase, in both JSX and CSS—this is widely supported (such as in the react-scripts infrastructure), but some toolchains don’t offer this yet.

By default, we are still referencing image assets as base64-encoded data URIs. (This default may change in the future.) If you’d like to switch to file-based references for your project, follow these steps:

  1. Upgrade @plasmicapp/cli to the latest version.

  2. Run plasmic sync in your project folder.

  3. Open plasmic.json; you should see a block that looks like:

     "images": {
       "scheme": "inlined"
     }

    Change that to:

     "images": {
       "scheme": "files"
     }
  4. Run plasmic sync again.

And more

  • Can use vw/vh units in sizing and positioning.
  • plasmic sync automatically runs plasmic init first if needed (if there’s no existing auth config file).
  • Add “quiet” option to plasmic sync. This is also defaulted to true when running plasmic watch.
  • Can edit component in new artboard with Cmd+Shift+Enter.
  • No longer generating empty CSS rules.
  • Generated code can now be used with the latest babel/create-react-app toolchain.
  • Added 4K artboard size.

2020-09-29 Publishing, importing, and versioning projects

Publishing project versions

When working on Plasmic projects, it can be hard to keep track of all your changes over time. When your changes impact a production codebase, the ability to explicitly choose when you want to publish changes, reproduce historical snapshots, document the evolution of a design, and integrate with the codebase’s version control—these are all requirements for any tool that expects to fit within existing workflows.

We’re excited to introduce versioning into Plasmic! With project versions, you can now save snapshots of Plasmic projects as published versions. Each of these versions is visible in a navigable version history, giving you the ability to view and restore previous versions.

With project versions, we are laying the foundation for many more capabilities, including:

  • Cross-project imports: import assets from other projects to use in your designs.
  • Versioned sync: when syncing to code, you can specify which versions of each project you want.

Cross-project imports

We’ve made it even easier to share your work with others, using cross-project imports. Often, users want to be able to use components from another project, without having to maintain their own copy—for instance, the same design system may be reused across many projects. Simply copying components between projects quickly leads to inconsistencies that are difficult to replicate and keep in sync.

With cross-project imports, you can now publish a project (such as a design system) that can be used in any number of downstream projects. When you import another project, its components, tokens, mixins, and images show up in your assets panel and can be directly used in your designs.

Versioning helps isolate in-progress changes without affecting downstream projects. For example, maintainers of a design system project can continue to iterate on the design system, while these changes are not exposed to downstream projects importing the design system until the maintainer chooses to publish a new version. Downstream projects are notified when new versions are available, and also have the choice on when to upgrade to the new imported version.

Check out the documentation for more details on how to use imports.

Versioned sync

Currently, when you sync code from the Studio into your local codebase, the generated code always reflects the very latest edits made in Studio. This is often simplest to start with, and it keeps your code tightly in sync with your design.

However, as a project grows and more team members collaborate on a project, you may want greater control over what is considered ready for syncing vs. work-in-progress. Additionally, you may want to distinguish between major and minor design changes (such as styling changes) based on whether they can require any code changes.

Project versions come again to the rescue! You can now specify a semantic version range in plasmic.json to sync only published project versions to code (rather than any latest edits). Plasmic now uses a separate plasmic.lock file to track the specific version that is currently synced into the codebase.

Semantic version numbers are automatically computed by Plasmic when publishing a project. They’re based on your Studio edits and whether they can require any code changes—whether the generated component interfaces are backward compatible.

Check out the documentation for more details on how to use versioned sync.

And more

  • You can now right-click on your style controls in the right panel to extract style settings into spacing tokens.
  • You can now specify negative margins and fractional dimension values.
  • As usual, lots of bug fixes and performance improvements — please keep the bug reports coming!

2020-09-22 Plume component system, component explorer, more design tokens

We’re hiring for engineering roles! Join us in shaping the future of how software is created. Learn more.

Introducing the Plume component system

Plasmic makes it easy for you to design your components in a powerful UI, generate presentational React components, attach behavior and data in code, and ship it to production. This division of labor, where Plasmic controls how components look, and developers control how components work, makes it possible to build any component you want with any behavior you need using Plasmic.

But defining how components work is not always straightforward; even building a humble button, with the right pressing, hovering, and focusing behavior, can get quite complicated. Building a library of components for your design system is a huge undertaking if you care about getting all the subtle interaction and accessibility right. Unsurprisingly, teams often opt to theme an existing component library instead, crossing their fingers that their library of choice supports the variants and behaviors that they want, and has all the right hooks for customizing how they look.

What if you can design your components exactly the way you want, and easily add in all the interactivity and accessibility that you expect from a first-class component library?

Today, we’re introducing a preview for the Plume Component System. It is a set of React hooks, built on top of the great React-Aria framework, that makes it easy for you to turn your Plasmic designs into functioning and accessible React components! You just have to:

  1. Design the component in Plasmic.
  2. Generate the presentational React code as usual.
  3. Use Plume React hooks to bring your design to life.
  4. Use your resulting Plume components in your application!

Plume is not a specific set of pre-designed components you can use, or even a set of pre-built components that you can theme. You have almost total control over how your component looks, what variants are supported, what information is displayed, and how it behaves. It is a new way to build a custom component library from scratch.

Today, Plume supports building Button, Checkbox, Radio, Select, Slider, Switch, and TextField. We have plans to add more components, and to build tighter integration between Plume and the Plasmic editor. And we are looking for feedback—please take a look at the docs, try it out, and tell us what components are missing for you, and how we can make this better!

CodeSandbox component explorer

We’ve just made your CodeSandbox more useful! Now when you export to CodeSandbox, you’ll see a panel on the right for toggling the different component variants. Each component now also lives at its own route, so you can send links directly to a specific component.

With this new component explorer, you can quickly let anyone interact and play with your components outside of Plasmic.

More design tokens

We’ve streamlined using spacing tokens in Plasmic. Now you can easily create, edit, and select spacing tokens from style inputs on the right. You’ll also see the full name and value on hover.

We’ve also added brand-new token types for font sizes, line heights, and opacity. These are numeric token types that go beyond spacing tokens.

And more

  • When importing things from Figma with drop shadows, we more correctly detect and use filter: drop-shadow instead of box-shadow.
  • You can now drag images and components from the left panel to the canvas, and also drag to reorder them by using a new drag handle when you hover over each item.
  • As usual, lots of bug fixes and performance improvements — please keep the bug reports coming!

2020-09-01 Tue: Spacing tokens, new insert menu, simpler blackbox code

Spacing tokens

We’re excited to announce that Plasmic now supports spacing tokens!

Plasmic has always supported both:

  • Color tokens, which can be used for any color styles (backgrounds, text colors, border colors, shadow colors, etc.), and
  • Mixins, which are reusable bundles of any combination of styles, from typography to layout to shadows.

Now with spacing tokens, you can define a small set of spacing values which can be flexibly used in any style setting that takes spacing dimensions, including margin, padding, and size.

Like color tokens, spacing tokens can also be defined recursively in terms of other spacing tokens. And of course, they can be used in mixins, so you can more easily create a family of “utility mixins.”

We’d love to hear your thoughts on spacing tokens, and if there are other token types you’d like to see!

New “Add” menu

We’ve streamlined how you can insert things into your artboards with the new “Add” menu!

The new “Add” menu replaces the old “Add to artboard” tab, and provides much better keyboard ergonomics — shortcut key “Q” to bring up the menu, type to filter, arrow keys to select, and enter to insert. You can even “tab” to other insertion options, like wrapping the current selection! Plus, using the “Add” menu no longer requires switching away from the tree panel on the left, so you can always have it in view. As before, you can still drag and drop things directly out of the Add menu onto your artboards as well. You can still view and manage your components — renaming, duplicating, and deleting — in the new “Components” tab on the left.

Please give this a try and let us know what you think!

Significantly simpler generated code for blackbox

We have made the generated code in your “Plasmic*” blackbox files a lot simpler and more readable. The code used to be broken up across many functional components, but now the blackbox code has a single coherent JSX tree.

The net result: it should now be much more pleasant to dig into them to debug your components, or just to see all the JSX tags in your component tree.

And more…

  • CodeSandboxes now have a directory path structure consistent with the CLI. User components that the user edits are generated into src/components, while Plasmic components are generated into src/components/plasmic/.
  • You can now specify pointer-events: none css property in the Effects section.
  • More HTML tags are now available in the tag drop-down in the right panel.
  • As usual, lots of bug fixes and performance improvements — please keep the bug reports coming!

2020-08-11 Tue: New focus states, end-to-end tutorial

New focus states

Showing the proper focus state is a huge part of designing a form control component; it gives users the confidence that they’re editing the right things, and provides important accessibility affordance to keyboard navigation.

We’re introducing a few new focus interaction variants for your components that you can use to make more usable and accessible components.

Focus Within

Some form control components have focusable html elements wrapped in containers. For example, a Textbox component might have a containing div element wrapping an input element and an icon. You’d like to style the component whenever the input element receives focus, but the usual Focused interaction variant isn’t enough—the focus styling needs to go onto the containing div, not just the input element.

For that, we’re introducing Focused Within, which you can apply as a component interaction variant or an element state. This interaction variant will be triggered whenever a descendant element receives focus—perfect for our Textbox container!

Focus Visible

A form control can actually have two subtly different focus states—one where the element is “focused”, and another where the element is focused by you “tabbing” to it via the keyboard. The latter form—where the element is focused, and focused by the keyboard—is called “Focus Visible”, and you can now use it in your Plasmic components as well!

Putting it all together

Here’s a super quick demo of a Textbox component, making use of both “Focus Visible” and “Focus Visible Within” (which is the combination of Focus Visible and Focused Within that you’ve always wanted!). Note how we’re able to make the “input” element transparent, put the styling on the containing div, and still have all the focus styling and behavior that you’d want!

Technical Note

As usual with our interaction variants, we are doing more than “just” generating a CSS rule for :focus-visible or :focus-within; after all, CSS rules only work for style-only changes, and :focus-visible doesn’t even have widespread browser support yet. Instead, Plasmic interaction variants work even when you make non-style changes like text changes or DOM changes. Under the hood, Plasmic defaults to generating just CSS rules whenever that’s sufficient—but when necessary, Plasmic will automatically generate event hooks to implement the interaction variants, so that the generated components look and behave just as you’d expect.

For these new interaction variants, we are using React Aria, an exciting new framework from Adobe that provides awesome accessibility implementations for many different kinds of components without specifying a pre-canned style or DOM structure. We are very excited about what’s possible when you put Plasmic and React Aria together; stay tuned! 🙂

End-to-end tutorial

We just published a new end-to-end beginner tutorial for Plasmic, where you make a very simple app. It features a video that covers designing the app while exploring the core concepts in Plasmic, and a second section that covers implementing the code for the app.

Check out the new end-to-end tutorial

We also just updated the TodoMVC tutorial, which is an intermediate code-only tutorial—the latest version of the component API helps simplify much of the code.

Check out the TodoMVC tutorial

We hope these are helpful. Please let us know your thoughts and what else you’d like to see!

And more

  • Figma import now preserves image transforms/cropping.
  • Figma import now preserves arbitrary SVG masks (?).
  • Figma import now preserves SVG image sizes.
  • Live preview mode now loads much faster, near-instantaneously. It still performs end-to-end codegen, but no longer needs to live-fetch npm dependencies.
  • plasmic sync” now writes to files only once and all together at the end. This both yields more atomic sync operations and prevents webpack-dev-server from becoming confused about updated files.
  • Plasmic* components now have better type safety; you will now get a Typescript error when you pass in unexpected props!
  • As usual, lots of bug fixes and smaller improvements—thanks for all the reports, please keep them coming!

2020-08-04 Tue: Simplified component API, cleaner codegen, overhauled docs

Welcome to all our new users! And thank you to our wonderful initial community for helping us spread the word. We’re thrilled by the volume of signups we received, and by the feedback so far from users in-product.

For those on the waitlist: we’re still working through the list of signups, while trying to stay responsive to users and issues—thank you for bearing with us. We’re excited to start sharing our progress publicly and iterating with your feedback.

Simpler API for blackbox Plasmic* components

We have simplified the API for using Plasmic* components in the blackbox library scheme. Now you can pass variants and slots directly into the Plasmic* components as props, rather than using the variants and args props:

<PlasmicButton
  // Activate variants
  type={props.type}
  size={props.size}
  withIcons={{
    prefix: !!props.prefixIcon,
    suffix: !!props.suffixIcon
  }}

  // Fill in the slots
  children={props.children}
  prefixIcon={props.prefixIcon}
  suffixIcon={props.suffixIcon}

  // Attach overrides; each named element is a prop
  // here, e.g. to add onClick to the element named
  // "root". Same as API before.
  root={{
    onClick: props.onClick
  }}
/> 

Furthermore, wrapper components now by default take the same variant and slot props. These changes culminate in the wrapper components starting out as very simple proxies for the presentational components:

interface ButtonProps extends DefaultButtonProps {}
function Button(props: ButtonProps) {
  return <PlasmicButton {...props} />;
}

Any additional props you pass into the Plasmic* components will now also be interpreted as override props for the root node. So for the above, where we override the onClick prop for the root element, we could also just do:

<PlasmicButton
  // Any prop that's not a named element, not a variant, and not a slot, are 
  // interpreted as an override prop for the root element.
  onClick={props.onClick}
/>

You can find more details on how to use the Plasmic* components on the blackbox documentation page, which has been significantly updated!

Cleaner codegen

plasmic sync now uses your project’s prettier configuration to format the generated code.

Additionally, you can now add arbitrary commands to run at the end of each plasmic sync by adding postSyncCommands into plasmic.json. For example, the following configuration will run yarn lint-fix after each sync.

{
  ...
  "postSyncCommands": ["yarn lint-fix"]
}

These commands will also be invoked after each sync incurred when plasmic watch is running.

The CLI now also removes // plasmic-import comments; you no longer need this annotation in your component files, keeping them clean of generated annotations.

Additionally, for files that don’t require syncing, the CLI will no longer touch or regenerate those files.

Updated development docs

We have significantly updated development documentation all over the place. Highlights include:

Please let us know if there’s anything you’d like to see more documentation of!

And more

  • When you click Share to invite a new user, they can skip the waitlist/survey and directly create an account.
  • More robust SVG import—when you paste or upload an SVG file, we’re no longer as picky about how that SVG file was exported from your vector illustration tool. Anything should Just Work! If you run into issues, please send problematic SVGs our way.
  • Cmd+R now lets you rename the currently-selected element.
  • You can now reorder screen variants to control cascade order. If for instance you have a mobile-first base design, a Tablet screen variant, and a Desktop screen variant, you’ll want to ensure Desktop comes last, so that it overrides any Tablet settings.
  • Images and icons can now be dragged into the canvas area from the Image Assets panel in the left sidebar.
  • Figma import now translates masks in groups to the correct hierarchy to replicate the masking effect in the CSS/DOM:

  • Figma import now deduplicates images and imports them as image assets.
  • Using the Figma plugin from the browser should no longer fail on exporting large designs.
  • Many bug fixes; thanks for bringing them to our attention!

2020-07-10 Fri: Figma integration, layer locking, UI refresh

Figma plugin

We’re thrilled to share that you can now import Figma designs into Plasmic! This means you can use Plasmic to convert your designs into real websites and React apps.

It’s as simple as installing the plugin, pressing Export, and pasting into a Plasmic project:

The importer fully automates the low-level details of converting Figma’s document representation to standard DOM representations. A few highlights:

  • Supports constraints and auto-layout.
  • Translates blend modes.
  • Adapts border styles including centered borders.
  • Handles filter effects like background blur and layer blur.
  • Preserves affine transformations like scales and rotations.
  • Handles all fill types including linear and radial gradients and images.
  • Imports vector and compound shapes as SVGs.
  • Mirrors the original hierarchical structure.
  • Carries over most type styles.

Once in Plasmic, the design could immediately be published as a standalone static website in CodeSandbox or your own codebase. But you will often also want to refactor the design into a more hygienic and lasting structure, suitable for production and for integrating with code. That’s where the rest of Plasmic’s toolset comes in, letting you take advantage of the richer layout, component structure (variants/slots), interactions, style abstractions (mixins/tokens), and element types (such as form elements) for functionality and accessibility. Plasmic’s core philosophy is to enable you to incrementally refine the messy and exploratory into the clean and robust.

Sketch users: We’ve also tested out Sketch documents using this workflow. For now you will need to import your Sketch files into Figma, and from there paste it into Plasmic.

Get the plugin here! We’d love to hear your feedback. There will be much deeper functionality around this workflow to come.

Locking layers

You can now lock layers from the tree on the left! Locking layers means you can no longer interact with them on the canvas; you cannot select them with your mouse, drag them, or drag things into them. You can still select them from the tree and edit their styles from the right panel, however.

Locking a layer also locks its descendants, so you are locking a whole tree at a time. But you can also explicitly unlock a descendant if you do want to interact with a descendant tree. A common example is if you want to lock the “outer chrome” of your application while you’re working on something nested inside.

Minor UI refresh

As you may have noticed, we refreshed the UI a bit!

On the left, we’ve organized the three tabs into more granular icon tabs; this will give us more space to organize all the assets you are building up in your project.

On the right, we’ve capped the component panel to 50% height, so if you have a lot of variants for your component, you can still keep the component panel open without it pushing out the style settings. We’ve also separated out the style settings into different panels to better organize them visually.

Naturally, this new UI is entirely built in Plasmic!

And more

  • Added recursive syncing: plasmic sync --recursive --component Sidebar syncs down the Sidebar component along with all the components it depends on.
  • Added shortcuts Cmd+Alt+Shift+H/V to wrap current selection in a box (horizontal or vertical stack).
  • New artboards are now inserted/pasted at the center where you’re currently scrolled to, or at the first available space to the right. Zoom on new artboards has been adjusted as well.
  • In number inputs, Shift+Up/Down increments/decrements by 10.
  • The expanded arena list (at the top of the left sidebar’s Outline tab) can now be resized.
  • Automatic SVG icon handling now colors strokes as well as fills.
  • The main project list page has a new Get Started section, featuring the latest versions of the Plasmic Levels game and Codegen Quickstart project.
  • We have a new public landing page—made in Plasmic! As is our learning center. Check out the Plasmic project for both.
  • Lots of bug fixes and performance improvements.

2020-06-26 Fri: “Plasmic Levels,” variant refactoring, Direct Edit release

Play “Plasmic Levels”!

We made a new mini-game designed as a Plasmic project, presenting a sequence of UI-crafting tasks for you to try your hand at. This gives you a hands-on way to learn about general concepts like layout and variants, and how to use Plasmic to express these.

Clone this project and give it a play!

Variant management

We’ve made it a lot easier for you to manage the variants you create for your components, so you don’t have to get it right the first try! Now, you can right-click on a variant and:

  • Duplicate the variant, which creates a new variant in the same group, with the same style overrides.
  • Move a variant to a different variant group, if you want to change how you organize your variants.
  • Copy variant settings to another variant, which is especially useful to do across variant types—you can now copy variant settings between interaction variants, normal variants, and even “Element State” variants!

Refactoring tools are key to making it tractable to maintain complex components. We will be working on introducing more such capabilities into Plasmic.

Direct Edit codegen stable

Plasmic offers two flavors of codegen:

  • the Blackbox Library scheme, which provides you with a library of presentational components into which you can pass prop overrides, and
  • the Direct Edit scheme, (which gives you components whose JSX trees you can directly edit to attach props.

We have been iterating on our experimental preview release of Direct Edit, and the dust has settled on our release. We will continue to iterate on and improve the scheme, but we don’t have further significant changes planned for it.

The Plasmic CLI now prompts you for the default codegen scheme you’d like to use when running plasmic init. To get started with this on an existing project, you can edit your plasmic.json to change the codeScheme from “blackbox” to “direct.” To re-sync existing files, run plasmic sync --force-overwrite.

Improved drag and drop in the Tree

You can now drag and drop artboards on the Tree panel to re-order them!

You now also have finer-grained control over your drag-and-drop. You can drag a tree node towards the left to pick exactly which node you want to parent under:

And more

  • Can reorder all object types, including arenas, artboards, components, tokens, mixins. We understand that the more you create, the more you’d want to organize them just so. More to come here!
  • Much better performance as you zoom in and out on the canvas.
  • If you need to update an existing image asset with a new image, you previously can only do so by uploading a new file. Now you can do it by pasting from your clipboard too!

  • At codegen, if you have icons in your project, we no longer sync all icons when you do plasmic sync; instead, we only sync down icons that you are actually using in your components. If you want to sync down all icons in a project, use plasmic sync-icons.
  • Lots of bug fixes!

2020-06-12 Fri: image assets, improved icons, plain-JS code

Image asset manager

We have updated how you can manage your uploaded images and icons. From now on, when you upload a new image or SVG file, we will keep track of it in the Gallery tab, where you can easily drag more of them into the canvas. You can also “update” an image asset, replacing it with a different image, and all references to that image will be updated!

If you have existing images in your project, they have not been touched! You can switch over to using the image assets system at your leisure by re-adding the images into the project.

SVG icons support

When you upload or paste in an SVG file with only one color, we will categorize it as an “icon”. An “icon” is special in that:

  • You can change the fill color of the SVG icon (and you can now reference a color token to do it!)
  • When you put an icon into a slot prop, that icon will be colored according to the slot. So you can now define components with slots that will color its icons, and can even change the icon color depending on different variants! A “primary” Button component, for example, can have a dark background but with white icon color.
  • When you export code, we create a new React component for each icon, which you can instantiate and use in your code, just like other icon libraries like Font Awesome. They will render to SVG elements, with colors set to currentColor and width/height set to 1em, so you can also color and size them with color and font-size css properties as you’d expect!

Plain Javascript codegen

We originally launched with support for just Typescript codegen. Now, the Plasmic CLI can additionally generate Javascript to support pure-JS codebases.

To get started on a JS codebase, we have made plasmic init automatically guess your project language (based on whether a tsconfig.json is present) and confirm with you. You can a also set code.lang to "js" in plasmic.json. Afterward, running plasmic sync will generate components as JSX files in ESnext.

3-minute quickstart

If you are looking for a succinct guide to try out Plasmic’s end-to-end workflow, we now have a small quickstart project to provide just that. We walk you through the few simple steps it takes to sync down a single component into your own codebase. Clone this project and try it out!

And more

  • The Direct Edit codegen scheme now uses sequential numeric IDs on unnamed elements for aesthetically cleaner and more readable JSX. The scheme continues to receive fixes and improvements.
  • We now publish the react-web runtime as ES5 code so that it works with more projects and bundlers.
  • plasmic init now interactively prompts you for options such as file placement and project language.

2020-06-05 Fri: directly editable plain-React codegen

Directly editable plain-React codegen (experimental!)

Plasmic has always aimed to support multiple flavors of codegen, even within a single target platform (React), to accommodate a spectrum of developer preferences. We initially launched with a “Blackbox Library” codegen scheme—the philosophy of this approach is to let you treat your generated code like any other library dependency you pull into your project, so that you can just import and use it as a presentational component.

We now have added a “Direct Edit” codegen scheme, which generates “plain React code” (i.e. a JSX tree) that you as a developer can directly edit. When you re-sync new changes from Plasmic, we preserve your edits. The philosophy is that for components with complex compositions and heavy use of logic and props, you may prefer being able to see and manipulate the JSX.

To support this, we have a parser and rewriter that effectively perform a JSX/TSX-aware rebase of your developer edits on top of the latest generated presentational code. As a developer, you can freely wire up your props to the various components directly in the JSX tree, as well as add, remove, wrap, and replace nodes, and furthermore wrap them in expressions, conditionals, loops, IIFEs, etc. A 3-way diff leverages Plasmic revision history to allow us to auto-merge most concurrent changes, while drawing attention to potential conflicts with conventional conflict markers.

Both Direct Edit and Blackbox Library codegen schemes share similar flexibility and expressivity, but differ primarily in their interface. You can now also mix and match these in your codebase, for instance if only certain components should use Direct Edit (more on this below). Not all possible edits or refactorings to the component file are allowed in the Direct Edit scheme, so we plan to provide a static linting tool to verify that your edits are “within bounds,” and over time increase the scope of what it can handle.

This is an experimental preview release—you can play with Direct Edit codegen immediately (and we would love to hear your feedback!), but there are some known limitations we are working on, and generally we will be making further improvements to this scheme before declaring it stable. You can try out the scheme with our CodeSandbox integration or on your local codebase using our CLI (see below).

Check out some code examples below to get a sense of how the Direct Edit scheme works. We will be updating the Plasmic Developer Guide with more complete documentation.

Code examples

Take this Button component as an example. Plasmic generates a plain JSX tree in the Button.tsx.

function Button(props: ButtonProps) {
  const variants: PlasmicButton__VariantsArgs = {};
  const args: PlasmicButton__ArgsType = {};
  const rh = new PlasmicButton__RenderHelper(variants, args, props.className);
  // plasmic-managed-jsx/30
  return (
    <button className={rh.clsRoot()}>
      <img className={rh.clsImg()} {...rh.propsImg()} />
      <div className={rh.clsBox()}>Click Me</div>
    </button>
  );
}

Note that Plasmic embeds the entire JSX tree right below the *// plasmic-managed-jsx/30* comment line. This line is critical for Plasmic to perform the code merge—do not change or remove it. After you update the Button component in Plasmic studio and sync the code again, Plasmic will search for the // plasmic-managed-jsx/... line, and merge the JSX tree below it with the updated design.

Plasmic currently preserves the following types of edits.

Adding attributes to elements, such as event handlers:

  return (
    <button className={rh.clsRoot()} onClick={props.onClick}>      <img className={rh.clsImg()} {...rh.propsImg()} />
      <div className={rh.clsBox()}>Click Me</div>
    </button>
  );

Overwriting default props:

  return (
    <button className={rh.clsRoot()}>
      <div className={rh.clsImg()} {...rh.propsImg()} src={...} />      <div className={rh.clsBox()}>Click Me</div>
    </button>
  );

Changing tags:

  return (
    <button className={rh.clsRoot()}>
      <img className={rh.clsImg()} {...rh.propsImg()} />
      <span className={rh.clsBox()}>Click Me</span>    </button>
  );

Editing className—you can change the value of className however you want, as long as it retains the rh.clsXXX() function call:

  return (
    <button className={[rh.clsRoot(), "myClass1"].join(" ")}>      <img className={rh.clsImg()} {...rh.propsImg()} />
      <div className={rh.clsBox()}>Click Me</div>
    </button>
  );

Wrapping an existing element in another element:

  return (
    <button className={rh.clsRoot()}>
      <img className={rh.clsImg()} {...rh.propsImg()} />
      <FancyTooltip title="...">        <div className={rh.clsBox()}>Click Me</div>
      </FancyTooltip>     </button>
  );

Wrapping elements in expressions, such as conditionals, loops, and IIFEs. This can be useful to achieve type safety or repetition:

interface ButtonProps {
  ...
  imgId?: string;
}
function makeImageUrl(imgId: string) {
  return `https://www.images.com/${imgId}`;
}

function Button(...) {
  ...
  return (
    <button className={rh.clsRoot()}>
      {props.imgId && (        <img          className={rh.clsImg()}          {...rh.propsImg()}          src={makeImageUrl(props.imgId)}        />      )}      <div className={rh.clsBox()}>Click Me</div>
    </button>
  );

  // Or: change the image element to a list of images.

  return (
    <button className={rh.clsRoot()}>
      {props.imgIds?.map(imgId =>        <img          key={imgId}          className={rh.clsImg()}          {...rh.propsImg()}          src={makeImageUrl(imgId)}        />      )}      <div className={rh.clsBox()}>Click Me</div>
    </button>
  );
}

Adding elements:

  return (
    <button className={rh.clsRoot()}>
      <img className={rh.clsImg()} {...rh.propsImg()} />
      <div className={rh.clsBox()}>Click Me</div>
      <img className="left-icon" src={...}/>          </button>
  );

Deleting elements:

  return (
    <button className={rh.clsRoot()}>
      <div className={rh.clsBox()}>Click Me</div>
    </button>
  );

Limitations

Here are some edits that are not currently preserved well by Plasmic.

Wrapping multiple Plasmic generated elements as siblings in a container. In this case, only the first wrapped Plasmic generated element will receive updates from Plasmic studio. For example, suppose we wrapped the img and div of Button as follows.

  return (
    <button className={rh.clsRoot()}>
      <div>
        <img className={rh.clsImg()} {...rh.propsImg()} />
        <div className={rh.clsBox()}>Click Me</div>
      </div>
    </button>
  );

If, in Plasmic studio, we rename the img node to leftIcon, and changed text from Click Me to Hello World, the code after merging will be:

  return (
    <button className={rh.clsRoot()}>
      <div>
        <img className={rh.clsLeftIcon()} {...rh.propsLeftIcon()} />
        <div className={rh.clsBox()}>Click Me</div>
      </div>
    </button>
  );

Editing string literals. Suppose we changed text from Click Me to Hello World in code:

 return (
    <button className={rh.clsRoot()}>
      <img className={rh.clsImg()} {...rh.propsImg()} />
      <div className={rh.clsBox()}>Hello World</div>
    </button>
  );

Then after merge:

  return (
    <button className={rh.clsRoot()}>
      <img className={rh.clsImg()} {...rh.propsImg()} />
      <div className={rh.clsBox()}>Hello WorldClick Me</div>
    </button>
  );

Workaround: change the string literal in Plasmic studio!

Edits to unnamed nodes in code could be lost upon code merge if the design in Plasmic is changed in certain ways. We are working toward a solution, but in general we recommend explicitly naming nodes in Plasmic Studio that you plan to edit in code.

Plasmic CLI now supports “direct” scheme

The plasmic CLI now supports the Direct Edit codegen scheme. To start using it, simply edit your plasmic.json to change "scheme" from "blackbox" (the default) to "direct". This makes all new components sync using the Direct Edit scheme.

The CLI also now supports per*-*component codegen scheme selection. You can now edit plasmic.json to have some components in your codebase using the "blackbox" scheme and others using the direct scheme.

{
  "platform": "react",
  "code": {
    "lang": "ts",
    "scheme": "blackbox"  },
  ...
  "projects": [
    {
      ...
      "components": [
        {
          "id": "ERc2O74z2Z",
          "name": "ShareDialog",
          ...
          "scheme": "direct"        },
        ...

To change the scheme of a component you already synced, change the component scheme in plasmic.json, and run plasmic sync --force-overwrite. Note that this will overwrite and discard any current version of your component file!

Local fonts

Plasmic provides common system fonts and all Google Web Fonts out-of-the-box. Starting today, you can additionally use any locally installed fonts in Plasmic!

To get started, switch to the Assets tab in the left sidebar, and at the bottom you’ll find the ability to register new fonts.

Note: within Plasmic, these fonts will only appear correctly to users who have the font installed. We show a warning icon next to user-managed fonts that are missing from the current browser.

When syncing components to a codebase, please make sure you provide the font file elsewhere in your application.

And more

  • Previously all of our documentation and educational content was on Dropbox Paper. We have moved it to a shiny new website at https://plasmic.app/learn. Let us know what other educational resources would be helpful!
  • We have a new Codegen button in the top toolbar. This guides you through getting your designs from Plasmic into your own local codebase in a few simple steps.
  • You can now create multiple CodeSandboxes for a Plasmic project, one per codegen scheme. This lets you easily play with the new Direct Edit codegen scheme, for instance.
  • Added more mouse cursor types, including not-allowed and grab cursors.

2020-05-29 Fri: measurement guides, better “live” mode

Measurement guides

We’ve added the ability for you to quickly measure the distance between any two objects—components, boxes, text, and the artboard.

To start using this tool, select one object. Then, while holding down [Option] or [Alt], hover over anything else to measure the distance to the first object.

As an added bonus, if you hold [Shift]+[Alt/Option], we’ll also show measurement guides to your mouse pointer’s current position!

We’re continuing to iterate on this feature, as well as many other improvements to the core editing experience. Please send us any ideas or suggestions!

Better “live” mode, powered by codegen

As you build out your designs, you can see it in action at any time by entering “Live” mode, either by clicking the “play” button or the “pop-out” button at the upper-right:

With this release, the “live” mode is now powered by the same code that we generate for your React component! This means what you see in “live” mode is really what you will see in your production app, if you use the code generated by Plasmic.

In “Live” mode, you can interact with your components by hovering, clicking, and typing; this allows you to test out your interaction variants like hover and focus states. If you use the “pop-out” live mode, you can also resize the pop out window to test out how your design adapts to different window sizes, and when your global screen variants get activated.

Even better—now, the “pop-out” live mode will be kept in sync with what’s happening in the Plasmic Studio, so that as you make edits, the pop-out window will immediately be updated to reflect the new changes!

Codegen: ScreenVariantProvider

In Plasmic, you can define different screen sizes under the global Screen variant group, and then change what your component looks like in each of these screen sizes to express truly responsive designs.

To achieve this in generated code, Plasmic does two things:

  1. For CSS-only changes, Plasmic uses the expected media queries in the generated CSS, so that the applied css rules change when the window size changes.
  2. For non-CSS changes — for example, showing different text content, activating different component variants, using different element attributes, etc.—Plasmic uses a React Context for the Screen variant. The Plasmic-generated code for affected components would watch for changes to the effective Screen variant and re-render accordingly.

It used to be that for #2, you had to figure out how to provide the right active Screen variant value yourself. We now generate a ScreenVariantProvider, which you can place at the root of your app; it will listen to window resizing events and provide the right Screen variant to all the Plasmic components!

import {ScreenVariantProvider} from "./plasmic/PlasmicGlobalVariant__Screen";function App() {
  return (
    <ScreenVariantProvider>      <MyApp/>
    </ScreenVariantProvider>  );
}

2020-05-22 Fri: new component API

A more familiar component API

When you convert your Plasmic components into code, we generate “blackbox” libraries that your React components can use to actually render your components. Previously, our API uses function calls like createRenderer().withOverrides() in order to minimize runtime overhead and avoid creating additional layers of React components. However, we understand that this code appears unusual, and in most cases, the runtime overhead is negligible.

We have therefore evolved our “blackbox” libraries to expose React components in addition to a renderer, so you can use them in a more familiar way as pure React presentational components.

With the new component API, Plasmic will generate the following skeleton code for a ButtonGroup component in ButtonGroup.tsx.

// This is a skeleton starter React component generated by Plasmic.
// Feel free to edit as you see fit.
import React, { ReactNode } from "react";
import {
  PlasmicButtonGroup__VariantsArgs,
  PlasmicButtonGroup
} from "../gen/PlasmicButtonGroup"; // plasmic-import: e5MdEx4Rxa/render
interface ButtonGroupProps {
  buttons?: ReactNode;
  // className prop is required for positioning instances of
  // this Component
  className?: string;
  children?: never;
}
function ButtonGroup(props: ButtonGroupProps) {
  return (
    <PlasmicButtonGroup      args={{        buttons: props.buttons      }}      root={        // className prop needs to be piped to the root element of this component        { className: props.className }      }    />  );
}
export default ButtonGroup as React.FunctionComponent<ButtonGroupProps>;

PlasmicButton takes in the variants, args, and a list of named nodes for you to override. The API here is basically identical to the PlasmicButton.createRenderer() API, but in React component form!

Plasmic also generates one component for each named node too, so you can use PlasmicButton.<name> to instantiate named nodes. For example, you can pass a list of buttons using the sampleButton component:

function ButtonGroup(props: ButtonGroupProps) {
  return (
    <PlasmicButtonGroup
      args={{
        buttons: (
          <>
            <PlasmicButtonGroup.sampleButton>              Button 1
            </PlasmicButtonGroup.sampleButton>            <PlasmicButtonGroup.sampleButton>              Button 2
            </PlasmicButtonGroup.sampleButton>          </>
        )
      }}
      root={
        // className prop needs to be piped to the root element of this component
        { className: props.className }
      }
    />
  );
}

The **PlasmicButton.createRenderer()** API will continue to exist, though, so if you prefer to do things that way, you can carry on as you have!

Action required: codegen name change We have switched from using the PP__ prefix to Plasmic to reduce confusion. That means the exported symbols from our Plasmic blackbox libraries have all been changed! You may need to fix up some references from your own component code from PP__ to Plasmic.

New tutorial video: Plasmic Button to React

We’ve created a new video on how to turn that Plasmic Button component to a real React component!

As always, if you have anything you’d like to see a tutorial of, please let us know!

And more

  • A significant number of bug fixes this week. Thank you for all the reports!

2020-05-15 Fri: plain React code and new variants UI

Added codegen scheme: “plain React”

So far we have supported a “blackbox library” codegen scheme—the philosophy of this approach is to let you treat your generated code like any other library dependency you pull into your project, so that you can just import and use it as a presentational component.

We now additionally support generating “Plain React” code as a one-time code export. For instance, if you were just looking for a starting point and don’t need to iterate on the design or keep the code in sync, or if you are an agency that is handing off a project to a client expecting plain React code, then you now have the ability to do so.

Note that this is a one-time code export, meaning that if you edit the generated code to attach real props/data/event handlers, then you now own and maintain the presentational code.

The “Plain React” code scheme is available in our CodeSandbox integration. We will also release a new version of the plasmic CLI soon to support this scheme. (For safety, Plasmic does not overwrite any file you have edited in CodeSandbox; you can first delete the file if you want to force the next update to regenerate that file.)

This is another step on our path to supporting a diverse family of compilation targets. Please continue to let us know what targets you are interested in seeing.

New “Recording Bar”

Working with variants is core to the Plasmic editing experience. We want you to always be aware of what variant you’re currently making changes for, and allow you to easily switch between the different variants. As another step in refining our variants UI, we’ve added a new Recording Bar above the main canvas. It appears whenever you start editing for a certain variant (meaning that your edits are being “recorded” into that variant). This is to help make it always clear what context you’re working in.

Please keep the feedback coming. We will continue to iterate on and improve the UX of using variants.

Improved override indicators

Plasmic gives you a lot of power to model all the different ways your component can look by using variants. Now we’ve made it easier than ever to understand where your style values are coming from and when they are getting overridden!

In the right panel, we show a blue dot for each setting that you’ve modified for your currently-recording variants. You can hover over the blue dot to get more details on exactly which values you’ve overridden from which variant. If your value is derived from a mixin that you’ve applied, you can even click through and edit the mixin directly.

Codegen update: className prop for Components

(Action required!)

In Plasmic, it is possible to create a component instance (say, a Button) and apply additional styling to that instance, usually for positioning—for example, top, left, width, z-index, etc.

The way we used to apply these “positioning styles” is by creating a wrapper div around the component instance, and adding the positioning styles to the wrapper. The wrapper can then place the component instance anywhere, without the component itself being aware of how it’s being used.

However, this was a pretty unusual choice, and led to a few subtle bugs. So we’re taking a different approach: all Components must now have a className prop, which is set on its root element. To position a component instance, we now generate a class with the positioning styles, and pass it to the className prop of the component. The positioning styles now apply directly to the root element of the component, instead of some extra wrapper. This is a common approach taken by many component libraries.

Migration If you have generated code, you now need to do a little bit of work to pipe the className prop to your root element. For example, this may be your Button component currently:

// Button.tsx
interface ButtonProps {
  children?: React.ReactNode;
  type?: "primary"|"secondary";
  onClick?: () => void;
}
function Button(props: ButtonProps) {
  return PP__Button.createRenderer()
    .withVariants({type: props.type})
    .withArgs({children: props.children})
    .withOverrides({
      root: {
        onClick: props.onClick
      }
    })
    .render();
}

You now need to add a new className prop that you set to the root element:

// Button.tsx
interface ButtonProps {
  children?: React.ReactNode;
  type?: "primary"|"secondary";
  onClick?: () => void;

  className?: string;}
function Button(props: ButtonProps) {
  return PP__Button.createRenderer()
    .withVariants({type: props.type})
    .withArgs({children: props.children})
    .withOverrides({
      root: {
        onClick: props.onClick,
        className: props.className,      }
    })
    .render();
}

This allows us to position a Button instance by passing in the appropriate class to className.

And more

  • Can now duplicate components.
  • Added new text style controls for overflow, indentation.
  • A significant number of bug fixes this week. Thank you for all the reports!

2020-05-08 Fri: CodeSandbox integration

CodeSandbox integration

You can now bring your designs to life in the click of a button with Plasmic’s new CodeSandbox integration! Instantly prototype with real code and data, conduct user tests, and share a true standalone web app with anyone—all in your browser and without having to set up any development tools.

To get started, click the new toolbar icon to create a sandbox, invite other users to edit the sandbox, and update the sandbox:

A key feature of Plasmic’s codegen capabilities is that it is not just a one-time export operation—you can freely iterate on the design and count on those edits to sync into the generated code, thus keeping the final product truly in sync with the design. This is how the CodeSandbox integration works as well. Plasmic creates exactly one sandbox per Plasmic project, and can update the sandbox with the same code that would have been generated by the plasmic command-line tool.

The sandbox is publicly readable but owned by Plasmic. This means when you try editing, the sandbox forks, so you end up with your own copy which won’t be receiving updates from Plasmic. To edit the Plasmic-owned sandbox and thus preserve your edits across sandbox updates, Plasmic invites you as an editor to the project. Just check your email inbox to “Accept Invitation” and sign into CodeSandbox.

By default, the sandbox shows a gallery of all components you have created in the project, and lets you navigate through them via left/right arrow key (similar to Plasmic’s live preview mode). You can go ahead and freely edit any of the component .tsx files to wire up your real state, event handlers, and logic. You can find more information in the sandbox’s README.md.

Codegen syntax

We know that in order to win over developers, we need to build trust in the generated code being clean and high-quality. To that end, for the blackbox codegen scheme, Plasmic now emits rendering code using JSX syntax, into plasmic/PP__<ComponentName>.tsx. This means that if you ever want to peek inside the blackbox, the rendering code will look significantly more readable and familiar.

For projects which use Plasmic generated code, the next time you run plasmic sync, it will rename PP_<ComponentName>.ts files to PP__<ComponentName>.tsx, and emit the code with the new JSX syntax.

Plasmic CLI upgrade To support the new syntax above, we have updated the plasmic CLI to 0.1.2. If you see the error below:

$ plasmic sync
(node:24800) UnhandledPromiseRejectionWarning: Error: Request failed with status code 426
  ...

Please upgrade the CLI:

$ yarn global add @plasmicapp/cli || npm install -g @plasmicapp/cli

In the future, the CLI will now show a clearer error message so this announcement won’t be necessary.

Tutorial videos

We’re starting a series of in-depth video tutorials!

The first one uses Plasmic to design a Button component:

You will be introduced to major concepts like variants and layout, as well as general tips and tricks on using Plasmic. Please take a look!

We would love to create more of these in the future, both for using Plasmic to design common components as well as for converting those components into real code. If you have something you’d like to see, please let us know in the Slack channel!

And more

  • Significant performance improvements across the board. Updating designs, undo/redo, and startup are all several times faster, and editing remains snappy even as you scale to large arenas with many artboards.
  • We’ve removed all naming restrictions on components; can now name components with any text.
  • Artboard titles now display not just the component name but also the activated variants that artboard is showing.
  • When you hover over the defined-style indicator (i.e. the dot before any style controls), we now explain where the value was defined (for instance, if it came from another variant or from a mixin).
  • Focusable elements now use browser defaults for the focused state unless you have defined a Focused interaction variant.
  • plasmic sync will now sync new components by default, instead of only components it has synced before. To have the old behavior, use plasmic sync --only-existing
  • We now generate more succinct CSS output. Still more to do here!
  • Can now toggle visibility on slots.
  • We now warn you when you try to delete a mixin that is currently in use.
  • Generated code components now should be styled fully consistently with their appearance in Plasmic Studio.
  • Lots more bug fixes and polish - thank you for all the reports and feedback!

2020-04-29 Wed: private alpha begins!

Hello world! Thanks for participating in our private alpha and following along with our progress. We’re so excited to start engaging you.

We’ll occasionally share updates on the new features and capabilities of Plasmic.

Figma-to-code coming soon

Perhaps the most important feature set we’ve been working on is integration with existing design tools, starting with Figma import.

If your team uses Figma and you want to keep your designs faithfully reflected in the final product, please click here to get access (or email us). We’d love to get your help to make sure this works well.

Revamped variants UI

Plasmic has a powerful system for designing different variants of the same component. These are “variations” of a component that may represent different states (“focused”, “error”, “loading”, “hover”, etc.) or different styles (“primary”, “danger”, “borderless”, “large”, etc.). Designers have the power to design exactly how the component should look in each variant, and developers have the power to activate the right variants for each component instance within the context of the live application.

In this release, we’ve made a few changes to how variants are shown in the app:

https://www.dropbox.com/s/56n36j4gjipm1hz/component-panel.mp4?dl=0

  • First, the Component Panel showing you information about the component you’re editing has now been merged into the right panel. This gives you more space on the canvas:
  • To create new variants of the component, you can click on the “More…” link in the Component Panel, which will expand and show the variants management UI:
  • If you want to record styles specific to a variant, you can either click on a variant in the expanded view, or just click on “Target Variants to record…” and select the variant to target.
  • When a variant is being targeted, we show a prominent red “Recording” badge that’s always visible on the screen, so that you are aware you’re making exceptional edits to a specific variant, instead of targeting the base.

Working with variants is a core part of the Plasmic experience, and we will continue iterating on this. Please send us any feedback you might have!

Simpler sizing system

Plasmic aims to offer the same powerful layout and styling available in the target medium—and for the web, that means CSS. But CSS is notoriously tricky with a lot of sharp edges, and so wherever possible, Plasmic also tries to offer simplified options for common effects.

One place where we do this is with sizing elements. In CSS, a dizzying set of rules can affect the size of your elements in subtle and nuanced ways depending on how your design is laid out. With this release, Plasmic tries to simplify this by letting you set an element’s width or height to “stretch” or “wrap”:

  • When set to “stretch”, this element will be stretched to fill the available space in its container.
  • When set to “wrap”, this element will take up only as much space as its content requires.

These settings try to consistently do the right thing, regardless of whether the element is in a horizontal, vertical, or free container. (And of course, you can still set an explicit pixel or percentage size if you’d like!)

https://www.dropbox.com/s/oagqlt4dyn0tkw3/sizing.mp4?dl=0

Additionally, a component instance has an extra special size setting it can use—“default”—which means it will use whatever size setting that is specified for the component’s root element. For example, here are two Button instances on the left artboard, and the master Button component on the right artboard. The two Button instances have their sizes set to “default.” When the component’s root element size changes, the Button instances’ size also changes. The Button instances are also free to override the default to whatever they want, or switch back to the default at any time.

https://www.dropbox.com/s/z5wq8i2qcdge8c4/sizing-instance%20%282%29.mp4?dl=0

You can even change what the default should be for different variants of the component! Here, the Button component has a “wide” Variant that sets its root width to “stretch,” and a “tall” variant that sets its root height to “stretch.” You can activate these variants for the Button instances and see the difference.

https://www.dropbox.com/s/3ce4d6jxsd3rd1a/sizing-variants%20%282%29.mp4?dl=0

Simplified artboard selection

We’re continuing to iterate on the relationship between artboards and components. We know this has been an area of confusion, and we still have a lot of ideas to try! We would appreciate any feedback you have here.

Codegen updates

We have pushed out @plasmicapp/react-web version 0.0.6. and @plasmicapp/cli version 0.0.9. All newly-exported code will now require this version. Of course, all your existing exported code will continue working until you try to re-export code again.

To upgrade, just run:

yarn add @plasmicapp/react-web || npm install @plasmicapp/react-web
yarn global add @plasmicapp/cli || npm install -g @plasmicapp/cli

# re-export code components you've already exported
plasmic sync

Notable updates here include:

  • Used fonts are now included by default in the generated css, your fonts should just work! In the future, we will provide an option to opt out of this, so you can use other methods of including fonts instead.
  • We’ve introduced a new defaultPlasmicDir option in plasmic.json; this is where Plasmic cli will now dump all generated files owned by Plasmic (all files preceding with PP__). By default, this is set to your src/plasmic.
  • cli will now warn you about version mismatches for @plasmicapp/react-web.

On organizing generated files At Plasmic, our philosophy is that developers should have as much control as possible over how they want to build their React applications. For example, we give developers total control over the React component files, so they can define exactly what props their React components take in, making them indistinguishable from non-Plasmic React components.

One area where this shows up is with file organization. Developers should be able to structure their files and folders however they prefer. That’s why, by default, we will dump files into defaultPlasmicDir, but the developers are always free to move them to wherever they prefer in the srcDir. You can see in plasmic.json where we think each file is on disk. The next time you run plasmic sync, we will try to find those files, detect where they’ve moved, and update the entries in plasmic.json. If Plasmic fails to find the files (say, if you renamed them), you can always directly update plasmic.json with the real locations!

And more

Lots of bug fixes, polish, and performance improvements from initial user reports—thank you!

  • Can use the “s” keyboard shortcut to draw a stack; if you draw a tall rectangle, it will be a vertical stack; if you draw a wide rectangle, it will be a horizontal stack.
  • Can now rename projects from the dashboard.
  • For all the numeric style settings on the right panel, you can now change their values by dragging on the setting labels.
  • From the color picker in the right panel, can now edit the selected color token, and reference a different color token.
  • Now easier to tab around the fields with your keyboard in the right panel once one field has focus.
  • Now including box-sizing: border-box in generated CSS.
  • And many more!