Fixed and sticky elements in prototype mode
We recently introduced a few new html.to.design features that make imports ready for prototyping. We believe the websites you import shouldn’t just be fully-editable and ready for your design projects, but also ready for your prototyping needs.
So, in this week’s instalment of new features, we’re excited to introduce two updates that will make your imported websites look even better in prototype mode.
Fixed positioning on scroll
If there’s an element on the website you want to import that has a fixed CSS position property, such as a fixed nav bar, you’ll want it to work this way when importing it with html.to.design. The good news is that html.to.design fully supports it!
When you import a website into Figma with a fixed element, anytime you visualize it in prototype mode, the element will work exactly as intended; just like the live, online version.
Sticky elements
The same goes for sticky elements on a webpage. For example, on the Monographcomms.ca website used as an example below, there is a sticky side menu that remains when you scroll… Now anytime you import a website like this with html.to.design, almost all sticky elements are supported. You can preview the imported website as a prototype in Figma with all sticky elements intact.
Stay tuned…
What else do you need for prototyping with a website imported by html.to.design? Are there any features you’re missing or that could be improved? You can send us feedback at any time in our Discord channel, or ask for a new feature in this request form.
We’re continually improving the plugin and looking for new functionality to help make your design workflow more efficient. Keep an eye on this space for more updates!