Figma Library - Web Components

They’re not sexy. They’re not styled. They’re the browser defaults.

No web designer will include them in their portfolio without restyling them. But they will have used them in their work. Checkboxes, radios, dropdowns and more…

I've used this library to help me speed up quick wireframes, forms, anything that needs very little styling and a couple of fugly CMSs. If you’re like me, even though they're the default, I know you want to get them jussst right!

This comprehensive Figma Library will help you speed up including defaults the next time you're faced with similar design challenges.

ZIP File contains

Native Web Components.fig
Demo - Full Flow.mp4

Take a look

You can see a detailed overview of what's included in the files on Medium. I've posted a few of these on Dribbble too.

Fully responsive & auto layout

Need to resize? No problem! You can drag and everything will stay perfectly positioned. All the layout option have been set using Figma's resizing properties. They also utilise Figma's auto layout, so need to add/remove more items, make a button width dynamic, it's easy.

Optimised... No more background rectangles!

This Figma library started as a Sketch library, but it's completely rewritten to remove any unnecessary layers, styles and is optimised as possible.

Got questions? Or Suggestions for improvements?

Get in touch via twitter and I’ll be happy to help you out.

Right now this is designed with Mac OS and Google Chrome in mind. If you would find it useful to see more operating systems or browsers added, reach out, I'll be happy to consider them.

☕️🍺