Toll-free number 24/7:

+38 (097) 806-01-89

Customer Service e-mail:

info@armedsoft.com

Figma, the Graphics Editor

March 04, 2020

Figma, the Graphics Editor

One of the instruments to create web-design in the IT-sphere is Figma which is getting more and more popular these days. This is a so-called service that enables organizing a real-time common work. The editor may be used online via browser as well as after program software installation onto PC.

Figma is the tool to design:

  • prototypes of the future products;
  • websites for PC, mobile gadgets, tablets;
  • logos and icons;
  • vector-based images.

A great peculiarity and advantage of Figma is cloud file storage and a shared access to the project and dealing with it. In other words, the algorithm reminds the one of Google Docs. In order to start work, your account has to be registered. You may use the program free of charge, however, there are still some limitations, as for:

  • a limited number of projects – three is the maximum;
  • older versions may be stored only during 30 days;
  • editing is accessible only for two users;

The following link provides information on fee-based services and their terms and conditions: https://www.figma.com/pricing/.

Having logged in your account, click a ‘plus’ in the upper right corner in order to create a project. 

To select a pattern for website implementation, click a hashtag tab where Frame is chosen by default. 

Then, in the upper screen field, you will see the list of patters with the set sizes:

In addition, you will notice the three key functions available: design, prototype and css code view. 

Prototyping plays an important role since the future website or app version will be clickable. Button and menu settings provide a comfortable testing and a better understanding of the operation mode. Apart from that, there are the other useful opportunities provided by Figma. For instance, drop-down lists, pop-ups, animation effects. Besides, clients may also comment in a prototype.

If you plan element situation within future website pages, this will help avoid further disagreements between the ordering customer and the executing party, and thus, agreement between the parties will be reached in a quicker manner.

Based on the test version, let us look at its interface and the key elements necessary for work. 

In the left upper panel, you can see the structure of your project where a necessary object may be found.

 

Having clicked the red indicator, you may view a prototype in the form of presentation, switching the so-called slides one by one. A green-colored field is responsible for scaling. 

 

If you need to get to know the parameters of a certain object, the Code tab should be used. At first, you need to highlight the element, and then to click on Code.

 

There are also width and height elements that may be used within the highlighted element.

In case you need to download the element, firstly highlight it, and click Design and Export. 

 

The drop-down list will offer such formats of image downloading as PNG, SVG, JPG and PDF.

No designer can imagine their Figma work without plug-ins, which greatly simplify development process and enable animation creating along with many other functions. You may look them through at the official website https://www.figma.com/community. Here are the descriptions of some of them:   

Brandfetch – when you enter the website address, it searches for a logo and inserts it into a necessary block (svg and png formats).

Brands Colors – searching and reproducing brand colors.

Remove BG – deleting image background. 

Charts – creating the diagrams that may be added and edited in Figma.

Figmotion – work with animation.

Mapsicle – map situating, scale degree setting, etc.

Image Palette – based on the chosen images creates a balanced color spectrum consisting of five colors.

Nounproject – icon searching and adding them to the project.

All in all, if to talk about work comfort, a lot of designers choose Figma that has already become a revolution for the multitude of users. This tool incorporates a great number of killer features, which have formed its awesome advantage.

Other Articles

Our Recommendations

  • February 03, 2020
    olga.hrytsayuk
    274
    Useful Tools for Web-Designer (UI | UX)

    Every web-designer has his or her own design success secrets, which are implemented with special tools making their work much easier.

  • March 16, 2018
    olga.hrytsayuk
    505
    Site redesign (UI | UX)

    Redesign of the site - one of the ways of its modernization. Since the concept of fashion is changing day by day, one needs to follow and go "in foot" with these changes. In the IT sphere, this is also no exception.