I decided to try Figma
Back in 2017, I was in studying at university and I was using Sketch for everything. At the time, I ended up putting Figma aside. I really don’t know why, I guess I was overwhelmed with Sketch and all the available plugins (Craft, more recently Abstract and many others that I tried). I played a little bit with Figma, read some reviews but I didn’t pay much attention to the software. I was good using Sketch together with InVision.
Later, I started seeing a close friend who’s an engineer using it, and I fell in love with the real-time collaboration feature. It’s so practical for all the designers (and, in my opinion, helps a lot in a remote setting). I immediately started to use Figma for all my side projects or to solve small exercises. Having said all of this, let me guide you through my favorite features!
1. Real-time collaboration (and comments)
With Figma, collaboration rules! It’s so great to be able to work, in real-time, with other designers and engineers. In my opinion, this a small revolution in the way that designers and software teams work. We all know that designers need to be able to collaborate with everyone from the marketing department to the engineers building their designs. Figma knows how to solve this problem, because with real-time collaboration and a comments feature there is no need to use other tools. Another great aspect is that you can install Figma on Mac, Windows or Linux or just use the browser version. This means that the marketing department, engineers, product managers and stakeholders don’t have to install the app.
2. Prototype and Presentation
While using Figma, once again, there is no need to have other plugins or use others tools for prototyping. You just simply select the prototype mode at the top of the Properties Panel. This is also a big advantage for me, because even if you are just making some quick wireframes to explain your points around something, it’s easy to quickly prototype your ideas! This allows teams to iterate really fast by quickly testing small concepts, and making sure that not too much time is spent on ideas that won’t work.
Small tip: prototyping using symbols as hotspots will add the same behavior to all of them. (Hotspots refer to the precise location of the components that you want to connect, i.e., the little blue spots that emerge in prototype mode).
On the other hand, InVision gives you the opportunity to explore more types of animations. And there are also new plugins for Sketch (for example animaapp, that earlier this week launched a timeline for Sketch 👏), but Figma is still the best to quickly test flows and ideas.
There is also a presentation mode where you can present with hotspots enabled or disabled. If you make changes to connections in prototype mode, there is no need to refresh the presentation view because it updates automatically. And I am excited to see what Figma is preparing for the future of its prototyping feature.
3. Developer Handoff Feature
Once again, at the top of the Properties Panel you find the “Code” feature and here, the engineers on your team can have access to the code. Inspecting elements like colors, typography, spacing and assets! In this view, you can choose to view CSS, iOS (Swift), or Android (XML).
The files can be shared with edit permissions or in read-only mode. In the latter, your team will still be able to inspect and export the files, but the layers panel won’t be editable.
4. Saving + Version History
You don’t need to press “Cmd + S” all the time (Figma autosaves your work by default). With Figma Version History, you are able to restore or duplicate older versions of your files. You just need to click the dropdown next to the project name, and then select the “Show Version History”.
I am mentioning this because in Sketch you have to turn on the auto save. And then, if you want to see your file history, it is possible but involves a lot more work.
What I miss
Craft
It’s already natural for me to search for “dummy content” using this plugin. Using Figma, you have to insert your own data to fill in content for your mockups.
I am not the only one asking for a Figma + Craft integration, and I think that in the future all these products will need to have something like Craft.
UI experience — Pages/Artboards
It’s a great experience to have both platforms use a similar interface, since users can switch software almost without noticing. However, Sketch wins at defining hierarchy for pages, artboards and elements on the left hand panel. For me, it is very important to have a clear view of the pages where I divide my wireframes, iterations, components, logos etc… It is also important to check the components and the groups I have… With Figma, it’s hard to get that information as quickly as with Sketch.
To conclude, it’s a great time to grow and learn inside the design world, where you are able to share content immediately with anyone. I think I started enjoying (even more) products like Figma once I started working remotely, due to the time that is saved. These products are way more effective for exchanging ideas and explaining points.
Two years have passed since Figma 1.0.0 and I am loving to see this product mature.
