Get $$$ for review

Figma

0/5 (0 review)
Best price
$ 15.00 /Pro License
Software type
SaaS
Available on
Release date
Jan 1970
Quick description

Figma features, pros & cons

Key features

  • Auto rulers
  • Presentation Mode
  • Vector and raster graphics support
Pricing

Figma pricing

Professional
$ 15 00
per License
  • 1-Month Subscription*
  • Per editor in team
  • Unlimited File Storage
Get it now
Organization
$ 45 00
per License
  • 1-Year Subscription
  • Per Editor
  • Unlimited File Storage
Get it now
Starter
$ 0 00
  • Unlimited File Storage
  • Unlimited Free Viewers
  • 2 Editors in Team
Get it now
Review

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.

Specifications:

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
Menu languages 1
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)

Interface isn’t complex, furthermore, pop-ups and GIF-tips are all around with helpful information. Lots of video tutorials on the website too. Projects are saved as drafts with all the edits, version history function also allows saving different versions of files. Figma supports integrations with Avocode, Zeplin, Dribble and Principle. Also, it is possible to generate CSS, iOS and Android codes for each element. Additionally, live embeds of Figma files work on sites and services like Embed.ly

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 project, which one can share and invite other team members to join. Everyone can add comments, and see what changes were made and by whom.

There are few levels/types of access. Edit access gives an ability to change files and projects: file name, content, permissions. View only access allows to view and comment, copy a file to personal drafts and/or share it. Only the admin person can determine who gets what level of access - for the sake of control. For example, a client would get the View only access, and that way, the workflow speeds up since there will be faster (or continuous) feedback.

2. Instruments

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 to change the frame with all the elements for devices of different sizes quickly.

Layers are called Frames - they allow to combine elements together. A tool called Constraints enlarges  and/or reduces objects proportionally. Also, each object can be pinned stationary at top bottom, top left and bottom left, etc. Fixed positions are only for frames, but it is possible to place a lot of frames in one file. For example, if you pin a button in the right-left corner and scale the Frame, a button will remain in its place.

Connected items - Components, are equally important. It works like this: select an item and click on “Create Component” button, its group will appear in components library. Then you can make required number of copies of the element and put them in different places within one frame or few frames. As a result, if one element changes, others will too. But if one of the Instances (copies) are changed, it will not be transferred to others. This scenario can be relevant when there’s an object that should be the same on every page. 

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 element its size is visible just by clicking on it. Layout Grid can be configured, and rulers can be customized to divide the Frame proportionally. There are also rulers for all the frames in working space. Fonts in Figma are Google fonts. Files with other fonts receive a “missing font” alert, and then a user can add fonts as well.

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 to regulate intensity straight on an element.

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 library to create color presets. Paint bucket tool provides color fill options.

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 individual surface plane, manipulate it separately (change fill, shape, color). 

5. Prototyping

A significant advantage of Figma over other similar online UX design tools. It enables designers to show an interactive model of product, as in action, and therefore, to look more attractive and understandable to a client. Connections can be established from any object within a Frame - begin with creating of hotspots on the object within a prototype. For example: a line or block of text -> a button, image or icon -> navigation menu or tooltip etc.

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.

Figma disadvantages

  1. The prototyping process could be better with videos or animations;
  2. Not convenient to navigate between layers, as icons of different elements are similar and there is no possibility of highlighting them with color;
  3. 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);
  4. Occasionally, some Items may stop displaying and app restart is required;
  5. No variety of image editing tools.

Figma pricing

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 unlimited number of projects, editors and version history, private projects and team library features.

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

Sketch is a standard and popular graphical interface editor. It offers rich functionality, lots of integrations and plugins, is highly adjustable. For example, LaunchPad plugin allows to convert Sketch files into static HTML web pages. Or Craft Sync plugin, that lets you send Sketch files into InVision. Figma is behind in this regard. 

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 suitable designing large-scale projects. But it already has a number of advantages, and it is actively improving.

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 tabe: collaboration/teamwork in real time, presentation mode (live preview for different devices). 

Bottom line

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 graphic editor to prepare dynamic product prototypes.

FAQ

How to use Figma?
Find all the information on the product page at: https://help.figma.com/article/116-getting-started

What is Figma?
Figma is a web-based service designed to develop interfaces and prototypes, as well as to collaborate in real time. It can be integrated with Slack messenger and the prototyping tool Framer.

How to copy and paste in Figma?
You can copy object properties all or one by one. To copy all properties select an object, go to Edit > Copy Properties, or use CTRL+C, then select a new object and go to Edit > Paste Properties, or use CTRL+V shortcut.

How to export Figma artboards to PDF?
Select objects, scroll down to the Properties Panel, pick “New PDF” option. Or, to export all frames from a page to one PDF, choose the “Export Frames to PDF” in the File Menu.

Can I use Figma for free?
Yes, there’s a free pricing plan, and collaborating ability for teams up to 2 people for free.

Is Figma free for students?
Yes, Figma is free for students of accredited institutions. To apply use this from at: https://www.figma.com/student/apply.

How to set admin rights in Figma?
Any administrator can set permissions for other team members, including individual permissions of each worker. There is no limit on the number of admins.

Does Figma do refunds?
Yes, Figma team tries to keep refunds simple. Those who got the annual plan and want out, will get a refund in 30 days. Similarly, those who got the monthly plan could have a refund in 72 hours.

How to hide work fields in Figma?
How to hide work fields in Figma? To only view UI without working fields, press CTRL+ (English layout).

What is Figma Mirror?
It is Figma’s app for previewing a design on mobile phones. You can open a project by logging into existing account or with a share access link.

Read more

Comments 1

Please ask questions and discuss

0

This is one of the best applications in its class. Yesterday I read a good post about Figma https://writeabout.tech/programming/figma-application-overview-for-web-design/

0/5 (0 reviews)
Starts from $15.00 per year All plans
Visit website
Reviews 0

Figma reviews 0

Write a Review

Log into your account

Forgot password?

Sign up a free account

By signing up to create an account
I accept the Terms of Use and Privacy policy

Already have an account?