Learn Figma Basics, Part 2: Figma Frames.

1- Frame:

Create a frame:

  • Select the frame tool in the toolbar.
  • 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.
  • In the toolbar, select the frame tool.
  • Go to the properties panel sidebar, and select the iPhone 11 pro-Max frame.

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

Nesting frames:

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

Before you go

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Raouf Belakhdar

Raouf Belakhdar

Figma Landing Page’s Design Resources Colors palettes, Typography Styles and ready to use Components. https://www.captain-design.com/