Use this Figma Plugin to 10x your design productivity
If you are a fan of the auto layout in Figma, you’ll love this article.
For our internal design team, we always had this challenge to start the project from scratch. Our team reuses a lot of UI patterns that are already made to perfection. Almost all UI patterns on an abstract level are the same. The anatomy of a pattern like navigation, button, modal, & others is somewhat the same.
Backtrack to 3 months ago, it was a routine session of the design team and we didn’t think we’d stumble upon this idea when we were sitting around our coffee table and discussing how we can make our workflow smoother. Of course, there were the usual general recommendations on what we could do but that’s not important to what we’re talking about right now.
Browsing on the web, looking at different UI navigation designs, we noticed how each one of them was completely different yet very similar at the same time. Like if you removed all the masks and makeup of a component, all that remained behind are the same, abstract elements.
So before we finished our 2nd cup of coffee for the day, we had this brilliant idea of combining auto-layout with UI patterns and then reverse engineering those to what we called ‘Blueprints’, and I’m glad the name stuck because personally, I like it. Essentially what this was meant to do was give us an internal library of re-sizable & reusable UI elements and website sections that we could use for any of our projects (with tweaks, obviously).
By the end of the day, we had put a small team of designers to create auto-layout, hi-fidelity components that were then stripped of all the bells and whistles to create blueprints. What we got out of this was a library of the most-used components built on basic design principles that can be used for any and every screen size both as abstract patterns and ready-made designs that we could tweak to fit the use case at hand.
Internally using this for our design team was a pleasure, as we had managed to cut down on production time significantly. The team was happy, the clients were happy, and the management was happy.
Now since we had some free time on our hands, we started exploring the possibility of integrating this as a Figma plugin and after discussion, everyone was on board with the idea that if this has benefitted us, it should benefit designers and design teams around the world.
We tested it with a small design community and got a phenomenal response. So a lot of man-hours, cups of coffee, and heated discussions later, we’re bringing this out in the design world in hopes that our fraternity will benefit from this awesome tool just as our internal team has.
Figit is a Figma plugin that revolves around the world of auto-layout. For those of you who need a better understanding of what auto-layout is: it lets you create designs that grow to fill or shrink to fit, and reflow as their contents change without manually setting the frame of every view.
Figit makes it easier to create Development-ready Designs in record time with the help of Auto Layout. The plugin is a library of over 1000 UI elements in Auto Layout from three different categories of Web Application, eCommerce, and Marketing UI Kits.
Blueprints:
Blueprints are abstract UI patterns that can be used in any design pattern. The Low-Fidelity Blueprints can be used as a base to achieve finalized designs faster — there is no need to reinvent the wheel. Use your design system to modify the blueprints to your requirements.
UI Kits:
Pre-built UI Kits for Web Application, Marketing, and Ecommerce can be easily dropped in your design files with just a single click, so you don’t have to build everything from scratch. You can drop in the elements onto your canvas and tweak them however you like.
So this is how Figit took birth. And this is how you can use this plugin every day:
- Open the Plugin
- Search for the blueprint you want to use. For example you need to add a notification or a modal. Search for the blueprint and drag/drop it on the canvas.
- You can also navigate through the categories.
- Search for the Design that matches your vision
- Tweak it according to your preferences
- Done!
Get the plugin on Figma community.
We are planning to add more UI elements in each category based on your feedback. So let us know what’s working out for you and what you wish you had. And until then, Happy Designing!
