Plasmic components

A component is a reusable chunk of UI, similar to symbols in Sketch or components in Figma. You can have small components like Buttons or Icons, large components for a whole Screen or Webpage, and things in between such as Login Form, Tweet, etc. You can have many instances of any component.

A component is built up of a tree of elements, similar to layers in other tools. These are either primitive elements like boxes, text elements, or input fields, or instances of other components. A component always has exactly one root element, usually a box containing other elements.

As an example, a ProfileCard component containing a picture and name side by side might be structured as follows. It has a root box that’s a horizontal stack, which arranges an image and a text element side by side.

Once you have built a component, you can add instances of that component in other artboards anywhere you can add normal elements. You can thus compose instances of smaller components into larger and more complex components. Below, we drop in three instances of the ProfileCard into a new artboard.

Wherever you have an instance of a component, you can double-click on it to drill into editing the component master in Spotlight Mode. You can thus edit any component master in-place, with a spotlight shown on that component. This is in contrast to needing to navigate to the component master’s specific physical location in other design tools.

Creating and editing components

Say you are building a landing page and have a hero section. To turn that into a component, right-click it and select “Create component.”

You can also create a new component from scratch, by clicking the + button in the top-left list of pages/components.

You can switch to editing the component by clicking on it in that top bar dropdown.

You can use slots to make any component’s contents editable.

Components as a unit of publishing

Besides reuse in your Plasmic designs, the other reason to create components is to publish content that isn’t a full page, but instead is just a section of a page.

Let’s say you already have a landing page in your codebase, and just want to make a part of it editable.

  • The hero (or any section) of the page:

    hero section
  • A site-wide announcement ribbon:

    site wide ribbon
  • A special offer modal:

    offer modal

Rather than create a full page out of these, complete with URL route and SEO metadata, you can instead just create these as components. Then your codebase can render these where it needs.

Diving into components

Components are built up out of a number of other core concepts:

Was this page helpful?

Join 3000+ Plasmic users on Slack