Ultimate Beginners Guide to Figma
Getting to Know Figma
Designing your own application might be difficult especially when you are not using the right tools. Figma is a powerful tool to help you easily implement your designs for your applications in web, desktop, and even mobile devices. Figma lets you and your team collaborate simultaneously on a project seamlessly with the utmost efficiency.
Here are the fundamental components of Figma:
- Layout Grids
- Hotkeys and Shortcuts
- Creating a Responsive Component
You need to be familiar with these things before you tried using Figma and designing your own application.
The concept of frames in Figma is similar to Photoshop’s and Sketch’s artboard. You can create multiple frames inside a frame. Frames are useful in making a responsive layout.
Create your Frame
To make a frame, just press A in your keyboard or select the frame tool from the toolbar. There are predefined solutions that are highly recommended for first-time users. Choose the Desktop Frame with 1440 resolution.
Advantage: Frames are useful in containing different elements for your design using different layouts such as grid layout and auto layout. Using frames, you can effortlessly manipulate your elements to turn them into responsive components in creating your prototype.
Layout grids are kind of tricky in Figma. Here is how you can add your own layout grid.
Add a Layout Grid
To add a layout grid, press the plus sign and select column. There are other alternatives such as grid, column, and rows. People most commonly use the column grid for desktop applications such as the twelve column grid based on bootstrap. You can also play with the values and create your own layout grid.
Advantage: Layout grids are designed to easily arrange the elements in your design.
Hotkeys and Shortcuts
When you know all the hotkeys and shortcuts, you can work faster and more effectively. After sometime when you work on a relatively large project, your design tends to be complicated making amends and changes harder to implement. By navigating in your layers workspace you do not have to worry about clicking this and that.
The following are the common shortcuts you will use often:
- Ctrl + Alt + G - add elements to frame
- Ctrl + D - duplicating elements
- Ctrl + G - grouping elements
- R - creating a rectangle
- L - creating a line
- T - inserting a text
Everything is easy to do using Figma, including alignments. To adjust the alignment of the elements in your design, select first the group/layers or the individual items you want to align. The alignment tools can be found at the top of the design panel.
When you adjust alignments, Figma considers the frame nearest to the item of interest. Ergo, the initial step you need to do is first put the items you want to align inside a frame by clicking Ctrl + Alt + G. Once inside the frame, it will be easier for you to move it and see it.
Whether you are designing a big complex application or just a landing page you want consistent style across your designs. If you have variating font styles for your headers and paragraphs, this will leave a bad feel and impression to your users. In designing applications, the initial step is to define your style. This includes color palette or theme, and other properties together with typography such as font styles and font sizes. When you have predefined styles ready beforehand, your design will be easier to implement and your work will not get messy. Remember your design is for your users, not you. Stay organized and plan ahead.
As you go along in designing your application, there are certain items that you use repeatedly. This includes buttons, texts like headers and paragraphs, input fields or text boxes, etc. Imagine you have 50 identical buttons used in your project. Making major changes such as color together with other properties such as radius, height, width, and opacity, will be difficult and will cause several conflicts in your work. This is when components come in handy.
Create a Button Component
To create your own component, say a button, group the items you need, and click create component. Decide a useful name for your component. This is important since later on when you have several components it is easier to keep track of them. Components are saved as assets.
Figma has a feature auto layout. This works for a component, a group, and a frame. To activate auto-layout just click the plus sign for auto layout. If you are working on a group of different items or components, you can easily notice that the paddings and margins automatically adjusts. Also when you try to add other components, Figma is smart enough to adjust its position.
The key to responsive components is constraints. You can manipulate the constraints of your components so that they maintain a certain padding and margin ratio like how web browsers behave. Constraints are effective when you want particular items to be in place even if you resize the frame. For example, if you want an image to always stay at the center or the button to be at the bottom left corner.
To add constraints for your responsive component, first, contain the elements inside a frame. Adjust its position basing on the constraints as highlighted in the image.
After finishing your design, have it reviewed and critiqued by a colleague. When it comes to the user interfaces of applications, the programmer most of the time is not aware and conscious that the design is not user-friendly or still needs improvement for ease of access to its users. When creating your designs, remember that the design is for its users, not you. No matter how a design might appeal to its creator if its users are not happy, it is a failed design. Ensure that your designs are appealing and familiar so that users will not have a hard time using your application.