Hi Plasmic community! I’m looking for any tips/best practices on creating responsive layouts in Plasmic. We typically create landing page mockups in Figma, at several screen sizes (1440px, 768px, and 375px). From my Plasmic experimentation it seems fairly time consuming to import the desktop (1440px) design (using the Plasmic Figma plugin), then modify the design at each smaller breakpoint, to achieve a fully responsive page. I’d love to hear from anyone here if they have advice to streamline responsive design in Plasmic.
Hey @redundant_beaver! Just chiming with my 2c…
The approach we think is “cleanest” is basically what it sounds like you’re doing - to import the screen size corresponding to whatever is your base appearance (usually desktop), and then making the overrides necessary for your other screen variants. Like you say, how fast this goes depends on the extent to which your screens are similar except for a few key overrides, such as verticalizing certain horizontal layouts, or making certain fonts/elements smaller. But I hear you on how replicating these overrides can be time-consuming for designs that have greater variation.
Alternatively, if your desktop and mobile screens are very different, then you could import each of the desktop/mobile/etc. screens from Figma, and simply have your screen variants toggle between their visibilities at the top level. So right under your root element, you’d have one subtree which is the entire desktop view (which is visible only on desktop), another for the entire mobile view (which is visible on on mobile), etc. This approach aggressively optimizes purely for speed-from-Figma-import.
The very major caveat with this is that it results in total duplication. Consequences:
• If you want to (say) add code/behavior to elements from code, then they need to be added for each of the screens
• Maintenance impact: any ongoing edits will need to replicated across all the screens if you want to maintain consistency
• Adding things like element IDs for in-page navigation won’t work (they won’t be unique)
• This tends to result in slightly larger page load size—“slightly,” since it will likely compress well due to repetition
• This generally isn’t standard or best practice on the web
All that said, it will get you to responsive screens in record time, and could be completely fine for pages that are mostly displaying content, such as many landing/conversion pages. Let me know if that helps!
Thanks @yang! The second option (separate DT, Tablet, Mobile) designs seems to be the most time saving and I’ve tested that too. Like you said there are some caveats. For Desktop sizes between 1440 and 768 there is still some manual overrides/breakpoints that need to be added/tuned. In a perfect world Plasmic would automatically create the responsive layouts without any intervention needed, but still allow adjustments.