Learn Figma Basics, Part 2: Figma Frames.
Tags: figma, design, tutorial, beginners
Published: 2020-04-28 19:31:12

Designing with Figma is like designing inside the browser, it has powerful features that can simulate the browser behavior. Frames, constraints, and auto-layout, are features that help you create a dynamic user interface.

In this part, we will see how Frames, constraints and Auto layout works, and how to combine them together to make dynamic user interfaces.

#**1- 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.

**Create a simple frame:**
- Select the **frame tool** in the toolbar.

![figma frame tool](https://lh4.googleusercontent.com/oQNpX69xxRVHGhc6CAL-wJspjwhdTzdd2QDMpKiIc0c5a2o9G2jmOlK3Y3XU24dlgV-VwhXmoqkTgvBxN_3LhiF3NZRRzJt-UWvvn65od2MPhGaD3ai1BRc-ouq6MMeGp8JGAtMg)

- 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. 

**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.

![figma frames sizes](https://lh5.googleusercontent.com/78j5kWLzIjMQpv545_VJ7EkEh4KvAXyruiR6uMfMlkxLW1Cv7gY3MxzXSeN_MTAvtsqN6aFQfIjL-U_c_4ZijR8z6FhtwvgDJKUov4yZbpLYcL4YdL70FFRZUFVjIG6bmd-c19ev)

The iPhone frame will appear on the **canvas**. 

![figma new frame](https://lh6.googleusercontent.com/XnpypLc_3cSTCvL3MqNcc1xBD8YU8xcd9HOcjs3rz0m3OMfLPsJNPF40wS2z5ojwALjLQcZb6hx70AwJ1PoezJX_yxYDG84FI3vHXXN8)

###**Frame properties :**
- Select the frame to access its properties in the sidebar.

![figma frame properties](https://lh4.googleusercontent.com/W61yhCmQOP3dEeMc-bcwFahq3E7FZUWhikvcfQfoFs-UVyf8X1fShsWLPWexe_dH91jBi0kpgHFrmMgETUCO43xSSYnf4dy5htSRGSy5tKgpvq-1848c3RwcPI56LXh27MCJOKVb)


- **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 : [Frames in Figma](https://help.figma.com/hc/en-us/articles/360041539473-Frames-in-Figma)

###**Nesting frames:**
In Figma, we can draw frames within other frames. This will help you build complex UI elements like buttons, cards, and navbars.

![figma frame nesting](https://lh3.googleusercontent.com/wOTWUzkBiB5-l5_L2vAo-4QyVqWH7b017YgNFB70VmjK02MnF3qI3ys6WDkbyjCr5B8usJ30tyOz49Hv583_fZzJ65IQ1a-6xOL7eBgHL2_2vkA2EKyffDSVmZEdKXGN5YFhH9Ft)
source : [Frame Nest](https://help.figma.com/hc/en-us/articles/360041539473-Frames-in-Figma)

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.

![figma form](https://lh5.googleusercontent.com/lHPol5WQqVSj1OsJHAZbcapIOFoK5kI4WilDYKc6AdyOtn1QYoZeZpxksOpNQiIXTqUE3coibM3__E7t_GPlEirYAJFZI_AcrIuU1kBbVwNxs5KfTNGlq--qSqO5Ao-DIH4ElP_n)

**Frame color:**
- Select the field frame
- In the properties panel, click the **+** icon on the **fill section** to add a color fill

![figma fill section](https://lh6.googleusercontent.com/SPb64MCXUvO0KT5JGnMmXFjJrJx19M6YQpMuscnPzfPx-_sD3ZTynGQ_XjvJYR0FfNiIprVvbN-1YPi6oEAHBz9slu9zDyhZ-NjFSG6X7Dlm2ngpsf1mI8eQ3gdRGHH1hR-51l_Y)

- Replace the default color code with **#ededed**

![figma color](https://lh4.googleusercontent.com/TQmgh9j9gSRR5eiit3lQXMIfKQscdwwSZ28EHpzG-GzOWy-DoDVOLEKMzpb60gQ3wEo_-EyVP5Jm5nGqXk_D4wbblRqodR8yLBE7E0Z600a1pV7RCn_FW0wXgCwwkvPR_zDI-n8-)

**Add a text layer:**
- Pick the **text tool** in the toolbar

![figma text tool](https://lh5.googleusercontent.com/nO15zE9y_eBuiCGnogdw9efj0fHF8j8HLxpioE4sdfccdk7hvO7sYI2u3OmjI_j-ta6pvSB67HRScIZmJIYfR9mlEosdC1anLDk6_LvvM7FXE14rB0Hp1K4_AsphKZrIsiSaNT-5)

- Click inside the field frame to create a text layer.
- Enter the text: your email.
- Align the text layer to the left.

![figma form](https://lh4.googleusercontent.com/YCxTN_LbnREAEcWC1eQzvvkiLSYTOSpozikZ_buAGj7mWl32-qfAkiSpUm54OVZrzLcARRUzbT1CgO220yA8BVQjYHNZ7NwOzTJq59b9F7k3vxnsSF92CBW_kMNXz3TrYfYubpjV)

You can see in the **layers panel**, how frames are nested.

![figma layer panel](https://lh4.googleusercontent.com/CJZkLQR-BdOeiPwdKoDB-wFlVgsH10ijX75raqD-TauOOeaELPyQdfee02CzdAIRgI6taEvib5FQbAhI_tzcw5IOm09REsNOJ0DASYnN1-NvE1NcIn-V7QO3ypwLui21YhXNPGl2)

That's all about the Figma Frame Feature. In the next post, we will discover the Constraints feature and how to make your user interface dynamic.

This post is a part of a series that cover the basics of designing with Figma.
Please don’t forget to follow and share. See you in the next post ;)