Creating components

In Plasmic, 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 Icons, large components for a whole Screen or Webpage, and everything in between such as Login Forms and Profile Cards, etc.

In this guide, we will create a new “About” webpage for the Starter Blog, Please make sure to go through one of the setup guides first.

Creating a new component

Navigate to your Plasmic project. For this example, we are assuming that you are using the “Starter Blog” example - clone this from the Getting Started section after logging into Plasmic.

In this video, we show you how to create a component and edit it in a new artboard. Remember to set the width of your pages to “stretch”.

Using Plasmic components in your code base

We offer 2 ways to use your Plasmic components in code. If you followed one of the Next.js or Gatsby setup guides, we recommend you use PlasmicLoader. For all other builds, we recommend the Codegen path. Our React components makes it easy to incorporate your Plasmic designs directly in your existing code base.

For the following steps, we assume you already finish one of the setup guides.

Configure your build with your project

Render your component

Now you can render the component.

All Plasmic components expose the component API. Variant, slot, and override props can be passed in to change the behavior of the component. See the Codegen guide reference for more details.

Note that for codegen, you pass these props directly to the component, whereas for PlasmicLoader you’ll need to pass it through the componentProps prop.

You can see a real example in the Starter Blog example. Check out the homepage and blog post components.

Start your development server

Now run your development server.

npm run develop
# or: yarn develop

Watch for changes from Plasmic Studio

Extracting repeated sections into a component

Webpages only scratch the surface of Plasmic’s powerful tools. Components are a powerful abstraction for any widget that may be reused across the project. In this video, we create a card, turn it into a component, and then reuse that component across the new webpage.

For more on how to use the Studio, check out our Studio Guide.

Next steps

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