2020
It’s a new day, and the start of a journey !
Today I’m really getting a hand on Figma. I’ve already tried it a few times in my current job, after low-fid prototypes, but this will surely help me discover functionnalities I have no idea exists… well… I hope it does!
So, let’s start… Copying a Figma design !
The principle is easy, it’s like the 7 differences games : you just try to redo exactly a design built in Figma by someone else.
First thing first is to get a design made with Figma. Fortunatly Figma has this awesome sharing platform where you can share your work with others and even find ready-to-use application templates.
From there, I chose the “Delivery App UI Kit” template from Maria Kovalevich… and let’s start!
What I knew before begining…
I practiced the Figma’s embeded tutorials before and watched some youtube videos on how to work with Figma. I also applied what I learned there at work for all new features asked by the dev team. No fancy stuff at start but just to get my hands on it.
That allowed me to integrate some of Figma’s most useful shortcuts (I love shortcuts…. but who doesn’t, right?) and to begin understanding the awesomeness of components (you have components in Balsamiq too but it feels really deeper in Figma).
I also did a huge recast of the palettes at work so I had a very clear idea of how to use that.
What I learned from this experience
Working on other people design is a really nice way too see new things.
When you’re alone doing your stuff you use your ways of doing them… sometimes not the most proper way, obviously. So watching how the design was organized and how some of the components where created gave me a lot of new ideas.
It’s nice to see how I have a lot of new things to learn ! 🙃
The structure there was really neet, isolating all the main components in a separated page. I’m clearly doing that next time !!
I learned about the auto layout feature…. well first I was fighting with rectangle sizes before really understanding how it was made. This feature is really hand and… kind of magical ! Really ! All those “prices” components self-realigning properly… love it! Reusing that asap !
Introducing images from other ressources and the clip content feature. At first I was like “whaaat? where is the rest of the image / the component, there has to be a way of hiding that properly”. Found very quickly the feature, very nice thing (where I was always cheating with Balsamiq…) 🙂
What was the most challenging
I fought a bit with a component which was including an icon. The one with the walking guy on the checkout image. The same component was used with another icon (the bike) so I just thought of removing the icon and inserting the other one instead… but it was impossible to modify the structure of the component so much. You can drift a bit from the main component but not to the extent of having a completly different structure. So… I turned in circle a bit… then found out the proper way to change icons used in a component.
Not sure yet of the creation of the main component… do I have to define a list of icons useable with this component? Does Figma find all the vectors himself…? I’ll try that next time!
Also I played a bit with the constraints. It’s seems ok when making a copy of a design but, when starting from scratch I’m not so sure… Last time I tried to use it at work it was clearly not doing what I wanted do !
Not yet my cup of tea, working on it!
What’s next?
Next time I’m taking a real application/website and trying to redo it with Figma 🙂 Have to choose first… mobile app? desktop app? website?… I’m only doing desktop app at work, maybe trying something else…
I’m also counting on improving my knowledge on prototyping from frame to frame with Figma. I just add an overview with youtube and my last designs at work, but I’d like to do it with a full app 🙂
