Web Design


Understanding Figma frames

Understanding the Interface

The figma interface is laid out very simply. On the top black bar, there are seven icons. The first brings up a menu with all the options you can use. The mouse icon lets you change between scaling and movement. The icon that looks like a hashtag is your frame and slice tool. The square tool is your shape tool. The pen tool also can be swapped for a pencil tool. The T icon is for text, and the last icon is for comments for collaboration.

What are frames?

Frames are similar to artboards. You can only create designs on frames. Click on the Frame Tool, and select MacBook Pro on the right hand side. There are many different types of preset frames, but you can also create custom sizes for different device viewports.


On the right, you can the design panel. This panel allows you to modify the traits of the shape, text, object, frame, etc. You can change position, shadow, color, border-radius, and more. You can click Prototype at the top to change to prototype mode. This allows you to connect frames to test UI/UX interactions. You can also click on Code, but we will look into this in a later lesson.