Just enough Figma for web developers
Mockup in Figma
The need for learning design tools like Figma
As a web developer, you'll often work with the UI designs provided by designers, clients, or agencies.
And these UI designs or web designs are provided by using tools such as:
- Adobe Photoshop
- Sketch
- Adobe XD
- Figma
So, it would be best if you learned these tools.
If not, you'll have a hard time producing pixel-perfect websites.
"Hey! What is pixel-perfect?"
A pixel-perfect website simply means the final website loaded in the browser looks exactly like the design provided without noticeable differences.
According to my experience, every developer should strive to produce pixel-perfect designs.
"Got it! How do I do that? It sounds hard :D"
Haha, it's not hard at all.
If you want to turn a good design into a pixel-perfect website, you need to pay great attention to small design details such as:
- Color codes
- Spacing between the elements (Margin) and spacing inside the elements (Padding)
- Font sizes and what fonts are being used
- Images and their display sizes
- Layout and dimensions of all elements.
And the only way you can accurately do all the above things is by being able to inspect the design file provided.
If you know how to do that, you can produce pixel-perfect websites.
That's the goal.
So, the aim of this course is not to help you master Figma. You don't have to master it.
But you should learn it enough to navigate around the design files provided.
And we will do that starting from the next lesson.