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.
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 assets from another project?
See importing projects.
How do I copy/paste across projects?
Plasmic doesn’t currently support copy/pasting across projects, but you can use project imports as a workaround.
Then, once you’ve imported a component across projects, insert the component you want. Finally, 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 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?
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.”
How do I have my designs in Plasmic Studio reflect data from some data source like a CMS, API or database?
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?
Currently, all behaviors are to be done in code, whether as code components or via the overrides API—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, data fetching, and logic 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:
Chrome has extensions like ColorZilla.
Macs come with the Digital Color Meter.
Windows has the Microsoft PowerToys Color Picker.
How do I create my own custom-designed links, buttons, textboxes, or other primitive elements?
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:
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": "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:
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!