Create new pages with 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 the setup guide for Next.js or Gatsby first.

Creating a new page

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

The PlasmicLoader React component makes it easy to incorporate your Plasmic designs directly in your existing code base.

Note: Currently, PlasmicLoader only supports Next.js and Gatsby builds. If you are using a different build system, you can still use Plasmic components via our CLI. (Check out this quickstart guide to get set up.)

Setup PlasmicLoader

Install the PlasmicLoader dependency

yarn add @plasmicapp/loader
# or: npm install --save @plasmicapp/loader

Configure your build

PlasmicLoader comes packaged as either a Next.js or Gatsby plugin. Add all Plasmic project IDs to the respective configuration file.

For Next.js:

// next.config.js
const plasmic = require("@plasmicapp/loader/next");
const withPlasmic = plasmic({
  dir: __dirname, // The root directory of your project.
  projectIds: ["some-project-id"], // An array of project ids.
});

module.exports = withPlasmic({
  // Your NextJS config.
});

For Gatsby:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@plasmicapp/loader/gatsby`,
      options: {
        dir: __dirname, // The root directory of your project.
        projectIds: ["some-project-id"], // An array of project ids.
      },
    },
  ],
};

Once configured, the respective build system will sync all Plasmic components into .plasmic/ during builds, which we usually add to .gitignore.

Render your component

Now you can render your Plasmic component by using the PlasmicLoader React component.

import PlasmicLoader from "@plasmicapp/loader";
...

<PlasmicLoader
  component="AboutMe"
  componentProps={{
    title: "About Me"
    onClick: () => {
      // ...
    },
  }}
  providerProps={{
    Screen: null,
  }}
/>

All components that are loaded via the PlasmicLoader exposes the Blackbox API. Variant, slot, and override props can be passed in via the componentProps prop. To learn more about how to create variants and slots, check out the Studio Guide.

We use providerProps to configure global variants. See the tutorial on responsive screen variants for more on this.

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

[Alternative] Using React components synced from the CLI

If you cannot use PlasmicLoader because you have a different build system, you can always manually sync your Plasmic components using the CLI. Once you have the React components checked into your repository, you can use these components directly, passing props directly into the component.

<AboutMe
  title={"About Me"}
  onClick={() => {
    // ...
  }}
/>

Start your development server

Now run your development server, which should sync your Plasmic components down to your local filesystem, before starting the build.

yarn develop

PlasmicLoader should also automatically re-sync and re-build your project whenever changes are made to your Plasmic project.

Plasmic page components (Beta)

TODO: update after PlasmicLoader supports page components

For your convenience, you can convert your components into “page components” in Plasmic Studio. Using page components has a number of advantages, including:

  • being able to define new routes entirely in Plasmic Studio
  • easily link between page components (which will generate the appropriate <Link> component during code generation)

PlasmicLoader will automatically create the appropriate files to work with your file-system based router for Next.js or Gatsby.

TODO: Video showing the conversion to a page component and adding a route

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.