02. Let's look at the interface and screen

Did you access the website with a free plan? You can also install applications. So now let's take a look at the screen configuration and see what you can do with this tool.

Screen configuration – a program similar to a kitchen (like a sketch!)

Figma is divided into four areas, just like any other graphic design tool. It consists of the Toolbar at the top, the Layer panel on the left, the Canvas in the middle, and the Sidebar on the right. It shows almost the same composition as the sketch and works almost the same. However, there is a slight difference.

Toolbar – tools such as knives, scissors, and chopsticks

Figma's toolbar has elements and tools that can be inserted on the left, project names and locations in the middle, and account information, sharing, and present functions on the right. The central area of the toolbar displays different tools depending on the element the user selects.

Canvas – a cutting board for taking out ingredients and cooking

This is the area where visual implementations are displayed. This is a space where various elements such as frames, components, and layers are displayed. Instead of the sketch or illustrator concept of an artboard, Figma uses the concept of a frame. It is an infinite space and uses a frame to delimit space.

Layers panel – a list of the ingredients you have out and the ingredients you use often

This is the area where pages and layer lists are displayed. You can use pages to break up large groups and view different elements in the layer list. You can see the assets separately as well as the layer list. In Assets, you can find components and libraries that define elements that you use over and over again. It can search the library and also manages updates.

Sidebar Panel – Explaining materials differently for different people

This area displays detailed information about layer elements. Unlike sketches, you can view layers differently depending on their purpose. It consists of Design to edit the design elements of the layer, Prototype to define specific interactions, and Inspect to display information for development.

How to figma Basic