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:
-
A site-wide announcement ribbon:
-
A special 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:
Have feedback on this page? Let us know on our forum.