"Why didn't you find me sooner?" That's what I'd say to Figma if he/she managed to speak/understand English.
As a code newbie, I was told to always draw out a sketch of what I intended to create and also work out a pseudo-code before jumping on my appealing Material-themed VSCode editor. One major thing that was missing from this very useful piece of advice was what to use to "sketch" out my idea. So, like most people I saw, I pulled out a pen and a pad to try and replicate my mental pictures of this great web-app I had brewing.
While hand-drawing is better than not sketching at all, it had a few hinderances for me.
Simply put, I am not a very talented doodler. So, once I drew out boxes for where what component should go, and the relative sizes, I was done sketching.
This resulted in something I call "Designing on-the-go" (using CSS to try deciding what a page should look like by trial-and-error).
Now, this doesn't sound like much of a problem, considering that I made two nice apps this way. But here's how it can be an issue:
- I found that writing CSS to create a component/page that I only had a mental image of is more tasking. It was easier to get frustrated because of the trial-and-error method I employed.
- Secondly, you can play around easily with colors, gradients, font sizes, alignment etc. on Figma without having to tweak your CSS a 1000 times (I can't be the only one)
- Thirdly, and more importantly, having a design protoype trained me to replicate designs with code. It doesn't get simpler than "here is what I want my app to look like... write code to bring it to life". Moreso, when you have a nice-looking design, you'd WANT to replicate it!!!
I'm more fond of Figma because of it's VERY shallow learning-curve. A 5-minute video was enough for me to get started!!
There are a few other well-known design options out there: Adobe Photoshop, Sketch, etc.
Regardless of which platform you are more comfortable with, I highly recommend taking some time to create a starting design before you jump to your preferred code editor (VS Code rules, btw!)
Let me know your thoughts in the comments :-)
Top comments (0)