In this blog, we will explore the fundamentals of Figma, including its interface, breakpoints, design approach, grids, and units. Figma plays an essential role in UI design; thus, you can’t miss it in your UI/UX design training.
First, let us discuss Figma, which is a User Interface (UI) design tool used for prototyping and team collaboration. It is a web-based which means you don’t need to run this software on your local computer; it will work on your browser.
Important Fundamentals of Figma
A. Figma Interface
It consisted of three sections: –
1. Navigation bar
It is in the top section of the screen and lets you perform different tasks.
a. User name – Name of the user is displayed.
b. Search bar – You can search your project or files by name.
c. Notifications– Notifications related to your account will appear.
d. Account menu – You can manage your account settings.
2. Sidebar
It is located on the left side of the screen, and it allows you to choose the projects or prototypes you work on.
a. Recent – Recently viewed or edited work will be present.
b. Drafts – The unpublished work will get saved here.
c. Community – A space where designers browse plugins and files that other users have shared.
d. Teams – The teams where you joined.
3. Files
All the files will be displayed as shown in the image below.
B. Breakpoint
- It refers to a specific screen size on which you can create a layout of an application or website. This is an important aspect of responsive design in UX/UI. It helps change the sizes and resolution of a design. Some common breakpoints are:
- Extra small (xs) – It is for extra small mobile screens or smartphones, which range up to 576px viewpoint width.
- Small (sm) – It is for larger smartphone screens and small tablets. The size ranges from 576px to 768px viewpoint width.
- Medium (md) – This is for larger tablets and small desktop/laptop screens in landscape mode. The sizes range starts from 769px and goes up to 1024px viewpoint width.
- Large (lg) – This breakpoint is used for standard desktop and laptop screens. It ranges from 1025px to 1440px viewpoint width.
- Extra Large (xl) – It is for large desktop screens or other wide-screen devices, including smart TVs. The size ranges above 1441px viewpoint width.
C. Mobile-First Design Approach
As the name suggests, ‘mobile-first’ design is an approach to start website or application planning according to mobile screens. This strategy can be considered multiple times, as in this era, the user base of mobile devices is larger than in previous eras.
Advantages
- Enhanced user experience – If we create designs for smaller screens first, then it helps in using precise and limited content. This, in return, improves user experience as we are not using unnecessary information to users.
- Performance Boost – Mobile devices often have limitations for power or bandwidth. Therefore, designing for mobile devices first can help to optimize these issues.
Disadvantages:
- Scaling Up – Sometimes increasing the size from mobile to desktop can be difficult, especially when elements don’t translate well.
- Limited features – Due to the restrictions in mobile devices, additional features can be deleted in the future.
D. Desktop-first Design Approach
In this ‘desktop-first’ design strategy, designers start planning for large screens first. After this, the design can be scaled down for mobile devices.
Advantages:
- Rich features – If it is designed for desktop first, then more complex features can be included in the design.
- Familiarity – Many designers follow this approach as they have created desktop designs for years.
Disadvantages:
- Performance Issues on mobile – A website designed with a desktop-first approach might not work well for mobile devices.
- Over-complexity possibility – It is possible that if you add too many features to the desktop, then not all may be useful or necessary for mobile devices.
E. Padding
It refers to the space between the content and it border. Just imagine it like you are putting bubble wrap around a product inside a package to protect it from external force. Padding gives room to breathe to all the inner design elements.
F. Margin
It refers to the space between the border and the edges of the screen. Like the space around a page where the user doesn’t write, and it remains blank most of the time.
H. Gutter
It refers to the space between columns to separate the content. This gutter space can change according to different screens.
Some common units of UI include:
- Pixel (px) – This unit is very common in digital media and provides precise measurement.
- Em – This unit adapts size according to the size of other elements, mainly those that are parents of it. It is used for scaling typography.
- Rem – It stands for root em. This unit helps in scaling elements in the size of Em parent element.
I. Grid
A grid is a fundamental layout structure in any design. It helps to organize content in rows and columns. Using a grid is also useful for arranging content and elements systematically on screen.
Types of grids: –
1. Manuscript grid – The first in the list is Manuscript, which is a single-column grid. This is the simplest grid type to understand for beginners in Figma. It spans the entire layout of the page, and we mostly use it for blog posts or articles.
2. Column grid– It is a multiple-column grid. In this, the layout is divided into multiple column that helps to organize the content flexibly. This column grid is often used by designers for web pages or app interfaces.
3. Modular grid– It is a unique structure that divides the layout into rows and columns. It creates a matrix of equally sized boxes or modules. This grid is mostly used by designers for photo galleries, product listings, or card-based UI.
4. Hierarchical grid– This grid offers a flexible structure that is based on the content’s visual hierarchy. It is based on the fact of which content is important or complex. This grid is mostly
used for a portfolio website.
5. Baseline grid– It’s a simple horizontal grid structure that we use to show typography-heavy designs normally.
6. Square grid– In this grid, we add squares of equal size and form a modular-like layout. It is mostly used to design images and icons for layout.
Setting up grids on the screen
Step 1. Determine content structure – To start, first you have to select a content structure. This step helps to understand the layout requirements for the type of grid you require.
Step 2. Choose grid type – As you have already designed the content structure in the first step. Now you have to choose an appropriate grid based on that content structure.
Step 3. Margins and gutter – In this step, you will determine the space required in your design, as it will give you the room to breathe for your content. Margin gives space between the content and layout edges, while gutter gives space between columns and rows.
Step 4. Columns and rows – Now, define the size of rows and columns according to the content you have to display.
Step 5. Align elements and text– Now is the time to align the elements and text in the grid system.
Conclusion
So, that’s it for today in Figma fundamentals. I hope you found this blog useful in polishing your Figma knowledge. Now you can move forward to practically implement the learned concepts. Feel free to check out our Figma certificate course in case you need training from our experts, like Ravi sir.
Author Introduction:
This blog is written by Aditi Guleria for her Figma class assignment given by Ravi Sir. Aditi is our online UX Design Master diploma student. You can check Aditi’s projects on Behance to track her creative projects.
