Ridd noticed that designers who can code spend more time sketching their ideas and less time in Figma. This approach isn’t common because it still takes too long to code designs, but AI will change that. What if instead of generating polished mockups from text prompts we used AI to turn wireframes into frontend code, applied our design system, and tweaked the visual direction based on the provided mood board? (This is just one of the ideas explored in the new section of Dive.) 

Blocks is a Figma plugin that features a library of components so you can create low-fidelity wireframes with your whole team.

A collection of 200+ commonly used components and styles for product and/​or web design. Designed to be used for low-fidelity conceptualizing and ideation activities.

A proof of concept that generates wireframe designs using the GPT 3.5 model. See this thread by Wu Chenmu on how it works.

All-in-one free and open-source wireframe kit for quickly designing and prototyping ideas by Vijay Verma. The library contains more than 250+ components supporting dark mode and 150+ ready-to-use mobile screens.

Alex Einarsson made a great FigJam plugin that recognizes shapes you draw and converts them to native shapes with editable text. Perfect for wireframing on both tablets and desktops.

Lo-Fi wireframing kit inspired by the analog process of paper prototyping.

“Explore what wireframing is, and why it’s worth doing it with Figma — the most-used UI design tool on the market today.”