In this section, we will explore how to effectively use shapes and text in Figma to create visually appealing and functional designs. Understanding these basic elements is crucial for building more complex designs and prototypes.

1. Shapes in Figma

   • Basic Shapes: Figma provides a variety of basic shapes such as rectangles, circles, lines, and polygons.
   • Custom Shapes: You can create custom shapes by combining basic shapes or using the pen tool.
   • Shape Properties: Each shape has properties like fill color, stroke, and effects that can be adjusted.

2. Text in Figma

   • Text Tool: Use the text tool to add text to your designs. You can create headings, body text, and more.
   • Text Properties: Customize text with properties such as font, size, weight, color, and alignment.
   • Text Styles: Save and reuse text styles to maintain consistency across your design.

To create a rectangle in Figma:

1. Select the Rectangle Tool from the toolbar or press R.
2. Click and drag on the canvas to draw a rectangle.
3. Adjust the size and position using the properties panel.

To add and style text:

1. Select the Text Tool from the toolbar or press T.
2. Click on the canvas and type your text.
3. Use the properties panel to change the font to Arial, size to 16px, and color to #333333.

Objective: Use shapes and text to create a simple card design.

1. Create a rectangle with a width of 300px and height of 150px.
2. Add a circle with a diameter of 50px at the top-left corner of the rectangle.
3. Insert a text box inside the rectangle with the text "Welcome to Figma!".
4. Style the text with a font size of 18px and a color of #555555.

Solution:

Objective: Create a button using shapes and text.

1. Draw a rectangle with a width of 100px and height of 40px.
2. Add text "Click Me" centered inside the rectangle.
3. Style the rectangle with a fill color of #007BFF and rounded corners of 5px.
4. Style the text with a font size of 14px and color of #FFFFFF.

Solution:

• Alignment: Ensure that text and shapes are properly aligned for a clean design.
• Consistency: Use consistent styles for text and shapes to maintain a cohesive look.
• Layering: Be mindful of the order of layers to ensure elements are visible and correctly positioned.

In this section, you learned how to work with shapes and text in Figma, which are fundamental skills for any designer. Mastering these elements will allow you to create more complex and visually appealing designs. In the next section, we will explore how to use colors and styles to enhance your designs further.