АвтолСйаут Π² Ρ„ΠΈΠ³ΠΌΠ΅: Ѐункция Auto Layout Π²Β Π€ΠΈΠ³ΠΌΠ΅Β β€” ΠΊΠ°ΠΊ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

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

10 совСтов ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Auto-Layout Π² Figma

Аудио ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ

ΠŸΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ auto-layout Π² Figma

По ссылкС Π² сообщСствС Figma находятся ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ упомянуты Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅.

1. ГорячиС клавиши auto layout

Π§Π΅ΠΌ Ρ‡Π°Ρ‰Π΅ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ горячиС клавиши auto layout, Ρ‚Π΅ΠΌ быстрСС ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²ΠΎΠΉΠ΄Π΅Ρ‚ Ρƒ вас Π² ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡ΠΊΡƒ.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΠ΅ΠΌ Π²Π°ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ клавиш для auto layout с Ρ†Π΅Π»ΡŒΡŽ ускорСния Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ процСсса:

  • SHIFT + A = Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ auto layout
  • SHIFT + ALT + A = ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ auto layout ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌ
  • CMD/CTRL + SHIFT + G = ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ auto layout
  • CMD/CTRL + D = Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты Π² auto layout
2. ΠšΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ свойства ΠΈ ΡΡ‚ΠΈΠ»ΡŒ auto layout

Π­ΠΊΠΎΠ½ΠΎΠΌΡŒΡ‚Π΅ врСмя с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ горячих клавиш:

  • OPTION + CMD / CTRL + C β€” ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ auto layout
  • OPTION + CMD / CTRL + V β€” Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ auto layout
3.

Π‘ Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ мСняйтС порядок ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ²

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ порядок ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ auto layout ΠΌΠΎΠΆΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ клавиш-скобок:

  • CMD/CTRL + ] = ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ элСмСнт Π²ΠΏΡ€Π°Π²ΠΎ ΠΈΠ»ΠΈ Π²Π½ΠΈΠ·
  • CMD/CTRL + [ = ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ элСмСнт Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²Π²Π΅Ρ€Ρ…
4. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ слайдСр с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ auto layout

Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚:

ΠžΡ‡ΠΈΡΡ‚ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ β€œspacing between items”

  1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‚Π΅ΠΌΠ½ΠΎ-синюю линию ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ°ΠΌΠΈ
  2. ΠœΠ΅Π½ΡΠΉΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ β€œspace between items” для auto layout, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚
  3. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ β€œspace between items” ΠΏΡƒΡ‚Π΅ΠΌ Π΅Π³ΠΎ пСрСтаскивания Π²ΠΏΡ€Π°Π²ΠΎ ΠΈΠ»ΠΈ Π²Π»Π΅Π²ΠΎ

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰Π΅Π΅ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° YouTube

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ auto layout ΠΈ значСния  β€œspacing between items”, довольно Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° для Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, количСства ΠΈΠ»ΠΈ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° выполнСния. Π’Ρ‹ΡˆΠ΅ ΡƒΠΊΠ°Π·Π°Π½Π° ссылка Π½Π° ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰Π΅Π΅ Π²ΠΈΠ΄Π΅ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ.

5. Π‘ΡΠΊΠΎΠ½ΠΎΠΌΡŒΡ‚Π΅ врСмя с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ слова β€œauto”

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами: Π½Π°ΠΏΠ΅Ρ‡Π°Ρ‚Π°ΠΉΡ‚Π΅ слово β€œauto” вмСсто Ρ†ΠΈΡ„Ρ€Ρ‹ Π² ΠΏΠΎΠ»Π΅ β€œspacing between items”, Π° Π·Π°Ρ‚Π΅ΠΌ потянитС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π²ΠΏΡ€Π°Π²ΠΎ, ΠΈ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ элСмСнты Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΏΠΎΠ΄ Π·Π°Π΄Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ

ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ свой Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс: Π½Π°ΠΏΠ΅Ρ‡Π°Ρ‚Π°ΠΉΡ‚Π΅ слово β€œauto” Π² ΠΏΠΎΠ»Π΅ β€œspacing between items”.

6. Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°ΠΉΡ‚Π΅ элСмСнты Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ auto layout с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ указания Π½ΡƒΠ»Π΅Π²ΠΎΠ³ΠΎ значСния высоты Ρ„Ρ€Π΅ΠΉΠΌΠ°

Rogie King ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ этот Ρ…ΠΈΡ‚Ρ€Ρ‹ΠΉ Ρ‚Ρ€ΡŽΠΊ Π² своСм ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰Π΅ΠΌ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° YouTube. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Ρ„Ρ€Π΅ΠΉΠΌ, помСститС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π²Π½ΡƒΡ‚Ρ€ΡŒ Ρ„Ρ€Π΅ΠΉΠΌΠ°. РасполоТитС Ρ„Ρ€Π΅ΠΉΠΌ Π²Π½ΡƒΡ‚Ρ€ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° auto layout, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ β€œfill container”, Π° Π·Π°Ρ‚Π΅ΠΌ Π·Π°Π΄Π°ΠΉΡ‚Π΅Β  высоту Ρ„Ρ€Π΅ΠΉΠΌΠ°, Ρ€Π°Π²Π½ΡƒΡŽ 0,001 (ΠΎΠ½Π° округлится Π΄ΠΎ 0).Β 

Π­Ρ‚ΠΎΡ‚ совСт позволяСт Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ auto layout, Ρ‡Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Figma Π½Π΅ допускаСт ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ.

7. Π‘ Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ Ρ€Π°Π±ΠΎΡ‚Π°ΠΉΡ‚Π΅ с элСмСнтами Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… auto layout

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами: выдСляйтС Π»ΡŽΠ±Ρ‹Π΅ Π½ΡƒΠΆΠ½Ρ‹Π΅ элСмСнты Π²Π½ΡƒΡ‚Ρ€ΠΈ auto layout

Когда Ρƒ вас ΠΌΠ½ΠΎΠ³ΠΎ auto layout, структура Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΡƒΡΠ»ΠΎΠΆΠ½ΡΡ‚ΡŒΡΡ. НС Π±ΠΎΠΉΡ‚Π΅ΡΡŒ, Π΅ΡΡ‚ΡŒ нСсколько горячих клавиш, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Π΅Π³ΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌ элСмСнтам.

  • ENTER/RETURN = Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ элСмСнт Ρ„Ρ€Π΅ΠΉΠΌΠ°
  • SHIFT + ENTER/RETURN = Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ вСсь Ρ„Ρ€Π΅ΠΉΠΌ
  • TAB = ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρƒ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌΠΈ элСмСнтами послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт Π±Ρ‹Π» Π²Ρ‹Π΄Π΅Π»Π΅Π½ Π² auto layout
  • ESC = ΡΠ±Ρ€ΠΎΡΠΈΡ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ элСмСнтов
8. РасполагайтС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π²Π½ΡƒΡ‚Ρ€ΠΈ auto layout Π½Π° своС усмотрСниС

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами: ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ счСтчик ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ Π²Π½ΡƒΡ‚Ρ€ΡŒ Ρ„Ρ€Π΅ΠΉΠΌΠ°, ΠΏΡ€ΠΈ этом ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠ±Π΅Π» Π½Π°ΠΆΠ°Ρ‚Ρ‹ΠΌ

Π£Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ ΠŸΠ ΠžΠ‘Π•Π› ΠΏΡ€ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π²Π½ΡƒΡ‚Ρ€ΠΈ auto layout, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, ΠΈ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ Π΅Π³ΠΎ автоматичСского размСщСния.

9. БохраняйтС располоТСниС элСмСнта ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ всСгда Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅, Ссли Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Space Between

Если Π² составС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° auto layout Π΅ΡΡ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΈ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ оставался Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅, Π΅ΡΡ‚ΡŒ нСбольшая Ρ…ΠΈΡ‚Ρ€ΠΎΡΡ‚ΡŒ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ это ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²ΠΈΡ‚ΡŒ:

  1. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ копию Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
  2. УстановитС ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Ρ€Π°Π²Π½ΠΎΠΉ 0%
  3. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ CMD + [, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π½ΠΈΠ·
  4. УстановитС для всСго ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Space Between
10.

ЗафиксируйтС ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ/высоту Ρ„Ρ€Π΅ΠΉΠΌΠ°

Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚: Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ минимальная Π΄Π»ΠΈΠ½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° auto layout ΠΎΡΡ‚Π°Π²Π°Π»Π°ΡΡŒ фиксированной ΠΈ Π½Π΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π»Π°ΡΡŒ, Ссли тСкст нСдостаточно Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ, Π½ΡƒΠΆΠ½ΠΎ:Β  Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² auto layout ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌ с фиксированной минимальной Π΄Π»ΠΈΠ½ΠΎΠΉ, Π΄Π°Π»Π΅Π΅ для ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° auto layout слСдуСт ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ β€œhug contents”.

Rogie King ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ‚Ρ€ΡŽΠΊ, Ρ‡Ρ‚ΠΎ ΠΈ Π² 6 Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ. Он Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° auto layout Ρ„Ρ€Π΅ΠΉΠΌ с фиксированной минимальной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΈ Π·Π°Π΄Π°Π΅Ρ‚ Π΅ΠΌΡƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ высоты, Ρ€Π°Π²Π½ΠΎΠ΅ 0. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ (ΠΈΠ»ΠΈ Π΄Π»ΠΈΠ½Ρƒ) ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° auto layout, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π½Π΅ становился мСньшС, Ссли тСкст нСдостаточно Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π²ΠΈΠ΄Π΅ΠΎ Rogie Π½Π° YouTube

11. Бонус! ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΠΎΠ΅ ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰Π΅Π΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΎΠ± auto layout

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰Π΅Π΅ Π²ΠΈΠ΄Π΅ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ интСрфСйсы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ auto layout.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰Π΅Π΅ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° YouTube

IYKYK

Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Auto Layout Π² Figma

Π― Ρ€Π°Π±ΠΎΡ‚Π°Π» Π½Π°Π΄ рядом особСнностСй послСднСго обновлСния Figma

Π― ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ‚Π΅Ρ… людСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π° Π»Π΅Ρ‚ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈΡΡŒ со Sketch Π½Π° Figma. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‡Π΅Ρ€Π΅Π· нСдСлю послС ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΈ прСобразования ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Sketch Π½Π΅Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ выпустил Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Smart Layout. Π― ΠΊΠΎΡ€ΠΈΠ» сСбя. Наша компания, GatherContent, Π±Ρ‹Π»Π° Π½Π° ΠΏΠΎΠ»ΠΏΡƒΡ‚ΠΈ ΠΊ созданию Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы ΠΈ ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈΡΡŒ Π½Π° Figma, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π²Π»Π΅Ρ‡ΡŒ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΏΠΎΠ»ΡŒΠ·Ρƒ ΠΈΠ· срСды совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹. Но Ρ‚ΡƒΡ‚ Sketch выпустил Π½ΠΎΠ²ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΈ заставил нас ΠΏΠ΅Ρ€Π΅ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ своС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΌΡ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½-систСму Π² Figma, пСриодичСски ΠΎΠ³Π»ΡΠ΄Ρ‹Π²Π°ΡΡΡŒ Π½Π°Π·Π°Π΄, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π·Π°Π±Π°Π²Π½Ρ‹Π΅ измСнСния, происходящиС Π² Sketch.

А ΠΏΠΎΡ‚ΠΎΠΌ… Figma анонсировала Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Auto Layout, ΠΈ Π½Π΅Π΄Π°Π²Π½ΠΎ Π½Π°ΠΊΠΎΠ½Π΅Ρ† выпустила Π΅Π΅! Π£Ρ€Π°! Π₯отя ΠΎΠ½Π° Π½Π΅ лишСна нСдостатков, я ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΠ» ΠΏΠ°Ρ€Ρƒ Π΄Π½Π΅ΠΉ Π½Π° Π΅Π΅ освоСниС. Π― ΠΏΠΎΠ΄ΡƒΠΌΠ°Π», Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ интСрСсно, Ссли я подСлюсь рядом ΠΈΠ·ΡƒΡ‡Π΅Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ².

Π­Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ особСнно ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ управляСт Π΄ΠΈΠ·Π°ΠΉΠ½-систСмой, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° Auto Layout ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² каскадирования. Π­Ρ‚Π° ΡΡ‚Π°Ρ‚ΡŒΡ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ ΡƒΠΌΠ΅Ρ€Π΅Π½Π½Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ Π·Π½Π°Π½ΠΈΠΉ Figma ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Auto Layout

По большСй части функция Auto Layout довольно проста Π² использовании, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ бСспорядок, Ссли Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚Π΅ остороТны.

ПовСдСниС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°

Если Π²Ρ‹ ΠΏΠΎΡ…ΠΎΠΆΠΈ Π½Π° мСня, Ρ‚ΠΎ ваши ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠ² ΠΈ тСкстовых слоСв. Π‘ Auto Layout эта концСпция исчСзаСт. Π‘Π°ΠΌΠΈ Ρ„Ρ€Π΅ΠΉΠΌΡ‹ ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ основу ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°, пСрСнимания всС стили ΠΈ эффСкты Ρ„ΠΎΡ€ΠΌΡ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΎΠ½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ³Π»ΠΎΡ‚ΠΈΠ»ΠΈ.

На самом Π΄Π΅Π»Π΅ это простоС, Π½ΠΎ ΡƒΠΌΠ½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚ Figma. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚, Ссли Π²Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Auto Layout для Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° тСкстового слоя Π±Π΅Π· прСобразования …

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

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ для использования Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Auto Layout, Π²Ρ‹ большС Π½Π΅ смоТСтС ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ / ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ содСрТимоС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ. Π’Ρ‹ настраиваСтС Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнтов управлСния Π½Π° ΠΏΡ€Π°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.

Кнопки с иконками

Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ освоитС описанный Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠ΅ΠΌ, Ρ‚ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ с Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ Auto Layout Π½Π΅ Π²Ρ‹Π·ΠΎΠ²Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ с ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ.

ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ ΠΈ настройки простой ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ

Как ΠΌΡ‹ ΡƒΠ·Π½Π°Π»ΠΈ Π²Ρ‹ΡˆΠ΅, сам Ρ„Ρ€Π΅ΠΉΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ синий ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, поэтому всС, Ρ‡Ρ‚ΠΎ Ρƒ нас Π΅ΡΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ, это слои ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ тСкста. Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ отступ устанавливаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ настроСк справа. Π’ нашСм случаС это отступ 18px слСва ΠΈ справа, ΠΈ 9px свСрху ΠΈ снизу. ΠŸΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚Π²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ ΠΈ тСкстом установлСно Π½Π° 8px.

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ просто, ΠΎΠ΄Π½Π°ΠΊΠΎ люди с Π·ΠΎΡ€ΠΊΠΈΠΌ взглядом ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π»Π΅Π²Ρ‹ΠΉ ΠΈ ΠΏΡ€Π°Π²Ρ‹ΠΉ отступы Π½Π΅ выглядят ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ. Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ Π²Ρ‹ ΠΏΡ€Π°Π²Ρ‹, ΠΈ это пСрвая ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ я Ρ…ΠΎΡ‡Ρƒ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ.

Π’ нашСй Π΄ΠΈΠ·Π°ΠΉΠ½-систСмС всС ΠΈΠΊΠΎΠ½ΠΊΠΈ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€. Π’ частности, ΠΈΠΊΠΎΠ½ΠΊΠΈ 16px находятся Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° 24px. Для этого Π΅ΡΡ‚ΡŒ Π΄Π²Π΅ основныС ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, это позволяСт Π½Π°ΠΌ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ. Π’Ρ‹ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡƒΠ΄ΡŒ использовали Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΡƒΡŽ ΠΈΠΊΠΎΠ½ΠΊΡƒ, ΠΈ ΠΎΠ½Π° Π½Π΅ выглядСла достаточно Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π½ΠΎΠΉ? Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, это заставляСт нас ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ наТатия ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π½ΠΎΠ²Ρ‹Ρ… интСрфСйсов.

Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ систСмы сСтки, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ для Π½Π°ΡˆΠΈΡ… ΠΈΠΊΠΎΠ½ΠΎΠΊ 16px

Π­Ρ‚ΠΎ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, создаСт ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Auto Layout. Ѐункция Auto Layout Π½Π΅ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Π΅Ρ‚ пустоС пространство, ΠΎΠ½Π° ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ элСмСнтов Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Однако, это Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡƒΡŽ систСму.

Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ нСзависимыС значСния для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ отступа. На Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΌΡ‹ ΠΆΠΈΠ²Π΅ΠΌ с этим нСбольшим смСщСниСм Π² Π½Π°Π΄Π΅ΠΆΠ΄Π΅, Ρ‡Ρ‚ΠΎ вскорС Π΅Π³ΠΎ исправят. ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ считаСм, Ρ‡Ρ‚ΠΎ наш способ управлСния ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ.

Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

Π­Ρ‚ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄ позволяСт быстро ΡƒΡΠ»ΠΎΠΆΠ½ΡΡ‚ΡŒ Π²Π΅Ρ‰ΠΈ.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, я ΡƒΠ·Π½Π°Π», насколько быстро ΠΌΠΎΠ³Ρƒ всС ΠΈΡΠΏΠΎΡ€Ρ‚ΠΈΡ‚ΡŒ, прСдполагая, Ρ‡Ρ‚ΠΎ комбинация клавиш Shift+A дСйствуСт ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŽ. Π­Ρ‚ΠΎ Π½Π΅ Ρ‚Π°ΠΊ. НСоднократноС Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ Π½Π° Shift+A ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ вас ΠΊ Π±Π΅Π·Π΄Π½Π΅ Π°Π΄Π° Auto Layout.

Π’Π°ΠΌ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ мСню ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ΠΈ функция Β«Remove Auto LayoutΒ».

Π’ любом случаС, Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ – это довольно Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰Π°Ρ функция. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° наш ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню…

Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню

Π“Π»Π°Π²Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ находится слСва ΠΈ содСрТит Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌ «модулями» (справа). Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ мСню состоит Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ· ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню. ΠœΠΎΠ΄ΡƒΠ»ΠΈ Ρ‡Π°Ρ‰Π΅ всСго 30px Π² высоту, Π½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ линия составляСт всСго 20px. Π’ ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ это ΠΌΠΎΠ³Π»ΠΎ Π±Ρ‹ привСсти ΠΊ хаосу, Ссли ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ мСстами экзСмпляры ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню с раздСлитСлями, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠΌΠΏΠ΅Π½ΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ Π² высотС.

Π£Π²Ρ‹! Π‘ΠΎΠ»ΡŒΡˆΠ΅ нСт…

Однако для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это Π²ΠΎΠ»ΡˆΠ΅Π±ΡΡ‚Π²ΠΎ ΡΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ, Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Π°ΠΆΠ½Ρ‹ΠΉ шаг. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ линия составляСт 20px ΠΏΠΎ высотС, Π° Π½Π΅ 30px, ΠΌΠ½Π΅ ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Auto Layout для этого ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ значСния Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ отступов. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π³Π»Π°Π²Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π·Π½Π°Π΅Ρ‚ значСния отступов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Π·Π°ΠΌΠ΅Π½Π΅ этого ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС простая Π·Π°ΠΌΠ΅Π½Π° экзСмпляра ΠΏΡƒΠ½ΠΊΡ‚Π° мСню Π½Π° Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒ просто заставит Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ высоту 30px.

И ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρƒ нас Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π° функция Auto Layout Π½Π° Π³Π»Π°Π²Π½ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅, ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ соотвСтствСнно измСняСт свой Ρ€Π°Π·ΠΌΠ΅Ρ€.

ΠŸΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π½Π° Π»Π΅Ρ‚Ρƒ

Π‘ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ Auto Layout Π²Ρ‹ ΠΎΠΆΠΈΠ΄Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ смоТСтС Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ элСмСнты, ΠΈ всС ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ€Π³Π°Π½ΠΈΡ‡Π½ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ / ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒΡΡ, Π½Π΅ Ρ‚Π°ΠΊ Π»ΠΈ? Π”Π°, Π½ΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½Π΅ Ρ‚Π°ΠΊ Π»Π΅Π³ΠΊΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ сСбС это прСдставляСтС.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ …

Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ процСсса нашСго Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°

ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅, Π³Π»Π°Π²Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ слСва состоит ΠΈΠ· экзСмпляров ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² модуля (справа). 2 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Β«CompletedΒ», 1 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Β«CurrentΒ», 1 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Β«FutureΒ» с экзСмплярами ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° «Линия раздСлитСля» ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° я Π²ΡΡ‚Π°Π²Π»ΡŽ экзСмпляр Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ большС модулСй…

К соТалСнию, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈ Auto Layout Π½Π΅ Ρ‚Π°ΠΊ ΡƒΠΌΠ½Ρ‹, ΠΊΠ°ΠΊ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹. Π― знаю, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΡˆΡƒ Figma ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ, Π½ΠΎ надСюсь, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ это исправят. Однако, Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚, СдинствСнный способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваши ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ супСризмСнчивыми – это ΠΎΡ‚ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ ΠΈΡ… ΠΎΡ‚ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.

Π― ΠΏΡ€ΠΈΠ·Π½Π°ΡŽ, это каТСтся Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ.

НСплохо Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ landing ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ я ΠΌΠΎΠ³ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Π³Π΄Π΅ ΠΌΠΎΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ появятся, Π½ΠΎ ΠΏΠΎΠ³ΠΎΠ΄ΠΈΡ‚Π΅, ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Π΅Ρ‰Π΅ Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ. РазумССтся, для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· этих ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² модуля, Π° Ρ‚Π°ΠΊΠΆΠ΅ для Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π° функция Auto Layout. ИмСнно эта Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡ‚ΡŒ позволяСт органичСски ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ всСго ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π² зависимости ΠΎΡ‚ Π΅Π³ΠΎ содСрТимого, Π΄Π°ΠΆΠ΅ ΠΊΠΎΠ³Π΄Π° я измСняю тСкст слоя описания.

Ѐункция Auto Layout находится Π² Π·Π°Ρ‡Π°Ρ‚ΠΎΡ‡Π½ΠΎΠΌ состоянии, поэтому Π² блиТайшиС Π΄Π½ΠΈ / Π½Π΅Π΄Π΅Π»ΠΈ послС написания этой ΡΡ‚Π°Ρ‚ΡŒΠΈ, я оТидаю ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Π΅Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ. На Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΎΠ΄Π½Π°ΠΊΠΎ, это всС, Ρ‡Ρ‚ΠΎ я ΠΌΠΎΠ³Ρƒ Π²Π°ΠΌ ΠΎ Π½Π΅ΠΉ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ.

Π― знаю, Ρ‡Ρ‚ΠΎ Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΠ» Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π΅Ρ€ΡˆΠΈΠ½Ρƒ айсбСрга ΠΈ ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΡΡƒΠΌΠ°ΡΡˆΠ΅Π΄ΡˆΠΈΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ…, я ΠΊ своСму стыду Π½Π΅ знаю.

Однако, я надСюсь, Ρ‡Ρ‚ΠΎ, ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· вас сочтут эту ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ, ΠΈ ΠΎΠ½Π° ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ. Если Π²Π°ΠΌ Π΅ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ, Π½Π΅ ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ, ΠΏΠΈΡˆΠΈΡ‚Π΅ Π² коммСнтариях!


ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ uxdesign.cc

ΠŸΠ΅Ρ€Π΅Π΄ΠΎΠ²ΠΎΠΉ ΠΎΠΏΡ‹Ρ‚ проСктирования | Auto Layout in Figma

Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅ с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ Auto Layout Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Figma, ΠΈ ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для автоматичСской Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

Auto Layout β€” ΠΎΠ΄Π½Π° ΠΈΠ· самых Π²Π°ΠΆΠ½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Figma, ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΡ‚Π»ΠΈΡ‡Π°Π΅Ρ‚ Π΅Π΅ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… инструмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠšΠΎΡ€ΠΎΡ‡Π΅ говоря, ΠΎΠ½ позволяСт Π²Π°ΠΌ ΡΡ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΡ‹ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ ΠΌΠΎΠ³Π»ΠΈ автоматичСски ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ, заставляя ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ Π΅Π³ΠΎ содСрТимого, ΠΈΠ»ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚.

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

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ расскаТСм, Ρ‡Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Auto Layout. ΠœΡ‹ ΠΏΠΎΠΉΠ΄Π΅ΠΌ шаг Π·Π° шагом, начиная с Π΅Π³ΠΎ самых основных характСристик, Π΄ΠΎ прСдставлСния ΠΎ Π΅Π³ΠΎ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»Π΅ для создания Π±ΠΎΠ»Π΅Π΅ слоТных ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π”Π°ΠΆΠ΅ Ссли это просто Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅, я надСюсь, Ρ‡Ρ‚ΠΎ это руководство достаточно ΠΏΠΎΠ»Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эту Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ с большСй ΡƒΠ²Π΅Ρ€Π΅Π½Π½ΠΎΡΡ‚ΡŒΡŽ, Ρ‡Π΅ΠΌ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΠΏΡ€Π΅ΠΆΠ΄Π΅.

ΠžΡΠ½ΠΎΠ²Ρ‹

НачнСм с простого. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Auto Layout ΠΊΠ°ΠΊ ΠΊ Ρ„Ρ€Π΅ΠΉΠΌΠ°ΠΌ (Π΄Π°ΠΆΠ΅ Ссли ΠΎΠ½ΠΈ пустыС), Ρ‚Π°ΠΊ ΠΈ ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ. Но Ρ…ΠΎΡ€ΠΎΡˆΠΎ, Π²Ρ‹ Π½Π°Ρ‡Π½Π΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, имСя ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅ Π΄Π²Π° слоя.

Π’ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ являСтся ΠΊΠ½ΠΎΠΏΠΊΠ°: Ρ€Π°ΠΌΠΊΠ° с тСкстом, Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ простым, насколько это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ² Auto Layout, Π²Ρ‹ ΡƒΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΈΡ… ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ.

ΠŸΡ€ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Auto Layout ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ Π²Ρ‹ смоТСтС ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΅Π³ΠΎ значСния ΠΈΠ· экзСмпляра, Π½ΠΎ Π½Π΅ смоТСтС ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ±Ρ‰ΡƒΡŽ Π±Π°Π·ΠΎΠ²ΡƒΡŽ структуру.

НаправлСниС

Для Π½Π°Ρ‡Π°Π»Π° Ρƒ нас Π΅ΡΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ расти, ΠΊΠΎΠ³Π΄Π° Π² Π½Π΅ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ большС ΠΈΠ»ΠΈ мСньшС ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ (стрСлка, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π°Ρ Π²Π½ΠΈΠ·) ΠΈΠ»ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ (стрСлка, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π°Ρ Π²ΠΏΡ€Π°Π²ΠΎ). Π’ нашСм ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ установили Π΅Π³ΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ссли тСкст Π΄Π»ΠΈΠ½Π½Π΅Π΅, Ρ‚ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡΠ²ΠΎΠ±ΠΎΠ΄ΠΈΡ‚ΡŒ мСсто для содСрТимого.

НаправлСниС Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ. Figma примСняСт ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π² зависимости ΠΎΡ‚ структуры ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΈ ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ большС смысла для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ситуации. Π’ любом случаС, это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π² любоС врСмя.

ΠžΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ направлСния, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΎ Ρ‡Π΅ΠΌ ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΏΠΎΠ·ΠΆΠ΅.

Padding

Если Π²Ρ‹ Ρ€Π°Π½ΡŒΡˆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ с CSS, это ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π²Π°ΠΌ Π·Π½Π°ΠΊΠΎΠΌΡ‹ΠΌ. А Ссли Π½Π΅Ρ‚, Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ отступы ΠΊΠ°ΠΊ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Когда Π²Ρ‹ примСняСтС Auto Layout, Figma автоматичСски Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ отступы ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· сторон Π² зависимости ΠΎΡ‚ раздСлСния Π½Π° Ρ€Π°ΠΌΠΊΡƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ€Π°Π½Π΅Π΅ Π±Ρ‹Π»ΠΎ Ρƒ элСмСнтов. Если Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ заполнСния, Π²Ρ‹ смоТСтС ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹Π΅ значСния: Figma рассчитала, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ·, Π²Π»Π΅Π²ΠΎ ΠΈ Π²ΠΏΡ€Π°Π²ΠΎ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС значСния ΠΎΡ‚Π»ΠΈΡ‡Π°Π»ΠΈΡΡŒ Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°.

Если всС отступы Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ тСкст Mixed . Если Π²Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠΎ всСм сторонам ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто ввСсти Π½ΡƒΠΆΠ½ΠΎΠ΅ число, ΠΈ отступы Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ.

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, всС это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ содСрТимого ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ эти значСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ эту ΠΎΠ±Π»Π°ΡΡ‚ΡŒ свободной, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ пустыми полями.

Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅

Π”ΠΎ сих ΠΏΠΎΡ€ Ρƒ нас Π±Ρ‹Π» Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ слой Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ€Π°ΠΌΠΊΠΈ, Π½ΠΎ Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚, Ссли Ρƒ нас Π±ΡƒΠ΄Π΅Ρ‚ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½? Π”ΠΎΠ±Π°Π²ΠΈΠ² Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт, скаТСм, Π·Π½Π°Ρ‡ΠΎΠΊ, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ Π·Π½Π°Ρ‡ΠΊΠΎΠΌ ΠΈ тСкстом. Π­Ρ‚ΠΎ расстояниС Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΎΠ±Ρ‰Π΅Π³ΠΎ с отступом, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ установили Ρ€Π°Π½Π΅Π΅; это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ настраиваСтся нСзависимо. Π­Ρ‚ΠΎ расстояниС Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ ΠΌΠ΅ΠΆΠ΄Ρƒ всСми элСмСнтами. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ссли Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ элСмСнт справа, ΠΎΠ½ автоматичСски сохранит Ρ‚ΠΎ ΠΆΠ΅ расстояниС: всС слои Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ.

Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° Ρƒ нас Π΅ΡΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, содСрТащий нСсколько слоСв, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ расстояниС Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π΅ сломался, Ссли Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅ элСмСнты. Π―Ρ€ΠΊΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ элСмСнты Π² спискС. ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠΈ, сколько Π±Ρ‹ элСмСнтов Ρƒ нас Π½ΠΈ Π±Ρ‹Π»ΠΎ, всС ΠΎΠ½ΠΈ всСгда Π±ΡƒΠ΄ΡƒΡ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π½Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΌ расстоянии Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°. Когда ΠΌΡ‹ добавляСм (ΠΈΠ»ΠΈ удаляСм) слой, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ эти значСния.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Ρƒ нас Π΅ΡΡ‚ΡŒ большС элСмСнтов Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, ΠΌΡ‹ ΡƒΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ происходит Π² спискС слоСв. Figma ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ порядок располоТСния, ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ Π½Π° экранС. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ самым Π²Π΅Ρ€Ρ…Π½ΠΈΠΌ слоСм Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΠΎΡ‚ элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ находится Π²Π½ΠΈΠ·Ρƒ Π½Π° холстС, ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚.

Π­Ρ‚ΠΎ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎ ΠΌΠΎΠ΅ΠΌΡƒ Π»ΠΈΡ‡Π½ΠΎΠΌΡƒ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΡŽ (ΡƒΡ€Π°!). Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ Ссли Π²Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ порядок слоСв Π² спискС слоСв, это Ρ‚Π°ΠΊΠΆΠ΅ повлияСт Π½Π° элСмСнты Π½Π° холстС. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, порядок слоСв Π²Π°ΠΆΠ΅Π½ ΠΊΠ°ΠΊ Π½ΠΈΠΊΠΎΠ³Π΄Π°, ΠΈ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ остороТны ΠΏΡ€ΠΈ использовании Auto Layout.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ элСмСнты, пСрСтаскивая ΠΈΡ… прямо Π½Π° холст.

РаспрСдСлСниС

Π’ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠΌΡ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΊΠ°ΠΊ элСмСнты Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‚ΡΡ Π² соотвСтствии с ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ, константа Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. Π’ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°Ρ… заполнСния это отобраТаСтся ΠΊΠ°ΠΊ Packed . Но это Π½Π΅ СдинствСнный способ раздСлСния ΠΈΠ»ΠΈ распрСдСлСния элСмСнтов Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠ°Π΄Ρ€Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Auto Layout. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π΅ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ настройка ΠŸΡ€ΠΎΠ±Π΅Π» ΠΌΠ΅ΠΆΠ΄Ρƒ .

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ этого ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ высоту ΠΈΠ»ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ€Π°ΠΌΠΊΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π½Π° фиксированноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ пространство ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ элСмСнтом, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° Ρ€Π°Π²Π½Ρ‹Π΅ части. Если Π±Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ любого ΠΈΠ· этих элСмСнтов измСнились, ΠΎΠ½ΠΈ всС Ρ€Π°Π²Π½ΠΎ ΠΈΠΌΠ΅Π»ΠΈ Π±Ρ‹ Ρ‚Π°ΠΊΠΎΠ΅ ΠΆΠ΅ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅. Π­Ρ‚ΠΎ способ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ пСрСмСнная Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅, Π½ΠΎ Π² любом случаС рСгулярноС.

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅

Когда ΠΌΡ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ с Auto Layout, Π²Π°ΠΌ придСтся Π·Π°Π±Ρ‹Ρ‚ΡŒ всС, Ρ‡Π΅ΠΌΡƒ Π²Ρ‹ Π½Π°ΡƒΡ‡ΠΈΠ»ΠΈΡΡŒ Π΄ΠΎ сих ΠΏΠΎΡ€. Ну, Π½Π΅ всС, Π° ΠΊΠΎΠ΅-Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ΅: элСмСнты Π½Π΅ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ ΠΏΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, Π΅ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Π° конфигурация, Π²Π»ΠΈΡΡŽΡ‰Π°Ρ Π½Π° Π½ΠΈΡ… всСх ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ. Π­Ρ‚ΠΎ дСлаСтся ΠΈΠ· Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ Ρ€Π°Π·Π΄Π΅Π»Π°, Π³Π΄Π΅ находятся ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ заполнСния.

Π’ этом ΠΆΠ΅ ΠΏΠΎΠ»Π΅ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ выравнивания, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚, ΠΊΠ°ΠΊ элСмСнты Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Auto Layout. Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ прСдставлСно этим… свСтло-Π³ΠΎΠ»ΡƒΠ±Ρ‹ΠΌ? Π·Π½Π°Ρ‡ΠΎΠΊ.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡƒ. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ смоТСм Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρƒ нас ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Hug content . Π­Ρ‚ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ ΠΏΠΎΠ·ΠΆΠ΅, ΠΊΠΎΠ³Π΄Π° Π±ΡƒΠ΄Π΅ΠΌ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ ИзмСнСниС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° , Π½ΠΎ Π² основном это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ основной ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€ своСго содСрТимого.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ самыми Π΄Π»ΠΈΠ½Π½Ρ‹ΠΌΠΈ элСмСнтами ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π΄Π²Π° Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½Ρ‹Ρ… элСмСнта, ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ½ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ Π½Π΅ Π΄Π²ΠΈΠ³Π°ΡŽΡ‚ΡΡ. ΠžΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ мСньшС, Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚Ρ‹ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ.

Когда Ρƒ нас Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, высота ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±Ρ‹Π»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Ρ‹ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ фиксированный), Ρ‚ΠΎΠ³Π΄Π° Ρƒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… элСмСнтов Π±ΡƒΠ΄Π΅Ρ‚ большС мСста ΠΈ свободы пСрСмСщСния. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ выравнивания станут Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ для размСщСния этих элСмСнтов Π² пространствС ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² выравнивания Π² Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ стСпСни зависит ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹Ρ… настроСк Π·Π°Ρ…Π²Π°Ρ‚Π° ΠΈ ΠΎΡ‚ распрСдСлСния ΠΏΠΎ Ρ„Ρ€Π΅ΠΉΠΌΡƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

ИзмСнСниС Ρ€Π°Π·ΠΌΠ΅Ρ€Π°

Π˜Ρ‚Π°ΠΊ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Ρƒ нас Π΅ΡΡ‚ΡŒ всС основы ΠΏΠΎΠ΄ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π΅ΠΌ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌ ИзмСнСниС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° . Π­Ρ‚Π° конфигурация повлияСт Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ Ρ„Ρ€Π΅ΠΉΠΌ-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΈ Π΅Π³ΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ слои Π±ΡƒΠ΄ΡƒΡ‚ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈΠ»ΠΈ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ, ΠΊΠΎΠ³Π΄Π° любой ΠΈΠ· Π½ΠΈΡ… измСняСт свою ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈΠ»ΠΈ высоту. Π­Ρ‚ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ слоТны, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΈ Ρ„Ρ€Π΅ΠΉΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ свои собствСнныС настройки измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΈ ΠΎΠ½ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ шаг Π·Π° шагом, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€: Π£ нас Π΅ΡΡ‚ΡŒ ΠšΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ° с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, тСкстом ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ. Π’Π°ΠΌ Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½Ρ‹ΠΉ отступ 24 пиксСля, Π° расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами составляСт 16 пиксСлов. Как Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ, Π½Π΅ всС элСмСнты ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡŠΡΡ‚ΠΈΠΉ

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ, это Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡŠΡΡ‚ΠΈΠΉ . Π’ основном это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρ„Ρ€Π΅ΠΉΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚ свой Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊ своСму содСрТимому. Π­Ρ‚ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΊ ΡˆΠΈΡ€ΠΈΠ½Π΅, Ρ‚Π°ΠΊ ΠΈ ΠΊ высотС, ΠΈ это Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ Π΄ΠΎ сих ΠΏΠΎΡ€ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ….

Если Π±Ρ‹ ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ большС тСкста, Ρ‚ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π±Ρ‹Π» Π±Ρ‹ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±Π»ΠΈΠΆΠ΅ (ΠΈΠ»ΠΈ ΠΎΠ±Π½ΠΈΠΌΠ°Π») своС содСрТимоС, сохраняя Ρ‚ΠΎ ΠΆΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±Ρ‹Π»ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ Ρ€Π°Π½Π΅Π΅. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ содСрТимоС Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ, насколько большим Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€.

Π’ΠΎ ΠΆΠ΅ самоС ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ Π±Ρ‹, Ссли Π±Ρ‹ изобраТСния Π½Π΅ Π±Ρ‹Π»ΠΎ. Бкрывая этот слой, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ адаптируСтся ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½ΡƒΠΆΠ΅Π½ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ элСмСнтам.

Ѐиксированный

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

Если ΠΏΠΎΠΌΠΈΠΌΠΎ всСго этого ΠΌΡ‹ Π΅Ρ‰Π΅ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ спрячСм, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‚ΠΎ вСсь ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ останСтся Π½Π΅Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚Ρ‹ΠΌ ΠΈ сохранит свою Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ высоту. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ, пСрСйдя ΠΊ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΌ Настройка Hug content , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ снова адаптировался ΠΊ своСму содСрТимому.

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

Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ слои Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΠΏΡ†ΠΈΡŽ Π—Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ , Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ Β«, поТалуйста, Ρ€Π°ΡΡˆΠΈΡ€ΡŒΡ‚Π΅ сСбя, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ всС доступноС пространство Β». Π’ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±Ρ‹Π»Π° Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΠΉ, Π° минимальной, Ρ‚Ρ€Π΅Π±ΡƒΠ΅ΠΌΠΎΠΉ Π΅Π΅ содСрТимым.

Π­Ρ‚ΠΎ конфигурация, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ слой Π·Π° слоСм Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, тСкст ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΠΎΠ³ΡƒΡ‚ вСсти сСбя ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ, Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Ρ€Π΅ΡˆΠΈΠΌ (Ρ€Π΅Π·ΡŽΠΌΠΈΡ€ΡƒΡ: ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ всС доступноС пространство ΠΈΠ»ΠΈ фиксированный Ρ€Π°Π·ΠΌΠ΅Ρ€) 9.0003

НапримСр, ΠΊΠΎΠ³Π΄Π° Ρƒ нас Π΅ΡΡ‚ΡŒ Π΄Π²Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° с фиксированной высотой, ΠΎΠ΄ΠΈΠ½ рядом с Π΄Ρ€ΡƒΠ³ΠΈΠΌ. Заставив тСкст ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ доступноС пространство (этот слой Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ настройку Fill container ), ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠΈ всСгда Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π»ΠΈΡΡŒ Π²Π½ΠΈΠ·Ρƒ. ВСкстовый слой Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ (Π±Π΅Π· ΠΊΠ°Π»Π°ΠΌΠ±ΡƒΡ€Π°) ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ всю Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡƒΡŽ высоту.

Π‘ этого ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΈΠ³Ρ€Π°Ρ‚ΡŒ с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ комбинациями. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, самоС Π²Π°ΠΆΠ½ΠΎΠ΅ β€” Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, ΠΊΡ‚ΠΎ Π³Π»Π°Π²Π½Ρ‹ΠΉ ΠΏΡ€ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты всСго ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°: ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΈΠ»ΠΈ Π΅Π³ΠΎ содСрТимоС.

Π˜ΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π—Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ автоматичСскому измСнСнию ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈΠ»ΠΈ высоты основного ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π½Π° фиксированноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

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

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΡ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² Figma для опрСдСлСния полоТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΎΠ½ ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚, измСняСтся. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ сСбС Ρ‚Π°ΠΊΠΈΠ΅ вопросы, ΠΊΠ°ΠΊ: Π΄ΠΎΠ»ΠΆΠ΅Π½ Π»ΠΈ ΠΎΠ½ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ ΠΈΠ»ΠΈ всСгда ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈ Ρ‚ΠΎΠΌ ΠΆΠ΅ расстоянии ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· своих сторон? Π’ контСкстС Auto Layout эти ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈΠ»ΠΈ Ρ„Ρ€Π΅ΠΉΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Π΅Π³ΠΎ содСрТимого.

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ доступны, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли Ρ„Ρ€Π΅ΠΉΠΌ ΠΈΠ»ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΡƒΠΆΠ΅ находится Π²Π½ΡƒΡ‚Ρ€ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ°.

Π­Ρ‚ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Constraints and Resizing , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ Ρ€Π°Π½Π΅Π΅, выбирая Π»ΠΈΠ½ΠΈΠΈ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΡ… ΠΈΠ· Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‰Π΅ для понимания. ΠŸΡ€ΠΈ использовании этого мСню ΠΈΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π² Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΌ ΠΊΠ²Π°Π΄Ρ€Π°Π½Ρ‚Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ всС сразу.

Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΡƒΠΆΠ΅ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΡƒΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΠ»ΠΈΡΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅ ΠΌΡ‹ сказали, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ адаптируСтся ΠΏΡ€ΠΈ скрытии ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· слоСв. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ происходит, Ρ‚Π°ΠΊ это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ остаСтся Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ Π² пространствС, ΠΈ это ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ установлСно Π½Π° Center .

Если ΠΌΡ‹ Π²Ρ‹Π±Π΅Ρ€Π΅ΠΌ ΠΎΠΏΡ†ΠΈΡŽ Top с Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, Ρ‚ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΎΠ΅ ΠΆΠ΅ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΈ Ρƒ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ поля, ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ своСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

Π’ΠΎ ΠΆΠ΅ самоС ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΡ‚ΠΈ с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ ΠΈΠ»ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ°ΠΌΠΈ, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ примСняСтся Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ автоматичСская ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ°. ΠœΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, Ρ…ΠΎΡ‚ΠΈΠΌ Π»ΠΈ ΠΌΡ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΈΠ»ΠΈ Π±Π»ΠΈΠΆΠ΅ справа Π½Π°Π»Π΅Π²ΠΎ, ΠΏΠΎΠΊΠ° ΠΎΠ½ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‚ свою ΡˆΠΈΡ€ΠΈΠ½Ρƒ вдоль ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

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

Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹

Π”ΠΎ сих ΠΏΠΎΡ€ ΠΌΡ‹ примСняли автоматичСский ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΊΠ°Π΄Ρ€Ρƒ Π·Π° Ρ€Π°Π·, Π΄Π°ΠΆΠ΅ Ссли ΠΌΡ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈ настройки ΠΈ для Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… слоСв. Битуация Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ ΡƒΡΠ»ΠΎΠΆΠ½ΡΡ‚ΡŒΡΡ (ΠΈΠ»ΠΈ, Π»ΡƒΡ‡ΡˆΠ΅ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, вСсСло?), ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ примСняСм Auto Layout ΠΊ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΌ Ρ€Π°ΠΌΠΊΠ°ΠΌ.

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

ΠŸΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Π½Π° Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ, это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· элСмСнтов ΠΈΠΌΠ΅Π΅Ρ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ располоТСниС. ΠŸΡ€ΠΈ скрытии ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· тСкстовых слоСв содСрТимоС автоматичСски цСнтрируСтся. Но это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ тСкстов, сгруппированных Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠ°Π΄Ρ€Π΅, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΡ…. Π’Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡƒ ΠΊΠΎ всСм 9 элСмСнтам.0031 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ссли Π±Ρ‹ ΠΌΡ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ всС Π°Π²Π°Ρ‚Π°Ρ€Ρ‹, тСкст использовал Π±Ρ‹ всю Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ.

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

ΠšΡ€Π°Ρ‚ΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ€ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Ρƒ нас Π΅ΡΡ‚ΡŒ Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚: тСксты сгруппированы с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ располоТСниСм, ΠΈ ΠΎΠ½ΠΈ находятся Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ настройку Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ располоТСния. Π’ Ρ‚ΠΎ ΠΆΠ΅ врСмя всС это находится Π²Π½ΡƒΡ‚Ρ€ΠΈ большого-большого ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΎΠΉ, примСняСмой для Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ ΠΊ количСству ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΡ…ΡΡ Π² Π½Π΅ΠΌ элСмСнтов. Π§Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π΅Ρ‰Π΅? Π”Π°. Если Π²Ρ‹ Π΅Ρ‰Π΅ Π½Π΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ, расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами с Π°Π²Π°Ρ‚Π°Ρ€Π°ΠΌΠΈ мСньшС, Ρ‡Π΅ΠΌ с ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ элСмСнтами основного Π±Π»ΠΎΠΊΠ°.

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

ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ

И всС! Π― надСюсь, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π² это ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Π² нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², Π²Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠΉΠΌΠ΅Ρ‚Π΅, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Auto Layout Π² Figma. Как ΠΈ Π²ΠΎ всСм, трСбуСтся ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ прСдсказуСмыС ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹. И Π΄Π°ΠΆΠ΅ Π² этом случаС всСгда Π΅ΡΡ‚ΡŒ изрядноС количСство ΠΏΡ€ΠΎΠ± ΠΈ ошибок, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°.

Π‘ΠΎΠ»ΡŒΡˆΠ΅ всСго я Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π²Ρ‹ Π½Π΅ почувствуСтС сСбя Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΠΎ Π² ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌΡ‹Ρ… дизайнСрских Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ…. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅, я ΠΎΡΡ‚Π°Π²Π»ΡŽ Π½ΠΈΠΆΠ΅ ΠΏΠ°Ρ€Ρƒ ссылок, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ. Бпасибо Π·Π° ΠΏΡ€ΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅, ΠΈ особСнно Π·Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΄ΠΎΡ‡ΠΈΡ‚Π°Π»ΠΈ Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°!

  • Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½Ρ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ автоматичСского ΠΌΠ°ΠΊΠ΅Ρ‚Π°
  • ДСтская ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΊΠ° Figma Auto Layout

Как Π²Π°ΠΌ эта ΡΡ‚Π°Ρ‚ΡŒΡ?

Если Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΏΠ°Ρ€Π° свободных ΠΌΠΈΠ½ΡƒΡ‚, я Π±Ρ‹Π» Π±Ρ‹ ΠΏΡ€ΠΈΠ·Π½Π°Ρ‚Π΅Π»Π΅Π½, Ссли Π±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΌΠ½Π΅, Π·Π°ΠΏΠΎΠ»Π½ΠΈΠ² Π°Π½ΠΎΠ½ΠΈΠΌΠ½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи. ВсСго 5 вопросов.

ΠŸΠΎΠΌΠΎΡ‰ΡŒ с ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связью

АвтоматичСский ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π° Ρ„ΠΈΠ³ΠΌΠ΅ — Рис. Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Ρ„Π°Π²ΠΎΡ€ΠΈΡ‚Ρ‹

Π Π°Π±ΠΎΡ‚Π° с автоматичСской ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΎΠΉ для ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Рис.

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

1:17

3

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

2:14

4

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

30 79009 0 0:000002 5

Π‘Ρ‚ΠΈΠ»ΠΈ Ρ†Π²Π΅Ρ‚Π°

1:13

7

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

1:17

8

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

1:36

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

10

Π Π΅ΠΆΠΈΠΌΡ‹ смСшивания

2:02

11

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, распрСдСлСниС, ΠΈ ΠΏΡ€ΠΈΠ»ΠΈΡ‡Π½Ρ‹Π΅ свойства

1:24

12

Боюз ΠΈ ΡƒΠ³Π»ΠΎΠ²ΠΎΠΉ радиус

2:53

13

9000 9000

2:53

13

9000 9000 9000 9000 9000

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

1:48

14

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

2:00

15

Π—Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, Ρ…ΠΎΠ΄, ΠΈ ΡƒΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Ρ…ΠΎΠ΄

3:21

16

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

16

. 1:37

17

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

1:13

18

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

19

ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ конструкция

3:07

20

Constraints

1:07

20 0003

1:070003

21

Layout Grid

2:00

22

Auto Layout in Figma

23

Vector Mode

0:55

24

Vector Network

1:19

25

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

2:00

26

3D ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹

1:20

27

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

2:03

28

Booleans

2:24

28

2:24

299

Π”ΠΈΠ·Π°ΠΉΠ½ Π·Π½Π°Ρ‡ΠΊΠ°

1:48

30

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

1:50

31

Команда

2:14

32

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

1:59

Π”ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΡ‹

1:41

34

Apple Watch Ring Dring

2:23

35

ЭкспортныС Π°ΠΊΡ‚ΠΈΠ²Ρ‹ Π½Π° рис.

1:39

36

ЭкспортированиС ΠΊΠΎΠ΄Π° CSS

1:049

.0003

37

ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ с Π΄Π°Π½Π½Ρ‹ΠΌΠΈ

1:57

38

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

2:25

39

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

1:25

40

Mustplayer, Commenting & Preview

400003

, ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, ΠΈ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ : 36

41

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

5:39

42

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

43

UIKITS

4:47

44

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

5:47

449

5:47

4000

9000 5:47

9000 2 4000

9000 5:47

9000 2 4000

9000 5:47

44

.0003

Blob Background

4:45

46

Wave Background

6:46

47

3D Shapes

12:27

48

Parallax Prototyping in Figma

7:52

49

3D Perspection Design

7:16

50

БтСклянный Π·Π½Π°Ρ‡ΠΎΠΊ

9:16

51

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

12:54

52

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΊΠΎΠ΄ анимация анимация анимация анимация анимация анимация анимация анимация. с Π±ΡƒΠΊΠ²Π°ΠΌΠΈ

29:38

53

Анимация футуристичСской Π»ΠΈΠ½ΠΈΠΈ

19:30

54

Π˜ΠΌΠΏΠΎΡ€Ρ‚ Adobe Illustrator Π΄ΠΎ Figma

3:16

55

.

56

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

2:27

57

ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π° ΠΊΠ°ΠΌΠ΅Ρ€Ρ‹

3:27

58

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

4:49

59

ΠŸΠΎΠ²ΠΎΡ€ΠΎΡ‚.0003

3:11

60

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ с содСрТаниСм ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

3:42

61

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ ΠΎΠ±ΡŠΡΡ‚ΠΈΡ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°

62

Advanced Auto Mayout

63

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

5:577 70002 63

Circular Texcul

64

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

2:39

65

Π‘Ρ‚Ρ€ΠΎΠΊΠΈ ΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Bar Bar

4:37

66

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

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

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

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

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

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

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

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

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

Π²ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ»Ρ‹, EPUB and Subtitles

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

1

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

Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ„ΠΈΠ³. 2

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

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

1:17

3

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

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

2:14

4

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

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

1:27

5

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

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

1:13

6

Маски

ΠžΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅ использованию масок Π² Figma

1:47

7

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

1:17

8

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

Π Π°Π±ΠΎΡ‚Π° с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°ΠΌΠΈ Π½Π° рис.

1:36

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

Π€ΠΎΠ½Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π° рис. Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ интСрСсныС Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π΅ΠΆΠΈΠΌΠΎΠ² налоТСния

2:02

11

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, распрСдСлСниС ΠΈ свойства очистки

Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ выравнивания ΠΈ очистки Π² Figma

1:24

12

Боюз ΠΈ ΡƒΠ³Π»ΠΎΠ²ΠΎΠΉ радиус

Π Π°Π±ΠΎΡ‚Π° Π½Π°Π΄ Боюзом ΠΈ ΡƒΠ³Π»ΠΎΠ²Ρ‹ΠΌ радиусом

2:53

13

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

Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ способов Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Ρ‚Π΅Π½Π΅ΠΉ ΠΈ размытия ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ

1:48

14

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

Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΠΈ ΠΏΠΎ использованию ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Figma

2:00

15

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

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

3:21

16

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

Π˜ΡΡΠ»Π΅Π΄ΡƒΠΉΡ‚Π΅ ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅ ΠΎ свойствах Ρ‚ΠΈΠΏΠ° Ρ„ΠΈΠ³ΡƒΡ€Π°

1:37

17

Google Fonts ΠΈ Custom Fonts

Π˜Π³Ρ€Ρƒ с Ρ„ΠΎΠ½Ρ‚Π°ΠΌΠΈ Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅

1:13

.

18

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

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

19

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

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

3:0003

20

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

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

1:11

21

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

ΠΠ°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с использованиСм сСток, столбцов, строк ΠΈ ΠΏΠΎΠ»Π΅ΠΉ.

2:00

22

АвтоматичСская ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π° рис.

.

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

ΠΠ°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ сСти ΠΈ Π·Π½Π°Ρ‡ΠΊΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

1:19

25

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

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

2:00

26

3D Mockups

.

1:20

27

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

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

2:24

29

Π”ΠΈΠ·Π°ΠΉΠ½ Π·Π½Π°Ρ‡ΠΊΠΎΠ²

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

1:48

30

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

,

.

1:50

31

Команда Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°

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

2:14

32

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

Π Π°Π±ΠΎΡ‚Π° с ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ ΠΊΠΎΠ½Ρ„Π΅Ρ‚Ρ‚ΠΈ

1:59

0002 33

Looper Shape Duplication

Π Π°Π±ΠΎΡ‚Π° с Looper Figma Plugin

1:41

34

Apple Watch Ring Dring

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠΎΠ»ΡŒΡ†Π° Apple Watch Π½Π° рис.

2:23

35

Π­ΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠ΅ Π°ΠΊΡ‚ΠΈΠ²Ρ‹ Π½Π° рис.

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

1:39

36

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

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

1:04

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

20003

ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΡΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ

1:57

38

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

быстро создайтС Ρ†Π΅Π»Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΊ для Π΄ΠΈΠ·Π°ΠΉΠ½Π° вашСго прилоТСния Π½Π° рис.

2:25

39

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

история вСрсий Π² Figma

1:25

40

ΠœΠ½ΠΎΠ³ΠΎΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ ΠΈΠ³Ρ€Π°, ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ΠΈ ΠΏΡ€Π΅Π²ΡŒΡŽ

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

1:36

41

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

Combining similar components into variants

5:39

42

Interactive Components

Creating reusable interactions using interactive components

43

UIKits

Designing using UIKits in Figma

4:47

44

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

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

5:47

45

Π€ΠΎΠ½ BLOB-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ простого Ρ„ΠΎΠ½Π° BLOB-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π² Figma

4:45

46

Π’ΠΎΠ»Π½ΠΎΠ²ΠΎΠΉ Ρ„ΠΎΠ½

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π²ΠΎΠ»Π½ΠΎΠ²ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² Figma с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта «Изгиб» ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Π° Β«Π’ΠΎΠ»Π½Π°Β» in Figma

12:27

48

ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡΠ½ΠΎΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² Figma

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

7:52

49

3D Perspection Design

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ свой ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс Π² 3D -пСрспСктиву

7:16

50

БтСклянный Π·Π½Π°Ρ‡ΠΎΠΊ

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ стСклянный Π·Π½Π°Ρ‡ΠΎΠΊ

9:16

51

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

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΎΠ»Π½Ρ‹ Π² Ρ…Ρ€ΡƒΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΌ ΡˆΠ°Ρ€Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта прототипирования ΠšΠΎΠ΄ΠŸΠ΅ΡΠΎΡ‡Π½ΠΈΡ†Π°

29:38

53

ЀутуристичСская анимация Π»ΠΈΠ½ΠΈΠΈ

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ футуристичСский Ρ„ΠΎΠ½ с линиями, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ инструмСнт для Ρ€ΡƒΡ‡ΠΊΠΈ Π½Π° рис.

19:30

54

Π˜ΠΌΠΏΠΎΡ€Ρ‚ Adobe Illustrator Π½Π° Ρ„ΠΈΠ³. для ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° Ρ„Π°ΠΉΠ»Π° Illustrator Π² Figma

3:16

55

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

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

4:07

56

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

Π‘Π½ΠΈΠΌΠΈΡ‚Π΅ Ρ„ΠΎΠ½ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Π° Remodbg Π½Π° рис.

2:27

57

ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π° ΠΊΠ°ΠΌΠ΅Ρ€Ρ‹

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ ΠΊΠ°ΠΌΠ΅Ρ€Ρ‹ Π½Π° рис.

3:27

58

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

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

4:49

59

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

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

3:11

60

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

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

3:42

61

ΠžΠ±Π½ΡΡ‚ΡŒ, Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°

03 содСрТимоС, фиксированная ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈΠ»ΠΈ высота, ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ заполнСния ΠΈ усСчСниС тСкста

62

Π Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΉ автоматичСский ΠΌΠ°ΠΊΠ΅Ρ‚

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

63

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

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

5:57

64

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

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ свои ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ Π½Π° мобильном устройствС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ мобильного прилоТСния 2:39

65

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

Как ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π»ΠΈΠΏΠΊΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ

4:37

66

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

2 ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π»ΡŽΠ±ΡƒΡŽ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ ΡΠ΅Ρ‚ΡŒ Π½Π° вашСм ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ΅

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

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