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.
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”.
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.
Now you can render the component.
Note that for codegen, you pass these props directly to the component,
PlasmicLoader you’ll need to pass it through the
Now run your development server.
npm run develop # or: yarn develop
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.
Once you’ve created the components you want, you will want to wire up data using slots.