See also code-related FAQs.
See the introduction to Plasmic.
See the workflow in the introduction to Plasmic.
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.
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.
Yes. The workflow is:
- Create design-time placeholders for the existing code components you’re interested in. These are just for use in the Studio, and can be as accurate as you want them to be in mirroring what the real component looks like.
- In code, substitute the existing code component for each of the design-time placeholders.
- Optionally use props to configure the behavior of the code component.
For instance, if you want to use a Google Maps widget:
- Paste a static screenshot of a Google Maps widget into your project, and turn it into a component called “GMaps.” Use this component wherever you want a real Google Maps widget.
- In code, rather than render the
<PlasmicGMaps/>component inside the
GMapscomponent, render a real Google Maps widget.
- In Plasmic Studio, on the
GMapscomponent, add a prop
text. Plasmic Studio users can use this to identify a concrete location that the real Google Maps widget can read.