Composition - Your Graphic Design Learning Companion

GGraphic Design

Alignment

+

Positioning elements to create order and balance in your design.

Types: Left, right, center, or justified alignment.
In Figma: Use the Align tools (top bar) to snap elements.
Example: Align text and icons in a button for a clean look.
Tip: Enable Layout Grid (Shift+Ctrl+4) to align precisely.

Contrast

+

Using differences in color, size, or shape to draw attention.

Methods: Color (e.g., `#FF6F61` vs. `#FDF6E3`), size, or weight.
In Figma: Fill a circle with `#FF6F61` and text with `#FDF6E3`.
Example: Bold headlines vs. light body text.
Tip: Check contrast ratios with plugins like Stark.

Frame

+

Figma’s version of an artboard for organizing designs.

Purpose: Group elements like a webpage or app screen.
In Figma: Press F to create (e.g., 1440x900px).
Example: Nest a header frame within a main frame.
Tip: Use frames over groups for responsive design.

Typography

+

The art of arranging text for readability and impact.

Elements: Font, size, weight, spacing (e.g., ‘Montserrat’ at 24px).
In Figma: Add text (T), set to `#4A4A4A`.
Example: Pair ‘Montserrat’ Bold with ‘Open Sans’ Regular.
Tip: Keep text sizes consistent (e.g., 16px body, 24px headers).

Color Theory

+

Understanding how colors influence mood and attention.

Basics: Warm colors (e.g., `#FF6F61`) energize; cool colors (e.g., `#2E2E2E`) calm.
In Figma: Create a palette (`#FF6F61`, `#FDF6E3`).
Example: Use complementary colors for contrast (orange and blue).
Tip: Use Figma’s color picker to sample inspiration.

Visual Hierarchy

+

Guiding the viewer’s eye with size, color, and spacing.

Tools: Size (e.g., 48px titles), color, position.
In Figma: Set a title (48px, `#2E2E2E`).
Example: Larger text for headlines, smaller for details.
Tip: Use spacing to separate sections clearly.

Grid

+

A system for aligning elements consistently.

Types: 12-column grids are common for web design.
In Figma: Enable Layout Grid (Shift+Ctrl+4).
Example: Space elements 16px apart in a 12-column grid.
Tip: Use Auto Layout (Shift+A) for dynamic spacing.

Components

+

Reusable design elements in Figma, like buttons or icons.

Creation: Design a button, right-click > Create Component.
In Figma: Edit the main component, instances update.
Example: A button with hover and default states.
Tip: Use variants for multiple states (e.g., hover, active).

Prototyping

+

Creating interactive mockups in Figma.

Process: Link frames with connectors in Prototype mode.
In Figma: Add a button, connect to another frame.
Example: Link a ‘Sign Up’ button to a form frame.
Tip: Use Smart Animate for smooth transitions.

Auto Layout

+

Figma’s tool for dynamic, responsive layouts.

Features: Spacing, direction, padding control.
In Figma: Select items, press Shift+A.
Example: Stack buttons vertically with consistent gaps.
Tip: Use it for lists or forms to save time.