The Figma Interface

Start using Figma with the basics.

When you create a new document in Figma, you’ll get a blank canvas and an untitled file. In order to change the file name, click on it, type the new name, and press return or enter. I’ll call this file Figma Interface.

On the top of the app, you’ll see tabs showing what you have open, and below that a toolbar. On the left are tools for adding elements like shapes and text to your canvas.

In the main area of the app are three regions. The large region in the middle is your canvas, where you’ll add, adjust, and move around elements. On the left, you’ll see a list of layers, and on the right you’ll see a set of tools for adjusting whichever layer you currently have selected.

Let’s see these in action by creating a rectangle layer. Choose the rectangle tool by pressing its icon in the toolbar, then click, drag, and release to draw a rectangle on the canvas. You should see the rectangle you just drew is now selected by the resize controls visible around it. You’ll notice it has also been added to the layer list on the left, and there are now controls in the design panel on the right to adjust the properties of the new rectangle layer.

With the rectangle layer still selected, I’ll adjust the fill color to make the rectangle pink. I can also add a border to the rectangle using stroke. I can even give the rectangle rounded corners. I’ll also add a drop shadow effect.

Finally, notice how when I resize the rectangle on the canvas, the width and height settings update in the design panel. Alternately, I can manipulate these directly in the design panel to make more precise adjustments.

Up Next: Text and Shape Layers

See Also

Competencies

Explainers

Lessons

Resources

Articles

References

Talks

Tools