In this section, we will explore the fundamental tools and features of Figma that are essential for creating and editing designs. Understanding these basics will provide a strong foundation for more advanced design and prototyping tasks.

1. Selection Tool:

   • Used to select, move, and resize objects.
   • Shortcut: V

2. Frame Tool:

   • Creates frames, which are containers for your designs.
   • Frames can be used to define the boundaries of your design, such as screens for a mobile app.
   • Shortcut: F

3. Shape Tools:

   • Includes Rectangle, Line, Arrow, Ellipse, Polygon, and Star tools.
   • Used to create basic geometric shapes.
   • Shortcut: R for Rectangle, O for Ellipse.

4. Text Tool:

   • Adds text to your design.
   • Text can be styled with different fonts, sizes, and colors.
   • Shortcut: T

5. Pen Tool:

   • Used to create custom shapes and paths.
   • Allows for precise control over curves and angles.
   • Shortcut: P

6. Hand Tool:

   • Used to pan around the canvas without selecting objects.
   • Shortcut: H

7. Zoom Tool:

   • Allows you to zoom in and out of the canvas.
   • Shortcut: Z

Let's create a simple design using these basic tools:

1. Create a Frame:

   • Select the Frame Tool (F).
   • Click and drag on the canvas to create a frame. This will be the boundary of your design.

2. Add a Rectangle:

   • Select the Rectangle Tool (R).
   • Click and drag inside the frame to create a rectangle. This could represent a button or a card.

3. Insert Text:

   • Select the Text Tool (T).
   • Click inside the rectangle and type "Click Me". Adjust the font size and color using the properties panel on the right.

4. Draw a Custom Shape:

   • Select the Pen Tool (P).
   • Click to create points and form a custom shape. This could be an icon or a decorative element.

5. Adjust the View:

   • Use the Hand Tool (H) to move around the canvas.
   • Use the Zoom Tool (Z) to zoom in on details or zoom out to see the entire design.

Task: Create a simple mobile app screen with a header, a button, and a custom icon.

1. Use the Frame Tool to create a frame with dimensions 375x667 (standard mobile size).
2. Add a rectangle at the top for the header and fill it with a color of your choice.
3. Insert a text element inside the header with the title "Home".
4. Create a button using a rectangle and text at the bottom of the frame.
5. Use the Pen Tool to draw a simple icon in the center of the frame.

Solution:

1. Frame: 375x667
2. Header: Rectangle at the top, fill color: #3498db
3. Title: Text "Home", font size: 24px, color: #ffffff
4. Button: Rectangle at the bottom, text "Get Started", fill color: #2ecc71
5. Icon: Use the Pen Tool to draw a star or any simple shape.

• Mistake: Forgetting to switch back to the Selection Tool after using other tools.

  • Tip: Use the V shortcut to quickly return to the Selection Tool.

• Mistake: Overlapping objects unintentionally.

  • Tip: Use the layers panel to manage object order and visibility.

• Mistake: Not using frames to organize designs.

  • Tip: Always start with a frame to keep your design structured.

In this section, we covered the basic tools and features of Figma, which are crucial for any design project. Mastering these tools will enable you to create and manipulate design elements effectively. In the next section, we will delve into working with shapes and text to enhance your design skills further.