A platform to collaborate and pour creativity together is made possible by an easy-to-use interface design tool Figma. Figma is used to construct UI/UX design, graphic design, wireframing, diagramming, brainstorming and developing various other ideas. For designers, it has become an effortless tool to collate and work on tasks for free on the web. Figma lets the users experiment with several templates and diverse options to build desired digital products. It helps in creating, editing and presenting design elements in the cloud.
When mentioned as easy to use, Figma provides a series of functions that are easy to understand and work on while mapping or planning a design. Just like there are loopholes in the law, Figma also has some tricks that make work simpler and knowing them saves time. Let’s explore them to work effectively.
Filleting The Edges Of Shapes Effortlessly
Have you ever noticed the icons of apps on your phone? Check it out; it has rounded edges with a smooth finish. This shape is called a squircle which is intermediate between a square and a circle. Figma has made it easier to attain such an effect on any shape by increasing or decreasing its corner radius directly instead of going through complex commands. This function is visible in attributes in the design menu by selecting the specific shape. Figma also provides the option to allow editing the radius of individual corners.
Choosing Colour By Just Typing Its Name
Figma has an alphanumeric value for colour, while it has a hidden trick that makes everything easier. One can type the name of the colour directly in the tab and it would match properties accordingly, saving time from opening swatches and choosing from them.
It Calculates For You
In situations where the values of edges are given in a ratio or require calculation, Figma has made it easy with the auto-calculation function. You can enter the values directly in the tab as a mathematical formula with ‘*’, ‘+’, ‘-’ and ‘/’. This function allows us to work quickly without opening a calculator.
Copy And Paste
In Figma, one can easily copy and paste elements by simply pressing CTRL + C (copy) and CTRL + V (paste). This command is applied for the effects as well, you can copy an effect on any element or entity to another just by pressing CTRL + C (copy) and CTRL + V (paste) commands. It reduces the time to apply a similar effect on multiple entities.
Grouping Different Frames Into A Single Component
While designing the elements keeps on increasing, making the file more complicated than the initial stage. Such a situation is avoided by making groups of similar elements, making it easy to move or arrange in later stages. This feature can be used by pressing CTRL + G after selecting the layers or elements within a frame.
Insert Images In Desired Shapes
Just like masking an image into a shape in Photoshop, Figma helps to drop the images into the required shapes. This command can be achieved by pressing CTRL + SHIFT + K, this replaces the fill-in shapes with images. It saves time from formatting to scaling the images as per the requirements.
Fixing Line Heights In A Text
While formatting a text with non-proportionate line spacing, Figma has an easy way to adjust it automatically. It is done by selecting the text and in the various attributes displayed on the right-sidebar setting the line spacing to auto or just deleting the values and pressing enter, this would automatically increase or decrease the space as per the text heights and spacing required.
Adjusting The Text Layer
To adjust a text layer to wrap around the text perfectly in Figma than dragging the frame it’s easier to double-click the right edge of the frame. This simplifies the number of commands used and fastens the task, making the frame the same width as its content giving a neat finish.
Switches In Variants
For certain design features where switch toggles or checklists are required – Figma provides a checkbox in the form of variants. This function can be enabled by naming one variant as “Yes” or “On”, and the second variant as “No” or “Off”. The Switch will appear automatically.
Unlocking Components Or Objects
Figma has an easy command to unlock the layers or components while in need to edit the content. Using CTRL + / you can easily unlock the components and edit them accordingly. This saves time from clicking unlock in the left sidebar on each layer.
Figma has various shortcuts and tricks which make the task easy and less time-consuming. This online collaborative platform thus provides an individual or team with all the basic requirements to build their design more effectively for free and also save it in the cloud. Its less complicated and user-friendly approach makes it a reliable design tool on the web.
Images
- help.figma.com. Filleting The Edges. Adjust corner radius and smoothing. [Image]
- medium.com. Choosing Colour. [Image]
- medium.com. Auto-Calculate. [Image]
- uxmisfit.com. Copy And Paste. [Image]
- uxmisfit.com. Creating Group. [Image]
- medium.com. Inserting Images. [Image]
- medium.com. Fixing Line Heights. [Image]
- uxmisfit.com. Adjusting The Text Layer. [Image]
- uxmisfit.com. Switching The Variants. [Image]
- medium.com. Unlocking Components. [Image]
Online sources
- 2022. Figma Help Center. [online] Available at: <https://help.figma.com/hc/en-us> [Accessed 16 October 2022].
- 2022. Youtube.com. [online] Available at: <https://www.youtube.com/watch?v=Vo0sEPqArRQ> [Accessed 16 October 2022].
