Introduction
What is figma? Many beginners may ask. Figma has a lot to do with User Interface Design Structures and Organization. Figma is beyond user interface design tool. It incorporates illustration of end-user interation with the propose system. This leads us to an excerpt of what we may termed the definition of figma.
Figma is an application design tool for user interface and collaboration. It helps you work seamlessly and collaborate with other team.
Figma is use for interface designing and also as a prototype software, it has a good collaboration features which make figma to stand out in many ways to apps or softwares like sketch and Adobe XD.
Figma consist of the following features:
Menu, Assets, Toolbar, Options, Layers, Canvas and Inspector.
Unlike other design tools like sketch, figma files are not stored on your computer local storage, figma files are store in the cloud (cloud based).
Figma helps you manage your files better with its four levels files structure: Teams, Projects, Files, and Pages.
The Basics of Figma
We have already mentioned that figma design allows team collaboration. User Interface / User Experience Engineers (UI/UX) collaborate with the product owners and The Software Engineering team members on the prototype design of the proposed product.
As a team member on figma or figma design you can choose to use the browser version or you download the figma desktop application available on Windows and MacOS. Figma desktop application is not a native app, but a cross-platform app like visual studio code and slack. Both the browser and the desktop version have the same functionalities.
Figma desktop application have a built-in support for enabling the use of local fonts, while the browser version requires installing the Figma Font Helper before you can use local fonts.
Figma’s interface consist of three major parts, the canvas in the middle where all the designs are located. On the left hand side there is a side bar that contains, layers, assets and pages of a file. The right toolbar contains all information about elements in the file.
Figma file can have multiple pages and each page has a canvas. Most designers often use pages to separate page for the design system, icon, or other file assets.
When opening up a new figma file for the first time, make sure to familiarize yourself with the different pages within the file. If the designer you are working with has made a separate page for all colors, typography, and icons it can save you time while building out the design.
Getting started with Figma
Go to the official site of Figma and create an account https://www.figma.com/signup, if you already have an account just sign in.
After you signed into your Figma account or open a project’s file, you will notice the files browser will be open as well.
“ The File Browser allows you to navigate through your account. You can use it to access Personal Files, Create and Join Teams, and connect with the wider Figma Community.
There are two ways to create a new file in Figma. Create a draft file or a team project file.
On the right hand side you will see “NEW” click on it to create a figma file.
How To Create A Team On Figma
Teams are tabs that contain a list of projects that are created by the team members Your Files, Teams, and Projects – are displayed in the main body of the File Browser. “
- To create a new team, click the + New team button on the bottom of the sidebar.
- Add a name to the team and click New Team.
- Add team members emails or click Skip for now
- Choose a starter plan
You can access your new team in the sidebar.
Note: Figma does not support photo editing, 3d design, or video editing.
How To Create A New Project On Figma
Projects are created inside teams. You are limited to three projects in the free plan.
- Select a team in the sidebar
- Click the New project button on the top right side of the files browser
- Add a name to the project and click Create Project.
How To Create A File on Figma
Figma file contain your designs
There are two ways to create a new file in Figma. Create a draft file or a team project file.
- Click on the + icon beside the draft tab in the sidebar.
Your new file will be assigned to the draft project.
To access your draft files, select the Draft tab in the sidebar.
Team project file :
- select a team
- open a project
- Click on the + icon on the top right side of the files browser project
How To Create Pages On Figma
Inside a Figma file, you have the ability to create pages. Each page has it’s canvas, where you can create different artboards for your design.
Pages are practical to create different versions of the same design inside one file.
- Open a project file.
- Go to the tab menu of the sidebar, click on page 1 to reveal the pages section.
- Click the + icon in the right of the pages section.
- Add a name to the page.
Other useful Components of Figma
File Editor
Figma has a minimal file editor with four main areas: the toolbar, the layers panel, the canvas, and the properties panel.
Toolbar
The toolbar contains a set of tools that you can use in your creation process.
The Canvas
the canvas is the container of your artboards and layers.
The Layers panel
The layers panel sidebar allows you to access all your layers, assets and pages included in your file.
See more on:
https://help.figma.com/hc/en-us/articles/360039831974-View-layers-and-assets-in-the-Layers-Panel
Figma Properties panel
The properties panel allows you to access the properties of any selected layer, prototype or inspect the object’s code.
See more on
Figma has a powerful features that can help simulate the browser behavior. Frames, constraints, and layout are the features that help create a dynamic user interface.
Frame
Frames are the equivalent of artboards. If you’re designing for a specific device or screen size, you may want to create a container for your design. This is where Frames come in handy.
Create a frame
To create a new frame, you can free draw a frame in the canvas with the frame tool, or choose a pre-sized frame. Figma has a collection of pre-sized frames for the most popular device’s screen size. it makes it easier to create an artboard that fit a specific device screen.
How To Create A Simple Frame
- Select the frame tool in the toolbar.
figma frame tool
- Click and drag in the canvas to draw a frame.
- You can resize a frame by clicking and drag one of the corners, or sides to resize.
How to create a mobile screen size frame
- In the toolbar, select the frame tool.
- Go to the properties panel sidebar, and select the iPhone 11 pro-Max frame.
The iPhone frame will appear on the canvas.
How to set Frame properties
Select the frame to access its properties in the sidebar.
Corner Radius: Round the corner of a Frame to create softer edges
Clip Content: Hide any objects within the Frame that extend beyond the Frame’s bounds
Layout Grids: Create a visual structure for your designs
Auto Layout: Create dynamic Frames that respond to their contents
Fill: Apply a Solid Fill, Gradient, Images (PNG, JPEG, GIF, TIFF, and WEBP) to a Frame.
Stroke: Add strokes to a Frame to create a border or outline
Effects: Add a shadow or blurs to a Frame
Source: Figma Frames
Nesting frames in figma
In Figma, we can draw frames within other frames. This will help you build complex UI elements like buttons, cards, and navbars.
let’s see how nesting frames work by creating a simple form field.
Create the form field frame
- Select the artboard frame.
- Pick the frame tool in the toolbar.
- Click and drag inside the artboard frame, to draw a new frame.
- Resize your frame to 300px width, and 60px height.
Source: Nesting Frames
How to set Frame color in Figma
- Select the field frame
- In the properties panel, click the + icon on the fill section to add a color fill
- Replace the default color code with #ededed
How to Add a Text layer to Figma
- Pick the text tool in the toolbar
- Click inside the field frame to create a text layer.
- Enter the text: your email.
- Align the text layer to the left.
You can see in the layers panel, how frames are nested.
Summary
Figma is a powerful tool for interface designing and team collaboration. It is a cloud-based design tool that is similar to Sketch in functionality and features, but with big differences that make Figma better and outstanding for team collaboration. Figma is not only useful for system design showcase, it also help Front-end engineers with direct styling constructs with accurate properties of measurement and rudiments. What this means is a bold italic text in figma with red colors exposes the css behind the appearance of the text html element. Figma makes job easier for front-end designers. This is the very reason why many teams in the tech-industry choose figma above other UI/UX tools.
