Course Figma


01 - Intro Figma & Grid with Breakpoints

  1. Intro about Figma
  • Frame is a foundational element for the design that act as a top level container.

  • Frame is a parent object in Figma. In the Frame have lots of child Frame.

Intro about Figma

  • Design frame: width, height, position (X, Y), rotate, corner (Right side).

  • Shortcut:

    • F: Create new frame.
    • Shift + R: Show/hide ruler.
    • Shift + 1: Fit content you choose.
  1. Grid
  • Anatomy of Grid:

Anatomy of Grid

+ Gutter: The space between columns or rows. + Margin: The space top, bottom (rows) or left, right (columns)

  • Types of Grid:

Types of Grid

  • Manuscript Grid:

Manuscript Grid

  • Column Grid:

Column Grid

  • Baseline Grid:

Baseline Grid

  • Modular Grid:

Modular Grid

* How to reuse style Grid:

  • You must reuse style Grid to use anywhere, stop use it every time.
  1. Breakpoint: Mobile, Tablet, Desktop

Breakpoint Grid

  • You can make breakpoint foreach screen: Mobile, Tablet, Desktop.

  • Shortcut:

    • Alt + Hold click mouse: To create element like rectangle, line, polygon,...

02 - Color Theory

  1. What is Color Theory

What is Color Theory

  1. Color Wheel

Color Wheel

  1. Color Model (Bánh xe màu)

Color Model

  1. Primary, Secondary, Tertiary color

Primary, Secondary, Tertiary color

  1. Warn & Cool color

Warn & Cool color

  1. Color harmony (Màu sắc hài hòa)

* Complementary

  • Colors positioned (định vị) on opposite ends of the color wheel (ở hai đầu đối diện của bánh xe màu).

Color Harmony

* Split Complementary: one key color (màu chủ đạo) and two color adjacent (màu liền kề).

Split Complementary

* Analogous: Consist of three hues, all positioned next to each other on the color wheel.

Analogous

* Triadic: Combinations consist of three colors evenly spaced on the color wheel.

Triadic

* Tetradic

Tetradic

* Square

Square

* Monochromatic

Monochromatic

Hue Color

  1. Solid, Gradient, Image

  2. How to generate color

  • Try it out with Color Compass in community figma.
  1. How saved plugin & Use EyeDropper tool
  • EyeDropper Tools

EyeDropper Tool


03 - Stroke, Effect and Exports

  1. Stroke Concept

Stroke

  1. Drop Shadow & Inner Shadow

Drop Shadow & Inner Shadow

  1. Layer & Background Blur
  • Use plugin Unsplash to choose an image.

Layer & Background Blur

  • Note: Let's create a frame child include image, don't add picture to frame parent when use blur to override other frame child.
  1. Export Frame to PNG, JPG, SVG, PDF

Export Frame


04 - Shape Tools (Rectangle, Line, Arrow, Ellipse, Circle, Polygon & Star Tools)

  • Shortcut:
    • Shift + X: to flip the styling of an object between its fill and its stroke.
  1. Polygon & Star tool
  • Polygon: Maximum is 60, minimum is 3. Default count: 3.

Count of acute angles Polygon

  • Star: Maximum is 100%, minimum is 0.1%.

Count of star

  1. Directly place the image inside the object
  • Shortcut:
    • Ctrl + Shift + K: to import image to shape.
    • Hold Alt + Double click: to crop image you want.

Hold Alt + Double click to crop image


05 - Alignment

  1. Alignment Tools

Alignment Tools

  1. Raster & Vector

Raster & Vector

  1. Boolean Operator of Shapes

Boolean Operator of Shapes

Boolean Operator tool


06 - Text & Typography

Google Font

  1. What is Typography
  • Typography is the art and technique of arranging (sắp xếp) type to make written language legible (dễ đọc), readable and appealing (hấp dẫn) when displayed.

  • Typeface: is a set of design feature for letter, like Roboto, Montserrat, Nunito,...

  • Font: is the variation in weight and size of a Typeface.

  1. The discrepancy between Serif & Sans Serif

The discrepancy between Serif and Sans Serif The discrepancy between Serif and Sans Serif

  • Serif: For Newspaper, Letter,...

  • Sans Serif: For Web design, Mobile App design.

  1. Use Tools

Text Tools More options of text tools


07 - Three Pillars of Figma: Auto Layout, Component & Variant

  1. Auto Layout
  • Auto Layout: Là 1 tool mạnh mẽ của Figma giúp tự động sắp xếp và thay đổi kích thước các element trong design. Giúp tiết kiệm thời gian và ensure tính nhất quán trong việc thiết kế giao diện.

  • Gồm các tính năng sau:

    • Direction (Hướng):
      • Horizontal (Ngang)
      • Vertical (Dọc)

Direction

  • Spacing (Khoảng cách):
    • Spacing giữa các element

Spacing

  • Padding

Padding

  • Alignment

Alignment

  • Thay đổi kích thước:
    • Fixed width
    • Hug contents

Width fill content

  • Nested được nhiều Auto Layout

  • Shortcut:

    • Shift + A: Create Auto Layout
    • Option/Alt + A: Thêm 1 element vào trong Auto Layout
    • Shift + Option/Alt + A: Chuyển đổi giữa FixedHug contents
  1. Component
  • Shortcut:
    • Ctrl + Alt + K: to create component.
  1. Variant
  • Variant có thể giúp component của bạn có thể tạo ra nhiều type khác nhau để bạn chọn.

  • Example: Bạn có 1 button, nhưng bạn muốn tạo 1 component chứa nhiều component button khác nhau như: Main, Outline, Hover

Variant Component

  • Create variant component.

Create variant component