Figma for Web Design - A Beginner's Guide
Web design is a fast-growing area in the tech industry because of digital transformation and the increased number of web applications. Web designers are seeking design tools that offer intriguing user experience. Figma is a unique web design tool that adds value to web design in terms of accessibility, collaboration, and unique features. <!--more--> This article provides an overview of this exciting web design tool. It also provides a guide on how to get started with it. The article takes readers through the user interface of Figma and some basic tools used in web design.
What is Figma?
Figma is a web-based interface design tool that consists of powerful and exciting features for web design. This tool provides a collaborative and cost-effective platform for creating fascinating web designs.
It consists of unique design tools that provide an interesting experience to web developers. It can be used to perform various tasks such as vector illustration, user interface design, app design, and prototyping.
This application allows users to work on their projects online and offline through its desktop application. Files can be changed without the user being online. Figma has a sync feature that integrates the changes made in the desktop application with its web-based application. This feature works when the user goes online.
Figma works on various operating systems such as Linux, Windows, and Mac. The web-based application can work on various browsers such as Mozilla Firefox, Google Chrome, and Internet Explorer.
Why web designers should choose Figma
Accessibility
This web design tool is easily accessible by web designers. It works well in browsers, which means that it is available on multiple platforms. Figma can also be accessed through its desktop app, that provides almost every feature that exists in its web-based application. This is a free tool for the first few projects (3 projects), which gives beginners room to learn how to use the design tool.
Easy project management
Figma files are stored in a cloud. This means that users can gain access to these files from any location. If users make changes to these files, they will be saved automatically. There is also an option to reverse the changes. Project management is made easier through this tool because all design projects can be kept in one place.
Collaboration
The design files saved in the cloud can easily be shared with other online users. You can also use the same files to collaborate with other designers (in real-time). This is an interesting feature because it allows members of the collaboration team to share files, ideas, and updates instantly.
Features
Figma has all the necessary tools for developing a unique and quality web design. It consists of the following exciting design features.
- Auto layout: This enables users to develop responsive layouts. This feature also offers flexibility because of its ability to adjust automatically based on the user's content.
- Robust vector networks: These include modern pen and pencil tools that enhance drawing in all directions.
- Instant arc designs: Figma has an arc tool that can be used to design watch screens, clocks, or pie charts.
- Plugins: These are available for flow diagrams, charts, stock imagery, and color accessibility.
- Flexible styles: Figma has flexible and consistent styles such as grids, effects, text, and color. These can be applied to any object or text.
- Accessible libraries: It consists of libraries that can be accessed easily by all team members.
- Export feature: This format enables users to export their designs in various formats.
Figma also provides exciting prototyping features that enable designers to validate their designs. Some of these features include:
- Shareable prototype: It enables you to create and share a link of your prototype design.
- Dynamic overlays: Users can create dynamic content overlays.
- Animated GIFs: Video elements, subtle animations, and motion designs can be represented using animated GIFs.
- Instant design edits: Figma provides an all-in-one platform that connects the design file with the prototype. Your prototype can generate design edits that appear instantly.
Getting started with Figma
Prerequisites
To follow this tutorial along, you will need to have:
- A computer.
- Stable internet connection.
- A browser.
- An email account.
Step 1 - Set up an account with Figma
This can be done by going to the Figma website. Click on 'Sign up' to begin the setup.
Fill in your email address and desired password. Click on ‘create account’.
This will lead you to another window that will require you to fill in your name, choose your field of work, and click on ‘create account’.
You will be required to verify the email address you used in creating the account. A message will be sent to the email address containing a link for verification. Click on that link to verify your email address.
To download the desktop app, go to the Figma website and scroll down to the bottom section. Click on ‘downloads’.
Choose the download that corresponds to your operating system.
Download and install the desktop app. When you open the application, you will be required to sign in with the credentials you used in creating your account.
Step 2 - Choose a name for the design team
When you finish verifying your email address, the following window will appear. When you fill in the design team name, click on 'next'.
Step 3 - Invite collaborators
Figma allows you to invite members for collaboration. You can click on ‘skip this step’ if you do not wish to engage in collaboration.
Step 4 - Choose a plan
In this step, users are required to choose a plan that suits their needs. If you are a new Figma user, you can click on ‘choose starter’ to learn about the application. This plan is free for the first 3 projects, that allows you to familiarize yourself with this design tool.
An overview of Figma user interface
The following image shows the user interface of Figma.
When you finish setting up an account and choosing a plan, you will get the following message.
If you are a new user, you will probably want to know the various icons on the Figma's user interface. Click on ‘show me around’. This will take you through important features in the user interface. If you are already familiar with this interface, click on ‘no, thanks’.
Let’s look at some of the tools on Figma's user interface.
- Constraints: These allow users to set accurate constraints and enable them to adjust layers to their needs.
- Vector networks: These provide pen and pencil tools that are simple and powerful for web design.
- Comments: These enable users to write notes on their design files and get requests or feedback.
- Share icon: This enables users to share their design files with teammates and stakeholders. Users can use this section to manage permissions relating to the sharing of design files. It can also be used to enhance real-time collaboration.
- Team library: This is a library that allows users to publish styles and components for other teammates to access.
- Menu: The menu consists of a file browser that can be used to search for any desired command. Users can also use the menu to perform various tasks such as viewing files, managing plugins, and arranging files.
- Canvas: Canvas provides an area to design your work.
- Layers: The layers section lists and organizes file elements in terms of groups and frames.
- The properties panel: This panel consists of design, prototyping, and inspection tabs. The design tab provides various options for design. The prototype tab connects the design file with the prototype. The 'inspect' tab presents the settings and contextual information of a selected object.
Using basic Figma tools
How to create a frame
Click on the frame tool and select 'frame'. Alternatively, you can press on the letter 'F' on your keyboard.
Click on the canvas area and drag the frame to the required size.
You can alternatively choose a preset frame using the design tab in the properties panel.
This section consists of presets for various elements such as phones, tablets, and social media. Let's assume that we want to design a smartphone app. We can choose to preview it on iPhone 11 max. Click on iPhone 11 max to get the related frame.
You can change the name of the frame by double-clicking on the box at the top left corner.
The panel that appears on the right side of the interface can be used to change the orientation (landscape or portrait), size, and fit of the frame.
Working with shapes
If you want to create a shape, you should go to the shapes icon on the toolbar and select the desired shape.
Let's assume we want to create a rectangle. In this case, we will click on the rectangle in the shapes tool. You should drag the cursor on the canvas to create the desired rectangle size. The rectangle will appear as follows.
A similar procedure will be taken if we want to create a polygon. The resulting image will appear as follows.
Other shapes that can be created include ellipses and stars. You can also create custom shapes using the pen and pencil tools on the toolbar.
To change the color of the shape, go to the design tab on the properties panel and click on 'fill'. Select the desired color.
If we select blue, the above polygon shape will appear as follows.
Writing text
You can create a text on the canvas by first clicking on the 'T' tool at the toolbar.
Click on the exact location (within the canvas) where you want your text to appear. Write the intended text. The text will appear as follows.
The panel on the right side of the interface provides all the tools for modifying the text. This includes the font size, alignment, and fill.
Conclusion
Figma is a design tool that enables web designers to create unique and exciting user interfaces for phones, tablets, and social media. This tool provides a platform for collaboration and prototyping, which makes the design journey interesting.
Over the years, Figma has been developing new features that have improved the quality of web design. The addition of advanced design features will revolutionize web design in the tech industry.
Resources
Peer Review Contributions by: Peter Kayere
