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.

Is Plasmic for building websites? Apps?

All of the above!

The current most common use case for Plasmic is website content management and building pages, but a core goal of Plasmic is to be a flexible visual development platform.

Is Plasmic no-code? Low-code?

First, what do these mean?

  • No-code: You do not write any code. Usable to non-developers.
  • Low-code: Expects you to write at least snippets of code. For developers.

Uniquely, Plasmic can be wielded in either fashion:

  • No-code: You can build full websites and web apps without writing a single line of code.
  • Low-code: Alternatively, you can choose to write code for more complex behavior.

But beyond this dichotomy, Plasmic goes further in fully embracing code and codebases. Ultimately, today, code is how software that scales in complexity is built, and Plasmic bridges this divide.

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 responsive design.

How do I import assets from another project?

See importing projects.

How do I copy/paste across projects?

Copying/pasting across Plasmic projects works with Ctrl-C, Ctrl-V (or Cmd-C, Cmd-V on Mac).

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 publish actions.

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?

Plasmic includes a built-in form component.

You can also build fully customizable forms with the Plasmic Customizable Components, where you can tailor each form element primitive: 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.

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

See code components or Plasmic Customizable 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 “Allow external access” See the full guide here

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

See integrations and data-fetching components.

You can drag and drop dynamic data directly into your pages, and layout/style this dynamic content freely.

These can be from built-in data sources in the Plasmic component store, including various CMSes, commerce platforms, and arbitrary APIs.

You can also create your own data-fetching code components.

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

Plasmic Studio allows users to add interactions to define custom behavior. This allows you to define what happens when you click a button, without writing code.

For developers, you can also build your own code-components or use the overrides API to add event handlers.

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.

Plasmic Studio is very slow on my computer

Chrome extensions are a common culprit. Try running Plasmic Studio from a brand new Chrome profile that doesn’t have any extensions.

Development/Debugging FAQ

Can Plasmic work with existing code components or design systems?

See code components.

How are names transformed in the Plasmic component API?

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

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 community forum!

Was this page helpful?

Have feedback on this page? Let us know on our forum.