Figma
Figma is an interface design tool that enables multiple designers to collaborate in real-time. It’s available in the browser, or on Windows, Mac or Linux, and there are both free and paid versions depending on what you use it for.
Here are some of its outstanding features:
“Figma has a similar USP as Sketch with the exception of being cross platform,” explains front end designer Benjamin Read. “When I used it to create a couple of icons for an article on our website I found the workflow incredibly smooth. It took me no time to learn and had the added benefit of being collaborative: you can share graphics with others within the app.“
“I’ve been trying to switch to Linux for my work and sometimes we use Windows, so Figma makes sense to me from a practical standpoint,” he adds. “In comparison I’ve found many tools for other platforms fall short.”
Freelance content writer and artworker David Eastwood, also has good things to say about Figma. “It's also been a really useful tool when we've needed to quickly mock MVTs; sometimes small additions to an existing layout. We love that you can quickly create designs for desktop, tablet and mobile.”
Figma, the new age interface design platform, appears to be at the epicentre of collaborative design culture. The way its enhancing productivity and efficiency of designers is impeccable and I am realizing its potential over the past one year since I came onboard. While a lot of credit for a seamless performance is bestowed upon its various features, a lot of due credit must also go to the overall User Experience Design (UX) of the product as well. A few months back when I started using Sketch and Figma in parallel, I had shared a story - The Future of UX: Design & Collaborate with Figma, on the various features of Figma which promised to be disruptive in the world of Sketch’s dominance, ranging from Collaboration, Shortcuts, Components, etc.
While most of the product UX is laudable, here I am addressing a few UX elements that I have had an experience with, things that appreciably work well and on the hind sight, things that doesn’t work well in Figma.
Version control
Uploading to Dropbox has always been imperfect and often caused problems with copying conflicts and confusion when searching for current versions. For Sketch, there are always git options for designers, i.e. Abstract.
In Figma, version control is naive and simple: you see who made the changes and when, and roll back to the version in a couple of clicks, overwriting or creating a copy of the layout.
Entering a hex code for colour has never been as easy as it is in Figma, especially the neutral ones like White, Black, shades of Grey. In Adobe CC products like Photoshop, Illustrator, After Effects, for entering the HEX Code #FFFFFF (say), we have to type the full code. However, it uses some intelligence by adding zeros if one doesn’t want to type the entire code. For e.g., if the HEX Code is #0000FF, one can simply type FF in the code field and press Tab/Enter button on the keyboard to fill it with 0s, where 0s precede those characters. So, if the user is aware of the hex code which has preceding 0s, say #0000AA, #000333 #00AFAF, etc., the user only needs to type the non zero characters of the hex code. On the other hand Sketch provides no such intelligence as we always must enter the full hex code to get the colour.
Corner Radius Controls
The independent corner radius control in Figma for rectangles is indeed well thought through, designed and implemented. I had used corner radius in Sketch and was very annoyed with the functionality. One has to activate corner controls to access the radius of that corner and then type in the radius field for changing other corner radii. However, in Figma, it has an Independent Corner control which allows the user to enter radius for each corner of a rectangle which actually is pretty fruitful while working.
Consider the below rectangle with Top Left corner radius as 10px. The image below shows how the controls appear in Sketch and Figma. In Sketch, entering 10px as the radius itself is cumbersome when one needs to double click on the rectangle to first control the corners, then click on the top left corner, enter the radius and then it appears as below for changing other corners.