Member-only story
Figma tips for developers
Around May 2020 I decided I was going to take one of the bigger jumps in my life and start building my own app — JiffyCV.
I had built a number of apps for others in the past, mostly as a means of making money, giving back to communities I care about or just as a means to learn something new but I’d never put any faith in my own ideas.
With being cooped up indoors it made sense to actually give it a shot, I have nothing to lose and potentially loads to gain so I asked a few colleagues and a neighbour for help and started fleshing out the idea.
Unfortunately, the person who was helping with the UI & design side of things had to drop out early on which meant I had to take on the design responsibilities.
Design was something I used to enjoy when I first started out as a developer but over the years become less comfortable doing it as my ‘developer brain’ took the centre stage in my career.
Finding Figma
I’ve used Sketch in the past and found it far superior to any of the Adobe tools I had come across previously, it was cheap, lightweight and had a really useful component system that allowed you to update properties of a component instance while inheriting structural changes when the master component was updated.
I had a new constraint for this project however and that was the fact that I’ve recently ditched using an Apple Mac and Sketch is only available for OS X so I had to find an alternative.
I had heard about Figma for a while so decided to have a look at that and found it shared similar properties with Sketch such as component instances and most importantly it was web based meaning I could use it on any OS.
Figma also integrates well with Storybook, a framework for building UI component libraries, something that will be important later on once development starts as we can then have the designs and final components side by side for comparison.
Here’s one I prepared earlier
Aside from the cross-platform support, another benefit that Figma has over Sketch is how easy it is to take a publicly available project that someones posted online, duplicate it into your workspace and then start using the…
