Design tools are an essential part of the process of making any web product look better. But, most of the design tools are such heavy software that they demand high-end specifications of the user device and engage most of the RAM while being used. Also, those design tools allow the users to use their complete functionalities only after purchasing their immense costly premium packages. As a solution to all these issues, developers need cheap and light software to use in any device having average specifications.
Introduction
Figma is a much convenient option fulfilling all the demands of developers. It is a free browser-based design tool that is presently becoming a much popular option among developers. It offers a very smooth experience to its users with its cool yet easy features.
Here we are discussing a complete guide to use Figma with its full capabilities.
Previously, designers and developers needed to communicate using emails only. That leads to a cumbersome process involving several attachments and a terrible experience of handling them. Then many modernized tools came into practice. They made the work procedure easy for designers and developers. But, another big issue was to keep the project files in different tools in sync. Hence, there was still a great need for a much efficient process.
Then there came Figma with its smooth work procedure. As it is a browser-based tool, everyone can easily use it with whatever operating system they are using. Users get relief from installing unnecessary programs to support the design tool. Also being a cloud-based tool, Figma always offers the latest version of the design to every user. Collaborations and communications have also become the easiest with this tool.
Figma also offers its services as a desktop app for both Windows and macOS. The desktop app is a cross-platform app like Slack and Visual Studio Code. Although the desktop app and the browser-based app provide almost the same functionalities, the desktop app has built-in support for using local fonts whereas you need to install Figma Font Helper to use local fonts in the browser version.
To offer a well-organized workspace, Figma provides its interface split into 3 major parts. It has a big canvas in the middle, a sidebar on the left side, and a toolbar on the right. The canvas is used to locate all the designs on it. The left sidebar contains the assets, layers, and pages of a file. And, the right toolbar is used to contain all information about elements in the file.
A file usually consists of multiple pages having one canvas each. Designers use those multiple pages to organize different parts of the file with different pages. So, any new user to Figma should first get familiarized with those different pages to work with them in a much-organized manner.
Navigation Within Figma
- Holding Ctrl / Cmd and scrolling up / down or pressing the + and – keys will help you zoom in or out.
- Holding the spacebar and dragging with your mouse will make you scroll horizontally on the canvas.
There are many more convenient shortcuts to make you more efficient on Figma. But, you need not worry about remembering them all. You can always view those shortcuts by pressing Ctrl / Cmd + Shift + ?
Selecting Project Styles
You can select all the colors, typography, colors, grids, and other styles for the design in the right sidebar. To cancel your selection, you can simply click anywhere in the canvas or click the Esc key. You can check all information about the style of any element by simply clicking the edit icon next to the style element.
Select Style Elements
You can select any specific layer by holding Command while clicking or by right-clicking the element to open the menu of all nested layers and select your desired one.
After selecting an element, its CSS information can be derived from the ‘Code’ tab in the right sidebar. However, that CSS is auto-generated and should not be copy-pasted in your main project.
Some More Important Steps
- Holding the ‘Alt’ key and hovering your mouse over an element can let you measure spaces between elements and correctly position them.
- You must mark an asset as exportable to export it. Then, you can use the shortcut Shift + Cmd / Ctrl + E to export all the assets that are marked for export.
- You can use the ‘Prototype’ tab in the right sidebar to view the information about any animation.
- Clicking the chat bubble icon in the top toolbar or hitting the ‘C’ key can take you to the commenting interface and you will be able to write a comment about any element by clicking anywhere in the design.
This is a summarized walkthrough of some important procedures that you can follow to have a great experience with Figma. At Seahawk Media, we always give our best to get the best information about anything to make it much easier to use. To avail our various services, feel free to contact us. Also, visit our blog page for more information about various web products.
