Moving from Adobe Illustrator to Figma

We have been working with Adobe Illustrator since the start of Convident. However, moving to Figma has had a significant impact on our web design quality as it has improved our design process and the overall outlook of the websites we create. Important reasons for choosing Figma over Adobe Illustrator are the workflows and the way customers can provide feedback. In this article, we take a closer look at the pros and cons of this new method.

What is Figma?

Figma is an interface design software that you can use in the web browser or download as a program. It provides useful tools for the design phase of a web design project. With Figma, you work completely in the cloud and can therefore also be used outside the office. Multiple designers and programmers can work on the same project at the same time and provide each other with feedback.

The Benefits of Moving to Figma

While we are working with Figma, we benefit from certain advantages of the program. Below, the various benefits are listed:

Working in de Cloud

Before Figma, working in the cloud was simply impossible. However, now this is not only possible, but its development is constant and improves the workflow even more. Working in the cloud ensures that we can always access our designs and wireframes. Not only do we benefit from this, but the customer can also always access the designs from any location (as long as there is an internet connection). In addition, we still send images of the designs so that the customer also has them available offline.

A colleague is sick? Then we always immediately have the latest version of the design from the cloud. We can immediately pick up the thread and make any adjustments. In addition, a backup is always made automatically. As the latest changes made on the particular file are immediately saved, any possible computer crashes are prevented.

Components

Previously it was not possible to create a central library containing components. The components had to be adjusted manually on every page. With the central component library of Figma, it is possible to create one component and use it in multiple places in the design. Does the component need to be modified? Then this can be done from the central library and the component automatically changes everywhere in the design.

Figma also immediately displays the correct CSS code for each component. These are the codes that are used for, among other things, the font, the color, and the distances. With Adobe Illustrator, we still had to manually enter these values ​​into the website’s code. Now it is a matter of copying the displayed CSS code and it is error-free on the website. It works a lot faster and prevents errors.

 

Figma prototyping

Prototyping is another feature that is now widely used by our team. The function ensures that we can give an interactive presentation of the design. Customers can access the design in the cloud via a shareable link and have a look around at their own location.

Through prototyping, connections can be made between different pages and designs. This way the customer can click around and it looks like the website is already online. This gives a clear picture of what the end result will look like and how it will work functionally.

Note function

Within the Figma design, it is possible for the customer to leave notes. Does a font need to be changed or does a button need to be changed? The specific component can be designated by means of a note and this note ends up directly on the to-do list of the designer and/or programmer. This way there can be no misunderstandings about the part of the design to be adjusted.

Previously, we sent a PNG image for a new design for the customer to view. We often received an e-mail back with point-by-point changes that were necessary. This was often open to interpretation, because ‘that button at the top left must be different’ is less clear than a specific recommendation for the button in question.

The people working on the specific project will also receive an email when a note is left and the note is immediately added to the to-do list. Have the adjustments been made? Then we can just mark this as ‘solved’ and move on to the next improvement.

Version management

Previously, files of different versions were stored separately: homepage version 1, homepage version 2, and so on. This took up a lot of storage space and a certain version had to be searched regularly.

With the cloud working of Figma, all these version changes are saved automatically. They can also be viewed and searched by date. Something was changed last week? Then we simply search between the most recently modified versions and continue where we left off. It works easier and it ensures that we have all revisions in an overview.

The Disadvantages of Figma

There are also some drawbacks to working with Figma. Following are the drawbacks we experienced:

Internet dependence

Working with Figma is completely internet-dependent. Although it can be used in an internet browser or application for the laptop, it needs the internet to get the files from the cloud. Making some adjustments quickly on the road is therefore no longer possible without WiFi or an internet bundle. Because we are always connected these days, this usually does not cause major problems.

Getting used to Adobe Illustrator

Adobe Illustrator is a program that is also widely taught in schools. New employees can often use this already. This ensures that they can get to work quickly and require few instructions.

This is often not the case with Figma. In addition to the fact that less is used in schools, for example, the transition from one program to another is also large. The way in which the program is filled in, such as the components, layers, and hotkeys, are all different. So it takes a little more work to familiarize yourself with Figma if you are used to Adobe Illustrator. Fortunately, the program is quite intuitive and many shortcuts have remained the same.

Only web design at Figma

With Figma we work on the web design as it works very effectively. However, the drawback is that the program is not made to design logos. For this reason, we still use Adobe Illustrator for this.

Conclusion Figma vs Adobe Illustrator

In short, with this step, we try to give our customers a better idea of ​​the designs made and to give them a feeling of what the website will look like. We have also taken this step because of the many above-mentioned advantages that Figma offers to speed up and improve our workflow. We now enjoy working with this program and have already received a lot of positive feedback from customers about our new working method.

Do you have any questions about Figma or would you like us to create a design for you? Please, contact us and we can discuss together all opportunities.

 

Contact

Convident is a full-service web agency that itself stays up-to-date with marketing trends and developments. Besides the fact that our own creatives are in the middle of this and always want to discover the latest gadgets, we also do this for our customers. By doing so, we provide our associates with the latest trends with a view to the future. Does your organization have a specific issue and can Convident help you in the field of (online) marketing, branding, or with the development of a future-oriented website, webshop, or app? Please, contact us or schedule an appointment right away!

 


Sander Kooi
Online Marketeer
© 2014 - 2022 Copyright - Convident Digital Agency. Convident B.V. is rated with a 4.8 / 5 based on 227 reviews. Partnerships Information Privacy statement Terms and conditions