Although Figma is not able to convert designs to code beyond fairly standard transfer functionality, offering a separate tool (FigJam) for tasks that may require whiteboarding and design system documentation features to ensure that styles and components can last long after they’ve been created, makes Figma a true end-to-end product design solution.
With audio and spotlight features, product teams can have real conversations right in Figma, and even present to stakeholders.
Figma’s latest release was released in May 2022 to coincide with Config 2022, where Figma delivered a range of new features and improvements live, including dark mode, component properties, variable fonts, highlighting, branch journals, etc.
Get a free trial of Figma today.
Before diving into Figma itself, FigJam deserves a special mention.
Users of Sketch, Adobe XD and other UI design tools should subscribe to a completely separate whiteboard tool such as Miro or Mural in order to plan user flows, conduct design sprints and perform various other product design tasks. FigJam, however, is part of the Figma ecosystem and it’s just nice to have all the tools and files under one umbrella.
To fully understand what FigJam is capable of, take a look at these FigJam templates.
Frames (artboards), shape layers, text layers, smart guides, intuitive keyboard shortcuts, and more. UI design tools have matured enough that it is rather difficult to mess up these basic tools and concepts, which allow designers to quickly model static designs. and wireframes. In Figma, these tools work exactly as you’d expect.
However, one particular feature you may not be aware of is what Figma calls Auto-Layout, which allows designers to create dynamic layouts using alignment, padding, and layout rules. smart spacing. Figma users tend to be quite split on the auto-layout, finding its results unpredictable. It might be because AutoLayout is flex-based, so if you’re unfamiliar with modern CSS practices, you might feel inclined to ditch AutoLayout and settle for the classic resizing rules.
In terms of prototyping, Figma pretty much does what you’d expect. I would love to see functional components like interactive form controls etc., but the same could be said for any modern UI design tool.
Instead, you’ll see the standard gestures (click, drag, hover, and delay, to name a few) and page transitions (dissolve/move/push/drag). These combined can be used to switch to a new frame, change component variants, open/swap/close overlays, go back, “scroll to”, and open links – nothing fancy, but other UI design tools are rarely as comprehensive in terms of interaction possibilities (e.g. Adobe XD has no ‘hover’).
Most of the time, you’ll be using “smart animation” anyway, a feature that takes the guesswork out of prototyping animations.
Figma is able to translate styles into CSS, iOS and Android code, with the ability to specify the color format in Hex, RGB, HSL, HSB or CSS (CSS Colors Level 3 only). It’s pretty standard.
However, one aspect of Figma’s transfer functionality that really impresses is the fact that it’s integrated into the main Figma app rather than being clumsily outsourced to a separate web interface.
Most modern UI design tools have shared styles and components, but Figma is the only major tool that lets you link design system documentation to them.
Additionally, component variants and properties can make components more flexible while maintaining visual consistency. Not only does this give Figma a leg up on the competition, but running these features finally makes it possible to manage a design system less confusing, rather than more.
Having version control means being able to “split” designs into branches that can be worked on, tested, and pushed independently and nondestructively before being reviewed and merged into the branch’s main Figma document. This feature alone makes Figma more suitable for iterative design methodologies such as design sprints, a first for a UI design tool.
Collaboration is where Figma really shines.
After innovating live collaboration features (referred to by Figma as “multiplayer”), it became clear that collaboration was going to be a big part of what makes Figma great. Since then, Figma has more than delivered on that promise despite other UI design tools also implementing live collaboration features.
One of Figma’s other collaboration features (which hasn’t been adopted by other tools…Again) are audio conversations, allowing stakeholders to discuss feedback, ask questions, hold workshops, or simply collaborate. In the latest version of Figma, we also saw the introduction of “spotlighting”, which is essentially a “follow me around the file” button for those who need to showcase their work.
And of course, for asynchronous work, the standard “comment and resolve” functionality is also present.
Figma system requirements – desktop apps
- Windows 8.1 or later
- macOS 10.12 (macOS Sierra) or later
Figma System Requirements – Web App
- Chromium 64+
- Firefox 78+
- Safari 13+
- Microsoft Edge 79+
The biggest differences are that Professional will give you unlimited files as well as access to team libraries and audio chats, while Organization will also let you branch and merge. See Figma’s pricing page for a more detailed breakdown.
Figma: should I buy it?
Figma is, without a doubt, the best bang for your buck right now, especially if you and/or your team take designOps seriously by plugging in, testing, building design systems, and leveraging synchronous and asynchronous work as per the needs.
Despite these serious features, Figma still manages to make design collaboration fun with its multiplayer features and audio chats.
Finally, it remains competitive with other UI design tools in terms of features and platform support, and still manages to innovate without adding more features, which we have seen become the downfall. many tools in the past.