UNIT_03_UA (03.10.2025) Social Media Marketing (24.10.2025)

Main ideas / lessons

• Figma is a key design tool for content creators and SMM (not only designers), because it supports creating social media creatives, grids, banners, and web-design-like layouts.
• Avoid “template-only” creativity: the speaker compares template behavior in Canvas/GPT-style templates to not using your own creative work. The focus is on adding your own ideas and design thinking.
• A large part of the session is about how to work inside Figma efficiently, including:
  • understanding the interface (frames, layers, tools, panels),
  • using basic drawing/text/shapes,
  • leveraging plugins and assets (e.g., Unsplash, background removal),
  • applying fills, gradients, effects (shadow, blur, frosted glass),
  • using hotkeys and alignment/indent rules for precise placement,
  • building a structured Instagram grid and then resizing it to Stories.

Methodology / workflow taught

1) Setup and first concepts in Figma

• Open / Create a file
  • Use the + button to create/select a new design/editor canvas.
• Understand projects and files
  • In Figma, files are your projects.
• Autosave principle
  • Figma saves automatically—you don’t need a manual save button.
• Language note
  • Figma UI supports languages such as English/Spanish/French; Ukrainian/Russian aren’t available (per the speaker).

2) Core layout building blocks

• Use “Frames” as containers
  • Everything is placed into a frame, which acts like a container/plate.
• Use “Layers”
  • Elements stack in a layered hierarchy (base → images → text/logos → top effects).
  • To show/hide or reorder visuals, use the layer panel.
• Basic tools to know
  • Move / hand tool
  • Scale
  • Slice (cutting)
  • Shapes: rectangle, ellipse/circle, polygon/triangle/star
  • Pen/pencil drawing
  • Text tool
  • Comment tool
    • Used for communication/feedback inside the file (client/team marks changes instead of relying on chat)

3) Creating shapes correctly (precision tip)

• Hold Shift while drawing
  • Ensures proportional correctness, e.g.:
    • circles/ellipses stay correct,
    • squares/rectangles keep equal sides,
    • triangles/polygons render proportionally.

4) Use frames/templates for social media sizes

• Pick ready-made frame templates for social formats:
  • Instagram Post (e.g., 1080×1350)
  • Instagram Stories (1080×1920)
• For custom items:
  • create your own frame (e.g., 1000×1000 for avatars),
  • place elements inside the frame.

5) Work with fills, gradients, transparency

• In the right-side properties, adjust:
  • opacity/transparency
  • fill settings, such as:
    • solid color
    • gradient (linear/radial)
    • optional patterns
    • insert images or even videos into fills
• Use gradient/color controls to match brand and creative mood.

6) Apply effects (advanced visuals, but practically explained)

• Use the Effects panel:
  • Shadow: control blur/strength and shadow color
  • Blur: apply blur directly or via effect settings
• Example “frosted glass” / background blur:
  • overlay a semi-transparent shape on top of content
  • adjust:
    • shape transparency
    • background blur strength
  • yields the “frosted glass” look
• Undo shortcut
  • Use Ctrl/Cmd + Z repeatedly to step back through changes.

7) Alignment, indents, spacing rules (speed + consistency)

• Use Figma’s guidance to keep consistent spacing, e.g. equal indent margins like 100 px top/bottom.
• Move elements in fixed steps:
  • Shift + Arrow keys to move by about 10 px increments (faster than single-pixel dragging).
• Use auto-centering / anchoring:
  • alignment tools and center guides help with precise placement.

8) Build an Instagram grid (9 posts) for a content plan

• Create a 9-post grid as the initial design layout:
  • duplicate layouts/frames to reach nine consistent posts.
• Add a creative base:
  • set background/palette/theme colors
  • create moodboard-like foundations in separate frames so the main file stays clean
• Populate each post with:
  • photos (from Unsplash/client materials)
  • gradients/colors
  • text
  • optional shapes and decorative elements
  • consistent style/texture (e.g., noise repeated across elements)

Visual/psychology guidance:

• Faces/eyes/hands often attract attention more than plain large text.
• Choose images that match the desired brand mood (warm/cold, mood consistency).
• Cropping/framing matters: choose the most flattering silhouette/portion of the photo.

9) Add and use external photo assets via plugins

• Unsplash plugin
  • Search by keyword (English queries recommended).
  • Insert/download images directly into Figma from the plugin UI.
• Background removal plugin (Photo/Photopea-like)
  • “Magic eraser” style:
    • adjust tolerance and force/stiffness (lower tolerance removes more gently)
    • clean remaining artifacts manually if needed
    • click Save to keep plugin settings
• Alternative without plugins:
  • import images via copy/paste or by dragging from local files.

10) Edit photos (in-layer image adjustments)

• Click the fill/image of an image inside a shape/frame.
• Adjust:
  • brightness-like settings (lightness/darkness)
  • contrast
  • saturation
  • temperature/tint
  • highlights/shadows
  • stylized conversions (e.g., black-and-white)
• Purpose: keep photos visually consistent with the rest of the design.

11) Text creation and typography workflow

• Use the Text tool
  • click to place the cursor and type
• Adjust:
  • font size (including large typography)
  • color
• Font management
  • download fonts from external sites
  • install them on your device
  • select them inside Figma
• Optional: convert text to curves for full control (reduces editability).
• Maintain consistent typography spacing/indents across the grid.

12) Resize the grid/design to Instagram Stories

• Take a post (or design frame) and create Stories versions.
• Conceptual steps:
  • create a Stories frame
  • copy/place/reposition design elements
  • fit text/logo into safe zones:
    • top and bottom
  • use flexibility in spacing to adjust the composition
  • keep readability and avoid placing important content under Stories UI overlays
• The speaker mentions rough safe height guidance (around 140 px, with a suggestion to use 140–150 px).

13) Homework workflow (explicit instruction list)

• Do only the first three points of the homework.
• Do not record a video, since the analysis happens in separate lesson videos.
• Homework tasks include:
  • Prepare your Instagram feed (a 9-image layout is implied).
  • Work with a reference (a visual example you liked) from Behance/Pinterest.
  • Create a banner and choose a banner size (example sizes mentioned: same as their post or even A4) and describe what you sell.
  • Complete a resize step (poster/post → stories) based on the resizing principles shown.

14) Exporting deliverables

• Select multiple frames (e.g., the 9 Instagram posts).
• Click Export:
  • choose export format (PNG mentioned)
  • export “9 layers” / “9 frames”
• Open the downloaded folder to verify the output.

Speakers / sources featured

Speakers

• Olya: intro/host; coordinates the session and introduces Yulia; also asked about homework timing
• Yulia Kaznevskaya: main instructor; leads the design department at “Pain Digital”; runs the workshop
• Christina: mentioned during tablet/audio discussion; asked about undo/tablet features
• Peter: asked a homework-related question

Software / platforms / tools referenced

• Figma
• Canvas
• GPT chat (as a comparison reference)
• Unsplash (photo plugin/source)
• Pinterest and Behance (for finding references)
• Google Fonts (font download source)
• Telegram (mentioned as a place where feedback should not be used; Figma comments are preferred)