Figma is a browser-based tool, hence, it is not limited to working on macOS like Sketch, it can also be operated on Windows, Linus, and Chromebook as well. Along with that, it offers a web API that too free of cost. Another astonishing feature is its real-time sharing capability on the same file, for example, if you are using an offline application like Photoshop, the designer can send the work directly using email or any messaging without exporting it to an image file.
To share a Figma file, one just needs to share a link with a colleague or clients and the file will easily open in the browser. The main advantage of this feature is that the clients can review your latest work within no time. The blog will cover the following: -
Starting with Figma is as simple as visiting the website www.figma.com and login or signup by entering personal details like email ID, name, etc. Once you login, clock on “New file” to get started with your project. The design of Figma is simple yet the features are very powerful justifying the old saying, “don’t judge a book by its cover”. The following options will appear once you have clicked: -
2.1 Setting up new artboards
This part will be quite familiar if you had used Sketch earlier. Pressing A or F lets you see frame options on the right-hand side in the properties panel. From here, you can select the desired size for you work or create your own frame easily.
However, the difference is, in Figma you can nest the frames within each other, unlike other artboards. This will allow you to draw or create complicated designs.
2.2 Grid and layout columns
You must be aware that the grid for mobile and web design is different, hence, for a web you can use, 12-column bootstrap grid, as here spacing is less important, whereas, for mobile, you can use 8-point grid.
The grid can be adjusted from the grid properties menu present on the right hand side. In Figma, you can set up multiple grids easily that can later be stored in your styles for future use.
2.3 Layers and groups
In Figma, you find the layers panel on the left-hand side of your screen, and the following are its options.
Further, you can also find options for vector shapes, images, and typography to cater your designing needs. You can find amazing google fonts in Figma as it comes preinstalled within it.
Styles used to define the colour, effect and text of the given object along with its appearance and form. It can be created to fill paint or colour, give the text its font, size, spacing and height, put effects like inner shadow or layer blur, layout the grids, and give your design the desired look so that it is appealing to the viewers.
In Figma, when you change the colour of the text, it automatically amends all the other items as well which will definitely save your time and energy. This also helps to maintain the standardization of the project.
These are the elements that you can refuse while designing. With the help of this option, you can maintain consistency across your project with respect to the design. Due to this option, you will be saving a lot of time and energy.
They can be created from any layer or object that you have designed and include things like icons, buttons, layouts, etc.
There are two aspects to a Component:
To sum it up, Figma is am amazing tool that has been occupying a large share in the market ever since its launch due to its extraordinary features to enhance your designs.