Hi, hey, hello! 👋✨ Nice to see you here! 😇✨
Today I want to share with you some of the important and fundamental things that are hard to find on the internet. When I started working as a Junior UI/UX designer I made a lot of mistakes. I was new to this topic and in university they can’t teach you everything. And online Figma or Adobe XD courses neither. They show you only how to use these tools but not how to work as a UI designer. At the beginning of my journey I was making basic errors and because of that I made developers’ lifes a nightmare… (I’m still sorry guys 🙈).
Do not make my mistakes. Really. I’m working with an amazing and understanding team, so after some updates and feedback we found out the major issues and how to deal with them. I gathered here some useful tips and information on how to handle your files for developers. To be honest, I was looking for some useful information like this but it’s really hard to find! 😱 There exist similar articles to mine, but I will try to focus on some little things that are hard to find. So stay focused and let’s get started! 🚀
(Btw if any of you know about useful websites or articles, please, let me know in the comments!)
1. Less is more - colors % typography
When I created my first design I used a lot of colors. I didn’t know what styles are and why I should use them. Foolish me! Now I know how important this is and how much it makes my work easier.
You should always prepare a basic color range (like colorscale) and one primary color and secondary one. You can always change them later within Figma in one click, so don’t worry! 😉
This website is really useful to create colorscales or different saturation -> https://uicolors.app/create
Of course you don’t have to use all 11 colors… this will be too much! It will be better if you choose 5 or 6 of them so that you could see the difference between them.
Here is a small example based on our presentation website design system how it should look like:
As you can see, there are 6 colors from the colorscale and some extra ones. You can also notice the gradient's colors used for CTA’s on our website. Well, the website was to be implemented on Wix, so it has a lot of limitations and it wasn’t possible to create gradient text. We had to use solid color instead. That’s why there are a little bit more colors, but still not enough to make developers cry. 😉
Important! Try to avoid all transparency when designing colors. Why? Because it will look different in the final and if you’re a pixel perfectionist (like me) it will be better to stick with solid colors when handing off your design to developers.
Here is a short video covering basics of the styles in the Figma. It’s a little bit old, but relevant for someone who is starting. I might write another article about styles and “variable” styles (let me know in the comments if you are interested!), but for now I will leave you here with the basics, because personally I think this is what you need for now and even if I’m aware of variables, I rarely use them.
2. Name everything (or almost everything)
To keep your files neat and well organized, it will be really helpful to name everything clearly. When I started working as a designer I didn't have this habit. But now, to be honest I just can't stand seeing unorganized and unnamed layers. Seriously, even when I’m watching youtube tutorials and I notice this I’m screaming inside. 🙈
Here you can see how my final design files looks like:
You can clearly distinguish components, sections and understand how the file is organized. It’s not only important when handing off files to developers, but also for other designers. Imagine that you just started work at ongoing project and you see something like this… 😱
Total nightmare!
By the way, if you are a victim of your own actions, Figma has some cool features helping to rename files. 😏✨ https://help.figma.com/hc/en-us/articles/360039958934-Rename-Layers
There are also Plugins that will help you with that, but personally I didn’t use them, so I don’t have any to recommend. But you can easily take a look at them and test (if you have some favorite plugins helping with this case, please share them in the comments!).
Or if you want to work faster, you can check their new AI tool: https://help.figma.com/hc/en-us/articles/24004711129879-Rename-layers-with-AI
But personally I think that having a habit of naming almost everything is a good thing. In Figma you can use program features or AI, but if you will be working in other programs (like almost dead Adobe XD or Photoshop) this might be very useful.
And about AI features… When I’m writing this article I think they are available for free for everyone, but I won’t be surprised if they will make it priced in the future. So, be careful and don’t depend on them too much.
What about this “almost” in the title? Sometimes you might work in Figma on some pictures, use mask layers etc. and there might be some exceptions of naming. Here is an example in our presentation website design. See, I just named the group “Background”, because this will be exported as Business.png and it's a small part of this image.
But personally even if I have two ellipses in the design, I prefer to name them “Ellipse - left” and “Ellipse - right” to keep the file clean. But you don’t have to. As you can see - even I don’t name everything every time.
This rule is also important for colors. At the beginning I was naming colors in the wrong way like “Gray”, “Darker gray”, “Lighter gray”, because I thought it would be simple. But it turned out to be confusing for developers. It’s better to give your colors unique naming and this website is really helpful with that:
Of course, you can find other websites like this or name them yourself, but keeping each color name unique is really important. And by the way, even if, for example, your red color is slightly different that regular one (maybe it’s a little pinkish or darker?), it’s better to check it on that website if it's a different color or if it's a solid one. Naming your colors makes it easy to communicate with your team: “Hey do you like the new BananaYellow?” but it also makes it easy to find, change or update for the developers because it becomes easy to find in the codebase. A more technical aspect of giving creative and unique names to your colors is that in a lot of programming frameworks there is a default color palette. In SwiftUI for example the color "lightGray" is part of this palette. If you use simple color names like red, blue, lightGray etc… the developer you hand out your design will have to come up with a name by himself and you will face some endless conversation to figure out what color you are both talking about.
In this part we covered why it’s important to have a small amount of colors and text styles and why it is important to name almost everything in your designs - a good habit that will give you a plus points with the recruiter in the job interview. 😉✨Summarising this - just don’t overwhelm your developers with everything to give them a heart attack when they will see your mock-ups and this way you will have a good relationship with the team. 🥳✨ If you have any question or thoughts, feel free to leave a comment! And in the next part, we will cover framing and auto layout topics, so stay tuned! 👀
Thank you for reading this article. Have a nice day and I hope we will see each other again! 🥰✨
Σχόλια