Various tools are used for UI design, including
homepages
, but one that has been attracting attention in recent years is a tool called “Figma.” By using Figma, anyone can easily create UI designs on a browser for free.
This time, I will explain how to use Figma. It’s a tool that even beginners can easily get started with, so please check it out.
What is Figma?
Figma is a design
platform
that allows collaborative editing in a browser and is convenient for creating UI designs and
wireframes
. It is developed by Figma, Inc. from San Francisco, USA, based on the vision of “making design available to everyone.”
Although Figma is a tool that can be used by anyone, it is equipped with many functions primarily needed by UI designers. It has the best functions for creating wireframes and prototypes for the UI design of homepages, which is part of the work of a UI designer.
Figma’s interface is very easy to understand, and it moves quickly and is easy to operate, so it is attracting attention as a highly convenient tool.
Features of Figma
A feature of Figma is that multiple people can participate in the process even when working remotely, and iterative design flows can be built in real time. By collaborating on the work among participants, it is possible to prevent differences in understanding and inconsistencies in the work content, and greatly reduce the need for subsequent revisions.
Having a design system in
the cloud
allows you to share edits and quickly search for assets. Normally, Microsoft’s PowerPoint is often used when creating wireframes, but Figma is a version of PowerPoint that is more suited to design production.
Another great feature is that multiple people can collaborate in real time. Thanks to its ease of use that anyone can use, it is possible to create better designs by co-editing and sharing comments.
Figma allows you to choose from three plans, and you can try it out by choosing the free plan. Figma also has a desktop app that can be installed and used on both Windows and Mac.
Figma has also been released in Japanese, and with the establishment of an office in Tokyo, we will be able to receive even more comprehensive support in the future.
What you can do with Figma
With Figma, you can create the following things. However, this is just an example, and you can create it for a wide range of purposes depending on your own business.
Creating wireframes
You can create wireframes when designing interfaces for homepages, software, applications, etc.
Figma provides templates for various standard sizes for desktop browsers and smartphones, and by using them, you can easily create wireframes for homepages, etc.
Creating a prototype
A prototype is a prototype of a product or service. When used in the web production industry, it refers to prototypes such as homepages and applications.
Prototypes are created to check page transitions, etc. before coding. Wireframes are simply visual constructs, whereas prototypes are dynamic.
Creating graphic designs for homepages and web advertisements
Figma also allows you to create only graphics. Since you can load and use images, you can create graphics flexibly.
Creating images to post on SNS
Many
marketers
use SNS. In that case, you may also be creating images for posting on SNS at the same time.
Figma allows you to easily create images on your browser, so it is also suitable when you want to create images quickly.
Creating presentation materials
PowerPoint is the mainstream production tool for creating presentation materials, but by mastering how to use it, you can also create materials with Figma.
Benefits of Figma
What are the benefits of using Figma? If you want to compare it with other tools, please check out its advantages.
Easy to use on your browser
Figma can be easily used on a browser by creating an account and logging in. In general, there are many cases where you cannot use a software unless it is installed on the computer you are working on.
However, with Figma, you can easily use it on a browser on any computer connected to the Internet, so you can work smoothly.
Multiple people can edit one file
A major advantage of Figma is that it allows for collaborative editing. For example, if you are creating a wireframe for a website, it will be more efficient to create it while reflecting the opinions of multiple people, rather than creating it by yourself.
In the past, the common method would have been for multiple people to share and view the created wireframe images and print data. In that case, there will be a time difference, but if you edit with Figma, you can edit in real time, so you can collaborate more quickly.
Equipped with most of the tools necessary for design production
The tools you need when you want to create a design are fixed to a certain extent. Figma is equipped with all the tools and functions necessary for design production, such as drawing tools and text tools, so you won’t have any trouble creating general designs.
Can be used by people of various occupations
Figma has the image of being a tool for UI designers, but in reality it is used not only by professional designers such as UI designers, but also by marketers, engineers, web directors, etc. who want to create images and materials. It can also be used conveniently.
There is a free plan
Figma has a free plan, so it is a tool that anyone can easily use. The benefits of this can be surprisingly large.
Disadvantages of Figma
Figma also has the following disadvantages, so I will explain them one by one.
No history function
Figma does not have a “history function” that records the user’s work process step by step and allows users to go back to a specific point in the past and modify their work. One of the disadvantages is that you cannot use functions that are frequently used when building designs.
When building and comparing multiple design patterns, it is very efficient to have a history function that allows you to easily return to a specific point. In these cases, you may find it a little difficult to do so.
Unable to fix guide line
One of the functions often included as standard in design tools is “fixing guide lines.” However, Figma does not have a function to fix guide lines.
In the process of building a design, the guide lines may become misaligned without you even realizing it, such as by accidentally moving the guide lines while performing various operations. Then, when the work has progressed to a certain point and you look down at it, you may notice that the overall balance has been disrupted. At that time, inconveniences may occur if the guide wire cannot be fixed.
Few output formats
As of April 2023, Figma’s file output formats are “PNG”, “JPG”, “SVG”, and “PDF”. It is not possible to continue working in Figma from popular tools such as Photoshop, as it cannot be exported to the formats of design tools used by many companies.
For example, if the recipient specifies that the delivery be made with the edited data intact, you may want to consider using other tools.
Figma pricing
Check out Figma’s pricing plans. There are three plans: “Starter,” “Figma Professional,” and “Figma Organization” (as of July 14, 2022).
The Starter plan is a free plan for individuals. Although there are limits on the number of files that can be created, cloud storage is unlimited, making it perfect for use by individuals or small teams.
Professional and Organization are plans for those who want to collaborate in earnest as a team, and are priced on a monthly basis.
Basic usage of Figma
Now, let’s take a look at how to use Figma. I will explain it step by step.
1. Create an account
2. Understand the screen layout
3. Create a design
4. Make a Prototype
5. Output
6. Share
7. Add a comment
1. Create an account
To use Figma, you first need to create
an account
. When you access Figma’s
official homepage
, click “Get Started” in the center.
Then, a screen like the one below will appear. Log in with your Google account or create a new account by entering your email address and password.
Figma is basically used on a browser, so there is no need to download an application. Data is automatically saved to the cloud.
There is also a separate desktop app that you can install and use on your regular computer.
If you see a screen like the one above, your login is successful.
2. Understand the screen configuration
Next, let’s check the screen configuration of Figma.
The center is the design screen, and you create by adding artboards called “frames.” An artboard is like a canvas.
You can select and operate various tools on the toolbar at the top left of the screen. There is a main menu, move (selection) tool, frame tool, shape tool, pen tool, text tool, resource tool, hand tool, and comment tool.
The leftmost space shows the layers, where you can see the structure of the object. In the far right space, there are tabs for selecting the type of production such as design or prototype. You can also use properties in this space to further configure the object.
3. Create a design
Once you understand the screen configuration, let’s start creating the design.
If you haven’t created a new file yet, select the main menu from the far left of the toolbar and select New design file. Then, a large canvas will be displayed in the center like the screen shown earlier.
Select Design mode
Next, decide what to make. This time we are assuming that we are creating a wireframe for a smartphone homepage, so we need to be in design creation mode.
Select the leftmost “Design” tab from the tab menu at the top of the right-hand space. Now you are in Design mode, where you can create wireframes, designs, etc.
Select and choose a frame
When creating a wireframe, you first need to specify the size of the browser or smartphone device. Multiple frames necessary for creating wireframes are already registered.
First, select the Frame tool on the toolbar. A list of frames will then be displayed on the right. Once you select the frame size you want to use, you can immediately place it on the canvas. This time, I will use the frame of “iPhone 13 Pro Max”.
draw shapes
Next, let’s draw a shape. Let’s draw a square figure at the top center.
When you click the shape tool on the toolbar, a list of squares, lines, arrows, triangles, stars, etc. will appear as shown in the image above. You can easily draw by just selecting these.
Place text
Next, let’s place the text. Once you select the text tool, you will be able to enter text on the canvas. Click once on the desired location to enter input mode, so start entering characters.
From the menu on the right, you can also change the font type and size, and adjust the alignment such as centering.
copy and paste
You may often want to place the same parts consecutively. In that case, you can easily duplicate the shape or text by clicking on the shape or text and using keyboard shortcuts such as “Ctrl+C” to copy and “Ctrl+V” to paste.
4.Create a prototype
Next, we will introduce how to create a prototype.
Select Prototype mode
First, create a new file in the same way as before. Then switch to Prototype mode for prototyping.
Link settings
You can also connect each page with links and simulate page transitions. Since you can draw arrows from each element, you can connect links while checking it visually. In addition, I will omit the explanation this time, but you can also set actions.
Prototype behavior
Let’s put the prototype to work. Click the triangle at the top right of the screen. This is a button that will display “Present” when you hover over it.
A separate browser window will then automatically open and display a preview. You can check it dynamically here.
5. Output
What you create on Figma can be output and saved on your computer. Open the selection menu under “Export” in the menu on the right, select one of the four formats: “PNG, JPG, SVG, PDF”, select the save location, and save.
6. Share
Figma allows you to flexibly share with your team. In addition to sharing and viewing, you can also collaborate on editing.
To share, click the light blue button “Share” at the top right. If you want to share with someone who has a Figma account, you can specify permissions by selecting whether they can only view or edit.
You can share by entering the email address of the person registered in Figma and pressing “Send invite”. Anyone with editing permission can edit.
If you want to share with someone who is not registered with Figma, press the “Copy Link” button to copy the shared URL, then contact the other person via email or chat. The other person can then view it on their browser. This is a useful feature if you want your team members to see the wireframes you have created and want their opinions, or if you want to collaborate with your team to edit it.
7. Add a comment
During collaborative editing, users can add comments to each other. If you want to add a comment, click the comment tool on the right side of the top of the toolbar, click on the part of the screen where you want to add a comment, and enter characters to leave your comment.
A user icon is displayed where a comment has been posted, so you can see at a glance who posted the comment. You can also reply to comments posted. In addition to replying in thread format, you can use stamps and other tools to easily communicate in a familiar chat-like manner. Comments remain as threads on the right side, making them easier to see.
Above, I have introduced how to use Figma. We have covered the basic usage for beginners, so please use it to find your own effective ways to use it.
Useful functions of Figma
Figma still has many useful functions. Here we will introduce some of them.
Insert image
Figma allows you to insert images saved on your computer. Among the shape tool menus on the toolbar, there are menus that allow you to select images under the square, line, arrow, triangle, and star. Click here to specify and load an image on your computer.
Component creation
Components are like UI parts that can be used during design. For example, buttons, icons, etc. Figma allows you to create and register such components. When creating wireframes, it is convenient to use immediately when using similar buttons and icons every time.
Furthermore, if you insert the same component such as a button or icon in multiple productions, if you edit one button, the buttons inserted in other productions may differ. You may be worried that this may not be the case.
Even in such cases, if the component has already been registered, by editing the shape of the component, the changes will be reflected in the buttons inserted in other works, making it possible to maintain uniformity in the design. Masu.
history management
You can manage the history of the created file. Therefore, you can easily manage the update history of the development process.
When developing as a team, keeping an update history makes it easier to share information with each other. There is also no need to manually save data before updating files. It can be said that this function allows you to reach the itchy areas.
scale tool
When creating a wireframe, you may want to enlarge it if it looks a little small. In such cases, you can use the scale tool to enlarge or reduce the design without distorting it. With the entire design selected, hold down “K” on your keyboard and drag.
Select color from color palette
For example, if you have created many frameworks or created multiple components, you may want to change the color scheme of multiple elements. In that case, register the color scheme in advance in the Selection Color function. Then, you can select your favorite color from the color palette to make the color change process more efficient.
Recommended plug-ins for Figma
Many
plugins
are provided for Figma. You can expand the functionality by using these plugins. We will introduce recommended plug-ins below.
Unsplash
Unsplash is a plugin that allows you to search for images from websites that offer stock photos and insert them directly into Figma. You can select images that can be used commercially.
You can quickly search from the Figma editing screen without switching back and forth between browsers, and you can drop the image you find into the editing screen with a single click. This is highly recommended because it is useful when you cannot find the image you are looking for and want to temporarily insert a dummy image.
Remove BG
Remove BG is a plugin that allows you to remove the background of illustrations and photos. Use this when you want to delete unnecessary images other than the main one.
For example, it is useful when creating collage images of people. To do this, just click Run on Remove BG from the Plugin to delete it in one go. There is no need to use traditional cutting tools and steadily cut out the work area while enlarging it.
Iconify
Iconify is a plugin that allows you to add icons to Figma. In addition to Twitter emojis, you can add over 100 icon sets such as FontAwesome and Material Design icons and over 100,000 materials in vector format.
There are other plugins that allow you to add icons, but Iconify is highly recommended because it has a huge variety and you can easily find the icon you are looking for.
Better Font Picker
Better Font Picker is a plugin that displays font previews.
When selecting a font on the Figma editing screen, normally only the font name is displayed, and you need to select it once to actually display the font. If you have to perform these tasks every time you are working, it will be very time consuming and tedious.
However, if you install Better Font Picker, a preview of the font will be displayed in the pull-down menu, allowing you to check the font at a glance.
LottieFiles
LottieFiles is a plugin that allows you to insert web animations.
You can search the LottieFiles website, which provides web animations, from within Figma and insert web animations directly into the editing screen. You can change the background color of the specified animation to your favorite before inserting it into the editing screen.
You can also edit the animation itself and adjust the speed up to 2.5x.
Differences between Figma and other design tools
Figma is one of the UI design tools currently used by many people. Let’s check how the other options are different from Figma.
1.AdobeXD
2.Adobe Photoshop
3.Adobe Illustrator
4. Sketch
5. Canva
1.AdobeXD
AdobeXD is a UI design tool made by Adobe. The basic functions are the same as Figma, and various functions are included. It is extremely popular due to its ease of use and versatility, and although it has limited functionality, it is available for free, so you can easily start using it.
Like Figma, it has real-time collaborative editing capabilities. Data created in Adobe XD can be edited directly in Adobe Photoshop or Adobe Illustrator, which is convenient if you want to create a design from a wireframe.
Also, it is compatible with both Windows and Mac, and AdobeXD is said to have better functionality as a prototyping tool than in UI design compared to Figma and Sketch.
2.Adobe Photoshop
Adobe Photoshop is an image editing software that allows you to edit and process all types of images such as photographs and illustrations. The purpose of use is different from Figma, which is used to design UIs and build wireframes.
Adobe Photoshop allows you to edit and process images, as well as add text and decorate them. It is possible to design a web using only Adobe Photoshop, but as all editing data is saved, the data becomes heavier as you build.
On that point, Figma does not have a history function, so the editing screen can always be kept light.
3.Adobe Illustrator
Adobe Illustrator is software that allows you to edit and process vector images.
It is a common tool in the DTP and printing industries, and is widely used as production software for all kinds of printed matter, including advertisements and package designs, as well as logotypes and drawings.
Like Adobe Photoshop, the purpose of use is slightly different from Figma, which has UI design and wireframe construction functions as its main features. However, it is possible to design UIs and build wireframes in Adobe Illustrator as long as you master its operation and methods.
However, even though Figma allows you to do these tasks easily and intuitively, there is no need to use Adobe Illustrator.
4.Sketch
Sketch is a UI design tool made overseas. It is only compatible with Mac and cannot be used in Windows environment.
Sketch’s basic functionality is the same as Figma or AdobeXD, but it is said to be the easiest to use for creating UI designs. It is a tool that has evolved over the years while reflecting user opinions, and can be said to be sophisticated in terms of ease of use.
You can use it without any restrictions as a free trial for 30 days, but it may be a little inferior to other tools in that it does not support Japanese and is only compatible with Mac.
5.Canva
Canva is a tool that allows you to easily create designs, edit photos, and edit videos. Canva, like Figma, is easy to use and allows you to work intuitively on your browser.
In addition to creating websites, you can also edit photos, convert images, create logos, and more, making it a tool similar to Figma with the minimum functionality of Adobe Photoshop.
You can efficiently produce websites by using a UI design and wire frame with figma, and using these two tools as needed, such as processing image processing and editing photos as needed.
Above, we have introduced the basic functions, how to use it, and benefits of figma.
Currently, it is a tool that is conveniently used for various uses, including many UI designers. Please use it once and use it by all means.
summary
- Figma (Figma) is a design platform that can be co -edited on a browser. It is a design tool that is convenient for creating a UI design and wire frame, and has been developed based on the vision of “all people can use the design” by figma, inc. from San Francosisco in the United States.
- What can be made with Figma (Figma) includes the creation of wire frames and prototypes on the homepage, graphic design for websites, web advertising, SNS posting, presentation materials, etc.
- The advantage of figma is that it can be used easily on a browser, one file can be edited by multiple people, “Most of the tools required for design production”, “Can be used by people in various occupations”. There are “There is a free plan”.
- As for how to use Figma (Figma), you can create a design and prototype by creating an account from the official website, and can use it using output, sharing, comment function, etc. In addition, there are many applied usage and useful functions.