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—either using code components or the overrides API.

Can Plasmic work with existing code components or design systems?

See code components.

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 save and restore a version history of my project?

See publishing.

How do I deploy a website? How do I deploy to Netlify, Vercel, or another hosting provider?

See publishing.

How do I create a table?

See creating a simple table using stacks.

How do I expose the slot of an inner/nested component as a slot on an outer component?

See exposing nested slots.

How do I create a focus outline?

See clearing the focus outline.

How do I create form elements?

Common form elements are built in and fully customizable: buttons, inputs, selects, checkboxes, and switches.

You can also bring your own code components to add form elements from any component library like Material UI or Ant.

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

See code components.

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

If you just want to let the image itself change, use image props instead. Right-click the image setting you want to let vary, and select “Link to a prop.”

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.

Development/Debugging FAQ

Can Plasmic work with existing code components or design systems?

See code components.

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:

Copy
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:

Copy
{
"host": "https://studio.plasmic.app",
"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.

Run:

Copy
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!

Give feedback on this page