Creating components

In Plasmic, you can create full pages/screens, but also parts of pages/UI. We use components to represent reusable chunks of UI (similar to symbols in Sketch or components in Figma). You can have small components like Buttons, or larger ones like Hero Sections.

Besides reuse in your Plasmic designs, the other reason to create components is to publish content that isn’t a full 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

You would create and publish these as components. The rest of this article describes how to render these in your codebase.

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-left list.

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

Render your component

(Make sure you have gone through the quickstart setup.)

Now you can render the component.

Next steps

All Plasmic components expose an API that let you pass in slot contents, override element props, and more, covered elsewhere in these docs.

Once you’ve created the components you want, you will want to wire up data using slots.

Was this page helpful?

Give feedback on this page