As designers, today is a good day for us and I’d like to believe that it’s a good day for the design community on Figma as well. ◾ ORIGIN: 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. Before we finished our 2nd cup of coffee for the day, Saad (Our Creative Director) had this brilliant idea of combining auto-layout with component variants and then reverse engineering those to what we called ‘Blueprints’, and I’m glad the name stuck because personally, I like it. 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. Essentially what this was meant to do was give us an internal library of re-sizable & reusable components 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. 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. 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 as our internal team has. ✨ This is Figit - Supercharge your workflow. ✨ 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. ◾ BLUEPRINTS: The Low Fidelity blueprints can be used as a base to achieve the end results faster. Forget about sitting for hours wondering about where to start from and what the layout should look like (we spend a lot of those hour playing foosball here). With blueprints, you don’t need to invent the wheel from scratch—just select a layout that gets your brain juices flowing and start from there; you can modify everything later according to your requirements. ◾ HI-FIDELITY UI ELEMENTS: Hi-Fi UI Elements follow a standard design system that you can use to build landing pages, dashboards, and other quick concepts. If you don’t want to start from scratch and want something ready-made that you can modify, Hi-Fi elements will be your BFF. All these production-ready elements can be dropped into your design with a single click (kind of like we say “it’s not you, it’s me”, hit send, and relax back into the arms of our mistresses.) 👀 How to use: 1. Open the Plugin 2. You can start with a Blueprint or just go directly for the High Fidelity UI Kit Designs 3. Search for your desired section such as ‘Hero’ 4. Search for the Design that matches your vision 5. Drag and Drop the element to add it to your File 6. Tweak it according to your preferences 7. Take a sip of your protein shake 8. Unalive the population in GTA using BangBangBang 9. Done

Mahnoor Khan

Figit - Figma Auto Layout Plugin

Maker

3yr ago

Haris Taqi

The Notion Templates

Yeap. Finally a product that gives HiFi AutoLayout Designs. Would love to see the addition of Complete Landing Page Templates. Great Plugin nevertheless!

Karim Saif

Invoice Dashboard by Notion and Figma

AWESOME🎉

Figit - Figma Auto Layout Plugin

1000 + Auto-Layout UI Components

Do you use Figit - Figma Auto Layout Plugin?

Review Figit - Figma Auto Layout Plugin?

Reviews of Figit - Figma Auto Layout Plugin