Plasmic FAQ

General FAQ

What is Plasmic?

See the introduction to Plasmic.

What is the workflow for Plasmic?

See the workflow in the introduction to Plasmic.

How does Plasmic work with design tools? Should I be doing all my design in design tools first?

Plasmic provides a Figma importer, but this usually only gets you to a starting point, since Figma’s data model tends to be far from what you will ultimately want to ship. Learn more about importing from Figma and Figma’s limitations.

There are also a number of advantages to designing in Plasmic. See comparisons of Plasmic to related tools.

How does Plasmic compare to X (design tools, page builders, CMSes)?

See comparisons of Plasmic to related tools.

Is Plasmic limited to building static pages?

No. Plasmic can build pages and components that have dynamic data and behavior. Plasmic is used to design the visual parts, while code provides the dynamic data and behavior.

And despite being easy to start with, Plasmic’s editor is powerful, giving you tools to control every detail and maintain designs at scale.

Can Plasmic work with existing code components or design systems?

See code component substitution.

Studio FAQ

How do I create a responsive page or component, with differences on mobile vs desktop?

See how to create responsive layouts using screen variants.

How do I import across projects?

See importing across projects.

How do I copy/paste across projects?

Plasmic doesn’t currently support copy/pasting across projects, but you can use cross-project imports.

Then, once you’ve imported a component across projects, you can disconnect the import, which makes a hard copy of all assets used in the downstream project.

Note however that imports are strictly more powerful - it will at minimum let you duplicate content across projects, but—unlike pastes, which are a one-time operation—imports additionally allows you to keep your duplicates in sync. This helps you achieve greater ongoing reuse, consistency, and maintainability across your projects at scale.

How do I create a table?

See creating a simple table using stacks.

How do I create a sticky navbar?

See creating a sticky navbar.

How do I create form elements?

Currently only buttons and text fields are supported. More form elements are coming.

However, you can use code component substitution to add form elements from any component library like Material UI or React-Bootstrap when integrating Plasmic with your codebase.

As with anything in Plasmic, you’re never limited by what you can do from code.

Can I use existing (code) components or design systems in Plasmic?

You cannot yet use code components from the Plasmic Studio editor, but you can use code component substitution to use design-time placeholders that are replaced at compile-time.

Our application already has some components I’d like to use in the designs. How do I do this?

You cannot yet import code components into your

Can I create image slots, where I replace just the content of the image (and keep the image’s styles consistent across component instances)?

See keeping slot contents consistent with mixins.

Can I have my designs in Plasmic Studio reflect data from some data source like a CMS, API or database?

For now, the way to add data is from code. This way you can create a dynamic list of elements or making an element’s text/images reflect some dynamic data.

That said, stay tuned for updates on this front! We would love to hear about use cases you’re interested in—what data sources you would want to connect to, and what you are trying to build. Let us know on our Slack Community.

Can I add logic/behavior to designs in Plasmic Studio, such as what happens when you click on something?

Currently, all behaviors are instrumented in code—so that includes click/event handlers, etc. For now, we want to ensure the line between what is controlled by Plasmic Studio (presentational) vs. by the developer (logic) is clear. As apps scale, state management can become arbitrarily complex, so the priority is on ensuring a seamless integration with code.

That said, we are actively thinking about how to support adding behavior from within the Studio. We would love to hear about use cases you’re interested in—what you’re trying to build, and how complex is the behavior you’re reaching for. Let us know on our Slack Community.

How do I insert images/icons/other rich content into a button or header?

After you insert a new button or header, right-click it and select “Convert to…” > “container with this text.” Now you can insert things directly inside.

How do I pick a color from the screen / use a color eyedropper tool?

Plasmic doesn’t currently have a built-in eyedropper tool, but it’s easy to sample colors using other tools on your platform:

See creating primitive components.

Developer/Debugging FAQ

Can Plasmic work with existing code components or design systems?

See code component substitution.

How are names transformed?

The names of components, elements, args (such as slot args), and variants are all camelCased. Components are always additionally capitalized, per React conventions.

What if I am getting authentication errors from the CLI or Loader?

The easiest way to get your system authenticated with Plasmic is to use our CLI with the following command:

npx -p @plasmicapp/cli plasmic auth

However on rare occasion, this process may also fail. To debug this situation, check for the existence of this file in your home directory: ~/.plasmic.auth.

If it does not exist, you can create the file manually like this:

  "host": "",
  "user": "EMAIL_HERE",
  "token": "TOKEN_HERE"

Make sure that the email you insert here is the one that you used to sign up on the Plasmic Studio. You can get your access token from your settings. This file is all you need to authenticate your system.

My designs are not updating in my application codebase (using PlasmicLoader with Gatsby).

A common pitfall with Gatsby projects is knowing when you need to clear the cache.


gatsby clean

Then your next npm run build or npm run develop should refetch data, including Plasmic content.

Have another question?

Ask us in our Slack community!