Super Fast UI, Prototyping & Handoff Tips for the Super Busy Designer
Episode#3: Figma can be an entire design team if you know how to use it. Design, content generation, prototyping & handover
We’re almost at the last stage of our series! we already have our app’s layout & information architecture. All that is left is make a killer UI…really fast, while juggling other design projects and building a design system 😅, then automate testing & QA.
Speeding up UI Design process in Figma
A designer in a product team barely has time to think about the artsy part of the job. As this is my situation at the moment, I’m sharing what saves me hours of mundane work, maybe you’ll find it useful as well!
➡️ Breaking the Curse of Blank Canvas— Spend 15 minutes looking for general inspiration.
My manager’s first question is always: have you done any benchmarking? and anyway; an empty canvas is the most intimidating part of any designer’s job. So it helps to bring your brain up to date by scrolling through usepanda’s daily report and UI feeds and revising notes on the benchmarking done earlier to nudge my creative part into action.
➡️ ️️️Design System starts from Styles — featuring Figma’s new Variables & Tokens
Since this is a design revamp, you should at least have the brand guidelines ready. From those, separate the logo, primary & secondary colors, and font. From here, you can start the very first building blocks for your design system.
- Create your text styles & save them. Make sure you name them in a way that is easy for you to remember.
2. Use tailwind css plugin to generate css color styles. Just plug in your brand color and it will generate the palette. Remember, you don’t have to use them all. It’s enough to have 4 shades from brand color for UI as a rule of thumb. Grays are versatile in UI hierarchy, so I keep those and use them to drive focus in a page layout.
3. Set spacing & layout rules by saving your layout grid & creating spacing tokens. Here’s an amazing tutorial by Figma team.
➡️ ️️️Forget about building components, start with UI. Trust me.
It may seem counterintuitive, but the easiest and fastest way to build a design system for an existing product, is to build component by component, as you redesign the UI. As you progress, the system will grow and you will find yourself using what you built instead of building new components.
After you’re done with the UI, start to fill the gaps in the current system by looking at your components & creating all possible states. Don’t build anything you don’t need. This is how you save time.
➡️ ️️️Speedy content generation using the sweet power of AI
We designers can whine and complain and cry bloody murder when any new design related AI is released, but really, AI is an incredible help in content creation, for example.
- Need custom art & illustrations ? leonardo.ai brings DaVinci worthy art to your UI if you know how to prompt 😉. So does midjourney and even Canva’s text to image!
- Need to write sophisticated UX copy? try relume for Figma and you’ll feel like the next Naguib Mahfouz 😍.
➡️ ️️️Animation right inside Figma— figmotion and Motion UI
Aftereffects & Haiku are things of ancient past, no need to get out of Figma to create these cute & light Lottie animations. Just launch figmotion (I like the legacy version) and get animating!
There is also Motion UI if you need more sophisticated animations.
➡️ ️️️ Super fast Prototyping?
Thanks to Figma’s beautiful empathy, we now have conditionals. Meaning that we don’t need to make 5 copies of a screen in a prototype to cover 5 different flows or steps in a flow.
For example, set a boolean local variable for user logged in status *isloggedin, false by default, this way when a user navigates to their profile page at any point in a flow, they will see their profile if logged in *which happens somewhere in the flow* and registration form when logged out!
➡️ ️️️ Design <> Dev Handoff Tips
- if you design for web, you will certainly appreciate Breakpoints. This amazing plugin creates one artboard that devs can stretch in height & width to see responsiveness in action, AND it draws rulers right there on the canvas to help them see better.
- Also, ever feel frustrated that you need to draw the flow on the canvas for devs beside prototyping? you don’t have to! Try ProToFlow, or if you like to draw the flows yourself and got stumped when autoflow became a paid plugin, try it’s free copycat Target Flow :) You’re welcome!!
That was a lot, wasn’t it? I’m sorry, but I really do use all that stuff to be able to juggle 5 design + 3 research projects 😅. And sorry if I sound like a know-it-all, let’s face it, ladies are just better at telling people what to do 😂🎀🙈
Final episode next week! Setting automated testing & QA for design teams who don’t have UX researchers.
‘till next time, lots of love and #keepdesigning!
