Responsive Layouts with Screen Variants

Every Plasmic project is configured with a special global variant group called “Screen”. We use this global variant to automatically render different variants of a component based on the screen size of the user.

The Screen global variant group is no different from any other variant group, giving you access to the same powerful tools to change styling and layout for different screen sizes.

Setting breakpoints

When you create a new project, you should notice the Screen global variant group already made for you. To view your global variants, navigate to a component and expand the global variants tab on the right.

You can create multiple screen variants with custom breakpoints here (e.g. for mobile/tablet/desktop).

Modifying a screen

After you’ve created your global screen variants, you can record changes to a specific variant by adding the variant to the recording panel.

Please be mindful of when you are recording to a specific variant, as opposed to the base variant. It is a common mistake to make changes to a variant, when it was intended to be common across all variants.

Configuring PlasmicLoader

In order for screen variants to automatically activate based on screen size, pass in a providerProps prop to PlasmicLoader with the Screen attribute set.

<PlasmicLoader
  component={"Homepage"}
  providerProps={{
    Screen: null
  }}
/>

Further resources