Figma mastery

Learning Figma: Shapes and Frame Types §

Shapes in Figma §

Shapes are fundamental elements in design. In Figma, you can create various shapes to build your designs. Here are some common shapes and how to work with them:

1. Rectangle: A basic rectangular shape can be created by selecting the Rectangle tool. You can adjust its size, color, and borders. **`shortcut: R
2. Circle/Ellipse: The Ellipse tool allows you to create circles and ellipses. Holding Shift while drawing ensures you create a perfect circle. shortcut: C
3. Polygon: Use the Polygon tool to create shapes with multiple sides, like triangles or hexagons. You can control the number of sides and the roundness.
4. Line: Create lines with the Line tool, which can be straight or curved. Adjust the line’s color, weight, and style. **`shortcut: L
5. Vector Pen Tool: For more complex shapes, the Vector Pen Tool lets you draw custom shapes by adding points and curves. **`shortcut: p

Frames in Figma §

Frames are containers for organizing and grouping elements within your design. They come in various types:

• 🔥 Frame:
  • ➡️ The most basic frame type, which acts as a container for elements. You can use it to group and organize components.
• 🔥 Auto Layout Frame:
  • ➡️ This frame type is incredibly useful for responsive design. It automatically adjusts its content based on the content’s size and layout settings.
• 🔥 Component Frame:
  • ➡️ Component Frames are used to create reusable components. As a programmer, you’ll appreciate the concept of reusability in your designs.
• 🔥 Slice Frame:
  • ➡️ Slices are used for exporting parts of your design for different resolutions or formats. They’re particularly handy when you need to export assets for development.

Groups §

Understanding Groups in Figma §

In Figma, a group is a way to bundle multiple elements together. This can be very handy for keeping your design organized and making it easier to manipulate related elements. Here’s how to create and work with groups:

Creating a Group §

1. Select Elements: To create a group, select the elements you want to include. You can click and drag to select multiple elements or hold down Shift and click on individual items.
2. Group Command: Once you’ve selected the elements, you can either right-click and choose “Group Selection” or use the keyboard shortcut Cmd+G (Mac) or Ctrl+G (Windows).
3. Naming Groups: It’s a good practice to name your groups. Right-click on the group and choose “Rename” to give it a descriptive name, especially if your design becomes more complex.

Benefits of Groups §

1. Organization: Groups help keep your design organized, especially when you have many elements. For example, you can group the navigation items, buttons, or icons in your web design.
2. Manipulation: When you want to move, resize, or apply changes to a set of related elements, groups allow you to do so as if they were a single entity. This is valuable in responsive design where you may need to adjust the layout of multiple elements together.
3. Hierarchy: Figma allows you to create nested groups, which means you can have a group within another group. This hierarchical structure is essential for managing complex designs.

Group Gotchas §

1. Layer Order: The order in which you select elements to create a group matters. The first element you select becomes the “parent” of the group, affecting the layer order.
2. Ungrouping: To ungroup elements, simply select the group and use the Cmd+Shift+G (Mac) or Ctrl+Shift+G (Windows) keyboard shortcut. This is handy when you need to access individual elements within a group.
3. Alignment: Pay attention to how elements align within a group. Figma offers alignment and distribution tools to help you arrange elements precisely.

Practical Applications §

As a programmer, you might wonder how groups in Figma are relevant to your work. Here are a few scenarios where this knowledge can be beneficial:

• Collaboration: When working with designers, understanding how they structure their designs in Figma can help you better communicate and implement their vision in web development.
• Creating UI Components: If you’re involved in front-end development, you can design UI components in Figma, create groups for different parts of the component, and then export them for development.
• Responsive Design: Groups are essential for creating responsive designs. You can group elements and set constraints to make them adapt to various screen sizes.

Your journey in web development and design is one of continuous learning. Figma, with its grouping and organizational features, is a valuable tool for this journey. If you have more questions or want to explore specific aspects of Figma or design practices, feel free to ask. Happy designing and coding! 😊

Next time, we can delve into advanced design topics or discuss coding practices in more detail.

Tips and tricks §

Zooming on a particular object §

Sometimes you are working with an object and you don’t want to go over the struggle of zooming to it (make it snap to your screen) you can simply use shift + 2 to zoom in directly to the element

Magically add things withing a frame §

Sometimes you really want to draw a frame around things and rather than select add you can simply press f and draw around things you would like to hold under one frame and voila !

Copying styles §

Sometimes you want to copy thins like box shadow, why ? well because nobody figures those things right ! so yes you can just copy paste the box shadow

Don't copy some styles blindly, otherwise you might loose respect from your peers