Design Skills

Figma Basics




Figma is a popular UI/UX design tool widely used for creating user interfaces, prototypes, and collaborative designs.??

1. What is Figma?

Figma is a cloud-based design and prototyping tool used for creating user interfaces, wireframes, mockups, and prototypes. It’s ideal for real-time collaboration and is accessible on any browser or via desktop apps.

2. Figma Basics

1. Key Features:

  • Canvas: Infinite design workspace where you create frames (artboards).
  • Frames: Define boundaries for designs (e.g., screens for apps, web pages).
  • Components: Reusable design elements (e.g., buttons, icons).
  • Prototyping: Link frames and add interactions to simulate user flows.
  • Collaboration: Real-time editing and commenting with teammates.

2. Core Tools in Figma:

  • Move Tool (V): Select and move elements.
  • Rectangle Tool (R): Create shapes like squares and rectangles.
  • Text Tool (T): Add and format text.
  • Pen Tool (P): Create custom shapes or paths.
  • Frames (F): Define sections for responsive layouts.

3. File Structure:

  • Projects: Collections of Figma files.
  • Pages: Multiple pages within a Figma file for organization.
  • Layers: Hierarchical structure for organizing design elements.

3. Examples of Figma Usage

Example 1: Website Design

  • Scenario: Design a homepage for an e-commerce website.
  • Steps:
  • Create a frame (e.g., 1440x1024 for desktop).
  • Add a navigation bar, hero section, and product cards.
  • Use grids to align content.
  • Export as a prototype to share with stakeholders.

Example 2: Mobile App UI

  • Scenario: Design a login screen for a mobile app.
  • Steps:
  • Create a frame (e.g., iPhone 14 size: 390x844 px).
  • Add input fields for email and password using shapes and text.
  • Design a "Sign In" button as a component for reuse.
  • Prototype interactions for button clicks.

Example 3: Wireframes

  • Scenario: Build a low-fidelity wireframe for a dashboard.
  • Steps:
  • Use simple shapes (rectangles for cards, lines for dividers).
  • Add placeholder text for headings and labels.
  • Use grayscale colors to focus on structure, not aesthetics.

4. Design Formulas and Principles

1. Rule of Thirds for Composition

  • Divide your frame into 3x3 grids.
  • Place key elements (e.g., buttons, CTAs) along gridlines or intersections.

In Figma: Enable the grid layout in the frame settings to guide your design.

2. Color Contrast Ratio (Accessibility)

  • Formula:
    [
    {Contrast Ratio} = \frac{{L1} + 0.05}{{L2} + 0.05}
    ]
    Where:
  • L1: Luminance of the lighter color.
  • L2: Luminance of the darker color.

In Figma: Use plugins like Contrast or Stark to check contrast ratios. Aim for at least 4.5:1 for text.

3. Button Sizing (Touch Targets)

  • Recommended Size: Minimum of 44x44 px for touch-friendly buttons.
  • In Figma: Use the "Frame" tool to create buttons and check their size in the properties panel.

4. Spacing and Layouts (8px Grid System)

  • Use multiples of 8px for spacing between elements.
  • Example:
  • Padding: 16px.
  • Margin: 24px.
  • Gutter: 8px.

In Figma: Set a grid system for your frame and snap elements to align with it.

5. Typography Scaling (Hierarchy)

  • Formula: Define a ratio (e.g., 1.2) for consistent font size progression.
  • Example:
    • Body: 16px.
    • Heading 1: 16px × 1.2 = 19.2px (round to 20px).
    • Heading 2: 20px × 1.2 = 24px.

In Figma: Use text styles to standardize font sizes across your project.

5. Situations for Figma Usage

Scenario 1: Prototyping a User Flow

  • Objective: Simulate a checkout process for an e-commerce app.
  • Steps:
  • Create frames for each screen (cart, shipping, payment).
  • Link buttons to corresponding screens using the "Prototype" tab.
  • Add transitions like "Slide Left" for smoother navigation.
  • Share the prototype with stakeholders for feedback.

Scenario 2: Designing Responsive Layouts

  • Objective: Create a website design that adapts to desktop, tablet, and mobile.
  • Steps:
  • Create frames for each viewport size (e.g., 1440px, 1024px, 390px).
  • Use auto-layout to make elements adapt to different screen sizes.
  • Adjust spacing and font sizes for mobile-friendly designs.

Scenario 3: Building a Design System

  • Objective: Standardize components for a team project.
  • Steps:
  • Create reusable components (e.g., buttons, input fields, cards).
  • Define text styles, color styles, and spacing tokens.
  • Organize everything into a design system library.
  • Share the library with team members for consistent designs.

6. Figma Plugins to Boost Productivity

1. Content Reel:

Quickly generate placeholder text, images, or icons.

2. Unsplash:

Access free stock photos directly in Figma.

3. Stark:

Test for accessibility, including color contrast and alt text.

4. Autoflow:

Automatically generate user flow arrows between frames.

5. Iconify:

Search and insert icons from popular libraries like Material Design.

7. Tips for Using Figma Effectively

1. Use Auto-Layout for Flexibility

  • Arrange elements dynamically by setting paddings, gaps, and alignment.
  • Example: Use auto-layout for buttons that expand with text.

2. Leverage Components and Variants

  • Components: Create reusable elements (e.g., buttons).
  • Variants: Add states (e.g., hover, disabled) to components.

3. Collaborate in Real-Time

  • Share a link with teammates for live feedback and co-editing.
  • Use comments to request changes or provide input.

4. Version Control

  • Use "Version History" to revert to previous iterations of your design.

5. Keyboard Shortcuts for Speed

  • Duplicate (Ctrl/Cmd + D): Quickly copy layers or elements.
  • Zoom (Z): Navigate and focus on specific areas of your canvas.
  • Show/Hide Grid (Ctrl/Cmd + G): Toggle grid visibility.

8. Figma Pricing

  1. Free Plan: For individuals with unlimited files and editors.
  2. Professional Plan ($12/month): Advanced features like version history and team libraries.
  3. Organization Plan ($45/month): For large teams with admin controls and analytics.

9. Best Practices for Figma Design

  1. Organize Your Files: Use clear naming conventions for layers and frames.
  2. Use Grids and Guides: Ensure alignment and consistency across designs.
  3. Prototype Early: Validate user flows before diving into high-fidelity designs.
  4. Focus on Accessibility: Ensure designs are usable for everyone.
  5. Optimize Performance: Avoid unnecessary layers or large images that slow down your file.
❤ If you liked this, consider supporting us by checking out Tiny Skills - 250+ Top Work & Personal Skills Made Easy