You’ve got this brilliant idea for a web/mobile app that you want to work on as a side-project. You have meticulously thought about the architecture, data models, algorithms, and technologies you want to use, but when you think about your app’s interface, nothing comes to mind or things are just blurry. Point is: do you resent working on interfaces? do you feel like only artsy people can come up with “beautiful” designs? Personally, I have been there, and chances are, you have been there as well.

In this blog post, I will try to share with you what I believe was the turning point for me to get past this block.

Background and motivation

To make this blog post a bit more relatable, I will talk briefly about myself and what I do. At the time of writing, I am a senior computer science student at university. I started learning about the web a couple years ago and got passionate about it. I try to invest some of my free time in learning about different technologies and building side projects. Am I a frontend or a backend developer you might ask. I honestly don’t care. I don’t like to identify as either one. I am passionate about both and I believe that both offer a unique set of interesting challenges. Now that you are more familiar with my background, I hope it becomes clearer how I am, in no way shape or form, an expert.

As a student, I noticed on many occasions how other students hate working on the frontend part of apps. I believe that this is because a lot of them think of web design whenever they hear the word frontend.

As a quick reminder: no, frontend nowadays is not web design. You don’t have to be a designer to be a frontend developer.

Instead of explaining what the differences between frontend and web design are. I chose to talk about some of the problems I have faced while building interfaces for different side projects. Through my story, I hope I make you feel less overwhelmed by designing interfaces.

The problem

For the longest time, when working on the frontend of an app, I have made use of styled UI libraries like Material-UI. At that point, all I really had to think about was the skeleton of my app. This sure saved me a lot of time and allowed me to implement things relatively quickly. However, I have always felt limited by the library. After all, we all want to add our touch to our web apps to make them look and feel unique. I wanted to customize these components, but I lacked a lot of confidence. What color should I pick? How much margin should I set? Should I align things vertically or horizontally?

I used to rely on Chrome’s dev tools to play around with different CSS properties to try out different ideas; and you might be doing the same right now. While doing this, I had to think in terms of HTML and CSS to get things to appear on my screen. This was very draining and time-consuming. Ideally, I wanted to focus on what I wanted to show on my screen, not on how to implement ideas before visualizing them. Implementation should naturally come later.

Now, what if you could use a tool that would allow you to simply drag and drop things on your screen, play around with the layout, change colors, change paddings and margins, create shapes, etc. all in a couple of clicks? Wouldn’t that be great? Yes … but it feels like a designer’s job? Indeed, so what? You don’t have to be a designer to use this tool.

Are you interested yet? If yes, then enter Figma.

Figma

In short, Figma is a prototyping tool. Start a Figma project and you will be able to use objects (frames, rectangles, text, etc.) to quickly create application prototypes. Frames can come with pre-determined widths and heights for different screen sizes like desktop and mobile. This is extremely useful in maitaining proportions and creating responsive applications.

One other thing you might find useful is that it provides you with CSS code snippets that you can literally copy and paste in case you are not sure how to implement something. I found this useful particularly when using box shadows because I always forget the syntax 😅…

Using the pen is also super fun and useful, you can draw different shapes, and export them as SVGs to use in your website. I actually used this feature a couple of times to draw waves and blobs and use them as backgrounds. I always found those cool in others websites I visited. Now, I am finally able to use some on my own projects!

Figma is also browser-based. This is really handy because you don’t necessarily have to install additional software, Everything runs in your browser. This also makes collaboration very quick and easy. You can share your prototypes with other people via link and even let them contribute to your designs.

Another neat feature is Figma plugins. Figma allows you to use plugins developed by the community to make your prototyping easier and faster. One example of a plugin is iconify. Instead of having to create your own icons, you can simply use this plugin to use icons from iconify in your prototypes.

In short, integrating Figma in my development workflow has helped me tremendously. I feel much more confident when I move back to my code editor for implementation, because as opposed to before, now I have a mockup I can rely on. As I have mentioned earlier, Figma (or another prototyping tool) gives me an environment where I fully focus on what I want my web app to look like without having to think much about code. I believe this was the turning point for me. It took away all the frustration and resentment I used to feel when building interfaces.

Where to get started?

I tried to compile a couple of resources I found helpful when I was just getting started. If you are wondering why I have only mentioned Figma, and not other prototyping tools (Sketch, Adobe XD, etc.), it is simply because I never got the chance to use them. Figma sounded like a good start because as mentioned previously, it is browser-based and does not require me to install another software.

Fun fact: motivation to learn this tool was totally accidental. I was looking for something to watch while having breakfast, and youtube recommended a video of an introduction to Figma. I watched it and fast forward a couple months … this blog post happened.

Without further ado, these are some useful resources I found:

• First video I ever watched about Figma, great introduction in my opinion
• Nice walkthrough over the basics
• If you need practice, try to replicate this project

N.B: Don’t be too worried if Figma is not looking the same as in one of these videos, focusing on the concepts is the most important part

Additional resources

Not necessarily related to Figma, but here is a list of resources that helped me get better at designing interfaces:

• Refactoring UI: 7 Practical Tips for Cheating at Design: Such an instructive post. It talks about a couple of tips and design principles any developer can take advantage of to make interfaces look much cleaner.
• Refactoring UI: Bad about: I love watching these videos, they make you go through the thought process of a designer. You quickly realize how designers have such an eye for details. It’s fascinating and awesome

Final words

As a conclusion, I hope I have convinced you in trying out Figma or any other prototyping tool.

I understand that this is a bit far from pure coding and might not be within your comfort zone. However, I believe that as long as it makes your product better, then it should not hurt to invest some time in learning it. I believe it will pay dividends over time.

Also, it is always great to keep an open mind about different technologies. Who knows? You might try Figma out and realize you actually have a passion about web design.

Feel free to get in touch with me to further discuss this, or suggest better reasons why developers should be using a prototyping tool.