Anything that lets me build the desktop frame like Figma and still ship it responsive?
Product designer for what feels forever... I keep hitting the same wall on the small stuff, a portfolio, a landing page. I build it in Figma, spacing and type scale clean, then it goes to a dev or me pretending to be one and it either ships desktop only or…
Product designer for what feels forever... I keep hitting the same wall on the small stuff, a portfolio, a landing page. I build it in Figma, spacing and type scale clean, then it goes to a dev or me pretending to be one and it either ships desktop only or comes back "responsive" with the padding off and my type ramp gone. I don't want to maintain a codebase for a portfolio and I don't want Wix mangling my layout. Is there anything that lets me build the desktop frame like Figma, have the responsive come off my real layout, and still grab one element and nudge it?
已收录讨论
Framer?
We've all wanted something like that for years, and various products have tried to address it, like WebFlow, and the Macaw project which got purchased by Invision before they went bankrupt. I know there's some small startups working on WYSIWYG HTML prototyping tools, but for now the best way to ship responsive from Figma is to define your breakpoints, and design your components with variants to suit each breakpoint (within min/max sizes). Typically, XS / S / Med / LG / XL depending on what devices you need to support. Then use the annotation tool to specify things for devs. Also helps to design stuff following how HTML works, i.e. if your base CSS uses Grid you can simulate that with the Grid autolayout, which has the same sort of fr units, tracks and gaps, etc. Seriously tho, I kind of want a "designers' browser," i.e. a live HTML/CSS environment with a WYSIWYG Figma-like design interface, but also tabs to view the code, and it updates bidirectionally, and saves out as standard code. Like, if that were added on to a desktop version of CodePen....
Figma Sites?
A desktop frame doesn't carry the information the responsive version needs. Nothing in a fixed layout says what wraps, what stacks, or where the type ramp steps down, so any tool filling that in is guessing, and it'll guess differently than you would every time. I've had better luck spelling it out in auto layout at two or three widths before handing it off, since then the builder has something real to follow instead of inferring.
Closest I've found to "build it like figma but it actually ships" is Framer, the design tool at heart, real layers and constraints, not a code box you prompt at.
Would you be okay defining one mobile layout yourself, or do you want the breakpoints generated from the desktop frame automatically? That feels like the real filter here.