Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

ГорячиС клавиши Π² Figma

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

НиТС я ΠΏΡ€ΠΈΠ²Π΅Π» ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Ρ‹ с Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ с ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΎΠΌ.

Π’ΠΊΠ»Π°Π΄ΠΊΠ° β„–1 (ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹)

Π’ΠΊΠ»Π°Π΄ΠΊΠ° β„–2 (Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹)

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π’ΠΊΠ»Π°Π΄ΠΊΠ° β„–3 (ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€):

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π’ΠΊΠ»Π°Π΄ΠΊΠ° β„–4 (ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅):

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π’ΠΊΠ»Π°Π΄ΠΊΠ° β„–5 (Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ β€œΠ’Π΅ΠΊΡΡ‚β€):

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π’ΠΊΠ»Π°Π΄ΠΊΠ° β„–6 (Π’Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ изобраТСния):

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π Π°Π±ΠΎΡ‚Π° с Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ (Π­Ρ‚ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ я Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ)

Π’ΠΊΠ»Π°Π΄ΠΊΠ° β„–7 (Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅):

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π’ΠΊΠ»Π°Π΄ΠΊΠ° β„–9 (Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅):

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π’ΠΊΠ»Π°Π΄ΠΊΠ° β„–10 (ВрансформированиС):

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π’ΠΊΠ»Π°Π΄ΠΊΠ° β„–11 (Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅):

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π’ΠΊΠ»Π°Π΄ΠΊΠ° β„–12 (ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹):

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π‘Π»ΠΎΠΈ Π² Ρ„ΠΈΠ³ΠΌΠ΅: ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΉ Ρ€Π°Π·Π±ΠΎΡ€ ΠΏΠ°Π½Π΅Π»ΠΈ Β«LayersΒ» Π² Figma

Π’ этой инструкции разбСрёмся с панСлью слои (Layers) Π² Ρ„ΠΈΠ³ΠΌΠ΅. Π Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ Π½Π΅ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹Π΅ Ρ„ΠΈΡˆΠΊΠΈ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ быстрСС ΠΈ ΠΏΡ€ΠΎΡ‰Π΅.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅ ΠΈ Π·Π°Ρ‡Π΅ΠΌ ΠΎΠ½ΠΈ Π½ΡƒΠΆΠ½Ρ‹?

Π‘Π»ΠΎΠΈ Π² Ρ„ΠΈΠ³ΠΌΠ΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ содСрТимоС вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π’ ΠΏΠ°Π½Π΅Π»ΠΈ Β«LayersΒ» Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ созданныС Ρ„ΠΈΠ³ΡƒΡ€Ρ‹, Ρ„Ρ€Π΅ΠΉΠΌΡ‹, Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈ Ρ‚.Π΄. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ°Π½Π΅Π»ΠΈ слоёв, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ элСмСнты Π½Π°Π²Π΅Ρ€Ρ… ΠΈΠ»ΠΈ Π²Π½ΠΈΠ· ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

НапримСр Ссли Π²Ρ‹ создадитС 3 ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°, Ρ‚ΠΎ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π² ΠΏΠ°Π½Π΅Π»ΠΈ Β«LayersΒ» ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π€Ρ€Π΅ΠΉΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

Как ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅?

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅, Ρ‚ΠΎ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹Π΅ элСмСнты. НаТмитС Π½Π° ΠΏΡ€Π°Π²ΡƒΡŽ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ ΠΌΡ‹ΡˆΠΈ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡƒΠ½ΠΊΡ‚ Β«Group selectionΒ». Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ горячими клавишами Β«Ctrl + GΒ».

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π’ ΠΏΠ°Π½Π΅Π»ΠΈ слоСв появится Π³Ρ€ΡƒΠΏΠΏΠ°. Если Π²Ρ‹ Π΅Ρ‘ пСрСмСститС, Ρ‚ΠΎ всС содСрТимоС Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ. Π•Ρ‘ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΠΊΡ€Ρ‹Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π°ΠΆΠ°Π² Π½Π° стрСлку рядом с ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΡ‹ Π² слоях.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π’Π°ΠΊΠΆΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ слои с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«FrameΒ». Для этого Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹Π΅ слои ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΏΡ€Π°Π²ΡƒΡŽ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ ΠΌΡ‹ΡˆΠΈ, Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β«Frame selectionΒ». Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° горячиС клавиши Β«Alt + Ctrl + GΒ». Π’ слоях появится ΠΈΠΊΠΎΠ½ΠΊΠ° Ρ„Ρ€Π΅ΠΉΠΌΠ°, которая выглядит ΠΊΠ°ΠΊ 2 Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΈ 2 Π³ΠΎΡ€ΠΈΠ·ΠΎΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ скрСщСнныС ΠΌΠ΅ΠΆΠ΄Ρƒ собой.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Если Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° стрСлку Π² слоях Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ² созданного Ρ„Ρ€Π΅ΠΉΠΌΠ°, Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΅Π³ΠΎ содСрТимоС.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„Ρ€Π΅ΠΉΠΌ Π½Π° Π³Ρ€ΡƒΠΏΠΏΡƒ, Ρ‚ΠΎ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π΅Π³ΠΎ ΠΈ справа ΠΈΠ· списка ΠΏΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«GroupΒ» вмСсто Β«FrameΒ».

Как Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ слой Π² Figma?

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ любой слой Π² Ρ„ΠΈΠ³ΠΌΠ΅, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ Π·Π°ΠΌΠΊΠ° Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ² Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ слоя. Π’ этом случаС Π²Ρ‹ Π½Π΅ смоТСтС Π΅Π³ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ ΠΌΡ‹ΡˆΠΈ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ пригодится, Ссли Π²Ρ‹ Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π²Ρ‹Π΄Π΅Π»ΡΡ‚ΡŒ. Аналогично ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ слой.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ горячими клавишами Β«Ctrl + Shift + LΒ» для Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΠΈ слоя ΠΈΠ»ΠΈ Π΅Π³ΠΎ Ρ€Π°Π·Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΠΈ.

Как ΡΠΊΡ€Ρ‹Ρ‚ΡŒ слой Π² Ρ„ΠΈΠ³ΠΌΠ΅?

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ слой Π² Ρ„ΠΈΠ³ΠΌΠ΅ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ Π³Π»Π°Π·Π° Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ² Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ элСмСнта Π² ΠΏΠ°Π½Π΅Π»ΠΈ Β«LayersΒ» слСва. Π’Π°ΠΊΠΆΠ΅ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ слой ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° горячиС клавиши Β«Ctrl + Shift + HΒ».

Как Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ слой Π² Figma?

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ быстро Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ слой, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π»ΠΈ, Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ Π½Π° Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π²Π°ΠΌ элСмСнт курсор ΠΌΡ‹ΡˆΠΈ, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Β«CtrlΒ» ΠΈ Π½Π° ΠΏΡ€Π°Π²ΡƒΡŽ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ ΠΌΡ‹ΡˆΠΈ. ΠŸΠ΅Ρ€Π΅Π΄ Π²Π°ΠΌΠΈ появится список всСх слоёв, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΅ΡΡ‚ΡŒ Π² этой области. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹ΠΉ элСмСнт ΠΈ Ρ€Π°Π·Π±Π»ΠΎΠΊΠΈΡ€ΡƒΠΉΡ‚Π΅ Π² слоях ΠΏΡ€ΠΈ нСобходимости.

Как ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ слои Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ· Π² Ρ„ΠΈΠ³ΠΌΠ΅?

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ слой Π² Ρ„ΠΈΠ³ΠΌΠ΅ Π²Π²Π΅Ρ€Ρ… ΠΈΠ»ΠΈ Π²Π½ΠΈΠ·, просто Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ курсор Π½Π° Π½ΡƒΠΆΠ½Ρ‹ΠΉ слой Π² ΠΏΠ°Π½Π΅Π»ΠΈ Β«LayersΒ» ΠΈ пСрСмСститС Π΅Π³ΠΎ с Π·Π°ΠΆΠ°Ρ‚ΠΎΠΉ Π»Π΅Π²ΠΎΠΉ клавишСй ΠΌΡ‹ΡˆΠΈ Π²Π²Π΅Ρ€Ρ… ΠΈΠ»ΠΈ Π²Π½ΠΈΠ·.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

ГорячиС клавиши для пСрСмСщСния Π²Π²Π΅Ρ€Ρ… Π½Π° 1 слой Β«Ctrl + [Β»

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Для пСрСмСщСния элСмСнта Π² самый Π½ΠΈΠ· Π³Ρ€ΡƒΠΏΠΏΡ‹ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«Ctrl + Alt + [Β»

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Если Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ элСмСнт Π½Π° 1 слой Π½Π°Π²Π΅Ρ€Ρ…, Ρ‚ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ клавишами Β«Ctrl +]Β»

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Для пСрСмСщСния элСмСнта Π½Π°Π²Π΅Ρ€Ρ… Π³Ρ€ΡƒΠΏΠΏΡ‹ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«Ctrl + Alt + ]Β» ΠΈΠ»ΠΈ Β«Ctrl + Alt + ъ».

Как быстро ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅?

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Ρ‚ΡŒ слой Π² Ρ„ΠΈΠ³ΠΌΠ΅, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° Π½Π΅Π³ΠΎ слСва Π² ΠΏΠ°Π½Π΅Π»ΠΈ Β«LayersΒ» 2 Ρ€Π°Π·Π° Π»Π΅Π²ΠΎΠΉ клавишСй ΠΌΡ‹ΡˆΠΈ ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ горячих клавиш Β«Ctrl + RΒ».

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Если послС пСрСимСнования Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Β«TabΒ», Ρ‚ΠΎ вас пСрСмСстит ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ слою, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Ρ‚ΡŒ сразу.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Если Π½Π°ΠΆΠΌΡ‘Ρ‚Π΅ Π½Π° Β«Shift + TabΒ», Ρ‚ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ΡΡŒ ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ слою.

МассовоС ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ слоёв Π² Figma

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ массово ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Ρ‚ΡŒ слои Π² Figma, Ρ‚ΠΎ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹Π΅ элСмСнты ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«Ctrl + RΒ». ΠŸΠ΅Ρ€Π΅Π΄ Π²Π°ΠΌΠΈ появится Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ. Если Π² Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΏΠΎΠ»Π΅ Π²ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ имя Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ слоя, Π° Π·Π°Ρ‚Π΅ΠΌ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π½ΠΎΠ²ΠΎΠ΅ имя, Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ это имя (Π»ΡƒΡ‡ΡˆΠ΅ посмотритС Π²ΠΈΠ΄Π΅ΠΎ Π²Ρ‹ΡˆΠ΅, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚).

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Как ΡΠΊΡ€Ρ‹Ρ‚ΡŒ панСль слоёв Π² Ρ„ΠΈΠ³ΠΌΠ΅?

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ (ΡƒΠ±Ρ€Π°Ρ‚ΡŒ) ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ панСль слоёв Π² Ρ„ΠΈΠ³ΠΌΠ΅, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ горячих клавиш Β«Ctrl + \Β». Π’ этом случаС скроСтся панСль слоСв, Π° Ρ‚Π°ΠΊΠΆΠ΅ панСль справа (Design, Prototype, Inspect).

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Ρƒ панСль слоСв Β«LayersΒ» слСва, Ρ‚ΠΎ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ мСню слСва, свСрху, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡƒΠ½ΠΊΡ‚ Β«ViewΒ», Π·Π°Ρ‚Π΅ΠΌ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Β«PanelsΒ» ΠΈ надпись Β«Show left sidebarΒ» ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° клавиши Β«Shift + Ctrl + \Β»

Как ΡΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ всС слои Π² Ρ„ΠΈΠ³ΠΌΠ΅?

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ всС слои Π² Ρ„ΠΈΠ³ΠΌΠ΅ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ горячих клавиш Β«Alt + LΒ». Π’ этом случаС Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΡ‹, Π±Π΅Π· ΠΈΡ… Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ содСрТимого.

Как Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ элСмСнт Π² Π³Ρ€ΡƒΠΏΠΏΠ΅?

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° 1 слой Π² Π³Ρ€ΡƒΠΏΠΏΠ΅ ΠΈΠ»ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ΅ ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты ΠΈΠ»ΠΈ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΏΠΏΡƒ, которая Π΅ΡΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ, Ρ‚ΠΎ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° Β«EnterΒ». Π’ этом случаС Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π±Ρ€Π°Π½Ρ‹ элСмСнты Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΈΠ»ΠΈ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΏΠΏΡ‹.

Как Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт Π² Π³Ρ€ΡƒΠΏΠΏΠ΅?

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Если Π²Ρ‹ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ 1 элСмСнт Π² Π³Ρ€ΡƒΠΏΠΏΠ΅, Π° Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΡ‘Ρ‚Π΅ Π½Π° клавиши Β«Shift + EnterΒ», Ρ‚ΠΎ ΠΏΠΎΠ΄Π½ΠΈΠΌΠΈΡ‚Π΅ΡΡŒ Π½Π° 1 слой Π² этой Π³Ρ€ΡƒΠΏΠΏΠ΅. Π‘ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π±Ρ€Π°Π½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠ°Ρ Π³Ρ€ΡƒΠΏΠΏΠ° Π² слоях.

Как ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ слой Π² Ρ„ΠΈΠ³ΠΌΠ΅?

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π½Π΅Π½ΡƒΠΆΠ½Ρ‹ΠΉ слой Π² Ρ„ΠΈΠ³ΠΌΠ΅, просто Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π΅Π³ΠΎ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«BackspaceΒ».

Как Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ слой Π² Ρ„ΠΈΠ³ΠΌΠ΅?

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ любой слой Π² Ρ„ΠΈΠ³ΠΌΠ΅, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ горячих клавиш Β«Ctrl + DΒ». Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎ ΡƒΠΌΠ½ΠΎΠΌΡƒ ΠΏΠΎ этой ссылкС.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π˜Ρ‚Π°ΠΊ, Π² этой инструкции ΠΌΡ‹ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ с панСлью слои (Layers) Π² Ρ„ΠΈΠ³ΠΌΠ΅. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ слои, ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ, Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΈ Ρ‚.Π΄. Π£Π²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ это ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ быстрСС.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Figma β€” хитрости Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ

Π’ Figma ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹Ρ… ΠΌΠΎΠΌΠ΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ всСгда ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ Π½Π°Ρ‰ΡƒΠΏΠ°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ Ρ‚Ρ‹ΠΊΠ°. РассказываСм ΠΎ хитростях Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ список горячих клавиш

ВсС доступныС ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ горячих клавиш ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠŸΠΎΠΌΠΎΡ‰ΡŒ ΠΈ рСсурсы. Π’ΠΎΡ‚ здСсь:

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ/ΡΠΊΡ€Ρ‹Ρ‚ΡŒ интСрфСйс

Π’Π°ΠΊΠΈΠ΅ элСмСнты Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°, ΠΊΠ°ΠΊ вСрхняя панСль управлСния, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄Π²Π΅ Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ ΠΏΠ°Π½Π΅Π»ΠΈ β€” слоСв ΠΈ настроСк β€” Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ Π½Π° экранС ΠΌΠ½ΠΎΠ³ΠΎ мСста ΠΈ Π½Π΅ Π΄Π°ΡŽΡ‚ Π² Π΄ΠΎΠ»ΠΆΠ½ΠΎΠΉ ΠΌΠ΅Ρ€Π΅ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π΅. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ всС ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π°Π±ΠΎΡ‡Π΅Π΅ пространство, достаточно Π½Π°ΠΆΠ°Ρ‚ΡŒ сочСтаниС клавиш Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅ β€”
Ctrl + \.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Автор статСй ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ. Π’ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡ€ΠΈΡˆΠ΅Π» Π² 2013 Π³ΠΎΠ΄Ρƒ, осознанно Π½Π°Ρ‡Π°Π» Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ с 2015 Π³ΠΎΠ΄Π°. ΠŸΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½ΠΎ освоил вСрстку. ВрСмя ΠΎΡ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Ρ‹ Π½Π° Π₯Π°Π±Ρ€Π΅.

Π’Ρ‹Π±ΠΎΡ€ Ρ†Π²Π΅Ρ‚Π°

Одна ΠΈΠ· самых ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΎΠΏΡ†ΠΈΠΉ.

Π§Ρ‚ΠΎΠ±Ρ‹ быстро Π²Π·ΡΡ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ мСста экрана, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ I Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π—Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ области Ρ†Π²Π΅Ρ‚ Π²Π·ΡΡ‚ΡŒ Π½Π΅ получится.

Поиск по всСм командам Figma

Если Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ Π² Figma, Π½ΠΎ Π½Π΅ ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹, Π³Π΄Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ это находится, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ сочСтаниС клавиш Ctrl + /. ΠžΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ΡΡ основноС мСню с Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ строкой поиска.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π—Π°ΠΌΠ΅Π½Π° значСния сдвига ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°

Π’ Figma ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ сдвига ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° 8px, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² Π³Π»Π°Π²Π½ΠΎΠ΅ мСню, Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Preferences β€” Nudge Amount.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π’ появившСмся ΠΎΠΊΠ½Π΅ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 10.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π—Π°ΠΌΠ΅Π½Π° Π³Ρ€ΡƒΠΏΠΏΡ‹ Π½Π° Ρ„Ρ€Π΅ΠΉΠΌ

Если Ρƒ вас Π΅ΡΡ‚ΡŒ нСсколько элСмСнтов, ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Π½Ρ‹Ρ… Π² Π³Ρ€ΡƒΠΏΠΏΡƒ, ΠΈ Π²Π°ΠΌ понадобился Ρ„Ρ€Π΅ΠΉΠΌ Ρ‚Π°ΠΊΠΈΡ… ΠΆΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΈ Ρ„ΠΎΡ€ΠΌ, Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ Π³Ρ€ΡƒΠΏΠΏΡƒ ΠΈ Π½Π° ΠΏΡ€Π°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π² Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΌ спискС Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Frame. Π’ΠΎΡ‚ Ρ‚Π°ΠΊ:

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Как Π² Figme ΠΏΠΎΠ΄Π½ΡΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ слой

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

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² фигмСЭллипс Π² самом Π½ΠΈΠ·Ρƒ

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ пСрСнСсти слой Π½Π° Π½ΡƒΠΆΠ½ΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ пСрСтаскивания Π΅Π³ΠΎ ΠΌΡ‹ΡˆΠΊΠΎΠΉ (drag’n’drop) β€” это ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ способ для Ρ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ размСщСния слоя Π½Π° Π½ΡƒΠΆΠ½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅.

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ слой Π½Π°Π²Π΅Ρ€Ρ… ΠΈΠ»ΠΈ Π²Π½ΠΈΠ·, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΈΠ· контСкстного мСню для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ элСмСнта.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅ΠšΠΎΠΌΠ°Π½Π΄Ρ‹ для пСрСмСщСния слоСв

На ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ ΠΌΡ‹ располоТили Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ, ΠΈ Π΄Π²Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ β€” Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ ΠΈ эллипс. ΠšΠ²Π°Π΄Ρ€Π°Ρ‚Ρ‹ ΠΌΡ‹ объСдинили Π² Π³Ρ€ΡƒΠΏΠΏΡ‹, Π° Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ ΠΈ эллипс находятся соотвСтствСнно Π½Π°Π΄ ΠΈ ΠΏΠΎΠ΄ этой Π³Ρ€ΡƒΠΏΠΏΠΎΠΉ.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ эти ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽ строго Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈΠ»ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ°.

Когда ΠΌΡ‹ Π΄Π²ΠΈΠ³Π°Π»ΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Ρ‹, это Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ влияло Π½Π° располоТСниС Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° ΠΈ эллипса. Если ΠΌΡ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ Bring to Front для эллипса, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ всю Π³Ρ€ΡƒΠΏΠΏΡƒ с ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°ΠΌΠΈ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ, ΠΈ Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² фигмСЭллипс послС Bring to Front Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² фигмСЭллипс послС Bring to Front β€” ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ всС элСмСнты

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

ΠžΡΠ½ΠΎΠ²Ρ‹ Figma II. Π“Ρ€ΡƒΠΏΠΏΡ‹. CΠ»ΠΎΠΈ. ΠŸΠΈΠΏΠ΅Ρ‚ΠΊΠ°. Π˜ΠΌΠΏΠΎΡ€Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ДСлимся ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ

ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ знакомство с основами Figma. БСгодня ΡƒΠ·Π½Π°Π΅ΠΌ Π½ΠΎΠ²Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ Ρ€Π°Π±ΠΎΡ‚Ρ‹ со слоями, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅, ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅, Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΡƒ, Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΡƒ ΠΈ скрытиС.

Научимся Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ растровоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈ ΡƒΠ·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π½ΠΎΠ²Ρ‹ΠΌ инструмСнтом – ΠΏΠΈΠΏΠ΅Ρ‚ΠΊΠΎΠΉ, которая считываСт Ρ†Π²Π΅Ρ‚Π° ΠΈΠ· ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ².

ПослСдний Ρ€Π°Π·Π΄Π΅Π» с Π½ΠΎΠ²Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌΠΈ касаСтся выставлСния Ρ‚ΠΎΡ‡Π½Ρ‹Ρ… расстояний ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎ Π² дальнСйшСм ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с сСтками.

Π­Ρ‚ΠΎΡ‚ ΡƒΡ€ΠΎΠΊ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ наш арсСнал Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Π½ΠΎΠ²Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠ΅ΠΌΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΡΠΊΠΎΡ€ΡΡŽΡ‚ ΠΈ ΡƒΠΏΡ€ΠΎΡ‰Π°ΡŽΡ‚ процСсс Π΄ΠΈΠ·Π°ΠΉΠ½Π°. НапримСр, слоТно ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с большим ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ Π±Π΅Π· Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ слоСв.

Π“Ρ€ΡƒΠΏΠΏΡ‹

Выполняя домашнСС Π·Π°Π΄Π°Π½ΠΈΠ΅ ΠΈΠ· ΠΏΡ€ΠΎΡˆΠ»ΠΎΠ³ΠΎ ΡƒΡ€ΠΎΠΊΠ° Π²Ρ‹ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΠ»ΠΈΡΡŒ с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ управлСния слоями. НапримСр, любая ΠΊΠ½ΠΎΠΏΠΊΠ° состоит ΠΈΠ·: ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° (ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰Π΅Π³ΠΎ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹) ΠΈ тСкстового Π±Π»ΠΎΠΊΠ° (ΠΏΠΎΡΡΠ½ΡΡŽΡ‰Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎ эта ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄Π΅Π»Π°Π΅Ρ‚). Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Π²Π°ΠΌ прийдСтся сначала Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Π΅Π΅ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΡƒΡŽ. А Ρ‡Ρ‚ΠΎ Ссли Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ сайта с Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌ мСню, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ состоит ΠΈΠ· 5 тСкстовых элСмСнтов? Π­Ρ‚ΠΎ ΡƒΠΆΠ΅ Π·Π°ΠΉΠΌΠ΅Ρ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя. Π‘ Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΌΠΈΠΊΡ€ΠΎ-Π·Π°Π΄Π°Ρ‡Π°ΠΌΠΈ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°Ρ‚ΡŒΡΡ постоянно.

Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ ΠΈ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Π³Ρ€ΡƒΠΏΠΏΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с нСсколькими ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ, ΠΊΠ°ΠΊ с ΠΎΠ΄Π½ΠΈΠΌ слоСм.

НапримСр, ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ ΠΈ тСкстовый Π±Π»ΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ Π² ΠΎΠ΄Π½Ρƒ Π³Ρ€ΡƒΠΏΠΏΡƒ ΠΏΠΎ смыслу – это ΡƒΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠ°. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΈ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ускоряСт Ρ€Π°Π±ΠΎΡ‚Ρƒ.

Π“Ρ€ΡƒΠΏΠΏΠ° β€” это ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ слой, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Π² сСбя Π΄Ρ€ΡƒΠ³ΠΈΠ΅ слои ΠΈ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для объСдинСния ΠΈ упрощСния дальнСйшСй Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π½ΠΈΠΌΠΈ. Π“Ρ€ΡƒΠΏΠΏΠ° Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с большим количСством слоСв, ΠΊΠ°ΠΊ с ΠΎΠ΄Π½ΠΈΠΌ.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ Π³Ρ€ΡƒΠΏΠΏΡ‹

ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ нСсколько ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²ΠΎΠ², ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² Π³Ρ€ΡƒΠΏΠΏΡƒ. Для этого:

Π‘Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π½ΠΈΠ΅ Π³Ρ€ΡƒΠΏΠΏΡ‹

Как Π²Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ, послС создания Π³Ρ€ΡƒΠΏΠΏΡ‹ Π΅Π΅ содСрТимоС автоматичСски скрываСтся. Π­Ρ‚ΠΎ состояниС называСтся свСрнутой Π³Ρ€ΡƒΠΏΠΏΠΎΠΉ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ всС содСрТимоС, Π³Ρ€ΡƒΠΏΠΏΡƒ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ:

Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Π³Ρ€ΡƒΠΏΠΏΡ‹

Π“Ρ€ΡƒΠΏΠΏΡ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π² сСбя Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π³Ρ€ΡƒΠΏΠΏΡ‹. Для этого достаточно Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ нСсколько слоСв с Π³Ρ€ΡƒΠΏΠΏΠΎΠΉ ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Ρƒ Π³Ρ€ΡƒΠΏΠΏΡƒ. Π‘Π»ΠΎΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ находится Π²Π½ΡƒΡ‚Ρ€ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹, называСтся Ρ€Π΅Π±Π΅Π½ΠΊΠΎΠΌ. Π‘Π»ΠΎΠΉ-Π³Ρ€ΡƒΠΏΠΏΠ°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ находятся Π΄Ρ€ΡƒΠ³ΠΈΠ΅ слои называСтся Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΌ.

Π—Π°Ρ‡Π΅ΠΌ это ΠΌΠΎΠΆΠ΅Ρ‚ понадобится? ВсС с Ρ‚ΠΎΠΉ ΠΆΠ΅ Ρ†Π΅Π»ΡŒΡŽ: для ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΈ быстрой Ρ€Π°Π±ΠΎΡ‚Ρ‹. Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€. НСсколько ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ с ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠΎΠΉ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Ρ‹ Π² Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡƒΡŽ ΡˆΠ°ΠΏΠΊΡƒ сайта (Π½Π° английском – header, читаСтся хэдэ) – элСмСнт Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ повторяСтся Π½Π° всСх страницах ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ содСрТит срСдства для быстрой Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Π’ Π³Π»Π°Π·Π°Ρ… Figma это просто Π³Ρ€ΡƒΠΏΠΏΠ° с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ Π³Ρ€ΡƒΠΏΠΏΠ°ΠΌΠΈ.

Π’Π°ΠΊ Π²ΠΎΡ‚, Ссли Π½Π°ΠΌ понадобится ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ шапки сайта, Ρ‚ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ Π³Ρ€ΡƒΠΏΠΏΡƒ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π³Ρ€ΡƒΠΏΠΏΠΎΠΉ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ.

ΠŸΠ΅Ρ€Π΅Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ°

Иногда ΠΌΠΎΠΆΠ΅Ρ‚ понадобится ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ слой ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΡ‹ Π² Π΄Ρ€ΡƒΠ³ΡƒΡŽ ΠΈΠ»ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π³Ρ€ΡƒΠΏΠΏΡƒ Π½ΠΎΠ²Ρ‹ΠΌΠΈ слоями.

Для этого достаточно ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ слой Π½Π° Π½ΡƒΠΆΠ½ΡƒΡŽ Π³Ρ€ΡƒΠΏΠΏΡƒ Π² ΠΏΠ°Π½Π΅Π»ΠΈ слоСв – ΠΈ ΠΎΠ½ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ окаТСтся Π²Π½ΡƒΡ‚Ρ€ΠΈ. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ слой Π² Π½ΡƒΠΆΠ½ΠΎΠ΅ мСсто ΠΌΠ΅ΠΆΠ΄Ρƒ слоями Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΡ‹. Если слой Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΈΠ· Π³Ρ€ΡƒΠΏΠΏΡ‹, Ρ‚ΠΎ Π΅Π³ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ Π² ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π½Π°Π΄ Π³Ρ€ΡƒΠΏΠΏΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ Π½Π΅ΠΉ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² Π²ΠΈΠ΄Π΅ΠΎ:

Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ слоСв

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

Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ слой

ВСрнСмся ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ с шапкой сайта. Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ, достаточно ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΠΊΠ»ΠΈΠΊ ΠΏΠΎ Π½Π΅ΠΉ, Ρ‡Ρ‚ΠΎ автоматичСски Ρ€Π°Π·Π²Π΅Ρ€Π½Π΅Ρ‚ Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Π³Ρ€ΡƒΠΏΠΏΡƒ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒΡΡ Π½ΠΈΠΆΠ΅ ΠΏΠΎ Π΄Π΅Ρ€Π΅Π²Ρƒ влоТСнности ΠΈ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ надпись ΠΊΠ½ΠΎΠΏΠΊΠΈ, достаточно ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΠΊΠ»ΠΈΠΊ. Как Π²Ρ‹ ΡƒΠΆΠ΅ поняли, Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΠΊΠ»ΠΈΠΊ позволяСт Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π½Π° ΠΎΠ΄ΠΈΠ½ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ влоТСнности Π½ΠΈΠΆΠ΅ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ.

Π”Π²ΠΎΠΉΠ½ΠΎΠΉ ΠΊΠ»ΠΈΠΊ ускоряСт Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ слоями ΠΈ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ быстрСС Ρ€ΡƒΡ‡Π½ΠΎΠ³ΠΎ развСртывания Π³Ρ€ΡƒΠΏΠΏ. Но Ρ‡Ρ‚ΠΎ Ссли ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ влоТСнности большС ΠΎΠ΄Π½ΠΎΠ³ΠΎ? Π’Π΅Π΄ΡŒ прийдСтся Π΄Π΅Π»Π°Ρ‚ΡŒ нСсколько Π΄Π²ΠΎΠΉΠ½Ρ‹Ρ… ΠΊΠ»ΠΈΠΊΠΎΠ². Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π½Π° самом Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ влоТСнности, достаточно Π·Π°ΠΆΠ°Ρ‚ΡŒ Command Π² MacOs ΠΈΠ»ΠΈ Ctrl Π² Windows ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ»ΠΈΠΊ ΠΏΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ – это называСтся Π³Π»ΡƒΠ±ΠΎΠΊΠΎΠ΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ (deep selection).

Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ нСсколько слоСв (Π½ΠΎΠ²Ρ‹ΠΉ способ)

Π—Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Command Π² MacOs ΠΈΠ»ΠΈ Ctrl Π² Windows ΠΈ ΠΊΠ»ΠΈΠΊΠ°ΠΉΡ‚Π΅ ΠΏΠΎ слоям ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π² ΠΏΠ°Π½Π΅Π»ΠΈ слСва. Π—Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Shift ΠΈ выдСляйтС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΊΠ»ΠΈΠΊΠΎΠΌ ΠΈΠ»ΠΈ Ρ€Π°ΠΌΠΊΠΎΠΉ Π² Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ области. КаТдоС Π½ΠΎΠ²ΠΎΠ΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒΡΡ со старым. Π­Ρ‚ΠΎΡ‚ способ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π΅Π½ ΠΏΡ€ΠΈ создании Π³Ρ€ΡƒΠΏΠΏ ΠΈ Π² ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ с Π³Π»ΡƒΠ±ΠΎΠΊΠΈΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ.

Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ слоСв

Если Π·Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Shift ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π΄Π²Π° слоя Π² ΠΏΠ°Π½Π΅Π»ΠΈ слСва, Ρ‚ΠΎ Π²Ρ‹ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π΅Ρ‰Π΅ ΠΈ всС слои, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ оказались ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΡ€Π°ΠΉΠ½ΠΈΠΌΠΈ слоями.

Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ слой

Иногда ΡΠ»ΡƒΡ‡Π°ΡŽΡ‚ΡΡ ситуации, ΠΊΠΎΠ³Π΄Π° слой ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚ Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΈ Π΅Π³ΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ области. ΠžΡΡ‚Π°Π΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠΏΠ°Ρ‚ΡŒΡΡ Π² ΠΏΠ°Π½Π΅Π»ΠΈ слоСв. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС достаточно ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΏΠΎ области, Π³Π΄Π΅ находится Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΉ слой ΠΈ ΠΈΠ· Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Select Layer, Π° ΠΏΠΎΡ‚ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ названию Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Π²Π°ΠΌ слоя.

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚: Π·Π°ΠΆΠΌΠΈΡ‚Π΅ Ctrl ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ Π² ΠΎΠ±Π»Π°ΡΡ‚ΡŒ пСрСкрытия слоя. ВмСсто контСкстного мСню сразу появится список слоСв, Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ быстрСС ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ способа.

Π­Ρ‚ΠΈ способы выдСлСния Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΈ для Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… слоСв, Π½ΠΎ Π½Π΅ для Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ…!

Π‘Π½ΠΈΠΌΠ°Π΅ΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ½ΡΡ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π² Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ области Π·Π°ΠΆΠΌΠΈΡ‚Π΅ Shift ΠΈ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ Π½ΡƒΠΆΠ½ΠΎΠΌΡƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ ΠΈΠ»ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ Ρ€Π°ΠΌΠΊΠΎΠΉ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ½ΡΡ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ с ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Ρ‡Π΅Ρ€Π΅Π· панСль слоСв ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ Π½Π° Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π΅ с Π·Π°ΠΆΠ°Ρ‚ΠΎΠΉ клавишСй Command Π² MacOs ΠΈΠ»ΠΈ Ctrl Π² Windows.

Π Π°Π±ΠΎΡ‚Π° со слоями

ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ знакомится с Π½ΠΎΠ²Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠ΅ΠΌΠ°ΠΌΠΈ для манипуляции слоями. Π‘Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΠ° ΠΈ скрытиС ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ ΡΠΊΠΎΠ½Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° Π½ΡƒΠΆΠ½ΠΎΠΌ участкС страницы, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ быстрСС Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ€ΡƒΡ‚ΠΈΠ½Π½Ρ‹Π΅ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ.

Π‘Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΠ° ΠΈ скрытиС слоСв

Иногда Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°Π΄ ΠΎΠ΄Π½ΠΈΠΌ элСмСнтом интСрфСйса ΠΈ случайноС Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… частСй Π΄ΠΈΠ·Π°ΠΉΠ½Π° лишь ΠΏΠΎΠΌΠ΅ΡˆΠ°Π΅Ρ‚. Π’ Ρ‚Π°ΠΊΠΈΡ… случаях ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ совсСм ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ слоСв. Для этого:

ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Π²Ρ‹Ρ€Π΅Π·Π°Π½ΠΈΠ΅ ΠΈ вставка слоя

Для копирования ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ Π΅Π³ΠΎ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Command + C Π² MacOs ΠΈΠ»ΠΈ Ctrl + C Π² Windows.

Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ Π΅Π³ΠΎ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Command + X Π² MacOs ΠΈΠ»ΠΈ Ctrl + X Π² Windows.

Для вставки Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΈΠ»ΠΈ совсСм ΡƒΠ±Π΅Ρ€ΠΈΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Command + V Π² MacOs ΠΈΠ»ΠΈ Ctrl + V Π² Windows.

ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Π²Ρ‹Ρ€Π΅Π·Π°Π½ΠΈΠ΅ ΠΈ вставка ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ², Ρ‚Π°ΠΊΠΈΠ΅ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹Π΅ ΠΏΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ² Π² Figma вводят Π² Π½Π΅Π΄ΠΎΡƒΠΌΠ΅Π½ΠΈΠ΅. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ позиция, ΠΊΡƒΠ΄Π° Π±ΡƒΠ΄Π΅Ρ‚ вставлСн ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ зависит ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ сСйчас Π²Ρ‹Π±Ρ€Π°Π½ Ρ‚ΠΈΠΏ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° (ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ² ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏΠ°) ΠΈ Π½Π° ΠΊΠ°ΠΊΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ влоТСнности ΠΎΠ½ находится. Рассмотрим всС Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…:

ΠŸΠΎΠ½Π°Ρ‡Π°Π»Ρƒ Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ каТСтся странным, Π½ΠΎ Ссли ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Ρ‚ΠΎ со Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ Π²Ρ‹ ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ½ΠΈΡ‚Π΅. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π²ΠΈΠ΄Π΅ΠΎ, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊΠΎΠΉ Ρ‚ΠΈΠΏ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π²Ρ‹Π±Ρ€Π°Π½ ΠΏΠ΅Ρ€Π΅Π΄ вставкой ΠΈ ΠΊΠ°ΠΊ ΠΎΡ‚ этого мСняСтся позиция вставки.

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚: Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ слоСв вставлСнный ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ всСгда оказываСтся Π²Ρ‹ΡˆΠ΅ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ΅ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° (Ρ‡Ρ‚ΠΎ Ρ‚ΠΎΠΆΠ΅ нСсколько странно, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°Ρ… вставка происходит всСгда Π²Ρ‹ΡˆΠ΅ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ слоя).

Вставка Π² ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠ΅ΠΉ любого ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π² Figma считаСтся Π΅Π³ΠΎ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π»Π΅Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ». Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ вставки Π±ΠΎΠ»Π΅Π΅ прСдсказуСмой, достаточно послС копирования ΠΈΠ»ΠΈ вырСзания Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΈ Π½Π°ΠΆΠ°Ρ‚ΡŒ Shift + Command + V Π² MacOs ΠΈΠ»ΠΈ Shift + Ctrl + V Π² Windows. Новый ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π±ΡƒΠ΄Π΅Ρ‚ вставлСн Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ слоя.

Названия слоСв

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

ΠŸΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ слоСв

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Ρ‚ΡŒ слой достаточно:

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Ρ‚ΡŒ Π³Ρ€ΡƒΠΏΠΏΡƒ слоСв Π½ΡƒΠΆΠ½ΠΎ:

Π—Π°Π΄Π°Π²Π°ΠΉΡ‚Π΅ названия со смыслом

Названия Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ понятны Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π°ΠΌ, Π½ΠΎ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² дальнСйшСм Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с вашим ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ. Если Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ с Π·Π°Ρ€ΡƒΠ±Π΅ΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠ΅ΠΉ, Ρ‚ΠΎ названия Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° английском языкС. Если Π²Ρ‹ Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ пСрСвСсти, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Google Translate.

Названия Π»ΡƒΡ‡ΡˆΠ΅ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ², для Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»Π΅ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π·Π½Π°ΠΊ минус ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² дальнСйшСм Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ слои Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² Ρ„Π°ΠΉΠ»Ρ‹ рСсурсов Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ. А для Π½ΠΈΡ… ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΈΠ΅ названия Ρ„Π°ΠΉΠ»ΠΎΠ².

Π’ΠΎΡ‚ нСбольшой список Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹Ρ… Π½Π°Π·Π²Π°Π½ΠΈΠΉ слоСв, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρƒ вас Π±Ρ‹Π»ΠΎ прСдставлСниС:

Никто Π½Π΅ Π·Π°ΠΏΡ€Π΅Ρ‰Π°Π΅Ρ‚ Π²Π°ΠΌ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒ слои Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, ΠΏΠΎΠ΄ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡΡΡŒ ΠΏΠΎΠ΄ Π½ΡƒΠΆΠ΄Ρ‹ вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹. Π­Ρ‚ΠΎ лишь напутствиС для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠ°.

Π˜ΠΌΠΏΠΎΡ€Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

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

РСфСрСнсы ΠΈ ΠΌΡƒΠ΄Π±ΠΎΡ€Π΄Ρ‹

РСфСрСнс, рСфСрСнсы (ΠΎΡ‚ Π°Π½Π³Π». reference – рСкомСндация, эталон, Π½Π°ΠΌΠ΅ΠΊ, ссылка) β€” ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ прСдоставляСт Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ вашСй Ρ€Π°Π±ΠΎΡ‚Ρ‹. РСфСрСнс ΠΌΠΎΠΆΠ΅Ρ‚ ΠΊΠ°ΡΠ°Ρ‚ΡŒΡΡ Π½Π΅ всСго сайта, Π° лишь ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Ρ‚ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ Π΅Π³ΠΎ аспСкта. НапримСр, Ρ†Π²Π΅Ρ‚Π° попросят, ΠΊΠ°ΠΊ Π½Π° ΠΏΠ΅Ρ€Π²ΠΎΠΌ сайтС, структура шапки – ΠΊΠ°ΠΊ Π½Π° Π²Ρ‚ΠΎΡ€ΠΎΠΌ, Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню мобильной вСрсии – ΠΊΠ°ΠΊ Π½Π° Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΌ. РСфСрСнсы ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠΆΠ΄Π°ΡŽ тСхничСскоС Π·Π°Π΄Π°Π½ΠΈΠ΅ ΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ понятным. РСфСрСнсом ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΠΈ ссылка Π½Π° сайт ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Ρ„ΠΎΡ‚ΠΎ/Π²ΠΈΠ΄Π΅ΠΎ.

ΠœΡƒΠ΄Π±ΠΎΡ€Π΄ (ΠΎΡ‚ Π°Π½Π³Π». mood board – доска настроСния) β€” это ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ составляСт Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€, с Ρ†Π΅Π»ΡŒΡŽ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΡƒ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π² Π½Π° самом Ρ€Π°Π½Π½Π΅ΠΌ этапС, Π΅Ρ‰Π΅ Π΄ΠΎ Π½Π°Ρ‡Π°Π»Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°ΠΊΠΈΡ… ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΎΠΊ ΠΌΡ‹ пытаСмся ΠΏΡ€ΠΎΡ‰ΡƒΠΏΠ°Ρ‚ΡŒ вкус ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, ΠΏΠΎΠ½ΡΡ‚ΡŒ Π΅Π³ΠΎ прСдпочтСния. Π›ΡƒΡ‡ΡˆΠΈΠ΅ экзСмпляры ΠΈΠ· ΠΌΡƒΠ΄Π±ΠΎΡ€Π΄Π° Π² дальнСйшСм ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ, ΠΊΠ°ΠΊ отправная Ρ‚ΠΎΡ‡ΠΊΠ° для Π½Π°Ρ‡Π°Π»Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π° (ΠΊΠ°ΠΊ рСфСрСнсы). Как ΠΈ Π² случаС с рСфСрСнсами, изобраТСниями для ΠΌΡƒΠ΄Π±ΠΎΡ€Π΄Π° ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹ Π΄Ρ€ΡƒΠ³ΠΈΡ… сайтов, Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ (ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΡƒΠ΄Π°Ρ‡Π½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… сочСтаний), ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ, ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, Π½Π°Π±ΠΎΡ€Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.

Для создания ΠΌΡƒΠ΄Π±ΠΎΡ€Π΄ΠΎΠ² ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ бСсплатныС сСрвисы: Milanote, Pinterest. Но Π½Π΅ ΡΠΏΠ΅ΡˆΠΈΡ‚Π΅ Ρ‚Π°ΠΌ Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, для Π½Π°Ρ‡Π°Π»Π° Π½Π°ΠΌ Ρ…Π²Π°Ρ‚ΠΈΡ‚ возмоТностСй Figma.

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ слои Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π˜ΠΌΠΏΠΎΡ€Ρ‚ ΠΈΠ· Π±ΡƒΡ„Π΅Ρ€Π° ΠΎΠ±ΠΌΠ΅Π½Π°

Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с рСфСрСнсами ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΡƒΠ΄Π±ΠΎΡ€Π΄Ρ‹ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΊΠ°ΠΊΠΈΠΌ-Ρ‚ΠΎ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ прямо Π² Ρ€Π°Π±ΠΎΡ‡ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ. Π’ Figma Π΅ΡΡ‚ΡŒ нСсколько ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠΎΠ² для этого. Π‘Π½Π°Ρ‡Π°Π»Π° познакомимся с самым простым ΠΈΠ· Π½ΠΈΡ…. Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½ΡƒΠΆΠ½ΠΎ:

Π£ Figma Π΅ΡΡ‚ΡŒ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ Π½Π° вставку Π±ΠΎΠ»ΡŒΡˆΠΈΡ… растровых ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ: Ссли ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈΠ»ΠΈ высота ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ 4096 пиксСлСй, Ρ‚ΠΎ вставлСнный ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π±ΡƒΠ΄Π΅Ρ‚ автоматичСски ΠΎΡ‚ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ Π΄ΠΎ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… Π²Π΅Π»ΠΈΡ‡ΠΈΠ½.

Π˜ΠΌΠΏΠΎΡ€Ρ‚ ΠΈΠ· Ρ„Π°ΠΉΠ»Π°

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

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ ΠΏΠΈΠΏΠ΅Ρ‚ΠΊΠ°

ΠŸΠΈΠΏΠ΅Ρ‚ΠΊΠ° ΠΈΠ»ΠΈ Eyedropper Tool ΠΈΠ»ΠΈ Color Picker – позволяСт ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΈΠ· любого ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π° ΠΈ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌΡƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ. ΠžΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π΅Π½ для ΠΏΠΎΠ΄Π±ΠΎΡ€Π° Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ Π³Π°ΠΌΠΌΡ‹ Π½Π° основС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠœΡ‹ ΡƒΠΆΠ΅ Π·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ. Но Π΅ΡΡ‚ΡŒ ΠΈ Π±ΠΎΠ»Π΅Π΅ быстрый способ.

БыстроС присваиваниС Ρ†Π²Π΅Ρ‚Π°

Для быстрого копирования Ρ†Π²Π΅Ρ‚Π° достаточно:

ΠŸΡ€ΠΈΡΠ²Π°ΠΈΠ²Π°Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° пиксСлСй изобраТСния

Для считывания Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈΠ· ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ достаточно Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ ΠΆΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ дСйствий, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅, насколько быстро ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ Π³Π°ΠΌΠΌΡƒ Ρ‚Π°ΠΊΠΈΠΌ способом.

Π’ΠΎΡ‡Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Π’ Figma Π΅ΡΡ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ инструмСнт для Ρ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ позиционирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ Π½ΠΈΠΌ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ:

Как ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ

Π”Π°Π²Π°ΠΉΡ‚Π΅ договоримся, Ρ‡Ρ‚ΠΎ всС домашниС задания Π²Ρ‹ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π² Π²ΠΈΠ΄Π΅ ссылки. Для этого Π² Figma Π΅ΡΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ° Share Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

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

Π’ΠΎ врСмя выполнСния этих Π·Π°Π΄Π°Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈ горячиС клавиши. Π‘Ρ‚Π°Ρ€Π°ΠΉΡ‚Π΅ΡΡŒ ΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ большС ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ² ΠΈΠ· этого ΡƒΡ€ΠΎΠΊΠ°. ОсобоС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡƒΠ΄Π΅Π»ΠΈΡ‚Π΅ насмотрСнности, Π½Π΅ пропускайтС это Π²Π°ΠΆΠ½ΠΎΠ΅ ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠ΅.

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

БСгодня ΠΌΡ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠ»ΠΈ Π·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с Π½ΠΎΠ²Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠ΅ΠΌΠ°ΠΌΠΈ для эффСктивной Ρ€Π°Π±ΠΎΡ‚Ρ‹. И хотя Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ большС ΠΈ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ сСбя свободнСС, этого нСдостаточно для ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹.

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

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *