It’s hard to think about design software in 2023 and not to mention Figma.
Figma is a design software specialized in user interface design, although it can be used for other things, as it is a vector-based software, it shines brightest on building interfaces and prototypes at blazing fast speed.
One of the greatest things about Figma is how accessible it is, not only it’s free for individuals for as many files as you’d like, it’s a very lightweight software that can be used directly on the browser on any operating system, whether you have a PC, a Mac or a Linux device.
If you haven’t yet, I’d recommend you go tofigma.com and create your free account to get started right away, I’d also recommend you download the app, while it can be used on the browser, I feel it runs a tad faster on the app.
So, Why Figma?
Ok, so you might be wondering, why should I use Figma? Why don’t I just stick with XD, Sketch or Photoshop?
The answer to this might be a little personal, for me it’s accessibility, optimization, and auto-layout. I’m a product designer and Figma is tailored to my needs, it’s insanely faster and more convenient to design interfaces and prototypes in Figma than most other software, also, did I mention auto-layout?
Other than that it’s vector-based software, so you can be flexible with it and even design logos and other things. I wouldn’t recommend it for print though, it lacks many features that print designs need.
All sounds good, but how is designing in Figma better?
I mentioned a couple of times that Figma is specialized in designing interfaces, allow me to show how this magic happens and why I feel it’s so useful.
First and foremost, no fluff
If you have ever been around other design software you can tell how disorienting the first time you look at its UI, there is SO MUCH STUFF going around.
Not here my friend, Figma can even look like a barebones app if you’ve come from other tools, but let me assure you, it’s compact and mighty, and here’s why:
The properties bar is tailored toward UI design and has the specific properties most developers use and need to know of when building interfaces. This means your design can imitate with precision what the real thing will look like, especially things like constraints and padding.
Not only that, it generates some reference code for developers which can be super useful to save some time when handing off your designs.
Have I mentioned auto layout?
This is THE best feature I have ever used in any design software, ever. Auto-layout has saved my life and will probably save yours. Autolayout lets you set up pieces of your design with laser precision and imitate real web/app behavior as no other app does.
Frames - are - powerful
Frames are similar to artboards in Adobe software, but they have superpowers. The first superpower is that you can place frames inside of frames, and while at first glance this may not sound like much, it enables you to do a series of design tweaks and behaviors that are hard to achieve, pairing this with auto layout. You will become a design god instantly. Some of the things relevant to mention:
Constraints
You can constrain elements, or anchor them, to the sides of a frame, meaning when you resize this frame, the elements go with it. This is amazing to design responsive layouts.
Crop content
It’s possible to choose to crop or not content inside a frame, making it a breeze to adjust images in layouts or to create scrollable sliders and sections.
Link
You can also use frames as anchor links to create in-page navigation inside a prototype, super useful to show a very realistic prototype to stakeholders and developers.
Now, where Figma truly shines is in Collaboration
It’s one of Figma’s main selling points, collaborating in Figma is seamless and goes way beyond file sharing. Your entire team and hop on the same file, and you can “see” each other moving around on the canvas, while that is cool, it serves a greater purpose.
Whether you’re on a Meet call without the need of sharing a screen, or using Figma’s built-in voice chat (yep), following someone around on a file and dropping comments where it’s due is so much better and faster than traditional presentations. It’s more organic, faster and it can be much more organized as well.
You can also of course share a file link, a specific prototype link, or even download a local copy of a file if you need to.
Speaking of prototypes
It is possible to create prototypes that emulate the real implementation veeery closely, by the use of Figma’s auto animate functionality and components, it is possible to create very advanced prototypes to either use in presentations, handoffs, usability tests, or even all of those combined.
Figma even has some device mockups built in to make it easier for stakeholders to understand how a UI will look in a realistic scenario, or better, they can use Figma’s phone app to view it on their own phones.
Wrapping up with a more advanced topic
Figma is an excellent tool to build extensive libraries and design systems. Utilizing components it’s possible to build reusable elements such as buttons, colors, type settings, navbars and much more, that can easily be reused and tweaked by the rest of your team, or yourself.
Components can even be used to create micro animations, such as hover states, loading states, and more.
As a solo designer, you may use this file to file, but components can be published as libraries that can be used by everyone on a team, making it much easier to maintain consistency between design files of teams with multiple designers.
Ok, so there’s much, much more on Figma but
This should give you a solid overview of this app's capabilities. We haven’t mentioned Figjam or plugins or the community which can enhance Figma even further. If you are a product designer I can’t recommend Figma enough, it’s by far one of the best Product Design software with pretty much everything you’d want laid out in a very elegant fashion. If you work a lot with vectors, Figma might be a solid free choice as well, it has a sort of pathfinder if you know it from Illustrator, which is pretty decent, but hey, don’t just take my word for it, it’s free to get started! Get on figma.com and try it out, I’ll bet you enjoy it. Ok, there you have it, an intro to Figma in 2023.
Comments