Figma: Improving and Simplifying Web Development
By: Aarjit Adhikari
You know that annoying part of a group project where one person has the file on their laptop, and everyone else is just standing around waiting? Or when you try to explain how an app should look by just randomly explaining stuff or drawing the ugliest diagram anyone has ever seen?
That is pretty much why Figma took over the tech world.
If you haven’t used it yet, Figma is basically a design tool that lives in your web browser. It basically lets you design and plan what your website will look like before you aimlessly start coding.
Before Figma, design software was heavy. You had to install massive programs, save files locally, and email them back and forth. You’d end up with files named Project_Final_v2_ACTUALLY_ForReal.zip, and nobody knew which one was the right one.
Figma killed all that. Since it’s a website, you just send a link. You and your teammates can all work on the same file at the same time. You can see each other’s mouse cursors moving around, which is surprisingly helpful when you’re trying to point out that a button is off-center.
“Okay, but I’m a coder, not an artist.”
This is the most common reason people ignore Figma. You might think, "I just want to build the thing, I don't care about making it pretty."
But here’s the thing: Figma is actually an incredible tool for developers.
It does the CSS for you: This is the best feature, hands down. If you or a teammate designs a button in Figma, you can click on it, look at the "Dev Mode" (or Inspect) tab, and it literally gives you the CSS code. You can copy the exact hex codes, fonts, and padding right into your editor.
It’s free: You don’t need a license or a powerful computer. It runs on pretty much anything that can open Chrome.
It saves you from "Code Hell": It is way faster to move random stuff around in Figma than it is to rewrite your HTML/CSS five times because you didn't like the layout.
You don't need to be good at art to use it. Even if you just use it to draw gray boxes and figure out where your navbar should go, it makes life so much easier when you actually start coding.
Next time you’re designing a website, try using Figma. It definitely beats those awkward conversations, trying and failing to explain your vision for the website.