Figma review 2019: UX design tool for teamwork
Creating a high-quality software design with a single program, uniting all the desired functions for design, editing, UX, layout etc., is merely possible. In reality it is a combination of tools, platforms and apps. Figma can be one of worthy components for such combination. The collaborative design tool for prototypes, compatible with Windows, Mac, Linux, Figma is quite simple and contains all the necessary instruments for web designers.
Desktop or online version - both require Internet connection. The upside of having projects in the cloud is that they become accessible on any device (view mode only on mobile devices) and anywhere. Just log into account and share a link. It may be more convenient to work with a desktop version, because some keyboard shortcuts in a browser work differently. Additionally, if connection breaks, all changes will still be saved when it restores.
|Vendor||Figma, Inc. (website)|
|Newest version (for Windows)||Figma v.75.0.0 out September 2019|
|Operating systems||SaaS, Windows|
|Installer file size||52.5 MB|
|Key features||Versions history, Plugins, Collaboration tool|
|Extra features||Styles library, Prototypes, Commenting|
|License||Free / Subscription|
|Pricing||$12.00 Figma Professional (1 Year, 1 User)
$45.00 Figma Organization (1 Year, 1 User)
Why use Figma?
1. Joint work in real time
This amazing feature allows several people to work on a project simultaneously. The program generates a link for
There are few levels/types of access. Edit access gives
Figma has lots of handy tools that make the job web designers a bit easier. Scale tool can scale multiple elements at once, which is more convenient than selecting each element separately. By switching Move Tool to Scale Tool and dragging the bounding box, content will scale proportionally. This allows
Layers are called Frames - they allow to combine elements together. A tool called Constraints
Connected items - Components, are equally important. It works like this: select an item and click on “Create Component” button, its group will appear in
Team Library allows to share Styles and Components across files and teams, as well as keep Styles and instances of Components synchronized. Smart Selections tool is for aligning objects with equal distance between them. It works on horizontal or vertical axes at the same time - which is especially suitable for creating galleries and graphic presentations.
To arrange elements quickly, there are auto rulers in Figma. Also, under each
3. Design elements
Of course, Figma does not provide such variety of design features like, say, Photoshop, yet still contains plenty of useful options. There are different colors blending modes, effects, color models. A nice gradient creation tool with instrument handles allows
Figma supports exporting files in PNG, JPG, SVG and PDF. You can export one or few layers simultaneously, or use the Slice tool and select any part of Frame for export. It is also possible to copy and paste properties of elements: effects, strokes, color, layer mode. Colors can be added to
4. Vector images
The process of creating vector shapes in Figma is very well thought out and implemented. Users may easily manipulate the shape of objects, controls are intuitive and simple. With selecting and hovering over a polygon, 2 control handles inside the bounding box appear - to adjust parameters. “Count” is for the number of corners, corner radius is how sharp or rounded you want each point to be. It is possible to make complex figures, select
A significant advantage of Figma over other similar online UX design tools. It enables designers to show an interactive model of
Trigger determines what initiates the action: click on an object, hovering the cursor over an object, drag the cursor up or down, etc. After Delay function allows to adjust a pop-up window and time after which it will appear if a user is on the page and does not interact with it. There are 3 types of actions: a) Navigate - a transition between Frames, b) Swap - exchange overlays (a new overlay will retain the same overlay settings as the original), c) Overlay - opens a Frame above the current Frame.
Transitions determine how a prototype will move from one Frame another. Overflow Behaviour function is for scrolling objects vertically, horizontally or in both directions simultaneously. For instance, you want to add Google Map and allow visitors to move it.
Presentation Mode has templates and previews of frames for different devices, i.e. iPhone, iPad, Google Pixel, Surface Pro, Google Nexus, Apple Watch, as well as previews for social networks. In this mode, you can arrange previews horizontally or vertically, edit size, background color, set a starting frame for prototypes.
- The prototyping process could be better with videos or animations;
- Not convenient to navigate between layers, as icons of different elements are similar and there is no possibility of highlighting them with color;
- There is version history, saving automatically every 30 minutes, but there is no action history - therefore, no possibility to cancel actions, for example (available only in Beta as Activity log);
- Occasionally, some Items may stop displaying
andapp restart is required;
- No variety of image editing tools.
Starter free version provides unlimited file storage, free view, 2 editors, 30 days of version history and 3 projects limit. Of course, to access all features and benefits of Figma, you have to purchase it.
Professional version costs $12 per user for 1 month - if billed annually, and $15 if billed monthly. This version gets you
Also, developers suggest Organization Beta version which costs $45 per editor for 1 month and is billed annually. It includes such additional features: 24/7 priority support, unlimited team spaces, unlimited team projects, company draft ownership, enforced SSO, remote provisioning, activity logs, advanced system controls, advanced privacy settings.
All features in Figma are free for students and their educators at accredited institutions. They only have to verify their student status.
Figma vs Sketch
Although Figma wins in performance and works on MacOS, Windows and Linux OS devices, while Sketch is only for Mac. Also, the library of files in Figma is more conveniently organized and working with styles (color adjustment for strokes, fills, etc.) is more thoughtful than in Sketch.
To store and send files in Sketch, you need to use third-party services such as Dropbox. Figma, on the other hand, is a cloud-based design program - there’s no need to download or send files anywhere, just share a link with access. Plus, Version History in Figma gives the opportunity to see or roll back to previous versions.
Overall, Figma is still a comparatively young tool to compete with Sketch. Unlike Sketch, it is not
Figma vs InVision Studio
InVision Studio is very similar to Figma by functionality and interface. The main advantage of Invision design tool is the ability to work with animation. Animations there can be run on a timer. Also, you can adjust interaction with the cursor or touch interaction according to personal preference. Similarly, it is possible to configure swipes for mobile apps or the number of clicks the cursor, and so on. In turn, Figma brings another type of benefits to the
Figma is a convenient and simple online web design tool, with key advantages such as vector objects, team collaboration options, prototyping. The learning curve for Figma is low - users can get aboard and start utilizing it quickly. The best use of Figma design app is for web designers who need a basic