Summary of "[22] 🔥 Текст в Фигме: шрифт, размер, интерлиняьж, letter spacing, абзац. Типографика в Figma"

Main ideas / lessons conveyed

1) Creating and managing text layers in Figma

• Use the Text tool to place text in the workspace.
• After placing the text:
  • Click and start typing to create a text line (single-line text behavior).
  • Create a container (frame/box) when you need multi-line text (e.g., button text areas or paragraphs).

Layers panel behavior (key concept):

• For text, Figma uses a text layer without extra containers in the layers (contrasted with some other constructs like boolean/masks).

Quick expand/contract behavior:

• Double-click on the border of the text container to toggle to a line-with-text version.
• The reverse behavior (from line to container) may require manual resizing (dragging against the blue frames is mentioned).

2) Don’t “break” text container defaults (for layout consistency)

New users often break text containers by:

• Stretching the frame manually, or
• Hiding the container under letters.

This can cause mismatch between:

• the mockup/design, and
• how it later behaves in the layout (because layout designers expect the container setup to remain consistent).

Takeaway: keep the text container intact to avoid layout problems.

---

Text typography panel upgrades & navigation

3) Alt behavior for scaling/distance

• Holding Alt during certain spacing/resize actions makes changes happen symmetrically relative to the center.
• Without Alt, the change is applied from one side.

4) Text styles and related course structure

The speaker mentions separate videos on:

• Text styles
• Grids
• Effects
• Color styles
• Text and components

5) Font selection improvements

The font preview panel now behaves more like Photoshop, with:

• Font previews
• Search that works beyond just the first letters

Search scope options:

• Fonts installed on the computer
• Google variable fonts
• Fonts only within the current Figma file (popular set)

Navigation:

• Use mouse or keyboard arrow keys to move in the list.

Missing feature mentioned:

• Ability to copy the font name (the speaker says it was missing earlier, with a workaround).

Workarounds:

• Type the font name in search → select → copy
• Press a shortcut (speaker later mentions “Shift D” for developer mode)

6) Developer mode / Shift D shortcut (font identification)

• Shortcut: Shift D
• Purpose: open developer mode to quickly view and copy the font family name
  • Double-click and Ctrl+C / context copy

Note on timing claim:

• Developer mode access may depend on paid plans starting in 2024
• The speaker jokes/prompt-comments about whether dev mode “asks for money.”

---

Font style/size and spacing controls (line spacing, letter spacing, readability)

7) Font style selection

Within a font family, you can select styles like:

• Thin
• Bold
• Semi-bold / “Sporty” (as phrased by the speaker)
• Italic

Use keyboard arrow keys to scroll through styles.

8) Setting font size

You can:

• Type the size and press Enter
• Use arrow keys to adjust/select from dropdown-like options

The speaker warns beginners to avoid mistakes with confusing values.

9) “Intro lineage” (line height) and why percentage vs fixed pixels matters

Line height controls distance between baselines (or the visual spacing between lines).

Two ways to set it:

1. Percentage (e.g., 130–140–150% examples)
2. Fixed pixels (e.g., 42px when text size is 28px, described as equivalent to ~150%)

Key problem with fixed values:

• Fixed line spacing can drift as text size changes, requiring manual recalculation.

Why percentage is better:

• Percentage scales automatically with text size, saving time and keeping layout consistent.

Rule of thumb:

• Use 130–150% for readable spacing.
• Avoid extremes (e.g., 200%) where lines can feel disconnected like separate elements.

10) Letter/word/line spacing “progression” concept

Readability depends on a progression of spacing:

1. Letters (letter spacing)
2. Words (word spacing) — larger than letter spacing
3. Lines (line spacing) — larger than word spacing
4. Paragraphs — incrementally larger spacing than lines

Main lesson:

• If a beginner increases letter spacing too much, letter spacing can visually resemble word spacing.
• This makes it harder to see word boundaries, reducing readability.

11) When to use letter spacing (LeR spacing)

The speaker argues LeR spacing is mostly harmful for long text blocks.

Better use cases:

• Capitalized short phrases
• One or two words (when text is immediately visible and you don’t need to scan spaces)
• Examples: buttons, links, logo details

For long paragraphs:

• Letter spacing expansion increases the burden on readers to locate boundaries/word spaces through scanning.

12) “Opening” spacing between selected symbols (micro-kerning / partial adjustment)

You can adjust spacing between specific letters/symbols, not necessarily the entire text:

• Hold Alt and drag left/right between characters to move/open spacing
• Alt + bracket keys (left/right) is mentioned as a shortcut

The speaker notes behavior may differ on Mac vs Windows and asks viewers to comment.

13) Caution about web vs logos

• For web design: avoid manual spacing tweaks, because rendering/developer behavior may shift characters oddly and break alignment.
• For logos: manual spacing adjustments are acceptable and can improve aesthetics.

---

Paragraph settings and correct keyboard behavior (Enter vs Shift+Enter)

14) Paragraph spacing / “paragraph” control

There is a paragraph setting in the text panel many beginners miss.

• It controls distance between paragraphs
• Examples:
  • 15–20px for regular body text
  • Larger values can make content feel like separate thoughts rather than one paragraph block

Keyboard rules:

• Enter = creates a new paragraph
• Shift+Enter = creates a new line (line break) without a new paragraph

Overflow rule mentioned:

• You can’t “move” a word to the next line using Enter/Shift+Enter if it overflows.
• Instead:
  • reduce the container/frame size, or
  • use auto layout and indentation rules.

15) Links and paragraph vs line distinction

Important constraint:

• Don’t treat each visual line as a “link unit” by using line/intro-line settings to move link behavior.

The speaker emphasizes:

• a line and a paragraph are different “units”
• each link is tied to paragraph structure, not just visual line breaks

If links are configured incorrectly across line breaks, the resulting link grouping can be wrong.

---

Auto layout vs manual resizing (preventing broken text/frames)

16) Text resize modes (frame resizing behavior)

Figma provides resize options for text containers (blue frames). The speaker warns not to use the wrong mode manually.

Three buttons mentioned:

1. Auto width

   • Fits text into one line
   • Similar behavior can happen via double-clicking the text frame
   • Best for very short text (button/link titles)

2. Auto height (recommended in most dynamic cases)

   • Automatically expands/contracts height based on text amount
   • Keeps top/bottom indentation consistent with defaults
   • Use for:
     • titles that may wrap into 2–3 lines
     • text that changes length

3. Fixed height

   • Height stays constant regardless of content length
   • Can cause layout mismatch
   • Speaker advises not to press it manually; prefer auto layout

Core lesson for components/cards:

• Manually stretching a text frame inside a component may break copy/linked instances across overrides.
• Proper workflow:
  • Link text to auto layout so the text container height follows the card height.
  • Example described:
    • when the card grows/shrinks, an auto-height text container should adjust accordingly.

---

Text alignment options

17) Alignment controls

Horizontal alignment:

• Left
• Center
• Right
• A fourth option (described as “disgrace in width”), i.e., justify (justified alignment)
  • The speaker says it’s hidden from the visible list (details to be discussed later, per the explanation).

Vertical alignment:

• aligned top-to-bottom or bottom-to-top within the container is also mentioned.

---

Speakers / sources featured

• Speaker/host (primary): an unnamed presenter (“Hi Guys…”) teaching Figma text typography and text layer behavior.

Category

Educational

---

Share this summary

Share on X/Twitter Share on Facebook Share on LinkedIn Share on Reddit Share on WhatsApp Share on Telegram

---

Is the summary off?

If you think the summary is inaccurate, you can reprocess it with the latest model.

Reprocess summary

Video