Full disclosure: I'm not a designer, but as a frontend developer, I'm constantly thinking:

• How can I improve the UX and UI of my apps?
• How can I get things done quickly, but without compromise quality?

Although this post is focused on answering the second question. Here is a tip for the first one:

There's an awesome book I read this year. It's called Refactoring UI by Adam Wathan & Steve Schoger. I cannot recommend it enough! This book is packed with tons of design tips from a developer's point-of-view and it was a game-changer for me.

If you want to give it a try before buying it, you will find some screencasts and articles within the website mentioned above.

If you think Refactoring UI is cool, you should check out the new project Adam and Steve are working on right now. It's called TailwindUI.

How can I get things done quickly, but without compromise quality?

Few months ago, I started working on a side project called Do I need it?. It's a native iOS app focused on helping you organize your impulses before buying something you don't really need and, as a consequence, avoid clutter in your life.

As I'm already working on other side-projects that are taking me a lot of time, like Cephhi, I decided to change my workflow for this particular project. That's when the idea of prototyping before coding came up.

Figma is the key 🔑

If you didn't hear about Figma yet, it's a cross-platform tool that helps teams create, test, and ship better designs from start to finish. It's similar to other tools like Sketch or Adobe XD, but FREE.

I've been using Figma for years, but I was mainly using it for isolated designs or my low resolution mockups. But this time I decided to create a complete functional prototype of my app (including transitions between pages):

The benefits of prototyping before coding

Here are some of the benefits of prototyping your app before start coding:

Consistency

By prototyping before coding, you're forced to think about each page/screen of your app and there is a really cool thing that happens when you have your entire app in a Figma canvas: Because you're watching the forest instead of the tree, you'll quickly find a lot of inconsistencies on your designs. For example: Maybe you're using two different buttons as your "primary button", or maybe you're using different font sizes or colours instead of using the same. Noticing these inconsistencies early in process can save you a lot of time and prevent you from refactoring your code over and over again.

All your assets in one place

Because you have all your screens on Figma, you can easily export all your assets in just one minute. Figma also allows you to generate different versions of your assets for iOS and Android. Cool right?
I also use to assign a name for each asset on Figma. In that way, when I need to use a specific asset, I just need to check my Figma canvas. Here is an example of some of my icons:

Project planning

After designing the entire app, you'll have a more precise notion of the project complexity. By going throw each page, you will be able to identify each unique component and make a good estimation of effort.
In my case, I use to translate my designs into Azure DevOps tasks or user stories.

Reference

When you start coding your components, you'll have your Figma canvas available to search for colors, padding, margin, font-size, font-family, etc. I cannot describe how useful this is! Think that you don't need to start thinking about which font-size you need to use. You already did it on Figma. Figma will save you a lot of time and, more importantly, will allow you to keep your focus on your code.

What do you think about these benefits?

Do you usually design a prototype before coding? Let me know in the comments below👇