ΠŸΠ΅Ρ€Π΅Π²Π΅ΡΡ‚ΠΈ Π² ΠΊΡ€ΠΈΠ²Ρ‹Π΅ Π² Ρ„ΠΈΠ³ΠΌΠ΅: Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ тСкст Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Ρ„ΠΈΠ³ΡƒΡ€ΠΎΠΉ

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

UX/UI курс с нуля. Π£Ρ€ΠΎΠΊ 10. ΠžΡΠ½ΠΎΠ²Ρ‹ Figma VII. ΠšΡ€ΠΈΠ²Ρ‹Π΅

ΠΠΎΡΠ±Ρ€ΡŒ 2021


Figma ΠžΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ

Π’ сСдьмой части ΠΏΠΎ основам Figma Π²Ρ‹ освоитС Ρ€Π°Π±ΠΎΡ‚Ρƒ с ΠΊΡ€ΠΈΠ²Ρ‹ΠΌΠΈ Π½Π° ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅. И хотя Π²Ρ‹ ΡƒΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с Π±ΡƒΠ»Π΅Π²Ρ‹ΠΌΠΈ опСрациями, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ слоТныС Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ β€” это лишь Π²Π΅Ρ€Ρ…ΡƒΡˆΠΊΠ° айсбСрга. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Pen (пСрСводится ΠΊΠ°ΠΊ Ρ€ΡƒΡ‡ΠΊΠ° ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€ΠΎ) ΠΌΠΎΠΆΠ½ΠΎ воспроизвСсти Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½ΠΎ Π»ΡŽΠ±ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ.

Π—Π°Ρ‡Π΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ ΡƒΠΌΠ΅Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΊΡ€ΠΈΠ²Ρ‹ΠΌΠΈ? ОсобСнно пригодится Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ собствСнных ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ любого интСрфСйса. ΠΠ΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΈΠΊΡ‚ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ с нуля, достаточно ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΡΡ‰ΡƒΡŽ Π·Π°Π³ΠΎΡ‚ΠΎΠ²ΠΊΡƒ ΠΈ ΠΏΠΎΠ΄ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ/ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Ρ‚ΡŒ Π΅Π΅ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΏΠΎΠ΄ Π²Π°ΡˆΡƒ Π·Π°Π΄Π°Ρ‡Ρƒ.

Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…: отрисовка ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΡ‹ Ρ‚Π΅ ΠΆΠ΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹, СдинствСнноС ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅: ΠΎΠ½ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π±ΠΎΠ»Π΅Π΅ слоТны ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ Π΄Ρ€ΡƒΠ³ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ (ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅ внимания).

  • ΠšΡ€ΠΈΠ²Ρ‹Π΅ Π‘Π΅Π·ΡŒΠ΅
  • Π’ΠΈΠ΄Ρ‹ ΠΊΡ€ΠΈΠ²Ρ‹Ρ…
  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Pen Π² Figma
  • Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹Ρ… ΠΊΡ€ΠΈΠ²Ρ‹Ρ… ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°
  • Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΡ€ΠΈΠ²Ρ‹Ρ…
  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Move. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Ρ‚ΠΎΡ‡Π΅ΠΊ
  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Bend. Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΡ€ΠΈΠ²ΠΈΠ·Π½ΠΎΠΉ
  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Paint Bucket. Π—Π°Π»ΠΈΠ²ΠΊΠ° Π·Π°ΠΌΠΊΠ½ΡƒΡ‚Ρ‹Ρ… ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ²
  • Настройка ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ
  • Π‘ΠΊΡ€ΡƒΠ³Π»Π΅Π½ΠΈΠ΅ ΡƒΠ³Π»ΠΎΠ²
  • Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ Ρ‚ΠΎΡ‡Π΅ΠΊ
  • ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ Π² ΠΊΡ€ΠΈΠ²Ρ‹Π΅
  • Π‘Π°ΠΉΡ‚Ρ‹ с бСсплатными ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ
  • Экспорт Π² SVG
  • Π”ΠΎΠΌΠ°ΡˆΠ½Π΅Π΅ Π·Π°Π΄Π°Π½ΠΈΠ΅
  • Π’Ρ‹Π²ΠΎΠ΄Ρ‹

ΠšΡ€ΠΈΠ²Ρ‹Π΅ Π‘Π΅Π·ΡŒΠ΅

ΠšΡ€ΠΈΠ²Ρ‹Π΅ Π‘Π΅Π·ΡŒΠ΅ β€” это матСматичСский Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚ для описания ΠΊΡ€ΠΈΠ²Ρ‹Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ использовал ΠŸΡŒΠ΅Ρ€ Π‘Π΅Π·ΡŒΠ΅ Π² 1960-Ρ… Π³ΠΎΠ΄Π°Ρ… для проСктирования Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΊΡƒΠ·ΠΎΠ²ΠΎΠ² Π°Π²Ρ‚ΠΎΠΌΠΎΠ±ΠΈΠ»Π΅ΠΉ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Renault.

ВпослСдствии это ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ сыграло ΠΊΠ»ΡŽΡ‡Π΅Π²ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠ΅ Π² 2d ΠΈ 3d направлСниях. Π€ΠΈΠ³ΡƒΡ€Ρ‹ Π½Π° основС ΠΊΡ€ΠΈΠ²Ρ‹Ρ… Π‘Π΅Π·ΡŒΠ΅ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ, Π² зависимости ΠΎΡ‚ прилоТСния, Π½ΠΎ ΡΡƒΡ‚ΡŒ Π½Π΅ мСняСтся. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ Ρ‚Π΅Ρ€ΠΌΠΈΠ½Ρ‹: сплайны (spline) ΠΈ Β«ΠΏΡƒΡ‚ΠΈΒ» (path).

Π’ΠΈΠ΄Ρ‹ ΠΊΡ€ΠΈΠ²Ρ‹Ρ…

ВсС ΠΊΡ€ΠΈΠ²Ρ‹Π΅ Π‘Π΅Π·ΡŒΠ΅ ΠΌΠΎΠΆΠ½ΠΎ условно ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° нСсколько Π²ΠΈΠ΄ΠΎΠ² Π² зависимости ΠΎΡ‚ количСства Ρ‚ΠΎΡ‡Π΅ΠΊ, ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ½ΠΈ составлСны, Ρ‡Ρ‚ΠΎ ΠΈ опрСдСляСт ΠΈΡ… ΡΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ (смотритС рисунок свСрху слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ):

  • Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹Π΅
  • ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΈΡ‡Π½Ρ‹Π΅
  • кубичСскиС
  • Π²Ρ‹ΡΡˆΠΈΡ… порядков

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Π² графичСских прилоТСниях ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ кубичСских ΠΊΡ€ΠΈΠ²Ρ‹Ρ… Π‘Π΅Π·ΡŒΠ΅ для построСния Π»ΡŽΠ±Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌ. Π‘ Ρ‚Π΅ΠΎΡ€ΠΈΠ΅ΠΉ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ, ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ практичСской части.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Pen Π² Figma


Для построСния ΠΊΡ€ΠΈΠ²Ρ‹Ρ… Π² Figma ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт Pen (горячая клавиша P). Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½ΠΎ, Ρ‡Ρ‚ΠΎ с Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ любой стандартный ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ² (ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, ΠΊΡ€ΡƒΠ³ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅). Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, любой ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ² ΠΌΠΎΠΆΠ½ΠΎ быстро ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΊΡ€ΠΈΠ²Ρ‹Π΅. Но Π½Π°Ρ‡Π½Π΅ΠΌ ΠΌΡ‹ с Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹Ρ… ΠΊΡ€ΠΈΠ²Ρ‹Ρ…, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ Π½Π΅ ΡΠ³Π»Π°ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΈ итоговая Ρ„ΠΈΠ³ΡƒΡ€Π° выглядит ΡƒΠ³Π»ΠΎΠ²Π°Ρ‚ΠΎ.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΡ€ΠΈΠ²ΠΎΠΉ

ΠŸΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ дСйствий для создания ΠΊΡ€ΠΈΠ²ΠΎΠΉ выглядит Ρ‚Π°ΠΊ:

  1. Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Pen с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ клавиши P ΠΈΠ»ΠΈ ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ² ΠΏΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ΅ Ρ€ΡƒΡ‡ΠΊΠΈ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов.
  2. КликаСм Π² Ρ‚ΠΎΠΌ мСстС, Π³Π΄Π΅ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π²ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ вСрхняя панСль ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ помСнялась ΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ лишь 4 инструмСнта ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ «Done». Π’Π°ΠΊ Figma сигнализируСт, Ρ‡Ρ‚ΠΎ находится Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ рСдактирования ΠΊΡ€ΠΈΠ²ΠΎΠΉ.
  3. ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ ΠΊΠ»ΠΈΠΊΠ°Ρ‚ΡŒ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ области для задания Π½ΠΎΠ²Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ. Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρƒ нас Π΅ΡΡ‚ΡŒ Π΄Π²Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ, Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ Π»ΠΈΠ½ΠΈΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ.
  4. Π—Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Shift, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚ΡŒ ΡƒΠ³ΠΎΠ» Π½Π°ΠΊΠ»ΠΎΠ½Π° создаваСмых Π»ΠΈΠ½ΠΈΠΉ ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… ΠΊΡ€Π°Ρ‚Π½Ρ‹ΠΌΠΈ 45 градусам. На ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ это позволяСт с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹Π΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅, Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΈ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ.
  5. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ послСднюю Ρ‚ΠΎΡ‡ΠΊΡƒ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ Π΅ΡΡ‚ΡŒ нСсколько способов:

    • ΠΠ°ΠΆΠ°Ρ‚ΡŒ ΠΌΡ‹ΡˆΠΊΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΡƒ «Done» Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.
    • ΠΠ°ΠΆΠ°Ρ‚ΡŒ Enter Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅.
    • ΠΠ°ΠΆΠ°Ρ‚ΡŒ Esc Π΄Π²Π°ΠΆΠ΄Ρ‹. ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ заставит Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ созданиС ΠΊΡ€ΠΈΠ²ΠΎΠΉ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°. Π’ΠΎ Π΅ΡΡ‚ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ ΠΊΠ»ΠΈΠΊΠ°Ρ‚ΡŒ ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Ρƒ линию Π² Ρ€Π°ΠΌΠΊΠ°Ρ… ΠΎΠ΄Π½ΠΎΠ³ΠΎ слоя. Π’Ρ‚ΠΎΡ€ΠΎΠ΅ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ Esc заставит Figma Π²Ρ‹ΠΉΡ‚ΠΈ ΠΈΠ· Ρ€Π΅ΠΆΠΈΠΌΠ° рСдактирования.


Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, наша кривая ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»Π°ΡΡŒ ΡƒΠ³Π»ΠΎΠ²Π°Ρ‚ΠΎΠΉ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ³Π»Π°Π΄ΠΈΡ‚ΡŒ линию, вмСсто ΠΊΠ»ΠΈΠΊΠ° Π² процСссС создания Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΠΆΠ°Ρ‚ΡŒ Π»Π΅Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π΅Π΅ ΠΏΠΎΠΊΠ° Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ. Π”Π°Π»Π΅Π΅ отпускаСм Π»Π΅Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ.

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠ΅ΠΌΠ° ΠΌΠΎΠΆΠ½ΠΎ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ сглаТСнныС Π»ΠΈΠ½ΠΈΠΈ. ΠŸΠΎΠ½Π°Ρ‡Π°Π»Ρƒ это покаТСтся слоТным занятиСм, Π½ΠΎ с ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΎΠΉ Π²Ρ‹ ΠΏΠΎΠΉΠΌΠ΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ это достаточно ΡƒΠ΄ΠΎΠ±Π½ΠΎ. Плюс Π²Ρ‹ всСгда ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ, ΠΎ Ρ‡Π΅ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ рассказано Π½ΠΈΠΆΠ΅.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π·Π°ΠΌΠΊΠ½ΡƒΡ‚Ρ‹Π΅ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹, ΠΊΠΎΠ³Π΄Π° пСрвая ΠΈ послСдняя Ρ‚ΠΎΡ‡ΠΊΠΈ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚. Π­Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π² дальнСйшСм Π·Π°ΠΊΡ€Π°ΡΠΈΡ‚ΡŒ Π·Π°ΠΌΠΊΠ½ΡƒΡ‚Ρ‹Π΅ области.

РисуСм ΠΊΡ€ΡƒΠ³

Как я Ρ€Π°Π½Π΅Π΅ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π»Π°, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΡ€ΠΈΠ²Ρ‹Ρ… ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ всС Ρ‡Ρ‚ΠΎ ΡƒΠ³ΠΎΠ΄Π½ΠΎ. Π—Π½Π°ΡŽ, Ρ‡Ρ‚ΠΎ ΠΊΡ€ΡƒΠ³ Π½Π΅ самая слоТная Ρ„ΠΎΡ€ΠΌΠ° ΠΈΠ· Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ…, Π½ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠ΅ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠ°. К Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² построСнии сглаТСнных ΠΈ Π·Π°ΠΌΠΊΠ½ΡƒΡ‚Ρ‹Ρ… Ρ„ΠΈΠ³ΡƒΡ€. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ сСбС Π·Π°Π΄Π°Ρ‡Ρƒ, я нарисовала Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ сСтку. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ рисовании идСального ΠΊΡ€ΡƒΠ³Π°, Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΠΈ Π½Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΌ расстоянии ΠΈ с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½Ρ‹ΠΌΠΈ стСпСнями сглаТивания. ΠŸΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΠΌ.


ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΠΈ Π½ΡƒΠΆΠ½ΠΎ заТимая Π»Π΅Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΈ двигая курсор. ΠžΡ‚ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ Π»Π΅Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ слСдуСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ‚ΠΎΡ‚ ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€Π΅Π½Ρ‹ ΠΊΡ€ΠΈΠ²ΠΈΠ·Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ. Π’Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ хотя Π±Ρ‹ 10 ΠΌΠΈΠ½ΡƒΡ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈ ΠΏΠΎΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΉΡ‚Π΅ΡΡŒ Π² рисовании сглаТСнных ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ², Ρ‡Ρ‚ΠΎ Π±Ρ‹ ΠΏΡ€ΠΈΠ½ΠΎΡ€ΠΎΠ²ΠΈΡ‚ΡŒΡΡ.

Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΡ€ΠΈΠ²Ρ‹Ρ…

Как ΠΈ Π² случаС с ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π°ΠΌΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² просто Π²Ρ‹Π΄Π΅Π»ΠΈΠ² ΠΈΡ… ΠΈ потянув Π·Π° любой ΠΈΠ· ΡƒΠ³Π»ΠΎΠ² ΠΈΠ»ΠΈ сторон. Но Π½Π° этом возмоТности рСдактирования Π½Π΅ Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅:

  • Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Ρ‰Π΅ Π»ΠΈΠ½ΠΈΠΉ
  • Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΠΈ
  • ΠΠ°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΡ€ΠΈΠ²ΠΈΠ·Π½Ρƒ
  • Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π·Π°Π»ΠΈΠ²ΠΊΡƒ Π·Π°ΠΌΠΊΠ½ΡƒΡ‚Ρ‹ΠΌ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π°ΠΌ

Для Π½Π°Ρ‡Π°Π»Π° Π½ΡƒΠΆΠ½ΠΎ Π²ΠΎΠΉΡ‚ΠΈ Π² Ρ€Π΅ΠΆΠΈΠΌ рСдактирования:

  1. Π’Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ кривая, Π½ΠΎ ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²ΠΎΠ²: ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, эллипс, линия ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.
  2. Π”Π°Π»Π΅Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Π½ΠΈΠΆΠ΅:

    • ΠΠ°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Enter
    • Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΠΊΠ»ΠΈΠΊ ΠΏΠΎ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΌΡƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ. Π’ этом случаС ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΡΡ‚ΡŒ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ. ΠŸΠΎΠΆΠ°Π»ΡƒΠΉ это самый простой способ.
    • ΠšΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ Π»Π΅Π²ΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠ΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΈΠΊΠ° (Edit Object) свСрху Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅.

    ПослС этого панСль инструмСнтов прСобразится. Π‘Π»Π΅Π²Π° появятся Π½ΠΎΠ²Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с инструмСнтами рСдактирования сплайнов.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Move. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Ρ‚ΠΎΡ‡Π΅ΠΊ

Горячая клавиша V. ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΈΠ»ΠΈ нСсколько Ρ‚ΠΎΡ‡Π΅ΠΊ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΠΌΡ‹ΡˆΠΊΠΎΠΉ. Π’ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π·Π°ΠΆΠ°Ρ‚ΠΈΠ΅ клавиши Shift, ΠΊΠ°ΠΊ ΠΈ ΠΏΡ€ΠΈ построСнии Π½ΠΎΠ²ΠΎΠΉ ΠΊΡ€ΠΈΠ²ΠΎΠΉ. Π’Π°ΠΊΠΆΠ΅ для пСрСмСщСния Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρƒ (клавиши с стрСлками). Π­Ρ‚ΠΎΡ‚ инструмСнт активируСтся ΠΏΠΎ-ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ Π² Ρ€Π΅ΠΆΠΈΠΌ рСдактирования.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Bend. Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΡ€ΠΈΠ²ΠΈΠ·Π½ΠΎΠΉ

Π‘Π½Π°Ρ‡Π°Π»Π° Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠ΅ΠΌ инструмСнт Bend (Π² ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ ΡΠ³ΠΈΠ±Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΡƒΠΆΠ΅ подсказываСт Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅), ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ² ΠΏΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ΅ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ с двумя Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ (вторая справа) Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов. Для управлСния сглаТиваниСм Π»ΠΈΠ½ΠΈΠΈ:

  1. Подносим курсор ΠΊ любой Π»ΠΈΠ½ΠΈΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ двумя Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ. Π’ ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ курсора появится ΠΈΠΊΠΎΠ½ΠΊΠ° ΠΈΠ·ΠΎΠ³Π½ΡƒΡ‚ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ.
  2. Π—Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π»Π΅Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ ΠΈ тянСм. Линия Π½Π°Ρ‡Π½Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ваши двиТСния, ΠΏΡ‹Ρ‚Π°ΡΡΡŒ подстроится ΠΏΠΎΠ΄ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ курсора. Если Ρ„ΠΈΠ³ΡƒΡ€Π° Π±Ρ‹Π»Π° ΡƒΠ³Π»ΠΎΠ²Π°Ρ‚ΠΎΠΉ, Ρ‚ΠΎ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ появятся Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Ρ‚ΠΎΡ‡Π΅ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈ Π·Π°Π΄Π°ΡŽΡ‚ ΠΊΡ€ΠΈΠ²ΠΈΠ·Π½Ρƒ.
  3. ΠžΡ‚ΠΏΡƒΡΠΊΠ°Π΅ΠΌ Π»Π΅Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€ΠΈΠ²ΠΈΠ·Π½Ρƒ.


Для управлСния сглаТиваниСм Ρ‡Π΅Ρ€Π΅Π· Ρ‚ΠΎΡ‡ΠΊΡƒ ΠΊΡ€ΠΈΠ²ΠΎΠΉ:

  1. Подносим курсор ΠΊ любой Ρ‚ΠΎΡ‡ΠΊΠ΅ ΠΊΡ€ΠΈΠ²ΠΎΠΉ. Π’ ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ курсора появится ΠΈΠΊΠΎΠ½ΠΊΠ° с Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ ΠΈ двумя Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠΌΠΈ.
  2. Π—Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π»Π΅Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ ΠΈ тянСм. Из Ρ‚ΠΎΡ‡ΠΊΠΈ вытянСтся Π΄Π²Π΅ симмСтричныС Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅, Π»ΠΈΠ½ΠΈΠΈ ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ Ρ‚ΠΎΡ‡ΠΊΠΈ сгладятся. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ лишь ΠΎΠ΄Π½ΠΎΠΉ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ, Π·Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Alt. Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ привязку ΠΊ ΡƒΠ³Π»Ρƒ Π½Π°ΠΊΠ»ΠΎΠ½Π° (кратная 45 градусам), Π·Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Shift.
  3. ΠžΡ‚ΠΏΡƒΡΠΊΠ°Π΅ΠΌ Π»Π΅Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€ΠΈΠ²ΠΈΠ·Π½Ρƒ.

НиТС ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ всС Π²Ρ‹ΡˆΠ΅ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»Π΅Π½Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ использованиС клавиш Shift ΠΈ Alt:


Для управлСния сглаТиваниСм Ρ‡Π΅Ρ€Π΅Π· Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Ρ‚ΠΎΡ‡ΠΊΠΈ:

  1. Подносим курсор ΠΊ любой Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΊΡ€ΠΈΠ²ΠΎΠΉ. Π’ ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ курсора появится ΠΈΠΊΠΎΠ½ΠΊΠ° с Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ ΠΈ двумя Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠΌΠΈ.
  2. ΠŸΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π°Ρ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ΄Π°Π»Π΅Π½Π°.
  3. КликаСм Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΈ тянСм курсор, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡƒΠ³ΠΎΠ» Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ вмСстС с ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠΉ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ симмСтрично. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡƒΠ³ΠΎΠ» ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ΄Π½ΠΎΠΉ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ, Π·Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Alt. Π’Π°ΠΊΠΆΠ΅ Ρ‚ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π·Π°ΠΆΠ°Ρ‚ΠΈΠ΅ клавиши Shift для привязки ΠΊ ΡƒΠ³Π»Ρƒ Π½Π°ΠΊΠ»ΠΎΠ½Π°.


Часто случаСтся, Ρ‡Ρ‚ΠΎ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… Π½Π΅ Π²ΠΈΠ΄Π½ΠΎ, Π½ΠΎ ΠΏΠΎ Ρ„ΠΎΡ€ΠΌΠ΅ Π»ΠΈΠ½ΠΈΠΈ Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Ρ‚Π°ΠΌ Π΅ΡΡ‚ΡŒ. Π’ Ρ‚Π°ΠΊΠΈΡ… случаях Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° инструмСнт Move ΠΈ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ. ΠŸΠΎΡΠ²ΡΡ‚ΡΡ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅, послС Ρ‡Π΅Π³ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π°Π·Π°Π΄ Π² Ρ€Π΅ΠΆΠΈΠΌ Bend.

НС самый ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ способ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅. Но Π΅ΡΡ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅. Достаточно постоянно Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Move, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅. А Π² Ρ€Π΅ΠΆΠΈΠΌ Bend ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ горячСй клавиши Ctrl ΠΈΠ»ΠΈ Command Π½Π° MacOs. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π³ΠΎΡ€ΡΡ‡ΡƒΡŽ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΠΆΠ°Ρ‚ΡŒ ΠΏΠΎΠΊΠ° Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ инструмСнт, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ сразу послС отпускания клавиши Π²Ρ‹ Π²Π΅Ρ€Π½Π΅Ρ‚Π΅ΡΡŒ Π² Ρ€Π΅ΠΆΠΈΠΌ Move.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ, ΠΊΠ°ΠΊ это выглядят Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΌΡ‹ Π½Π°Ρ‡ΠΈΠ½Π°Π΅ΠΌ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Bend, Π²ΠΈΠ΄Π½Ρ‹ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π²ΡƒΡ… Ρ‚ΠΎΡ‡Π΅ΠΊ. Π”Π°Π»Π΅Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡΡ Π² Ρ€Π΅ΠΆΠΈΠΌ Move, выдСляСм Π½ΡƒΠΆΠ½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ Π·Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Ctrl (Command Π½Π° MacOs), Ρ‡Ρ‚ΠΎΠ±Ρ‹ быстро ΠΏΠΎΠ΄ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΈΠ»ΠΈ ΠΊΡ€ΠΈΠ²ΠΈΠ·Π½Ρƒ Π»ΠΈΠ½ΠΈΠΉ:

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Paint Bucket. Π—Π°Π»ΠΈΠ²ΠΊΠ° Π·Π°ΠΌΠΊΠ½ΡƒΡ‚Ρ‹Ρ… ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ²

ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ Π²Ρ‹Π±ΠΎΡ€ΠΎΡ‡Π½ΠΎ Π·Π°ΠΊΡ€Π°ΡΠΈΡ‚ΡŒ Π·Π°ΠΌΠΊΠ½ΡƒΡ‚Ρ‹Π΅ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Ρ‹ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹. Настройки Π·Π°Π»ΠΈΠ²ΠΊΠΈ доступны Π² сСкции Fill ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‚ возмоТности ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²ΠΎΠ². Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ ΠΏΠΎ использованию:

  1. Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ² ΠΏΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ΅ ΠΊΠ°ΠΏΠ»ΠΈ ΠΈΠ»ΠΈ Π½Π°ΠΆΠ°Π² Π³ΠΎΡ€ΡΡ‡ΡƒΡŽ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ B.
  2. КликаСм Π²Π½ΡƒΡ‚Ρ€ΠΈ Π·Π°ΠΌΠΊΠ½ΡƒΡ‚ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΊΡ€Π°ΡΠΈΡ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ. К ΠΈΠΊΠΎΠ½ΠΊΠ΅ ΠΊΠ°ΠΏΠ»ΠΈ добавится плюсик.
  3. ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΊΠ»ΠΈΠΊΠ°Π΅ΠΌ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π·Π°ΠΊΡ€Π°ΡˆΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ Π·Π°Π»ΠΈΠ²ΠΊΡƒ.

Казалось Π±Ρ‹, Π² Ρ‡Π΅ΠΌ прСимущСство этого инструмСнта? Π’Π΅Π΄ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Π·Π°Π»ΠΈΠ²ΠΊΡƒ Ρ‡Π΅Ρ€Π΅Π· ΡΠ΅ΠΊΡ†ΠΈΡŽ Fill Π² ΠΏΠ°Π½Π΅Π»ΠΈ свойств справа. ВсС Π²Π΅Ρ€Π½ΠΎ, Π½ΠΎ Ссли понадобится Π·Π°ΠΊΡ€Π°ΡΠΈΡ‚ΡŒ Π½Π΅ всС ΠΊΠΎΠ½Ρ‚ΡƒΡ€Ρ‹, Π° лишь Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅, Ρ‚ΠΎ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ Ρ‚Π°ΠΊ просто.

Настройка ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ

ΠœΡ‹ ΡƒΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ настройками ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ ΠΈΠ· ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΡƒΡ€ΠΎΠΊΠ° ΠΏΠΎ Figma. Π”Π°Π²Π°ΠΉΡ‚Π΅ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ ΠΈ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Π΅ ΠΎΠΏΡ†ΠΈΠΈ:

  • Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ мСню Π²Π½ΠΈΠ·Ρƒ слСва ΠΈ справа Π·Π°Π΄Π°ΡŽΡ‚ Ρ„ΠΎΡ€ΠΌΡƒ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ ΠΈ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π°. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Ссли ΠΊΠΎΠ½Ρ‚ΡƒΡ€ Π·Π°ΠΌΠΊΠ½ΡƒΡ‚Ρ‹ΠΉ, Ρ‚ΠΎ ΠΌΡ‹ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠΌ.
  • По ΠΊΠ»ΠΈΠΊΡƒ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ с трСмя Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ Π²Π½ΠΈΠ·Ρƒ справа ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΌ настройкам. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π½ΠΈΠΆΠ΅.
  • Stroke style β€” ΡΡ‚ΠΈΠ»ΡŒ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ: Solid β€” сплошная, Dashed β€” пунктирная. ΠŸΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ³ΠΎ стиля Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹: Dash β€” Π΄Π»ΠΈΠ½Π° ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π°, Gap β€” Π΄Π»ΠΈΠ½Π° пропуска, Dash cap β€” Ρ„ΠΎΡ€ΠΌΠ° ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π°.
  • Join β€” Ρ„ΠΎΡ€ΠΌΠ° соСдинСния Ρ‚ΠΎΡ‡Π΅ΠΊ: Miter β€” автоматичСски ΡΠΊΠ°ΡˆΠΈΠ²Π°Π΅Ρ‚ΡΡ Ссли ΡƒΠ³ΠΎΠ» Π½Π°ΠΊΠ»ΠΎΠ½Π° мСньшС Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅ΠΌ Miter angle, Bevel β€” постоянно скошСнная, Round β€” скруглСнная.

Π‘ΠΊΡ€ΡƒΠ³Π»Π΅Π½ΠΈΠ΅ ΡƒΠ³Π»ΠΎΠ²

Π‘ΠΊΡ€ΡƒΠ³Π»ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΊΡ€ΠΈΠ²ΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ, ΠΈ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ способом:

  1. Π’Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ сплайн ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² Ρ€Π΅ΠΆΠΈΠΌ рСдактирования.
  2. Π’Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ.
  3. Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒ скруглСния Π² ΠΏΠΎΠ»Π΅ Corner radius Π² ΠΏΠ°Π½Π΅Π»ΠΈ свойств справа.

Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠΉ способ скруглСния Π½Π΅ влияСт Π½Π° Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΡƒΠ³Π»ΠΎΠ²Π°Ρ‚Ρ‹ΠΌΠΈ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π°ΠΌΠΈ. Если Π²Ρ‹ Π·Π°Π΄Π°Π»ΠΈ ΠΊΡ€ΠΈΠ²ΠΈΠ·Π½Ρƒ Π»ΠΈΠ½ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Bend, Ρ‚ΠΎ скруглСниС Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ Ρ‚ΠΎΡ‡Π΅ΠΊ

Как я ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π»Π° Π²Ρ‹ΡˆΠ΅, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π² любой ΠΌΠΎΠΌΠ΅Π½Ρ‚. ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ войдя Π² Ρ€Π΅ΠΆΠΈΠΌ рСдактирования, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ для копирования Ρ‚ΠΎΡ‡ΠΊΠΈ:

  1. Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Move (клавиша V).
  2. Наводим курсор Π½Π° Ρ‚ΠΎΡ‡ΠΊΡƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Ρ…ΠΎΡ‚ΠΈΠΌ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.
  3. Π—Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡƒ Alt. ΠšΡƒΡ€ΡΠΎΡ€ измСнится Π½Π° Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ, ΠΊΠ°ΠΊ Π±Ρ‹ подсказывая Π½Π°ΠΌ, Ρ‡Ρ‚ΠΎ Π³ΠΎΡ‚ΠΎΠ² ΠΊ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ Ρ‚ΠΎΡ‡ΠΊΠΈ.
  4. Π—Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π»Π΅Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ ΠΈ пСрСтаскиваСм курсор. Новая Ρ‚ΠΎΡ‡ΠΊΠ° послСдуСт Π·Π° курсором. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ образуСтся Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° линия, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Π°Ρ Ρ‚ΠΎΡ‡ΠΊΠ° Π±Ρ‹Π»Π° связана Π»ΠΈΠ½ΠΈΠ΅ΠΉ с Π΄Ρ€ΡƒΠ³ΠΎΠΉ.

Для добавлСния Ρ‚ΠΎΡ‡ΠΊΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ Π»ΠΈΠ½ΠΈΠΈ:

  1. Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Pen (клавиша P).
  2. Наводим курсор Π²Π½ΡƒΡ‚Ρ€ΡŒ Π»ΠΈΠ½ΠΈΠΈ Ρ‚ΡƒΠ΄Π°, ΠΊΡƒΠ΄Π° собираСмся Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΡƒ. Figma Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄ΡΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π½Π°ΠΌ сСрСдину Π»ΠΈΠ½ΠΈΠΈ. Π’Π°ΠΊΠΆΠ΅ ΠΊ курсору Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ добавится плюсик.
  3. Π”Π΅Π»Π°Π΅ΠΌ ΠΊΠ»ΠΈΠΊ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ. Π’ΠΎΡ‡ΠΊΠ° Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π°.

Для удалСния Ρ‚ΠΎΡ‡ΠΊΠΈ:

  1. Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнт Pen (клавиша P).
  2. Наводим курсор Π½Π° Ρ‚ΠΎΡ‡ΠΊΡƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Ρ…ΠΎΡ‚ΠΈΠΌ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ.
  3. Π—Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Alt. К курсору добавится минус Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ.
  4. Π”Π΅Π»Π°Π΅ΠΌ ΠΊΠ»ΠΈΠΊ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ. Π’ΠΎΡ‡ΠΊΠ° ΡƒΠ΄Π°Π»Π΅Π½Π°.
  5. Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚: Ссли Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΡƒ инструмСнтом Move ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π΅Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Delete, Ρ‚ΠΎ Figma Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ сосСдниС Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ Π²Π½ΡƒΡ‚Ρ€ΠΈ слоя. Π­Ρ‚ΠΎΡ‚ способ ΠΈΠ΄Π΅Π°Π»Π΅Π½ Ссли Π²Ρ‹ удаляСтС ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Ρ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, лишниС элСмСнты скачанной ΠΈΠΊΠΎΠ½ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ Π΅Π΅.

Π”ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈ Π²Π½Π΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Π»ΠΈΠ½ΠΈΠΉ. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ².

ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ Π² ΠΊΡ€ΠΈΠ²Ρ‹Π΅

На Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… этапах Ρ€Π°Π±ΠΎΡ‚Ρ‹, Π° особСнно ΠΏΠ΅Ρ€Π΅Π΄ экспортом ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ SVG ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ всС Π»ΠΈΠ½ΠΈΠΈ Π² ΠΊΠΎΠ½Ρ‚ΡƒΡ€Ρ‹. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡƒ Π² Π·Π°ΠΊΡ€Ρ‹Ρ‚Ρ‹Π΅ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Ρ‹ с Π·Π°Π»ΠΈΠ²ΠΊΠΎΠΉ. Π­Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. ПослС этой ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ Π²Ρ‹ ΡƒΠΆΠ΅ Π½Π΅ смоТСтС Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ ΠΈΠ»ΠΈ Π»ΡŽΠ±Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π΅Π΅ свойства ΠΊΡ€ΠΎΠΌΠ΅ Ρ†Π²Π΅Ρ‚Π°. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ выполняйтС эту ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΡŽ Π² послСднюю ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅ΡΡ‚ΡŒ нСсколько способов:

  • Π’Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Ctrl + Shift + O ΠΈΠ»ΠΈ Shift + Command + O Π½Π° MacOs.
  • Π’Ρ‹Π·ΠΎΠ²ΠΈΡ‚Π΅ контСкстноС мСню Π½Π°ΠΆΠ°Π² ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ Π½Π° Π½ΡƒΠΆΠ½ΠΎΠΌ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΌ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π΅. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ Outline stroke.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΡˆΠ»ΠΎ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ достаточно Π²ΠΎΠΉΡ‚ΠΈ Π² Ρ€Π΅ΠΆΠΈΠΌ рСдактирования ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ ΠΊΡ€ΠΈΠ²Ρ‹Π΅.

Π‘Π°ΠΉΡ‚Ρ‹ с бСсплатными ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ² Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΊΡ€ΠΈΠ²Ρ‹ΠΌΠΈ. Π’ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ ΡƒΡ€ΠΎΠΊΠ΅ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Figma Π²Ρ‹ ΡƒΠ·Π½Π°Π»ΠΈ, ΠΊΠ°ΠΊ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ пСрСтаскивания. Π’ΠΎΠ³Π΄Π° ΠΌΡ‹ использовали растровыС Ρ„Π°ΠΉΠ»Ρ‹, Π½ΠΎ с Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΌΠΈ SVG-Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ всС происходит Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅.

БущСствуСт мноТСство сайтов с бСсплатными SVG-ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ. Они ΡƒΠ΄ΠΎΠ±Π½Ρ‹ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΈΡΠΊΠ°Ρ‚ΡŒ ΠΏΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ словам. Π’ΡƒΡ‚ Π½Π°ΠΌ Π½Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π±Π΅Π· Π·Π½Π°Π½ΠΈΠΉ английского языка ΠΈΠ»ΠΈ Google Translate. А Π²ΠΎΡ‚ ΠΈ наш список:

  • The Noun Project β€” 3 000 000+ (Π΄Π°, Π±ΠΎΠ»Π΅Π΅ 3-Ρ… ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ΠΎΠ²) бСсплатных ΠΈΠΊΠΎΠ½ΠΎΠΊ с ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ поиском. Много Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… Π½Π°Π±ΠΎΡ€ΠΎΠ² ΠΏΠΎ Ρ‚Π΅ΠΌΠ°ΠΌ.
  • Font Awesome β€” 1600+ бСсплатных ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΠΎΠ΄Π½ΠΎΠΌ стилС с Ρ€ΡƒΠ±Ρ€ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ.
  • Cursor.in β€” ΠΊΡ€ΠΎΡˆΠ΅Ρ‡Π½Ρ‹ΠΉ сайт с ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠ΅ΠΉ всСх курсоров MacOs.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ Π½Π° The Noun Project, Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ строкой поиска. Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° я Π²Π²Π΅Π»Π° ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово energy ΠΈ Π½Π°ΠΆΠ°Π»Π° Enter. Загрузится список ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΏΠΎ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ²ΡˆΠ΅ΠΉΡΡ Π½ΡƒΠΆΠ½ΠΎ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ. Π’ ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠ΅ΠΉΡΡ страницС Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Get this icon. Π”Π°Π»Π΅Π΅ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Basic Download, ΠΏΠΎΡ‚ΠΎΠΌ Continue. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡƒ SVG. Иконка скачиваСтся.

Экспорт Π² SVG

Для экспорта ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² SVG-Ρ„Π°ΠΉΠ» Π΅Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ:

  1. Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ пустой Ρ„Ρ€Π΅ΠΉΠΌ ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚. Π˜Ρ… ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ нСсколько. Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ² для ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΊΡ€Π°Ρ‚Π½Ρ‹ 8 пиксСлям. ΠŸΠΎΠ΄ΠΎΠΉΠ΄ΡƒΡ‚ Ρ‚Π°ΠΊΠΈΠ΅: 16×16, 24×24, 32×32 ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Если ΠΈΠΊΠΎΠ½ΠΊΠ° Π½Π΅ Π²Π»Π°Π·ΠΈΡ‚, ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅ΠΌ Π΅Π΅.
  2. Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Ρ„Ρ€Π΅ΠΉΠΌΠ°. Π£Π±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ отступы Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½Ρ‹Π΅.
  3. ΠŸΠ΅Ρ€Π΅Π²Π΅ΡΡ‚ΠΈ всС ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ Π² ΠΊΡ€ΠΈΠ²Ρ‹Π΅.
  4. ΠŸΠ΅Ρ€Π΅ΠΊΡ€Π°ΡΠΈΡ‚ΡŒ всС элСмСнты Π² Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΡƒΠΌΠ΅ΡŽΡ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Π°ΡˆΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ, Ссли Π½ΡƒΠΆΠ½ΠΎ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ всС Π³ΠΎΡ‚ΠΎΠ²ΠΎ. ΠžΡΡ‚Π°Π»ΠΎΡΡŒ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ сам экспорт:

  1. ВыдСляСм Ρ„Ρ€Π΅ΠΉΠΌ с ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ.
  2. Π’ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΊΠ»ΠΈΠΊΠ°Π΅ΠΌ ΠΏΠΎ ΠΏΠ»ΡŽΡΠΈΠΊΡƒ Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ² сСкции Export (ΠΎΠ½Π° послСдняя).
  3. Π’ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΌ мСню мСняСм Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π½Π° SVG.

Π”ΠΎΠΌΠ°ΡˆΠ½Π΅Π΅ Π·Π°Π΄Π°Π½ΠΈΠ΅

Π”ΠΎΠΌΠ°ΡˆΠ½ΠΈΠ΅ задания большС Π½Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡŽΡ‚ΡΡ для Π³Ρ€Π°ΠΆΠ΄Π°Π½ россии. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ ΠΈΠ· россии, послС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ оставитС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ с домашним Π·Π°Π΄Π°Π½ΠΈΠ΅ΠΌ Π² ΠΊΠΎΠ½Ρ†Π΅ ΡƒΡ€ΠΎΠΊΠ° Π½Π° сайтС, Π½Π°ΠΏΠΈΡˆΠΈΡ‚Π΅ ΠΌΠ½Π΅ Π² Π΄ΠΈΡ€Π΅ΠΊΡ‚ Π˜Π½ΡΡ‚Π°Π³Ρ€Π°ΠΌΠΌ @frusia.pro

  1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ 8 ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ нарисуйтС ΠΈΡ… с использованиСм инструмСнта Pen.
  2. Π—Π°Π΄Π°Π½ΠΈΠ΅ ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½Π½ΠΎΠΉ слоТности. Π’Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ 4 ΠΈΠΊΠΎΠ½ΠΊΠΈ, упроститС ΠΈΡ… ΠΈ сдСлайтС ΠΎΠ±Π²ΠΎΠ΄ΠΊΡƒ ΠΏΠΎΡ‚ΠΎΠ»Ρ‰Π΅.
  3. ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΡŒΡ‚Π΅ всС нарисованныС ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ экспортируйтС ΠΈΡ… Π² Π΄Π²Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ°ΠΏΠΊΠΈ (light, regular β€” для толстых). Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ понятныС названия. ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ Π΄Π²Π΅ ΠΏΠ°ΠΏΠΊΠΈ Π² zip-Π°Ρ€Ρ…ΠΈΠ². Π‘Π°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ Π°Ρ€Ρ…ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹, Ссли Π½Π΅ ΡƒΠΌΠ΅Π΅Ρ‚Π΅.

Π’Ρ‹Π²ΠΎΠ΄Ρ‹

Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ Π²Ρ‹ познакомились с ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΌΠΈ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ°ΠΌΠΈ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΊΡ€ΠΈΠ²Ρ‹ΠΌΠΈ. ОбъСдинив эти знания с Π±ΡƒΠ»Π΅Π²Ρ‹ΠΌΠΈ опСрациями ΠΌΠΎΠΆΠ½ΠΎ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ любой слоТности. Но это ΡƒΠΆΠ΅ большС спСциализация графичСского Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°. Π’Π°ΠΌ ΠΆΠ΅ Π²Π°ΠΆΠ½ΠΎ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΈ ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Ρ‚ΡŒ Π΅Π΅ ΠΏΠΎΠ΄ ваши Π·Π°Π΄Π°Ρ‡ΠΈ.

ΠŸΡ€ΠΈΠ΄ΡƒΠΌΡ‹Π²Π°Π½ΠΈΠ΅ ΠΈ отрисовка ΠΈΠΊΠΎΠ½ΠΎΠΊ это ΠΎΡ‡Π΅Π½ΡŒ ΡˆΠΈΡ€ΠΎΠΊΠ°Ρ ΠΈ слоТная Ρ‚Π΅ΠΌΠ°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ Π΅Ρ‰Π΅ Π½Π΅ Ρ€Π°Π· Π·Π°Ρ‚Ρ€ΠΎΠ½Π΅ΠΌ Π² дальнСйшСм.

ΠŸΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π° мСня Π² Instagram @frusia.pro, Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π² курсС анонсов Π½ΠΎΠ²Ρ‹Ρ… ΡƒΡ€ΠΎΠΊΠΎΠ², смотритС ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ домашСк Π² сторис, Π·Π°Π΄Π°Π²Π°ΠΉΡ‚Π΅ вопросы, Π° Ρ‚Π°ΠΊΠΆΠ΅ вас ΠΆΠ΄Π΅Ρ‚ мноТСство ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… постов ΠΏΡ€ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½.

Stay tuned!

Π’Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ Roadmap

Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€ΠΈΠ²Ρ‹Π΅ ΠΈ ΠΏΠ΅Ρ€ΠΎ Π² Figma β€” инструкция ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

Для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ² инструмСнт ΠΏΠ΅Ρ€ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ слоТным, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ рисуСт Π½Π΅ совсСм Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ взгляд. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡ‚Ρ€Π΅Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, ΠΈ приобрСсти Π½Π°Π²Ρ‹ΠΊ. Но для создания красивого соврСмСнного Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π±Π΅Π· этого инструмСнта Π½Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ. Π˜Ρ‚Π°ΠΊ, рассмотрим, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΠ΅Ρ€ΠΎ, ΠΈ ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΡ€ΠΈΠ²Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ Π² Π€ΠΈΠ³ΠΌΠ΅.

Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° создадим Π΄Π²Π° Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°. ΠŸΡƒΡΡ‚ΡŒ это Π±ΡƒΠ΄ΡƒΡ‚ Π΄Π²Π° ΠΊΡ€ΡƒΠ³Π° Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ². Если Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ эти ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹, Ρ‚ΠΎ Π²Π²Π΅Ρ€Ρ…Ρƒ появится Π²ΠΊΠ»Π°Π΄ΠΊΠ° объСдинСния Π³Ρ€ΡƒΠΏΠΏΡ‹. Π’ Π½Π΅ΠΉ Π΅ΡΡ‚ΡŒ нСсколько Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ. Β«Union selectionΒ» — это объСдинСниС Π΄Π²ΡƒΡ… элСмСнтов. Β Β 

Вторая функция Π² этом спискС Β«Subtract selectionΒ». Она позволяСт Π²Ρ‹Ρ‡Π΅ΡΡ‚ΡŒ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ слой, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚ΠΎΡ‚ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» Π½Π°Π»ΠΎΠΆΠ΅Π½ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ. ΠŸΡ€ΠΈ этом Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ слой Π½ΠΈΠΊΡƒΠ΄Π° Π½Π΅ дСваСтся, с Π½ΠΈΠΌ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ.

Ѐункция Β«Intersect selectionΒ» оставляСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ пСрСсСчСния Π΄Π²ΡƒΡ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ².Β 

Β«Exclude selectionΒ» — ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ области пСрСсСчСния Π΄Π²ΡƒΡ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ².

ПослСдняя функция Π² этом Ρ€Π°Π·Π΄Π΅Π»Π΅ – Β«Flatten selectionΒ». ГорячиС клавиши Β«Ctrl+EΒ». Π’Ρ‹Π±Ρ€Π°Π² Π΄Π°Π½Π½Ρ‹ΠΉ инструмСнт, ваши Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ соСдинятся Π² ΠΎΠ΄ΠΈΠ½ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚. ΠŸΡ€ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ Π²Ρ‹ ΡƒΠΆΠ΅ Π½Π΅ смоТСтС ΠΈΡ… ΠΎΡ‚Π΄Π΅Π»ΡΡ‚ΡŒ.Β 

ΠšΠ»ΠΈΠΊΠ½ΡƒΠ² Π½Π° этот ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, Ρƒ вас появятся возмоТности Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΠΊΡ€ΠΈΠ²Ρ‹Ρ… Π»ΠΈΠ½ΠΈΠΉ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒΡΡ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ Π»ΡŽΠ±Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌ.

ИзмСнСниС Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² происходит ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ‚ΠΎΡ‡Π΅ΠΊ. ЗаТимая Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ Ρ‚ΠΎΡ‡ΠΊΡƒ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‚ΡΠ½ΡƒΡ‚ΡŒ Π·Π° Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π»ΠΈΠ½ΠΈΠΈ Π² стороны, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ ΠΈΠ·Π³ΠΈΠ±Π°. Β 

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π€ΠΈΠ³ΠΌΠ° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ SVG Ρ„Π°ΠΉΠ»ΠΎΠ². НапримСр, Ссли Π²Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, тСкст, ΠΈΠ»ΠΈ Π»ΡŽΠ±ΡƒΡŽ Π΄Ρ€ΡƒΠ³ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² этом Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅, Ρ‚ΠΎ ΠΎΠ½Π° добавится ΠΊΠ°ΠΊ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ рСдактируСтся Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ рассмотрим, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ инструмСнт Β«ΠŸΠ΅Ρ€ΠΎΒ» (Pen). Горячая клавиша Β«PΒ».

Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΌΡ‹ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΠΌ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот инструмСнт, Π½ΠΎ ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΈ создании Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта? Допустим Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ волнистый ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρƒ сСкциями Π² лэндингС. Для этого Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Β«ΠŸΠ΅Ρ€ΠΎΒ». Π—Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΎΠ²Π΅Π΄ΠΈΡ‚Π΅ Ρ€ΠΎΠ²Π½ΡƒΡŽ линию ΠΎΡ‚ края Ρ„Ρ€Π΅ΠΉΠΌΠ°, Π·Π°ΠΆΠ°Π² Π»Π΅Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Π΄ΠΎ сСрСдины холста.

Π”Π°Π»Π΅Π΅ Π½Π΅ отпуская Π»Π΅Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ, ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… Π»ΠΈΠ½ΠΈΠΉ сдСлайтС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ Π²Π°ΠΌ ΠΈΠ·Π³ΠΈΠ± Π²Π²Π΅Ρ€Ρ….

ПослС этого отпуститС Π»Π΅Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ ΠΈ снова Π·Π°ΠΆΠΌΠΈΡ‚Π΅ Π΅Π΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΈΠ·Π³ΠΈΠ± продолТится Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΠΈ Ρ‚ΠΎΠΉ ΠΆΠ΅ Π»ΠΈΠ½ΠΈΠΈ с Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ. Π’ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ Ρƒ вас получится волнистая линия, ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡŽΡ‰Π°Ρ Π΄Π²Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ.Β 

Π”Π°Π»Π΅Π΅ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Β«ShiftΒ» Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ прямыС Π»ΠΈΠ½ΠΈΠΈ Ρ‚Π΅ΠΌ ΠΆΠ΅ Β«ΠŸΠ΅Ρ€ΠΎΠΌΒ» ΠΏΠΎ краям Ρ„Ρ€Π΅ΠΉΠΌΠ°.

Π’ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ Ρƒ вас получится цСлостная Ρ„ΠΈΠ³ΡƒΡ€Π°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π² дальнСйшСм Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

НапримСр, Π² ΠΏΡ€Π°Π²ΠΎΠΉ части интСрфСйса Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ функциями, ΠΈ произвСсти ΠΎΠ±Π²ΠΎΠ΄ΠΊΡƒ элСмСнта, ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π·Π°Π»ΠΈΠ²ΠΊΡƒ Π»ΡŽΠ±Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ.

Π’ послСдствии Π² Ρ‚Π°ΠΊΡƒΡŽ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ тСкст. По Ρ‚Π°ΠΊΠΎΠΌΡƒ ΠΆΠ΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ, панСль мСню сайта ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты. Π”Π°Π½Π½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ ΠΌΠΎΠ³ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² создании сайта. Π’Π°ΠΊΠΎΠΉ Ρ„ΠΎΠ½ сохраняСтся Π² Π²ΠΈΠ΄Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG.

КакиС Π΅Ρ‰Π΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ использования инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ»? Допустим, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΏΠΎΡ…ΠΎΠΆΠΈΠΉ Π½Π° ΡΡ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½ΡƒΡŽ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΡ€ΡƒΠ³ ΠΈΠ»ΠΈ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, Π½ΠΎ с нСбольшими измСнСниями. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ эту Ρ„ΠΈΠ³ΡƒΡ€Ρƒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ. Как это дСлаСтся ΠΌΡ‹ рассмотрСли Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΡƒΡ€ΠΎΠΊΠ΅. Π”Π°Π»Π΅Π΅ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ Π½Π° эту Ρ„ΠΈΠ³ΡƒΡ€Ρƒ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π°ΠΊΡ‚ΠΈΠ²ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ инструмСнт Β«ΠŸΠ΅Ρ€ΠΎΒ». Π’Π½ΡƒΡ‚Ρ€ΠΈ этого элСмСнта появятся Π»ΠΈΠ½ΠΈΠΈ, Π° сама Ρ„ΠΈΠ³ΡƒΡ€Π° ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Ρ‚Π΅Ρ‚ Ρ‚ΠΎΡ‡ΠΊΠΈ, двигая Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ смоТСтС Π²ΠΈΠ΄ΠΎΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ.Β  Β Β 

НапримСр, Ссли ΠΏΠΎΡ‚ΡΠ½ΡƒΡ‚ΡŒ Π·Π° Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ, Ρ‚ΠΎ ΠΈΠ· ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π° Ρƒ вас получится Ρ„ΠΈΠ³ΡƒΡ€Π° похоТая Π½Π° Π΄ΠΎΠΌ.

Π˜Ρ‚Π°ΠΊ, ΠΈΠ· этого ΡƒΡ€ΠΎΠΊΠ° Π²Ρ‹ ΡƒΠ·Π½Π°Π»ΠΈ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΡ€ΠΈΠ²Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ инструмСнт Β«ΠŸΠ΅Ρ€ΠΎΒ», Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ дизайнСрскиС элСмСнты. Β Β Β 

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ссылки:

  • БСсплатный видСокурс ΠΏΠΎ Figma ΠΎΡ‚ GeekBrains;
  • ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ курс Figma 2.0 для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ² ΠΎΡ‚ SkillBox;
  • ΠŸΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ ΠΎΠ½Π»Π°ΠΉΠ½ курс ΠΏΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ с нуля ΠΎΡ‚ SkillBox.

ИспользованиС инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ» Π² Figma

Π’ Figma Π΅ΡΡ‚ΡŒ инструмСнты для создания ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π·Π½Π°Ρ‡ΠΊΠΈ, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹ ΠΈΠ»ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этих инструмСнтов Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Figma ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ прилоТСниями, Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Figma постоянно. Для этого Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ ΠΎ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… сСтях ΠΈ фантастичСских возмоТностях создания Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ², Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠ»ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ» ΠΈ создания Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΈΠ· ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ….

ВсСм Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Ρ€Π°Π½ΠΎ ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π΄Π½ΠΎ понадобится ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ графичСский элСмСнт, ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ» ΠΎΠ½ΠΈ смогут ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ своих Π²Π΅Π±-страниц; посмотрим ΠΊΠ°ΠΊ это дСлаСтся!

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΠ΅Ρ€ΠΎ ΠΈ для Ρ‡Π΅Π³ΠΎ ΠΎΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ?

Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ Π² Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ сСти, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΏΠ΅Ρ€ΠΎΠΌ. ВСкторная ΡΠ΅Ρ‚ΡŒ β€” это ΡƒΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΏΡƒΡ‚Π΅ΠΉ, ΠΈ Figma ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΅Π΅ для ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ„ΠΈΠ³ΡƒΡ€. Он позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π»ΠΈΠ½ΠΈΠΈ ΠΈ ΠΊΡ€ΠΈΠ²Ρ‹Π΅, ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡŽΡ‰ΠΈΠ΅ Π΄Π²Π΅ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΡ‡Π΅ΠΊ, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΏΡƒΡ‚Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ Π΅Π΄ΠΈΠ½ΡƒΡŽ Π½Π΅Ρ€Π°Π·Ρ€Ρ‹Π²Π½ΡƒΡŽ Ρ†Π΅ΠΏΡŒ. ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ ΠΏΡƒΡ‚ΠΈ, вСкторная ΡΠ΅Ρ‚ΡŒ позволяСт Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²Π΅Π±-ΠΏΡƒΡ‚ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ· ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΈ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ вмСстС.
Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Β«ΠŸΠ΅Ρ€ΠΎΒ» ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ ΠΈ слоТныС Ρ„ΠΎΡ€ΠΌΡ‹. ВмСсто рисования с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ΅Ρ€Π° ΠΎΡ‚ Ρ€ΡƒΠΊΠΈ инструмСнт позволяСт ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ инструмСнтов ΠΏΠ΅Ρ€Π° ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ направлСния ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΡŽ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ исходныС Ρ‚ΠΎΡ‡ΠΊΠΈ для рисования ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ² Π² Ρ†ΠΈΠΊΠ»Π΅.

Π•ΡΡ‚ΡŒ нСсколько Π²Π΅Ρ‰Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта ΠΏΠ΅Ρ€Π° Figma, ΠΈ ΠΎΠ½ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π² сСбя:

  • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹.
  • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ Π΄Π²Π΅ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹, помСстив ΠΎΠ΄Π½Ρƒ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΉ.
  • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ.
  • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ скруглСнныС ΡƒΠ³Π»Ρ‹ ΠΊ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΌ сСтям.
  • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Π½ΠΎΡΠΈΡ‚ΡŒ ΡˆΡ‚Ρ€ΠΈΡ…ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ дизайнСрских ΡˆΡ‚Ρ€ΠΈΡ…ΠΎΠ².

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Π²Π°ΠΌ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот инструмСнт? Π‘Ρ€Π΅Π΄ΠΈ ΠΏΡ€ΠΈΡ‡ΠΈΠ½:

  • Π­Ρ‚ΠΎ ΡƒΠ΄ΠΎΠ±Π½ΠΎ.
  • ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ слоТныС Ρ„ΠΎΡ€ΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Π½ΠΎ Π½Π΅ Π² инструмСнтС Ρ„ΠΎΡ€ΠΌΡ‹.
  • ВсСгда создаСт Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅.
  • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Π½ΠΎΡΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ измСнСния ΠΏΡ€ΠΈ объСдинСнии Ρ„ΠΈΠ³ΡƒΡ€, добавляя ΠΈΠ»ΠΈ удаляя Π·Π°Π»ΠΈΠ²ΠΊΡƒ ΠΈΠ· ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.
  • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ большС вмСсто объСдинСния ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ 2D-Ρ„ΠΈΠ³ΡƒΡ€, Ρ‡Ρ‚ΠΎ позволяСт Π²Π°ΠΌ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ 3D-Ρ„ΠΎΡ€ΠΌΡ‹ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π½Π° Π±ΡƒΠΌΠ°Π³Π΅.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° Figma с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ», Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ свою ΡƒΡ‡Π΅Ρ‚Π½ΡƒΡŽ запись Figma, ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ» Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ для Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ. Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ инструмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ использовании инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ», ΠΈ ΠΎΠ½ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π² сСбя:

  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ сгиба ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΡ€ΠΈΠ²Ρ‹Π΅, измСняя Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ прСобразовывая ΠΈΡ… Π² ΠΊΡ€ΠΈΠ²ΡƒΡŽ Π½Π° Ρ‚ΠΎΡ‡ΠΊΠ΅ ΠΈΠ»ΠΈ создавая скоррСктированный ΠΏΡƒΡ‚ΡŒ ΠΊΡ€ΠΈΠ²ΠΎΠΉ. Π­Ρ‚ΠΎΡ‚ инструмСнт находится справа ΠΎΡ‚ инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ», ΠΈ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ, Π½Π°ΠΆΠ°Π² CTRL Π² Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅.
  • Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Β«Π’Π΅Π΄Ρ€ΠΎΒ» ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ Π·Π°Π»ΠΈΠ²ΠΊΠΈ Π² Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅. Он находится Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов справа ΠΎΡ‚ инструмСнта сгиба, ΠΈ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ, Π½Π°ΠΆΠ°Π² B Π² Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅.
  • ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«Π“ΠΎΡ‚ΠΎΠ²ΠΎΒ» Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов рядом с инструмСнтом Β«Π’Π΅Π΄Ρ€ΠΎΒ», ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΡ‚Π΅ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ». Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Enter ΠΈΠ»ΠΈ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Esc ΠΈΠ»ΠΈ Π΄Π²Π°ΠΆΠ΄Ρ‹ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π΅Π» Π½Π° холстС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ΠΉΡ‚ΠΈ ΠΈΠ· Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ Ρ€Π΅ΠΆΠΈΠΌΠ°.

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ инструмСнт ΠΏΠ΅Ρ€Π° Figma, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов ΠΈΠ»ΠΈ Π½Π°ΠΆΠ°Π² P.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ ΡΠ΅Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ» Π½Π° Figma

ПослС создания ΠΊΠ°Π΄Ρ€Π° Π²Ρ‹ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ созданию Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ сСти Π² Ρ„Π°ΠΉΠ»Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ инструмСнт Β«ΠŸΠ΅Ρ€ΠΎΒ», найдя Π΅Π³ΠΎ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов ΠΈΠ»ΠΈ Π½Π°ΠΆΠ°Π² P, Π²Ρ‹ Π²ΠΎΠΉΠ΄Π΅Ρ‚Π΅ Π² Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ. Π’ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ для своСго ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΌΠΈ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ».
ΠœΡ‹ рассмотрим нСсколько Π²Π΅Ρ‰Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ» Π² Figma.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π»ΠΈΠ½ΠΈΠΉ

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π»ΠΈΠ½ΠΈΠΈ Π½Π° Figma с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ» ΠΈ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ эти Π»ΠΈΠ½ΠΈΠΈ ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ.

  • Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Ρ€Π°ΠΌΠΊΡƒ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола, Π½Π°ΠΆΠ°Π² F ΠΈ Π²Ρ‹Π±Ρ€Π°Π² Π½ΡƒΠΆΠ½ΠΎΠ΅ устройство.
  • Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ линию, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ P
  • НачнитС с Ρ‰Π΅Π»Ρ‡ΠΊΠ°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΡƒ A,
  • Π—Π°Ρ‚Π΅ΠΌ нарисуйтС линию
  • Π—Π°Π²Π΅Ρ€ΡˆΠΈΡ‚Π΅ Π΅Π³ΠΎ, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² Π² Ρ‚ΠΎΡ‡ΠΊΠ΅ B, Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π“ΠΎΡ‚ΠΎΠ²ΠΎ

Π”Π°Π²Π°ΠΉΡ‚Π΅ создадим ΠΊΠΎΡ€ΠΎΠ±ΠΊΡƒ, соСдинив Ρ€Π°Π·Π½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ

  • НаТмитС P, нарисуйтС линию ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ Π»ΠΈΠ½ΠΈΠΈ, щСлкая ΠΈ рисуя.
  • Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π΄ΠΎΠ±Π΅Ρ€Π΅Ρ‚Π΅ΡΡŒ Π΄ΠΎ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ, Π²Ρ‹ ΠΏΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚Π΅ΡΡŒ ΠΊ Π½Π΅ΠΉ.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΡ€ΠΈΠ²Ρ‹Ρ…

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΡ€ΠΈΠ²Ρ‹Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ». Π ΡƒΡ‡ΠΊΠ° с двумя линиями появляСтся ΠΏΡ€ΠΈ пСрСтаскивании Ρ‚ΠΎΡ‡ΠΊΠΈ. Π ΡƒΡ‡ΠΊΠ° опрСдСляСт ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒ ΠΈΠ·Π³ΠΈΠ±Π°. ВСрхняя линия Π½Π° Ρ€ΡƒΡ‡ΠΊΠ΅ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΡ€ΠΈΠ²ΡƒΡŽ, Π° ниТняя β€” ΠΏΡ€Π΅Π΄ΡΡ‚ΠΎΡΡ‰ΡƒΡŽ ΠΊΡ€ΠΈΠ²ΡƒΡŽ.

  • Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€ΠΈΠ²ΡƒΡŽ, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Ρ‚ΠΎΡ‡ΠΊΡƒ A ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ΡΡŒ Π² Ρ‚ΠΎΡ‡ΠΊΡƒ B
  • Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠ»Π°Π²Π½ΡƒΡŽ ΠΊΡ€ΠΈΠ²ΡƒΡŽ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΄Π²Π΅ Ρ€ΡƒΡ‡ΠΊΠΈ.
  • Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Ρ€ΡƒΡ‡ΠΊΡƒ, ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Alt ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅
  • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ³Π½ΡƒΡ‚ΡŒ Ρ€ΡƒΡ‡ΠΊΡƒ, ΡΠ½ΡΡ‚ΡŒ Ρ€ΡƒΡ‡ΠΊΡƒ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Ρ€ΡƒΡ‡ΠΊΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ клавиши Alt.
  • УдСрТивая ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Shift Π²ΠΎ врСмя двиТСния, ваши Ρ‚ΠΎΡ‡ΠΊΠΈ Π±ΡƒΠ΄ΡƒΡ‚ привязаны ΠΊ 45 градусам.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΡΠΌΡƒΡŽ линию Π² ΠΊΡ€ΠΈΠ²ΡƒΡŽ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ инструмСнт ΠΈΠ·Π³ΠΈΠ±Π°.

Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΏΠΎΠ»ΡƒΠΊΡ€ΡƒΠ³ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта ΠΈΠ·Π³ΠΈΠ±Π°.

  • НарисуйтС Ρ‚ΠΎΡ‡ΠΊΠΈ A ΠΈ B, создав ΠΏΡ€ΡΠΌΡƒΡŽ линию
  • Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ строку ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Enter
  • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ инструмСнт Β«Π‘Π³ΠΈΠ±Β»
  • Π Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ΡŒ курсору ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ области Π»ΠΈΠ½ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ ΡΠΎΠ³Π½ΡƒΡ‚ΡŒ
  • Π—Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π² Ρ‚ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡƒΠΊΡ€ΡƒΠ³.

Π‘ΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ³Π½ΡƒΡ‚Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ слоТно, поэтому Ρƒ Figma Π΅ΡΡ‚ΡŒ бСсплатная ΠΈΠ³Ρ€Π°, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ этот процСсс.

Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ сСти

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ характСристики ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ, Π»ΠΈΠ½ΠΈΠΉ ΠΈΠ»ΠΈ всСй Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ сСти Π² Figma.

  • Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΠΎΠΉΡ‚ΠΈ Π² Ρ€Π΅ΠΆΠΈΠΌ рСдактирования Π²Π΅ΠΊΡ‚ΠΎΡ€Π°, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ для рСдактирования, Π·Π°Ρ‚Π΅ΠΌ Π΄Π²Π°ΠΆΠ΄Ρ‹ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Β» ΠΈ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Β«Π’Π²ΠΎΠ΄Β» ΠΈΠ»ΠΈ Β«Π’ΠΎΠ·Π²Ρ€Π°Ρ‚Β».
  • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΡƒ ΠΈΠ»ΠΈ ΠΏΡƒΡ‚ΡŒ послС ΠΈΡ… Π²Ρ‹Π±ΠΎΡ€Π°, Π½Π°ΠΆΠ°Π² Delete ΠΈΠ»ΠΈ Backspace.
  • Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ, Π½ΠΎ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΡƒ, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΈ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Shift + Delete ΠΈΠ»ΠΈ Backspace Π²ΠΎ врСмя Ρ‰Π΅Π»Ρ‡ΠΊΠ°.
  • Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ΠΉΡ‚ΠΈ ΠΈΠ· Ρ€Π΅ΠΆΠΈΠΌΠ° рСдактирования Π²Π΅ΠΊΡ‚ΠΎΡ€Π°, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π“ΠΎΡ‚ΠΎΠ²ΠΎΒ», ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Β«Π’Π²ΠΎΠ΄Β» ΠΈΠ»ΠΈ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Β«EscΒ».

ОбъСдинСниС Ρ„ΠΈΠ³ΡƒΡ€

Когда Π²Ρ‹ создаСтС Ρ€Π°Π·Π½Ρ‹Π΅ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ», Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡ… ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ. Π”Π°Π²Π°ΠΉΡ‚Π΅ объСдиним ΠΊΠΎΡ€ΠΎΠ±ΠΊΡƒ ΠΈ ΠΏΠΎΠ»ΡƒΠΊΡ€ΡƒΠ³.

  • Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ ΠΊΠΎΡ€ΠΎΠ±ΠΊΡƒ ΠΏΠΎΠ²Π΅Ρ€Ρ… ΠΏΠΎΠ»ΡƒΠΊΡ€ΡƒΠ³Π°,
  • НаТмитС Π½Π° ΠΏΠΎΠ»Π΅
  • Π—Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ΠΊΠΎΡ€ΠΎΠ±ΠΊΡƒ Π² ΠΏΠΎΠ»ΡƒΠΊΡ€ΡƒΠ³
  • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ, которая остаСтся свСрху, ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ Π²Ρ‹Π±ΠΎΡ€Ρƒ.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΠΊ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ ΡΠ΅Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠΌ. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ это;

  • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆ, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² ΠΏΠΎ Π½Π΅ΠΌΡƒ.
  • Π—Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ B, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ инструмСнт Π²Π΅Π΄Ρ€ΠΎ.
  • Π—Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ Π²Ρ‹Π±Ρ€Π°Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ, Π²Ρ‹Π±Ρ€Π°Π² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Π·Π°Π»ΠΈΠ²ΠΊΠΈ Π½Π° ΠΏΡ€Π°Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.
  • Или ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Π·Π°Π»ΠΈΠ²ΠΊΠΈ Π½Π° ΠΏΡ€Π°Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ рисунок ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° ΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ сСгмСнтам ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ объяснСниС Π²Ρ‹ΡˆΠ΅.

ИзмСнСниС Ρ†Π²Π΅Ρ‚Π° Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Π»ΠΈΠ½ΠΈΠΉ, Ссли вас Π½Π΅ устраиваСт Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

  • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ линию ΠΈΠ»ΠΈ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² ΠΏΠΎ Π½Π΅ΠΉ.
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ Π½Π° ΠΏΡ€Π°Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ Π²Ρ‹Π±ΠΎΡ€Ρƒ.
  • МоТно Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ, ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ² Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Ρ†Π²Π΅Ρ‚Π° ΠΊ линиям ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ. ΠŸΡ€ΠΈΠ΄Π°ΠΉΡ‚Π΅ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ΅ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ 5.

ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ своСго рисунка, ΠΈ Π²ΠΎΡ‚ ΠΊΠ°ΠΊ;

  • Π”Π²Π°ΠΆΠ΄Ρ‹ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ
  • ΠšΠΎΡ€ΠΎΠ±ΠΊΠ° Π½Π°ΠΊΡ€ΠΎΠ΅Ρ‚ Π΅Π³ΠΎ
  • Π—Π°Ρ‚Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π½Π° свой Π²Ρ‹Π±ΠΎΡ€, ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΠ² ΡƒΠ³Π»Ρ‹ ΠΎΠΊΠ½Π°.

ΠŸΠΎΠ²Ρ‚ΠΎΡ€ сСанса с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ

OpenReplay β€” это Π½Π°Π±ΠΎΡ€ для воспроизвСдСния сСансов с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π²Π°ΠΌ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ Π² вашСм Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, помогая быстрСС ΡƒΡΡ‚Ρ€Π°Π½ΡΡ‚ΡŒ Π½Π΅ΠΏΠΎΠ»Π°Π΄ΠΊΠΈ. OpenReplay размСщаСтся ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ для ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ контроля Π½Π°Π΄ вашими Π΄Π°Π½Π½Ρ‹ΠΌΠΈ.

НачнитС ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅ ΠΎΡ‚ ΠΎΡ‚Π»Π°Π΄ΠΊΠΈ β€” Π½Π°Ρ‡Π½ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ OpenReplay бСсплатно.

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ инструмСнтом Β«ΠŸΠ΅Ρ€ΠΎΒ» ΠΈ создадим Π΄ΠΈΠ·Π°ΠΉΠ½, Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ домашнСй страницС Dropbox для ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΈΡ‚Π΅Π»Π΅ΠΉ:

  1. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° области, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΠ΅ прямых ΠΈ ΠΈΠ·ΠΎΠ³Π½ΡƒΡ‚Ρ‹Ρ… Π»ΠΈΠ½ΠΈΠΉ.
  2. ΠŸΡ€ΠΎΠΉΠ΄ΠΈΡ‚Π΅ дальшС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ располоТСниС Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°, Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ.
  3. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° области, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ, Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ ΠΈ ΡˆΡ‚Ρ€ΠΈΡ…Π°ΠΌΠΈ.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ сСгмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

  • Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Ρ€Π°ΠΌΠΊΡƒ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола Π² Ρ„Π°ΠΉΠ»Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Figma, Π½Π°ΠΆΠ°Π² F

  • Π’Π²Π΅Ρ€Ρ…Ρƒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ создадим Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΈ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ.

  • ВмСсто большСго ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ нарисуСм малСнькиС ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΈ для МСню ΠΈ О ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅, соСдинив Ρ‚ΠΎΡ‡ΠΊΠΈ A, B, C ΠΈ D.

  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ тСкст для Π²Π²ΠΎΠ΄Π° ΠΊΠ½ΠΎΠΏΠΎΠΊ Β«Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β» ΠΈ Β«Π’ΠΎΠΉΡ‚ΠΈΒ».

  • НарисуйтС Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, создав Ρ€ΠΎΠΌΠ± с Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ A, B, C ΠΈ D Π² Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… мСстах, Π·Π°Ρ‚Π΅ΠΌ нарисуйтС Ρ€ΠΎΠΌΠ± с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡΠΌΠΈ сбоку.

  • НарисуйтС линию, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚Π΄Π΅Π»ΠΈΡ‚ΡŒ Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΠΎΡ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ части Π΄ΠΈΠ·Π°ΠΉΠ½Π°

  • РасполоТитС Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΠΈ сгруппируйтС ΠΈΡ….

  • Π’Π΅ΠΏΠ΅Ρ€ΡŒ нарисуйтС Ρ€Π°Π·Π½Ρ‹Ρ… пСрсонаТСй Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС.

  • НарисуйтС поля Π²Ρ…ΠΎΠ΄Π° ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ тСкст.

  • Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ тСкст слСва.

  • Π—Π°Π»Π΅ΠΉΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹Π΅ области Ρ†Π²Π΅Ρ‚ΠΎΠΌ.

  • Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡˆΡ‚Ρ€ΠΈΡ…ΠΈ, Π³Π΄Π΅ это ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ всС Π±Ρ‹Π»ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ», ΠΊΡ€ΠΎΠΌΠ΅ тСкста ΠΈ Π·Π½Π°Ρ‡ΠΊΠ° Google. Π­Ρ‚ΠΎ всСго лишь нСбольшая Ρ‡Π°ΡΡ‚ΡŒ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π²Π΅Ρ‰Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ».

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π° HTML-страницу

Π”ΠΈΠ·Π°ΠΉΠ½Ρ‹ сайтов Π½Π° Figma ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°ΠΌΠΈ ΠΈ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π½Π΅ содСрТат ΠΊΠΎΠ΄Π°. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ домашнюю страницу Π²Π΅Π±-сайта, Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ HTML-ΠΊΠΎΠ΄, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° Ρ€Π°Π±ΠΎΡ‚Π°Π»Π°. Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ Figma Π² HTML.

  • Π’ΠΎΠΉΠ΄ΠΈΡ‚Π΅ Π² свою ΡƒΡ‡Π΅Ρ‚Π½ΡƒΡŽ запись Figma

  • Π—Π°Ρ‚Π΅ΠΌ ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

  • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π΅Π³ΠΎ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ.

  • Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ/Π’ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ

  • Π—Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ SVGΒ».

  • SVG ΠΊΠΎΠΏΠΈΡ€ΡƒΠ΅Ρ‚

  • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ SVG Π² свой HTML-Ρ„Π°ΠΉΠ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ свой Π΄ΠΈΠ·Π°ΠΉΠ½.

Π’Ρ‹Π²ΠΎΠ΄

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«ΠŸΠ΅Ρ€ΠΎΒ» ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ слоТныС Ρ„ΠΎΡ€ΠΌΡ‹. Однако становится Π»Π΅Π³Ρ‡Π΅, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚Π΅ ΠΌΠΎΠ·Π³ΠΎΠ²ΠΎΠΉ ΡˆΡ‚ΡƒΡ€ΠΌ ΠΈΠ΄Π΅ΠΉ ΠΈ постоянно ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠ΅Ρ‚Π΅ΡΡŒ Π² создании Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ², Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠŸΠΎΠΈΠ³Ρ€Π°ΠΉΡ‚Π΅ с инструмСнтом Β«ΠŸΠ΅Ρ€ΠΎΒ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ!
Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΌΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ здСсь.

Π‘ΠžΠ’Π•Π’ ОВ Π Π•Π”ΠΠšΠ’ΠžΠ Π: Figma Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для планирования всСго ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса: для этого ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с Ρ€Π°Π·Π΄Π΅Π»ΠΎΠΌ Β«ΠŸΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ FigmaΒ»!

Циркулярный тСкст Π½Π° ΠΏΡƒΡ‚ΠΈ β€” Figma Handbook

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² ΠΈΠ·Π±Ρ€Π°Π½Π½ΠΎΠ΅

Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³ΠΎΠ²ΠΎΠΉ тСкст Π½Π° ΠΏΡƒΡ‚ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Π° ARC Π² Figma

Руководство Figma

1

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ проСктирования Figma

0:54

2 900 03

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π² Figma

1:17

3

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ инструмСнты

2:14

4

Бвойства полоТСния, Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π° ΠΈ ΡƒΠ³Π»ΠΎΠ²ΠΎΠ³ΠΎ радиуса

1:27

5

Π¦Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ стили

1:13

7

Π’Π΅ΠΌΠ½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ с Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΌΠΈ Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ

1:17

8

Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹

1:36

9

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°

2:37 9 0003

10

Π Π΅ΠΆΠΈΠΌΡ‹ налоТСния

2:02

11

Бвойства выравнивания, распрСдСлСния ΠΈ ΡƒΠ±ΠΎΡ€ΠΊΠΈ

1:24

12

ОбъСдинСниС ΠΈ ΡƒΠ³Π»ΠΎΠ²ΠΎΠΉ радиус

2:53

13

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ Ρ‚Π΅Π½ΠΈ ΠΈ размытия 900 03

1:48

14

ИспользованиС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

2:00

15

Π—Π°Π»ΠΈΠ²ΠΊΠ°, ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ° ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Π°Ρ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ°

3:21

16

Бвойства ΠΈ стили тСкста

1:37

17

Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹ Google ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹

1:13

18

Π‘ΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ возмоТности

19

Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½

3:07

20

ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΡ 9 0003

1:11

21

Π‘Π΅Ρ‚ΠΊΠ° ΠΌΠ°ΠΊΠ΅Ρ‚Π°

2:00

22

АвтоматичСская ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° Π² Figma

8:17

23

Π’Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ

0:55

24

ВСкторная ΡΠ΅Ρ‚ΡŒ 900 03

1:19

25

ΠœΠΎΠΊΠ°ΠΏΡ‹ Π² пСрспСктивС

2:00

26

3D-ΠΌΠΎΠΊΠ°ΠΏΡ‹

1:20

27

ИспользованиС ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅

2:03

28

Bo ΠΎΠ»Π΅Π°Π½Ρ‹

2:24

29

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΈΠΊΠΎΠ½ΠΎΠΊ

1:48

30

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

1:50

31

ΠšΠΎΠ»Π»Π΅ΠΊΡ‚ΠΈΠ²Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°

2:14

32

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ„Π΅Ρ‚Ρ‚ΠΈ 9000 3

1:59

33

Π”ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΡ‹ пСтлитСля

1:41

34

Apple Watch Ring

2:23

35

Экспорт рСсурсов Π² Figma

1:39

36

Экспорт ΠΊΠΎΠ΄Π° CSS

9 0002 1:04

37

ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ с использованиСм Π΄Π°Π½Π½Ρ‹Ρ…

1:57

38

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

2:25

39

Π˜ΡΡ‚ΠΎΡ€ΠΈΡ вСрсий

1:25

40 90 003

ΠœΡƒΠ»ΡŒΡ‚ΠΈΠΏΠ»Π΅Π΅Ρ€, ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ΠΈ ΠΏΡ€Π΅Π²ΡŒΡŽ

1:36

41

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹

5:39

42

Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

43

UIKits

4:47

44

ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹ 90 003

5:47

45

Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ пятно

4:45

46

Волнистый Ρ„ΠΎΠ½

6:46

47

3D-Ρ„ΠΈΠ³ΡƒΡ€Ρ‹

12:27

48

Parallax Prototy ping Π² Figma

7:52

49

3D UI Perspective Design

7: 16

50

БтСклянная ΠΈΠΊΠΎΠ½ΠΊΠ°

9:16

51

Π₯Ρ€ΡƒΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ΡˆΠ°Ρ€ с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌ эффСктом Π²ΠΎΠ΄Ρ‹

12:54

52 9000 3

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с Π±ΡƒΠΊΠ²Π°ΠΌΠΈ

29:38

53

ЀутуристичСская линСйная анимация

19:30

54

Π˜ΠΌΠΏΠΎΡ€Ρ‚ ΠΈΠ· Adobe Illustrator Π² Figma

3:16

55 90 003

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ Π² Figma

4:07

56

Π£Π΄Π°Π»ΠΈΡ‚ΡŒ Плагин BG

2:27

57

ΠšΡ€ΡƒΠ³ΠΎΠ²Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ Advanced Stroke

3:27

58

ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² сообщСствС

4:49

59

ΠŸΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π²Π΅ΠΊΡ‚ΠΎΡ€

3:11

60

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΌ содСрТимым

3:42

61

Π£Π²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ содСрТимого ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°

62

Advanced Auto Layout

4:13

63

ΠšΡ€ΡƒΠ³ΠΎΠ²ΠΎΠΉ тСкст Π½Π° ΠΏΡƒΡ‚ΠΈ

5:57

64

Π—Π΅Ρ€ΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ

2:39

65

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π»ΠΈΠΏΠΊΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ

4:37 9 0003

66

Π’ΠΈΠ΄Π΅ΠΎ Π² Figma Prototype

67

Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ сСтки

3:03

68

Figma Sections

69

Unsplash Stock Photos

2:07

90 002 70

Π£Π³Π»ΠΎΠ²ΠΎΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚

4:17

71

Π Π°Π΄ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚

5:11

72

Анимация послС Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

73

ΠšΠ°Ρ€ΠΊΠ°Ρ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса

2:53

74

Анимация Π›ΠΎΡ‚Ρ‚ΠΈ

3:55

75

Π”ΠΈΠ·Π°ΠΉΠ½ Π­ΠΊΡ€Π°Π½ рСгистрации

6:42

76

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°

2:53

77

Π”ΠΈΠ·Π°ΠΉΠ½ ΠžΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΠ΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ

2:36

90 002 78

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Β«Π‘Ρ€Π΅Π·Β»

79

Адаптивный ΠΌΠ°ΠΊΠ΅Ρ‚ с Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ останова

80

Π”ΠΈΠ·Π°ΠΉΠ½ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ

81

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π°

82

ΠŸΠ°ΠΊΠ΅Ρ‚Π½ΠΎΠ΅ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅

83

Π’Π²ΠΎΠ΄Π½Ρ‹ΠΉ экран Π΄ΠΈΠ·Π°ΠΉΠ½Π°

84

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ

85

Smart Selection

86

Бвойства ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°

87

RedLines

88

Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΊΠ°Π»Π΅Π½Π΄Π°Ρ€ΡŒ

900 02 89

Π˜Π·ΠΌΠ΅Ρ€Π΅Π½ΠΈΠ΅ расстояния

90

ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹

91

ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹ AI

92

Анимация тСкста

93

ИзмСнСниС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° слоСв

94

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ² слоя

95

БоСдинСния ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°

96

Экспорт SVG-Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈ ΠΊΠΎΠ΄Π°

97

3D-ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ

98

Π—Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса

99

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ Ρ‚Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π΅ΠΆΠΈΠΌΠ°

Циркулярный тСкст β€” ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ Ρ‚ΠΎΠΉ части вашСго Π΄ΠΈΠ·Π°ΠΉΠ½Π°, которая Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π°. люди, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚ΡŒ содСрТаниС Π² области вашСго Π΄ΠΈΠ·Π°ΠΉΠ½Π°, которая Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС казалась Π±Ρ‹ пустой. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ забавности своим ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡƒ, Π·Π½Π°Ρ‡ΠΊΡƒ, компасу, Π·Π½Π°Ρ‡ΠΊΡƒ ΠΈΠ»ΠΈ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΌΡƒ элСмСнту.

ΠŸΠΎΠΊΡƒΠΏΠΊΠ° Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ доступ ΠΊ Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ 50 курсам, Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ 320 ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰ΠΈΠΌ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°ΠΌ ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ-класса, Π±ΠΎΠ»Π΅Π΅ 300 часам Π²ΠΈΠ΄Π΅ΠΎ, исходным Ρ„Π°ΠΉΠ»Π°ΠΌ ΠΈ сСртификатам.

Π£Ρ‡ΠΈΡ‚Π΅ΡΡŒ с Π²ΠΈΠ΄Π΅ΠΎ ΠΈ исходными Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ. Доступно Ρ‚ΠΎΠ»ΡŒΠΊΠΎ подписчикам Pro.

ΠŸΠΎΠΊΡƒΠΏΠΊΠ° Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ доступ ΠΊ Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ 50 курсам, Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ 320 ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰ΠΈΠΌ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°ΠΌ ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ-класса, Π±ΠΎΠ»Π΅Π΅ 300 часам Π²ΠΈΠ΄Π΅ΠΎ, исходным Ρ„Π°ΠΉΠ»Π°ΠΌ ΠΈ сСртификатам.

Π¨Π°Π±Π»ΠΎΠ½Ρ‹ ΠΈ исходный ΠΊΠΎΠ΄

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ исходныС Ρ„Π°ΠΉΠ»Ρ‹

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ рСсурсы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊ Π½ΠΈΠΌ ΠΈ ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π² Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅ Π±Π΅Π· ΠΏΠ΅Ρ€Π΅Ρ€Ρ‹Π²Π°.

Π¨Π°Π±Π»ΠΎΠ½ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ для всСх Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ²

Π’ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ»Ρ‹, ePub ΠΈ субтитры

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ

1

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Figma

Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Figma Π² качСствС инструмСнта Π΄ΠΈΠ·Π°ΠΉΠ½Π°

0:54

2

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π² Figma

Знакомство с интСрфСйсом Figma

1:17

3

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ инструмСнты

Знакомство с панСлью инструмСнтов Π² Figma

2:14

4

Бвойства полоТСния, Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π° ΠΈ радиуса ΡƒΠ³Π»Π°

Π Π°Π±ΠΎΡ‚Π° со свойствами полоТСния, Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π° ΠΈ радиуса ΡƒΠ³Π»Π°

1:27

5

Π¦Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ стили

9000 2 Π Π°Π±ΠΎΡ‚Π° с Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌΠΈ стилями Π½Π° Figma

1:13

6

Маски

ИспользованиС масок для ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈ составлСния Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Figma

1:47

7

Π’Π΅ΠΌΠ½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ с Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠ²

9 0002 ΠΠ°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ для Ρ‚Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π΅ΠΆΠΈΠΌΠ°. с Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ выдСлСния

1:17

8

Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹

ΠœΡ‹ рассмотрим всС Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ способы использования Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² Π² вашСй Ρ€Π°Π±ΠΎΡ‚Π΅, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΈΡ… создания

1:36

9

900 02 Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°

Π”ΠΈΠ·Π°ΠΉΠ½ Ρ„ΠΎΠ½Π° Π² Figma

2:37

10

Π Π΅ΠΆΠΈΠΌΡ‹ налоТСния

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ интСрСсныС Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ с Ρ€Π΅ΠΆΠΈΠΌΠ°ΠΌΠΈ налоТСния

2:02

11

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ , распространСниС ΠΈ ΡƒΠ±ΠΎΡ€ΠΊΠ° нСдвиТимости

Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ выравнивания ΠΈ упорядочивания Π² Figma

1:24

12

ОбъСдинСниС ΠΈ ΡƒΠ³Π»ΠΎΠ²ΠΎΠΉ радиус

Π Π°Π±ΠΎΡ‚Π° Π½Π°Π΄ объСдинСниСм ΠΈ ΡƒΠ³Π»ΠΎΠ²Ρ‹ΠΌ радиусом

2:53

13

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ Ρ‚Π΅Π½Π΅ΠΉ ΠΈ размытия

Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ способов Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΠΈ ΠΈ Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ Π² ваш Π΄ΠΈΠ·Π°ΠΉΠ½ Π˜Π½ΡΡƒΠ»ΡŒΡ‚ ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΉ ΠΈΠ½ΡΡƒΠ»ΡŒΡ‚

Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π·Π°Π»ΠΈΠ²ΠΊΠ΅ ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°Ρ… ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ Π² Figma

3:21

16

Бвойства ΠΈ стили тСкста

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅ ΠΎ свойствах Ρ‚ΠΈΠΏΠΎΠ² Figma

1:37

9 0002 17

Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹ Google ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ различия ΠΌΠ΅ΠΆΠ΄Ρƒ ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌΠΈ Google ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌΠΈ для вашСго Π²Π΅Π±-сайта

1:13

18

Π”ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ возмоТности Π΄ΠΈΠ·Π°ΠΉΠ½Π°

19

Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π² Figma с использованиСм ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ ΠΈ автоматичСского ΠΌΠ°ΠΊΠ΅Ρ‚Π°

3:07

20

ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΡ

Π Π°Π±ΠΎΡ‚Π° с ограничСниями Π² Figma

1: 11

21

Π‘Π΅Ρ‚ΠΊΠ° ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ²

ΠΠ°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ сСтки, столбцы, строки ΠΈ поля.

2:00

22

Auto Layout in Figma

Π Π°Π±ΠΎΡ‚Π° с Auto Layout для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

8:17

23

Π’Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ

Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ Ρ€Π΅ΠΆΠΈΠΌΠ° для рСдактирования ΠΈ настройки Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ„ΠΈΠ³ΡƒΡ€

0:55

24

ВСкторная ΡΠ΅Ρ‚ΡŒ

ΠΠ°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ сСти ΠΈ дизайнСрскиС Π·Π½Π°Ρ‡ΠΊΠΈ

1:19 90 003

25

ΠŸΠ΅Ρ€ΡΠΏΠ΅ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ рСалистичныС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ для ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²

2:00

26

3D-ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ 3D-ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π² Π΄ΠΈΠ·Π°ΠΉΠ½

1:20

27

ИспользованиС ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅

Π’ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ Π² ваш Π΄ΠΈΠ·Π°ΠΉΠ½

2:03

28

ЛогичСскиС значСния

ИспользованиС логичСских Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ для создания Π·Π½Π°Ρ‡ΠΊΠΎΠ²

2:24

29 900 03

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΈΠΊΠΎΠ½ΠΎΠΊ

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнтов, прСдоставляСмых Figma

1:48

30

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ свой Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ³ΠΎΠ΄Π½Ρ‹ΠΌ для ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ использования с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

1:50

31

Team Library

ΠŸΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΡ стилСй Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

2:14

32

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ„Π΅Ρ‚Ρ‚ΠΈ

Π Π°Π±ΠΎΡ‚Π° с ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ Confetti

1:59

33

Π”ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΡ‹ пСтлитСля

9 0002 Π Π°Π±ΠΎΡ‚Π° с ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ Looper Figma

1:41

34

Apple Watch Ring

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠΎΠ»ΡŒΡ†Π° Apple Watch Π² Figma

2:23

35

Экспорт рСсурсов Π² Figma

Π£Π·Π½Π°ΠΉΡ‚Π΅ ΠΎΠ± экспортС рСсурсов Π² Figma для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ

1:39

36

Экспорт CSS-ΠΊΠΎΠ΄Π°

Π Π°Π±ΠΎΡ‚Π° с CSS-ΠΊΠΎΠ΄ΠΎΠΌ Π² Figma

1:04

37

ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ с использованиСм Π΄Π°Π½Π½Ρ‹Ρ…

ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹, ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‰ΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ с использованиСм Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°

900 02 1:57

38

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

БыстроС созданиС ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ вашСго прилоТСния Π² Figma

2:25

39

Π˜ΡΡ‚ΠΎΡ€ΠΈΡ вСрсий

Π Π°Π±ΠΎΡ‚Π° с историСй вСрсий Π² Figma

1:25

40

ΠœΡƒΠ»ΡŒΡ‚ΠΈΠΏΠ»Π΅Π΅Ρ€, ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ΠΈ ΠΏΡ€Π΅Π²ΡŒΡŽ

Π£Π·Π½Π°ΠΉΡ‚Π΅ ΠΎ совмСстной Ρ€Π°Π±ΠΎΡ‚Π΅ ΠΈ совмСстном использовании с Figma

1:36

41

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹

ОбъСдинСниС ΠΏΠΎΡ…ΠΎΠΆΠΈΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π² Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹

5:39

42

Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… взаимодСйствий с использованиСм ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

43

UIKits

ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ с использованиСм UIKits Π² Figma

4:47

44

ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹

ИсслСдованиС ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ с использованиСм ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π² Figma

5:47

45

Π€ΠΎΠ½ Blob

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ простой Ρ„ΠΎΠ½ Blob Π² Figma

4:45

46

Π€ΠΎΠ½ Wave

90 002 Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π²ΠΎΠ»Π½ΠΎΠ²ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² Figma, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ инструмСнт Bend ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ Wave

6:46

47

Π’Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½Ρ‹Π΅ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½Ρ‹Ρ… Ρ„ΠΈΠ³ΡƒΡ€ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… инструмСнтов Π² Figma ma

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π΅Ρ…Π½ΠΈΠΊΡƒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ параллакса, Π³Π΄Π΅ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π½ΠΈΠΉ слои двиТутся с Ρ€Π°Π·Π½ΠΎΠΉ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ

7:52

49

3D UI Perspective Design

ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠΉ пСрспСктивы

7:16

50

Π‘Ρ‚Π΅ΠΊΠ»ΠΎ Π—Π½Π°Ρ‡ΠΎΠΊ

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ Ρ„ΠΎΠ½Π°

9:16

51

Π₯Ρ€ΡƒΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ΡˆΠ°Ρ€ с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ с эффСктом Π²ΠΎΠ΄Ρ‹

Анимация Π²ΠΎΠ»Π½ Π² Ρ…Ρ€ΡƒΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΌ ΡˆΠ°Ρ€Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта прототипирования

12:54

52

9 0002 Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΈ Π·Π°ΠΊΠΎΠ΄ΠΈΡ€ΡƒΠΉΡ‚Π΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с Π±ΡƒΠΊΠ²Π°ΠΌΠΈ

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π»ΠΈΠ½ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS Π² CodeSandbox. 30

54

Π˜ΠΌΠΏΠΎΡ€Ρ‚ ΠΈΠ· Adobe Illustrator Π² Figma

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚Ρƒ Ρ„Π°ΠΉΠ»Π° Illustrator Π² Figma

3:16

55

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ Π² Figma

ИспользованиС Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ инструмСнта Π² Figma для создания ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ с нуля

4:07

56

Π£Π΄Π°Π»ΠΈΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½ BG

Π£Π΄Π°Π»ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Π° RemoveBG Π² Figma

2:27

57

ΠšΡ€ΡƒΠ³ΠΎΠ²Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Stroke

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π° ΠΊΠ°ΠΌΠ΅Ρ€Ρ‹ с линиями часов Π² Figma

3:27

58

ΠŸΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² сообщСствС

ΠŸΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΡ Ρ„Π°ΠΉΠ»ΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² сообщСствС Figma

4:49

59

ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ изобраТСния Π² Π²Π΅ΠΊΡ‚ΠΎΡ€ 90 003

ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ изобраТСния Π² Π²Π΅ΠΊΡ‚ΠΎΡ€ Π² Figma

3:11

60

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ Π² ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Figma

3:42

61

Hug Content ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΠΎΠ±ΡŠΠ΅ΠΌΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, фиксированная ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈΠ»ΠΈ высота, ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ заполнСния ΠΈ усСчСниС тСкста

62

Advanced Auto Layout

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅ΠΆΠΈΠΌ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»ΠΎΠ², Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ холста, Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ΠΏΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ, значСния ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ Π² Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚Π΅

4:13

63

ΠšΡ€ΡƒΠ³ΠΎΠ²ΠΎΠΉ тСкст Π½Π° ΠΏΡƒΡ‚ΠΈ

Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³ΠΎΠ²ΠΎΠΉ тСкст Π½Π° ΠΏΡƒΡ‚ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Π° ARC Π² Figma

5:57

64

Π—Π΅Ρ€ΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ

ΠŸΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΠΉΡ‚Π΅ свои ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ Π½Π° мобильном устройствС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ МобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Figma. 3

Π’ΠΈΠ΄Π΅ΠΎ Π² Figma Prototype

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π² качСствС Π·Π°Π»ΠΈΠ²ΠΊΠΈ с использованиСм любой Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ сСти ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡƒ 03

Π€ΠΈΠ³ΠΌΠ° Π Π°Π·Π΄Π΅Π»Ρ‹

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ Π² Figma для Π»ΡƒΡ‡ΡˆΠ΅ΠΉ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΈ облСгчСния совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹

69

Unsplash Π‘Ρ‚ΠΎΠΊΠΎΠ²Ρ‹Π΅ Π€ΠΎΡ‚ΠΎ

ВставляйтС красивыС изобраТСния ΠΈΠ· Unsplash прямо Π² свои ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹

2:07

70

Π£Π³Π»ΠΎΠ²ΠΎΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚

ПошаговоС руководство ΠΏΠΎ созданию ΠΈ настройкС ΡƒΠ³Π»ΠΎΠ²ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° Π² Figma

4:17

71

Π Π°Π΄ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ярких Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² Π² Figma для ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½

5:11

72

Анимация послС Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Π‘Π°ΠΌΡ‹ΠΉ простой способ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ простоС взаимодСйствиС послС Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ Π² Figma

73

UI-каркас

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ инструмСнты ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для создания каркаса, которая ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π»Π΅Π³ΠΊΠΎ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ваш ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс

2:53

74

Lottie Animation Figma для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²

3:55

75

Π”ΠΈΠ·Π°ΠΉΠ½ экрана рСгистрации

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ экрана рСгистрации Π² Figma для вашСго прилоТСния ΠΈΠ»ΠΈ Π²Π΅Π±-сайта

6:42

76

Content Generator

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ с использованиСм Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ врСмя ΠΌΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ с Design Lint

2:36

78

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ срСзов

ЭкспортируйтС свои Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта срСзов Π² Figma

79

Адаптивный ΠΌΠ°ΠΊΠ΅Ρ‚ с Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ останова Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ ΠΈ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ останова

80

Π”ΠΈΠ·Π°ΠΉΠ½ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ

Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ бСсконСчных возмоТностСй Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ для Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ…

81

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½

Как ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°, ΡƒΠ»ΡƒΡ‡ΡˆΠ°ΡŽΡ‰ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс

82

ΠŸΠ°ΠΊΠ΅Ρ‚Π½ΠΎΠ΅ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅

БыстроС ΠΈ простоС ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„Π°ΠΉΠ»ΠΎΠ² Π² Figma с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΠΎΠ³ΠΎ модуля Batch Rename

83

Π­ΠΊΡ€Π°Π½ Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π° для удСрТания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ

84

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ

85

Π˜Π½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅

Π‘ΠΎΠ»Π΅Π΅ эффСктивноС располоТСниС слоСв с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ выдСлСния

86

Бвойства ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°

Π£ΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚Π΅ количСство Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Π² вашСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ систСму, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойства ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ рСдактируя ΠΈΡ… нСпосрСдствСнно Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ свойств

87

RedLines

Π˜Π·ΠΌΠ΅Ρ€ΡΠΉΡ‚Π΅ расстояния ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ свои ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Figma ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π΅ΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Π° Redlines Figma

88

Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΊΠ°Π»Π΅Π½Π΄Π°Ρ€ΡŒ

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π² Figma для создания ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ калСндаря с состояниями навСдСния ΠΈ наТатия

89

Π˜Π·ΠΌΠ΅Ρ€Π΅Π½ΠΈΠ΅ расстояния Figma

90

Variable Fonts

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ статичСскиС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ вСрсиСй Variable Font

91

ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹ AI

Π›ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ AI для Figma, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ

92

ВСкстовая анимация

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ двиТущСгося тСкста с использованиСм ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΈ послС Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ

93

ИзмСнСниС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° слоСв

ИзмСнСниС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° слоСв с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ

94 90 003

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ² слоя

ПониманиС ΠΈ организация Π΄ΠΈΠ·Π°ΠΉΠ½ с ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π°ΠΌΠΈ слоя просмотра

95

ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ²

НастройтС свои ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ любой, Ρƒ ΠΊΠΎΠ³ΠΎ Π΅ΡΡ‚ΡŒ доступ ΠΊ просмотру, ΠΌΠΎΠ³ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ взаимодСйствия

96

Экспорт Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈ ΠΊΠΎΠ΄Π° SVG

Экспорт изобраТСния Π² Π²ΠΈΠ΄Π΅ Ρ„Π°ΠΉΠ»Π° SVG позволяСт Π»Π΅Π³ΠΊΠΎ Π²ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² ΠΊΠΎΠ΄ HTML ΠΈ CSS

97

3D-ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ Π”ΠΈΠ·Π°ΠΉΠ½ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°

98

Π—Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса

Вставка Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ элСмСнта для Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

99

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ Ρ‚Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π΅ΠΆΠΈΠΌΠ°

ΠŸΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚Π΅ свой Π΄ΠΈΠ·Π°ΠΉΠ½ Π² Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ ΠΎΠ΄Π½ΠΈΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ ΠΌΡ‹ΡˆΠΈ

ΠŸΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с инструктором

ΠœΡ‹ всС стараСмся ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ нашСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° ΠΊ поэтапному ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΡŽ, прСдоставляя исходныС Ρ„Π°ΠΉΠ»Ρ‹ ΠΈ отдавая ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Π½Π°ΡˆΠΈΡ… курсов.