Plasmic for Webflow users

Feature comparison

Webflow:

  • Hosts your website for you
  • Comes with their own structured CMS
  • Comes with their own ecommerce backend

Plasmic:

  • Integrates with any codebase; start with one new page or section of a page
  • Integrates with any stack—hosting, CMS, ecommerce backend, etc.
  • Used as a visual CMS as well as a page builder
  • Multiplayer real-time collaboration
  • Cross-project imports
  • Rich abstractions like components and style presets and tokens, for scaling your designs
  • Code components let you bring your own custom building blocks—your design system, data, and interactions/effects
  • Multi-view design—design with different responsive variants side-by-side
  • Customizable built-in primitive elements (such as Selects)
  • Supports free-form drawing design
  • Build products as well as websites

Plasmic for Webflow users

Responsive design

In Plasmic, you design a page with multiple different views of the page side by side at the same time, so that you are always able to see how your changes affect other variants. These are not two separate copies of the same page, but different variants. You can override styles/settings/content that apply to only one variant, such as the mobile variant.

You can also set up your project to be mobile-first or desktop-first, and you can set your own custom breakpoints.

Components vs symbols

Webflow has a concept of Symbols, soon to be renamed to Components. As of recently, you can perform basic text and image overrides on these components.

In Plasmic, components are very powerful. You can choose what parts of a component you want to expose as slots, and then you can override that content, but you can also insert anything into the slot. You can also create multiple variants of a component (see next section).

Variants

Variants of pages and components have many uses:

  • Interactions like hover and pressed
  • States like disabled and focused
  • Responsive design
  • Localization
  • A/B testing
  • Segmentation for different audiences

Element states vs pseudo-states

For built-in components, you can customize the look and feel of the components.

Style presets vs classes

In Webflow, you use classes to style your elements. You’re encouraged to use combo classes, however, which refine a global class. You’re otherwise able to create global classes.

In Plasmic, most of the time you directly set. (Behind the scenes, these are automatically lifted into CSS classes.)

You can optionally also choose to use style presets, which are very similar to (global) classes in that they are reusable groups of styles, but are more flexible and give you control over ordering.

Interactions

In Webflow, you have a built-in set of animations and interactions.

In Plasmic, you can use code components to introduce arbitrary effects and interactions. You can also use the built-in CSS transitions capability (together with CSS transforms or other CSS settings) to create common effects.

For a few examples, check out the Code Components Expo Site.

Was this page helpful?

Have feedback on this page? Let us know on our forum.