Design Hacks — How I finish my UI projects in less than 48 hours
In my very few years of designing, every Nigerian startup owner I’ve come across wants to create his master idea in 2weeks, and his developers have already started work(what they’ve started, I don’t know).
But in an environment where everyone is either running from something (like SARS & Bandits), or towards something (your million-dollar idea), Product Designers will either have to adapt to the work pressure or die from poverty.
Today I want to share some design hacks that have helped me adapt and cope with the tight schedules of people like Mr Emmanuel (yes, I called you sir) and a host of others from killing my phone battery with “how far?” calls.
Sketch everything out
Before starting on Figma with any design, I spend like 80% of the time imagining how beautiful and lovely my design would look like, how all the smooth gradients and subtle shadows would pop and how it’ll turn out to be the most liked Dribbble shot of that month.
Well, let me stop you there, nothing like that has ever happened, and the last time I posted on Dribbble was like last year. But during those moments of daydreaming, once I’m near a plain sheet, I create multiple sketches of the UI I have in mind, how the pages and information would be structured and where every element would be. Unfortunately, if I’m not near a plain sheet then, all of those ideas just float away and I don’t get the opportunity to pen them down (all gone!).
Luckily for me, some good folks at DearDesigner got me a freebie sketchbook, so with that, I’m always learning to take the sketchbook wherever I go to be able to capture those Dribbble worthy designs my head keeps showing me but I’ve never gotten the opportunity to recreate.
Ideation(some call it procrastination) is like my biggest and most important phase during any visual design project.
Components component components
The first time I came across design systems was during my early years as an Intern. I was caught in a vicious cycle of designing and redesigning and re-redesigning the same set of buttons for like 20 times.
The process was too repetitive, I would fall asleep almost every time and my job didn’t seem as exciting as my developer peers who were debugging and deploying stuff everywhere. So to solve that, I set out to learn about design systems and component-based design from Meng To’s free course (which is now paid for I think), and I’ve never looked back since.
I have a book where I listed out major components of a simple design system, and at every project, I always create a one-page mini design system containing all the basic components I need for the project. This cuts my design time by 34% (according to Figma’s research) and gets me one more step closer to my 48hours marathon.
Most used plugins
Once I have my designs on paper (or my head, anyone), and I have a basic design system, and there’s enough call pressure from the kind of people I mentioned earlier, I hit the ground asap and start adding blocks on tops of blocks of designs.
At this point, the designs don’t feel like work anymore, and I just power through by joining LEGO blocks of font styles, colour styles, UI components and grid systems. Some of the other repetitive work I do is taken care of by Figma’s wonderful plugin repository.
Trust me when I tell you that I am the happiest Figma plugin user in history. But like everything I own (including fonts), I have like 40 Figma plugins installed, and I only end up using these 10 most frequently:
- Content reel, whenever I want to fill in Lorem ipsum dummy text with something more related.
- Unsplash, this has saved me from hours of finding the perfect picture on Unsplash, I just click the Random button and go with whatever picture the plugin chooses for me.
- Super tidy, I always like my canvas and Layer panel to be super tidy and organized! And this plugin does just that for me.
- Todo, most times(all the time) when I’m trying to beat a deadline, I use this plugin to come up with a todo list of outstanding tasks on that project. I have even seen Wash clothes in one of my todo lists on Figma, I don't know who put it there.
- Component page, when creating a new UI component I use this plugin to quickly teleport the master component to a separate page so that I don't get to temper with it.
- Remove bg, since I discovered this plugin ehh, it has cut down my use of Photoshop by more than 50% (there’s no research source backing this figure though).
- Lottie files, if you're an animation enthusiast like me, this plugin is a one-stop-shop to spice up your designs with some moving things!
- Stark, I always try to check if my grey colours are a little bit too grey and if anyone can actually see the font on my dark mode UI designs.
- Iconify, another serious time-saver plugin! Most of my icon needs are satisfied using this plugin, although I must confess that I still go to The Noun Project to download icons(they’re just that good!).
- Dark mode magic, for any dark mode request I get from a client, it takes me exactly 2seconds to create it using this plugin!
Sharp-sharp shortcuts
Using keyboard shortcuts also helps to speed up my design process. Sometimes when I have a developer trying to watch me design, I intentionally combine a lot of shortcut keys with some serious loud mouse clicking to confuse the innocent onlooker and make it feel like I’m doing something magical!
Figma has a lot of shortcuts to use though, but I’ll try to list my most used as I did with plugins:
CTRL + SHIFT + ?
this is to remind me of shortcuts that I had forgotten or not sure of, sometimes after using Illustrator to design a logo or drawing and I come back to Figma, my shortcut memory gets a bit scrambled so I use this to refresh my memory and continue my design magic.
CTRL + /
instead of clicking File and navigating to Plugin and opening the plugin, I want to use, I just use the shortcut above and search for the plugin name, easy peasy.
CTRL + D
a lot of my design process involves duplicating things, so this keyboard shortcut is like one of my most used shortcuts of all time. I even hit the shortcut keys just to make beats sometimes and then undo the 20 duplicates I’ve created.
CTRL + Z
if you have not time-travelled in Figma before let me show you how. Let’s say you’ve designed a form field and deleted it, and you’ve made some other changes since then, just undo your actions till you get to the point you designed your form field, CTRL+C to copy the form field, and CTRL+SHIFT+Z to redo your actions back to the current state and paste! You just teleported your UI component from the past to the present!
ROTFL
yes, the first thing that comes to your mind is “rolling on the floor laughing” but these shortcuts are for my Figma drawing tools like Rectangle (R ), Circle (O), Text (T), Frame (F) and Line (L). Saying this acronym frequently in my head helps me switch quickly to my Figma mind frame, especially if I had just finished using Illustrator that moment.
SHIFT/CRTL + Scroll
once I want to move around my Figma canvas, I use the SHIFT+Scroll to move sideways and CTRL+Scroll to zoom in or out. Sometimes I even watch in amazement on how fast I switch from Shift — Ctrl while trying to navigate to a particular frame that’s lost in my Figma canvas (10x designer symptoms).
CTRL + SHIFT + 4
grids are great when you're creating your designs, so great that I might write about how I use grids someday. But sometimes (most times), you just want all those grid lines to disappear let you stare at your genius design for the next hour and smile. At first, I tried to reduce the opacity of the layout grid on the sidebar for each frame I wanted to admire, but that was too much wahala. So when I discovered the CTRL+SHIFT+4 shortcut, it felt like I hit Gold! And I’ve never forgotten it since then!
Prototyping
The fidelity of my prototypes is always dependent on the project’s budget and timeline. Sometimes, I spend days getting every interaction of every UI element right, sometimes I just use the typical slide in and slide out on Figma's prototype settings, sometimes I just send a PDF of screen designs and let you figure out which screen leads to where (I can't come and kill myself).
I’m always fascinated by the fidelity of UI animations I see out there but I’ve not had the time and money that’ll motivate me to create something mind-blowing yet.
Recognize how I just focused on UI design projects? If you carry yourself and come to me to do a full UX and UI design project in 48hours ehh, I’ll just comot your teeth right now!
And if a potential client comes to you and says you should finish their project in 2 days because they read my article? Please remove the person’s teeth too.
Let me end my hacking article with a quote:
As your skill improves over time, you start making the same decisions a lot faster. And so with enough practise, 10 hours of design will turn to 5 hours, and then 2 hours, and maybe even 10 minutes some day.
So keep practising your design skills, and don’t be like me, start clicking those pixels on time! Did you learn something new from this article that will speed up your design process even if it’s just by 1%? Please tell me in the comments so that I can have a good rush of dopamine and dance on my bed.
PSST: Some days I call myself a Product Designer, while some other days I claim I’m a Product Manager, they both contain the words Product so don’t blame me. Click the follow button below to get firsthand updates on the second episode of my PM series where I try to explain “Who I am? And what I actually do”.
Stay tuned!
