Figma ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ сайтов: ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° ΠΈ ΠΏΠΎΠΏΠ°ΠΏΡ‹ / Skillbox Media

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

ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈ быстро, ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ

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

Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½ Π€ΠΈΠ³ΠΌΠ° ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ, способный Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ стандартный Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» сСрвиса. БСгодня ΠΌΡ‹ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ для Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ наш Π΄ΠΈΠ·Π°ΠΉΠ½. Для Π½Π°Ρ‡Π°Π»Π° создадим Frame ΠΈ Grid.Β 

Π€Ρ€Π΅ΠΉΠΌ ΠΈ сСтка

РассказываСм, ΠΊΠ°ΠΊ Π² Π€ΠΈΠ³ΠΌΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ сайта: стоит ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ любой project начинаСтся с создания холста, Π³Π΄Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Ρ‹ всС элСмСнты. Π€Ρ€Π΅ΠΉΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Π½Π°Ρ‡Π°Π»Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΈ Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ Π½Π°ΠΆΠ°Ρ‚ΡŒ Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΡƒ, дальшС Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚ΠΈΠΏ устройства, phone ΠΈΠ»ΠΈ desktop. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅:

Π’Ρ‹Π±Π΅Ρ€Π΅ΠΌ Π΄Π΅ΡΠΊΡ‚ΠΎΠΏΠ½ΡƒΡŽ (Desktop) Π²Π΅Ρ€ΡΠΈΡŽ, с Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ 1440Γ—1024. Если этого нСдостаточно, Ρ‚ΠΎ ΠΌΡ‹ΡˆΠΊΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ Ρ„Ρ€Π΅ΠΉΠΌ, Π·Π°Ρ…Π²Π°Ρ‚ΠΈΠ² Π·Π° края ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΠ². Когда наш холст размСстился, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ созданию сСтки. Для Ρ‡Π΅Π³ΠΎ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½ΡƒΠΆΠ½Π° сСтка?Β 

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

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сСтку, Π½ΡƒΠΆΠ½ΠΎ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ холсту, Π·Π°Ρ‚Π΅ΠΌ появится мСню справа. Находим ΠΎΠΏΡ†ΠΈΡŽ β€œLayoutΒ  grid”. ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° Π½Π΅Ρ‘ вся ΠΎΠ±Π»Π°ΡΡ‚ΡŒ покроСтся сСткой. Π’ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ станСт доступна β€œGrid”, Ρ‚Π°ΠΌ Π΅ΡΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΌΠ΅Ρ‚ΠΊΠ°, ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈΠ»ΠΈ строки. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅:

Допустим, наша Ρ†Π΅Π»ΡŒ – Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½, Π³Π΄Π΅ Ρ‚ΠΎΠ²Π°Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ располоТСны Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ нСсколько ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ Π² ряд. ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ ΠΏΠΎΡΡ‚Π°Π²Π»Π΅Π½Π½ΡƒΡŽ Π·Π°Π΄Π°Ρ‡Ρƒ, Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ, ΠΊΠ°ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 200 px, ΠΈ отступы, 20 пиксСлСй.Β 

Зная основныС Π΄Π°Π½Π½Ρ‹Π΅, ΠΎΠ±Π»Π°ΡΡ‚ΡŒ разбиваСтся Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π° ΡƒΠΆΠ΅ слСдом ΠΈΠ΄Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ²Π°Ρ€Π° ΠΈ описаниС. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ столбцы Π½Π° холст, Π½ΡƒΠΆΠ½ΠΎ Π²ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌ ΠΎΠΊΠ½Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ список ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ ΠΏΡƒΠ½ΠΊΡ‚Ρƒ β€œColumns”, ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅ Π²Ρ‹ΡˆΠ΅. Π’ ΠΈΡ‚ΠΎΠ³Π΅ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ настройки ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ. ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² здСсь достаточно ΠΌΠ½ΠΎΠ³ΠΎ:

  1. Count – количСство ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.
  2. Color – Ρ†Π²Π΅Ρ‚ столбцов.
  3. Margin – отступы ΠΏΠΎ краям.
  4. Gutter – ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ.

Π’ Ρ‚ΠΎΠΌ ΠΆΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌ ΠΎΠΊΠ½Π΅ Π΅ΡΡ‚ΡŒ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ список, type. Он Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ настройки, способныС ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ располоТСниС ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ: left – слСва, right – справа, center – ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, stretch – рСзиновая сСтка, ΡˆΠΈΡ€ΠΈΠ½Π° устанавливаСтся автоматичСски сСрвисом.

ΠŸΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² станСт доступны ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ width – устанавливаСм ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ столбца, Offset – отступ ΠΎΡ‚ края, Π² зависимости ΠΎΡ‚ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π°, Ссли left – Ρ‚ΠΎ слСва, right – справа. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ всСх ΠΎΠΏΡ†ΠΈΠΉ Π½Π° рисункС:

Колонки ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ ΠΏΠΎ всСй сСткС, для этого Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚ΠΈΠΏ right ΠΈΠ»ΠΈ left, ΠΏΠΎΡ‚ΠΎΠΌ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°Ρ… count Auto, ΠΈ столбцы Π·Π°ΠΉΠΌΡƒΡ‚ всю ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Ρ„Ρ€Π΅ΠΉΠΌΠ°. НиТС прСдоставлСн ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Если ΠΏΡ€ΠΈΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ, Ρ‚ΠΎ каТдая линия ΠΏΡ€ΠΈΠ±Π»ΠΈΠ·ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π²Π½Π° 10 px. Π”Π°Π½Π½Ρ‹ΠΉ Π²ΠΈΠ΄ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρ‹ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ для Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ тСкст с отступами.Β 

Frame ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ нСсколько сСток. КаТдая ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… графичСских элСмСнтов. Одна Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ Π·Π° Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΡƒ, другая Π·Π° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Π£Π½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ состоит ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… страниц, соотвСтствСнно, для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ° потрСбуСтся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ сСтка. ΠΠ°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ прСсСты ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· с нуля ΠΊΡ€ΠΎΠΏΠΎΡ‚Π»ΠΈΠ²Ρ‹ΠΉ Ρ‚Ρ€ΡƒΠ΄, поэтому Π² сСрвисС прСдусмотрСно сохранСниС стиля. ДСлаСтся это ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ (Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΎ, ΠΊΡƒΠ΄Π° Π½Π°ΠΆΠΈΠΌΠ°Ρ‚ΡŒ):

ΠžΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ΡΡ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ, Π³Π΄Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΈ Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ β€œcreate style”.Β 

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ, Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Π½ΠΎΠ²Ρ‹ΠΉ frame. Π’ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π΅ΡΡ‚ΡŒ опция β€œLayoutΒ  grid”, Ρ‰Π΅Π»ΠΊΠ°Π΅ΠΌ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ, Π° дальшС Π½Π° Π·Π°Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ шаблон, послС этого Π΄Π°Π½Π½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ автоматичСски примСнится. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС шаблон настраиваСтся ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· ΠΈ примСняСтся ΠΊΠΎ всСм страницам ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.Β 

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

ΠœΡ‹ растянули ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ„Ρ€Π΅ΠΉΠΌΠ°, расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ»ΠΎΡΡŒ. МоТно Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Π»ΠΎΠΊΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ области Ρ‚ΠΎΠΆΠ΅ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Π»ΠΈΡΡŒ. ДСлаСтся это просто, Π² Π»Π΅Π²ΠΎΠΌ мСню β€œΡΠ»ΠΎΠΈβ€ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ всС rectangle. НаТимаСм Rectangle 1, ΠΏΠΎΡ‚ΠΎΠΌ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌ shift ΠΈ Ρ‰Π΅Π»ΠΊΠ°Π΅ΠΌ ΠΏΠΎ послСднСму.

ПослС этого Π² ΠΏΠ°Π½Π΅Π»ΠΈ design, Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ Constrains ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ ΠΎΠΏΡ†ΠΈΠΈ Π½Π° Left and right, послС этого всС Π±Π»ΠΎΠΊΠΈ Π±ΡƒΠ΄ΡƒΡ‚ привязаны ΠΊ сСткС ΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ΅ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ, ΡˆΠΈΡ€ΠΈΠ½Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° rectangle Ρ‚Π°ΠΊΠΆΠ΅ увСличится. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ всСх дСйствий ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½ΠΈΠΆΠ΅:

ΠšΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с сСткой Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² возмоТности Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΡƒΡŽ вСрстку. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ Π½Π° всСх устройствах, ΠΊΠ°ΠΊ Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ…, Ρ‚Π°ΠΊ ΠΈ Π½Π° Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°Ρ…. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ инструмСнт grid, ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ для устройств. Π’ случаС, ΠΊΠΎΠ³Π΄Π° трСбуСтся ΡΠΊΡ€Ρ‹Ρ‚ΡŒ grid, для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ β€œΠ³Π»Π°Π·β€, Π² ΠΏΠ°Π½Π΅Π»ΠΈ design.

Если трСбуСтся ΡΠΊΡ€Ρ‹Ρ‚ΡŒ каркас сразу для Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ², Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ мСню Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ view->Layout grids ΠΈΠ»ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠ΅ΠΉ клавиш Ctrl+Shift+4.Β 

Π‘Π΅Ρ‚ΠΊΠ° убираСтся ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ минус, Π½ΠΎ стоит ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠΈ каркаса, ΡΠΎΠ±ΡŒΡ‘Ρ‚ΡΡ вся вСрстка.

Для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ° оборудования ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ свои ΡΡ‚ΠΈΠ»ΡŒ.

  • 12 колоночная стСка – ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π±ΠΎΠ»ΡŒΡˆΠΈΡ… элСмСнтов. НапримСр, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π° для вСбсайта.
  • Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ (type=left ΠΈ count=auto) – ΠΎΠ± этом ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡŒ Π²Ρ‹ΡˆΠ΅, ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ.
  • 24 колоночная сСтка – ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π»ΠΊΠΈΡ… Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ, ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства.

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ отступы

Накладывая сСтку Π½Π° frame, ΠΌΡ‹ использовали Ρ‚Π°ΠΊΡƒΡŽ ΠΎΠΏΡ†ΠΈΡŽ, ΠΊΠ°ΠΊ margin, ΠΎΠ½Π° Π΄Π΅Π»Π°Π΅Ρ‚ отступы ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ, Π½ΠΎ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡ‚ΡΡ с ситуациСй, ΠΊΠΎΠ³Π΄Π° трСбуСтся Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΈΠ»ΠΈ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ. Для этих Ρ†Π΅Π»Π΅ΠΉ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ align, ΠΎΠ½Π° находится Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ design. Π’ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π±Ρ‹Π»ΠΎ продСмонстрировано, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ сСтку. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² наш ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ тСкст, для этого создадим Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ сСтку. ΠŸΡ€ΠΎΠΈΠ·Π²Π΅Π΄ΠΈΡ‚Π΅ настройки, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:

На этот Ρ€Π°Π· Π±Ρ‹Π» использован Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ†Π²Π΅Ρ‚ Π»ΠΈΠ½ΠΈΠΉ (ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Color), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π±Ρ‹Π»ΠΎ ΠΏΡƒΡ‚Π°Π½ΠΈΡ†Ρ‹. ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΠΌ инструмСнт Text Π½Π° ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ΅. Для быстрого доступа Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ горячСй клавишСй β€œΠ’β€. НапишСм Π½Π°ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ‚ΠΎΠ²Π°Ρ€Π° ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ width ΠΈ height тСкстового поля, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ ΠΏΠΎΠΊΡ€Ρ‹Π²Π°Π» практичСски всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°. Π’ ΠΈΡ‚ΠΎΠ³Π΅ Ρƒ нас ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ это:

Как Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, тСкст располоТСн Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΏΠ»Π°Π½ΠΊΠ΅, Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ инструмСнтами align, Π½Π°ΠΆΠ°Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΠΊΡ€Π°ΡŽ.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π½Π° тСкст Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ align: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, Π»Π΅Π²ΠΎΠΌΡƒ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ. Π’ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Design, ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π‘ ΠΈΡ… ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽΒ  Π΄Π΅Π»Π°ΡŽΡ‚ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΈΠ»ΠΈ ΠΆΠ΅ тСкстовых ΠΏΠΎΠ»Π΅ΠΉ. НапримСр, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ нашС ΠΏΠΎΠ»Π΅ посСрСдинС, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:

Как Π²ΠΈΠ΄Π½ΠΎ, Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ Ρ„Ρ€Π΅ΠΉΠΌΡƒ. Π§Ρ‚ΠΎΠ±Ρ‹ это ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ, ΠΈ наш тСкст ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Ρ€ΡƒΠΏΠΏΡƒ. Для этого ΠΌΡ‹ΡˆΠΊΠΎΠΉ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ горячими клавишами CTRL+GΒ  (Ρ€Π°Π·Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ CTRL+SHIFT+G). ПослС пСрСмСстим Π² Π³Ρ€ΡƒΠΏΠΏΡƒ наш тСкст. Π’Π΅ΠΏΠ΅Ρ€ΡŒ наТимая Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ align, Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.Β 

Π Π°Π½Π΅Π΅ ΠΌΡ‹ Π΄Π΅Π»Π°Π»ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΡƒΡŽ вСрстку, Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π»ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π½Π° холстС, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ вмСстС с Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΡŽ. Если ΠΏΠΎΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ„Ρ€Π΅ΠΉΠΌ, Ρ‚ΠΎ тСкст останСтся Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.

Π§Ρ‚ΠΎΠ±Ρ‹ это ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ, Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ тСксту Constrains – Left and right. ПослС этого тСкстовоС ΠΏΠΎΠ»Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒΡΡ ΠΈ тСкст ΠΏΠ΅Ρ€Π΅Π½ΠΎΡΠΈΡ‚ΡŒΡΡ Π½Π° Π½ΠΎΠ²ΡƒΡŽ строку. Β 

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ тСксту, Π½ΠΎ ΠΈ ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡƒ Π² шапкС. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌ, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌ Π΅Π³ΠΎ header, добавляСм Ρ‚ΡƒΠ΄Π° rectangle (ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ). Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΡƒΠ΅ΠΌ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ (CTRL+G). РисуСм Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅ΠΌ Π΅Π³ΠΎ Π² Π³Ρ€ΡƒΠΏΠΏΡƒ, дальшС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ инструмСнты align для выравнивания.Β 

Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ° ΠΈ упорядочиваниС слоСв

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ слои Π² Π³Ρ€ΡƒΠΏΠΏΡƒ, Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ нСсколько ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π½Π° холстС, ΠΏΠΎΡ‚ΠΎΠΌ Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ, откроСтся контСкстноС мСню, Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Group Selection ΠΈΠ»ΠΈ ΠΆΠ΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠ΅ΠΉ клавиш (CTRL+G)

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

Π§Ρ‚ΠΎΠ±Ρ‹ всС элСмСнты ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ ΠΊΠ°ΠΊ Π½Π°Π΄ΠΎ, Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ упорядочиваниС. Π—Π΄Π΅ΡΡŒ сущСствуСт Π΄Π²Π° способа, это ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΡ‹ΡˆΠΊΠΈ ΠΈ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΡ… Π² ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ контСкстноС мСню Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ². ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅:

Для быстрого упорядочивания слоСв Π΅ΡΡ‚ΡŒ горячиС клавиши.Β 

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° Π² Π€ΠΈΠ³ΠΌΠ° + Overflow Behavior

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π² Π€ΠΈΠ³ΠΌΠ°? Π­Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ выполняСт Ρ‚Π΅ ΠΆΠ΅ самыС дСйствия, Ρ‡Ρ‚ΠΎ ΠΈ Π½Π° сайтС, Π΄Π΅Π»Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΈ просматриваСт ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

БСйчас Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π² Π€ΠΈΠ³ΠΌΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΌ. Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° возьмСм ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ плюс скролинг ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ. Для Π½Π°Ρ‡Π°Π»Π° запустим Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ дСсктопный Ρ„Ρ€Π΅ΠΉΠΌ, Ρ€Π°Π·ΠΌΠ΅Ρ€ установим 1440 Π½Π° 2000. Если Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ°Π»ΠΎ мСста, Ρ‚ΠΎ высоту ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ. НарисуСм Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Ρ„Ρ€Π΅ΠΉΠΌ, Π½Π°Π·ΠΎΠ²Ρ‘ΠΌ header ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅Π³ΠΎ Π² основноС ΠΎΠΊΠ½ΠΎ. Π Π°Π·ΠΌΠ΅Ρ€ β€œΡ…Π΅Π΄Π΅Ρ€Π°β€ установим 470, Π½Π°Π·Π½Π°Ρ‡ΠΈΠΌ Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° ΠΈ Π½Π°ΠΉΠ΄Π΅ΠΌ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΡΡ‰ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ. ΠŸΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ дСйствий ΠΏΠΎΠΊΠ°Π·Π°Π½Π° Π½ΠΈΠΆΠ΅:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ сдСлаСм Π·Π°Ρ‚Π΅ΠΌΠ½Π΅Π½ΠΈΠ΅ Π² шапкС для этого Π² слоях β€œrectangle 1” ΠΈ β€œheader 1”, помСняСм мСстами, послС Π²Ρ‹Π±Π΅Ρ€Π΅ΠΌ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ image ΠΈ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Design, Π½Π°ΠΉΠ΄Π΅ΠΌ Ρ€Π°Π·Π΄Π΅Π» β€œLayer” ΠΈ Ρƒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° β€œPass Through” установим 50 %.

Π’ image header Π΄Π΅Π»Π°Π΅ΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ настройки, оставляСм Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 100 % ΠΈ Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ спискС Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Darken. ПослС этого наша шапка Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Ρ‚Π΅ΠΌΠ½Π΅Π½Π°, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π²Ρ‹ΡˆΠ΅.Β 

ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π² Π€ΠΈΠ³ΠΌΠ΅. На основном холстС создаСм Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ frame. Π—Π΄Π΅ΡΡŒ допустимы Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΡ‹. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС Π½ΠΎΠ²Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ это Overflow Behavior, это скролинг, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²ΠΈΠ½ΠΊΠΈ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°, ΠΎΠ½ Π±Ρ‹Π²Π°Π΅Ρ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈΠ»ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ.Β 

Линия с Ρ‚ΠΎΠ²Π°Ρ€Π°ΠΌΠΈ Π±ΡƒΠ΄Π΅Ρ‚ располоТСна сразу послС шапки. Но ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π΅Ρ‘ Ρ‚ΡƒΠ΄Π° Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ, Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, Π³Π΄Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Ρ‹ всС ΠΈΠΊΠΎΠ½ΠΊΠΈ с Ρ‚ΠΎΠ²Π°Ρ€Π°ΠΌΠΈ. Π€Ρ€Π΅ΠΉΠΌ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ достаточно Π΄Π»ΠΈΠ½Π½Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚ΡƒΠ΄Π° ΡƒΠΌΠ΅ΡΡ‚ΠΈΠ»ΠΈΡΡŒ всС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΠΌ понадобится ΠΏΠ»Π°Π³ΠΈΠ½ unsplash. Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π² запрос Π² поисковикС unsplash figma. ПослС инсталляции, Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ всС наши Π±Π»ΠΎΠΊΠΈ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ контСкстноС мСню ΠΈ ΠΎΡ‚Ρ‚ΡƒΠ΄Π° Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ plugins Ρ‰Π΅Π»ΠΊΠ°Π΅ΠΌ ΠΏΠΎ unsplash. ΠŸΠΎΡΠ²ΠΈΡ‚ΡΡ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ, Π³Π΄Π΅ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ подходящий Ρ€Π°Π·Π΄Π΅Π» Π² ΠΌΠΎΠ΅ΠΌ случаС β€œtechnology”. ГСнСрация img ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Ρ‘Ρ‚ автоматичСски. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ Design Π΄ΠΎΠ»ΠΆΠ½Π° ΡΡ‚ΠΎΡΡ‚ΡŒ Π³Π°Π»ΠΎΡ‡ΠΊΠ° β€œClip content”, это Π½ΡƒΠΆΠ½ΠΎ для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ элСмСнты ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΠ»ΠΈΡΡŒ.Β 

Π”Π°Π»ΡŒΡˆΠ΅ Π·Π°Ρ…Π²Π°Ρ‚ΠΈΠΌ ΠΊΡ€Π°ΠΉ ΡƒΠ³Π»Π° ΠΈ Ρ‚Π°Ρ‰ΠΈΠΌ, ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ Ρ€Π°Π·ΠΌΠ΅Ρ€ (ΡˆΠΈΡ€ΠΈΠ½Ρƒ) с 3484 Π΄ΠΎ 1460, послС этого пСрСмСстим Π»Π΅Π½Ρ‚Ρƒ Ρ‚ΡƒΠ΄Π°, Π³Π΄Π΅ ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΈ настроим Overflow behavior, Π΄Π°Π½Π½Ρ‹ΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ находится Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Prototype. Π’ этой Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ доступно нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ².Β 

Установим ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ β€œHorizontal Scrolling”. ПослС этого ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π² ΠΏΡ€Π°Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ Present ΠΈ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ прокручиваСтся Π»Π΅Π½Ρ‚Π° с Ρ‚ΠΎΠ²Π°Ρ€Π°ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡ‹ΡˆΠΈ.Β 

Когда Π±ΡƒΠ΄Π΅Ρ‚Π΅ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ всС элСмСнты ΡƒΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π½Π° экранС, ΠΈΠ½Π°Ρ‡Π΅ вмСсто скроллинга Π»Π΅Π½Ρ‚Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ шаг это ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ frame, с ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ Ρ‚ΠΎΠ²Π°Ρ€Π°. РисуСм ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, Π³Π΄Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Ρ‹ описаниС ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ с  элСктроникой. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ Π±Ρ‹Π»ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ сдСлаСм сСтку. МоТно ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ ΠΈ Π±Π΅Π· сСтки, Π½ΠΎ Π² Ρ‚Π°ΠΊΠΎΠΌ случаС придСтся всС ΠΈΠ·ΠΌΠ΅Ρ€ΡΡ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ.

Π’ настройках grid установим 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, отступы Margin 20 пиксСлСй. РазмСстим Π½Π° холстС ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, ΠΎΡ„ΠΎΡ€ΠΌΠΈΠΌ Π΅Π³ΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ тСкст с Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ ΠΈ Ρ†Π΅Π½ΠΎΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚, Π³Π΄Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ΠΊΠ° Ρ‚ΠΎΠ²Π°Ρ€Π°, послС сгруппируСм (CTRL+G)Β  эти ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ Π² ΠΈΡ‚ΠΎΠ³Π΅ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ. Π‘Π΄Π΅Π»Π°Π΅ΠΌ нСсколько Π΄ΡƒΠ±Π»ΠΈΠΊΠ°Ρ‚ΠΎΠ² ΠΈ Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ размСстим Π½Π° области, ΠΏΡ€ΠΈ этом Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ±Π»ΡŽΠ΄Π°Ρ‚ΡŒ отступы.Β 

Π’ самом ΠΊΠΎΠ½Ρ†Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° вставим Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ frame, это ΠΏΠΎΠ΄Π²Π°Π». ΠŸΡ€ΠΈΠ΄Π°Π΄ΠΈΠΌ Π΅ΠΌΡƒ Ρ†Π²Π΅Ρ‚ шапки Π² ΠΈΡ‚ΠΎΠ³Π΅ Ρƒ нас получится:Β 

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ Ρ‰Π΅Π»Ρ‡ΠΊΠ΅ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ происходил ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ страницу, Π½ΡƒΠΆΠ½Π° связь. Данная ΠΏΡ€ΠΎΡ†Π΅Π΄ΡƒΡ€Π° называСтся ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Как это Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ? Для Π½Π°Ρ‡Π°Π»Π° Π΄ΡƒΠ±Π»ΠΈΡ€ΡƒΠ΅ΠΌ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΌΠ°ΠΊΠ΅Ρ‚ нашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° (горячиС клавиши CTRL+C ΠΈ CTRL+V). Π£ Π΄ΡƒΠ±Π»ΠΈΠΊΠ°Ρ‚Π° ΡƒΠ΄Π°Π»ΠΈΠΌ всС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π΅Π»Π°Π΅ΠΌ этот участок. Π”ΠΎΠ±Π°Π²ΠΈΠΌ rectangle с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ (Unsplash) ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½Π°Π·Π°Π΄, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π»Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ. Π’ ΠΈΡ‚ΠΎΠ³Π΅ Ρƒ нас получится ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅.

ЗаймСмся связями, ΠΊΠ»ΠΈΠΊΠ°Π΅ΠΌ ΠΏΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ prototype. ΠŸΠΎΡΠ²ΠΈΡ‚ΡΡ ΠΊΡ€ΡƒΠΆΠΎΠΊ, Ссли навСсти ΠΌΡ‹ΡˆΠΊΠΎΠΉ, Π±ΡƒΠ΄Π΅Ρ‚ плюсик.Β 

НаТимая Π½Π° плюс, Π½Π°Ρ‡ΠΈΠ½Π°Π΅ΠΌ вСсти, удСрТивая ΠΌΡ‹ΡˆΡŒ, ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ„Ρ€Π΅ΠΉΠΌ. Π’ ΠΈΡ‚ΠΎΠ³Π΅ появится Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ с настройками, оставляСм ΠΊΠ°ΠΊ Π΅ΡΡ‚ΡŒ. Π’ΠΎ ΠΆΠ΅ самоС ΠΏΡ€ΠΎΠ΄Π΅Π»Ρ‹Π²Π°Π΅ΠΌ Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠ΅ с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ β€œΠ½Π°Π·Π°Π΄β€. НиТС ΠΏΠΎΠΊΠ°Π·Π°Π½Π° связь. Π’Π΅ΠΏΠ΅Ρ€ΡŒ тСстируСм Ссли всС сдСлано ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ΠΊΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅Ρ‚ Π½Π°Β  Π΄Ρ€ΡƒΠ³ΡƒΡŽ страница ΠΈ смоТСт Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ Π½Π°Π·Π°Π΄.

ВСстируСм ΠΈ смотрим Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ ΠΎΡΡ‚Π°Π²ΡˆΠΈΠ΅ΡΡ ΠΏΡΡ‚ΡŒ страниц с Ρ‚ΠΎΠ²Π°Ρ€Π°ΠΌΠΈ, Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΅Ρ‰Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΈ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊ Π½ΠΈΠΌ связь. НадСюсь, Π²Π°ΠΌ понятна Ρ‚Π΅ΠΌΠ° ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π² Π€ΠΈΠ³ΠΌΠ°.

ПодвСдСм ΠΈΡ‚ΠΎΠ³: для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π²Π΅Π±-мастСру приходится Π·Π°Ρ‚Ρ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Π£ нас ΠΆΠ΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ Π·Π° нСбольшой ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ с нуля ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π² Π€ΠΈΠ³ΠΌΠ° ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… страниц, ΠΏΡ€ΠΈ этом ΠΌΡ‹ использовали ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ графичСских элСмСнтов. Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ наглядно дСмонстрируСт, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ сайта Π² Π€ΠΈΠ³ΠΌΠ΅, Π° для увСличСния Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π° сущСствуСт Ρ„ΠΈΠ³ΠΌΠ° ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сСрвиса figma ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ красивыС дизайнСрскиС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ссылку Π½Π° Π³ΠΎΡ‚ΠΎΠ²ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΡƒ.Β 

Как ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π² Figma β€” основныС дСйствия

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ – это динамичСская модСль сайта, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ. ВсС Ρ‡Ρ‚ΠΎ ΠΌΡ‹ рассматривали Π΄ΠΎ этого – Π±Ρ‹Π»ΠΎ связано с Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΆΠ΅ ΠΌΡ‹ рассмотрим, ΠΊΠ°ΠΊ ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒ этот Π΄ΠΈΠ·Π°ΠΉΠ½. Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² Π€ΠΈΠ³ΠΌΠ΅, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° Ρ€Π°Π·Π΄Π΅Π» Β«PrototypeΒ». ΠžΠ±Ρ‹Ρ‡Π½ΠΎ это дСлаСтся, ΠΊΠΎΠ³Π΄Π° Π΄ΠΈΠ·Π°ΠΉΠ½ сайта Π³ΠΎΡ‚ΠΎΠ². НСкоторыС спСциалисты Π΄Π΅Π»Π°ΡŽΡ‚ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½ΠΎ с Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ удобство взаимодСйствия с интСрфСйсом.

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

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π²Ρ‹ устанавливаСтС взаимодСйствиС ΠΌΠ΅ΠΆΠ΄Ρƒ страницами сайта ΠΈ Π΅Π΅ элСмСнтами. Β 

Π’ Π€ΠΈΠ³ΠΌΠ΅ Π΅ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ способа взаимодСйствия с элСмСнтами.

  • Β«NavigateΒ» – ΠŸΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° элСмСнт, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅Ρ‚ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ экран. Допустим Π²Ρ‹ Π½Π°ΠΆΠ°Π»ΠΈ Π½Π° ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ², послС Ρ‡Π΅Π³ΠΎ загрузится другая страница с Ρ‚ΠΎΠ²Π°Ρ€Π°ΠΌΠΈ ΠΈΠ· этого ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π°.
  • Β«SwapΒ» – Π­Ρ‚ΠΎ Π·Π°ΠΌΠ΅Π½Π° ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅. Допустим Π²Ρ‹ ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ»ΠΈ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части страницы. ВмСсто Π΄Π°Π½Π½ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ появляСтся мСню, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ Ρ‡Π°Ρ‚Π°, находящССся Π½Π° Ρ‚ΠΎΠΌ ΠΆΠ΅ мСстС. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, сама страница Π½Π΅ замСняСтся Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ.
  • Β«OverlayΒ» – Π­Ρ‚ΠΎ Π²Ρ‹Π²ΠΎΠ΄ Π½ΠΎΠ²ΠΎΠ³ΠΎ элСмСнта ΠΏΠΎΠ²Π΅Ρ€Ρ… ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ…. НапримСр, ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ появляСтся ΠΎΠΊΠ½ΠΎ с Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠΌ, Ρ„ΠΎΡ€ΠΌΠ°, ΠΈΠ»ΠΈ другая панСль, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ дСйствиС.Β 

Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· этих способов взаимодСйствия, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌ, ΠΈ Π² ΠΏΡ€Π°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ мСню Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π» Β«NoneΒ». Π’ этом Ρ€Π°Π·Π΄Π΅Π»Π΅ Π²Ρ‹ смоТСтС Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π² настройках Β«Interaction detailsΒ» Π²Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ доступна настройка Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΌΠ΅ΠΆΠ΄Ρƒ страницами. Π•ΡΡ‚ΡŒ нСсколько Π²ΠΈΠ΄ΠΎΠ² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ просмотра Π² нСбольшом экранС, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ находится Π½ΠΈΠΆΠ΅. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π΄Π°Ρ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΈ врСмя ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°. Β Β 

ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π²Ρ‹ настроитС взаимодСйствиС элСмСнтов страниц, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ сайт. Для этого Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π² ΠΏΡ€Π°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов устройство, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ произвСсти тСст, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ сайта.Β  Β 

Π—Π°Ρ‚Π΅ΠΌ Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ запуска.

ΠŸΠΎΡΠ²ΠΈΡ‚ΡΡ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹. Π­Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π΅Π΄ΠΎΡ‡Π΅Ρ‚Ρ‹ Π² ΠΏΠΎΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, ΠΈ Π² случаС выявлСния ошибок ΠΏΠΎΠ΄ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ….

Π˜Ρ‚Π°ΠΊ, Π² этом ΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ рассмотрСли, ΠΊΠ°ΠΊ устроСно созданиС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² Π² Π€ΠΈΠ³ΠΌΠ΅. Π­Ρ‚ΠΎΡ‚ процСсс ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚Π½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, особСнно Π² Ρ‚ΠΎΠΌ случаС, Ссли Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ связь ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами, Π° Π½Π΅ просто Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ структуру. Однако для тСстирования ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° этот Π½Π°Π²Ρ‹ΠΊ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ.

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

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

Π‘Π•Π‘ΠŸΠ›ΠΠ’ΠΠ«Π™ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ инструмСнт: созданиС ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ². БСсплатныС ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ созданныС Ρ„Π°ΠΉΠ»Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΌΠΈΠΊΡˆΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ

ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Ρ‹

Π Π°ΡΡˆΠΈΡ€ΡŒΡ‚Π΅ возмоТности ΠΈ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Ρƒ

Бобытия ΠΈ прямыС Ρ‚Ρ€Π°Π½ΡΠ»ΡΡ†ΠΈΠΈΠŸΠ΅Ρ€Π΅Π΄ΠΎΠ²ΠΎΠΉ ΠΎΠΏΡ‹Ρ‚ΠžΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°Π“Ρ€ΡƒΠΏΠΏΡ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉΠ‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΠΈ сообщСств

Π’ΠΎΠΉΡ‚ΠΈΠΠ°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ

ΠΠ°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ

ΠΠ°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ

Π’ΠΎΠΏΠ»ΠΎΡ‚ΠΈΡ‚Π΅ свои ΠΈΠ΄Π΅ΠΈ Π² Тизнь с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ². ВСстируйтС ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ Ρ€Π°Π½ΡŒΡˆΠ΅ ΠΈ Ρ‡Π°Ρ‰Π΅. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΏΠ»Π°Π½ развития.

Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹

Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ выглядят ΠΊΠ°ΠΊ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Π΅

ΠŸΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ»Ρ‹ статичСского Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ β€” ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ трСбуСтся.

  • Π˜Π½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½Π°Ρ сборка: ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ элСмСнты ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ взаимодСйствия ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ.
  • ВзаимодСйствия: ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΌΠ°Π»ΠΎΠ·Π°ΠΌΠ΅Ρ‚Π½Ρ‹Ρ… взаимодСйствий, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Ρ‰Π΅Π»Ρ‡ΠΎΠΊ, Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ курсора, Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΒ Ρ‚.Β Π΄.
  • ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ просмотр: Π˜ΡΠΏΡ‹Ρ‚Π°ΠΉΡ‚Π΅ свои ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΉ ΠΆΠΈΠ·Π½ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ нашСго мобильного прилоТСния Figma, доступного для iOS ΠΈΒ Android.

ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°ΠΉΡ‚Π΅, Π° Π½Π΅ рассказывайтС своС Π²ΠΈΠ΄Π΅Π½ΠΈΠ΅ взаимодСйствия

Π˜Π·Π±Π°Π²ΡŒΡ‚Π΅ΡΡŒ ΠΎΡ‚ Π΄ΠΎΠ³Π°Π΄ΠΎΠΊ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅, ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ описав Π΄Π΅Ρ‚Π°Π»ΠΈ взаимодСйствия, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ прСдставляСтС.

  • Π Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Smart Animate: АвтоматичСски Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΈ создавайтС Π΄Π΅Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹.
  • ДинамичСскиС налоТСния: Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… слоСв ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΉ содСрТимого.
  • АнимированныС GIF-Ρ„Π°ΠΉΠ»Ρ‹: Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ GIF-Ρ„Π°ΠΉΠ»Ρ‹ для прСдставлСния ΠΌΠΎΡƒΡˆΠ½-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, видСоэлСмСнтов ΠΈ Ρ‚ΠΎΠ½ΠΊΠΈΡ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ.

Π£ нас ΠΎΡ‡Π΅Π½ΡŒ быстрый процСсс проСктирования. ΠœΡ‹ постоянно строим, тСстируСм ΠΈ ΠΈΡ‚Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ‚Π°ΠΊ быстро ΠΈ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π² Figma ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½Π° для нас.

Π‘Π΅Ρ‚ Π₯ΠΎΡ€Π½, ΡΡ‚Π°Ρ€ΡˆΠΈΠΉ Π½Π°ΡƒΡ‡Π½Ρ‹ΠΉ сотрудник Bulb

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ всС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ΄Π½ΠΎΠ³ΠΎ инструмСнта

Π‘ΠΎΠ»ΡŒΡˆΠ΅ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€Ρ‹Π³Π°Ρ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ инструмСнтами. Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅, Π΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ ΠΈ собирайтС ΠΎΡ‚Π·Ρ‹Π²Ρ‹ Π² Figma.

  • ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° «всС Π² ΠΎΠ΄Π½ΠΎΠΌΒ»: ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ„Π°ΠΉΠ»ΠΎΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ ΠΆΠΈΠ²Ρ‹ΠΌ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠΌ. ИзмСнСния Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² Π²Π°ΡˆΠ΅ΠΌΒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ΅.
  • ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ: ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ ссылкой Π½Π° свой ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ. ΠŸΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΠΉΡ‚Π΅ Π΅Π³ΠΎ Π² любом мСстС, Π³Π΄Π΅ Π΅ΡΡ‚ΡŒ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚.
  • ВстроСнныС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ: ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ Π² ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ΅. Они пСрСносятся Π² Ρ„Π°ΠΉΠ» Π΄ΠΈΠ·Π°ΠΉΠ½Π°, поэтому Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ потСряСтся.

Π”Ρ€ΡƒΠ³ΠΈΠ΅ способы использования ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² Figma

  • НаблюдСниС Π·Π° испытуСмым Π½Π° ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… сСссиях
  • ВзаимодСйствиС с ΠΆΠΈΠ²Ρ‹ΠΌΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°ΠΌΠΈ Π² Notion ΠΈΠ»ΠΈ Dropbox инструмСнты

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Figma ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°

Design

Learn more

Design Systems

Learn more

Design process

Learn more

  • Twitter
  • YouTube
  • Instagram
  • Facebook
Use Cases
  • UI design
  • UX design
  • ΠšΠ°Ρ€ΠΊΠ°Ρ
  • Π”ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹
  • Мозговой ΡˆΡ‚ΡƒΡ€ΠΌ
  • Π“ΠΈΠ±ΠΊΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‡ΠΈΠ΅ процСссы
  • БтратСгичСскоС ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅
  • Π¨Π°Π±Π»ΠΎΠ½Ρ‹
  • Π£Π΄Π°Π»Π΅Π½Π½ΠΎΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅
  • Agencies
  • Figma for education
Explore
  • Design features
  • Prototyping features
  • Design systems features
  • Collaboration features
  • Design process
  • FigJam
  • Pricing
  • Enterprise
  • Organization
  • Professional
  • ΠšΠ»ΠΈΠ΅Π½Ρ‚Ρ‹
  • Π‘Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ
  • ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹
Π‘Ρ€Π°Π²Π½ΠΈΡ‚ΡŒ
  • Sketch
  • Adobe XD
  • Invision Studio
  • Framer
  • Design on Windows
  • Miro

English

Запуск ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… тСстов, прСдставлСниС рСалистичных ΠΏΠ»Π°Π½ΠΎΠ² заинтСрСсованным сторонам, ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΎ намСрСниях β€” этот список ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ.

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

ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Π²Ρ‹ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚Π΅ экран с ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ постоянной Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ панСлью Π²ΠΊΠ»Π°Π΄ΠΎΠΊ. Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠ²ΡΠ·Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ мСню с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠΎΠΌ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΡΠ²ΡΠ·Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π΄ΠΎΠΌΠΎΠΉΒ» с Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠΎΠΌ). Если это мСню повторяСтся Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… экранах, ΠΊΠ°ΠΊ это часто Π±Ρ‹Π²Π°Π΅Ρ‚ с панСлями Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, ΡƒΡ‚ΠΎΠΌΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π·Π°Π΄Π°Ρ‡Π° связывания ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π½ΡΡ‚ΡŒ Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Ρ‡Π΅ΠΌ слСдовало Π±Ρ‹.

Π•Π‘Π’Π¬ Π›Π£Π§Π¨Π˜Π™ Π‘ΠŸΠžΠ‘ΠžΠ‘. Π’ самом Π½Π°Ρ‡Π°Π»Π΅ процСсса ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚Π΅ своС Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚. Π‘Π΄Π΅Π»Π°Π² это, свяТитС ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ мСню этого основного ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠΎΠΌ. Π”Π²ΠΈΠ³Π°ΡΡΡŒ Π²ΠΏΠ΅Ρ€Π΅Π΄, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ создаСтС экзСмпляр ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π°, всС соСдинСния Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚ΡŒΡΡ автоматичСски! Π‘ΠΎΠ»ΡŒΡˆΠ΅ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π±ΠΈΡ‚ΡŒΡΡ Π³ΠΎΠ»ΠΎΠ²ΠΎΠΉ ΠΎ стСну ΠΈΠ·-Π·Π° Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹.

Одно прСдостСрСТСниС: это Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Ссли Π²Ρ‹ пСрСтаскиваСтС экзСмпляр ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΈΠ· Π³Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π³Π»Π°Π²Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ находится Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅, Π²Ρ‹ Π½Π΅ смоТСтС Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ€Π°Π½Π΅Π΅ упомянутым совСтом.

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

Бсылка Π½Π° Ρ„Π°ΠΉΠ» Figma

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

Но Π±Ρ‹Π²Π°ΡŽΡ‚ случаи, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²ΠΈΠ΄Π½ΠΎ Π² области просмотра ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ (Ρ‚. Π΅. Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚). Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ прСдставлСниС ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ обрСзаСтся, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ пСрСходят ΠΊ этому ΠΊΠ°Π΄Ρ€Ρƒ-ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡƒ. Устройства с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ области просмотра Π±ΡƒΠ΄ΡƒΡ‚ ΡΠ΅Π³ΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² Ρ€Π°Π·Π½Ρ‹Ρ… мСстах. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ просмотр этих Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… прСдставлСний, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Π²ΠΈΠ΄Π΅Π½ Π² ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΠΎΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠ΅:Β Β 

1) ΠŸΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚. 2) Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ настроили ограничСния для всСх элСмСнтов Π²Π½ΡƒΡ‚Ρ€ΠΈ. 3) ΠžΠ±Π΅ΡΠΏΠ΅Ρ‡ΡŒΡ‚Π΅ Β«ΠΎΠ±Ρ€Π΅Π·ΠΊΡƒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°Β». установлСн Ρ„Π»Π°ΠΆΠΎΠΊ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ свойств (это Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ). 4) ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ΡΡŒ Π² Ρ€Π΅ΠΆΠΈΠΌ прототипирования ΠΈ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½ΠΎΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, настроив «ПовСдСниС пСрСполнСния». 5) ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ экзСмпляр этого ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π² свои ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€. ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ.

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

Бсылка Π½Π° Ρ„Π°ΠΉΠ» Figma

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

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

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

Бсылка Π½Π° Ρ„Π°ΠΉΠ» Figma

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ Π² Figma Π² настоящСС врСмя ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Ρ‹ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ страницами. Π­Ρ‚ΠΎ позволяСт Π²Π°ΠΌ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ Π² ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, всС со своими ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ URL-адрСсами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с людьми, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ захотят ΠΈΡ… ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ. Но ΠΈΠ½ΠΎΠ³Π΄Π° Π²Ρ‹ просто Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с людьми ΠΎΠ΄Π½ΠΎΠΉ ссылкой, которая ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΈΠΌ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² оформлСния.

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

Бсылка Π½Π° Ρ„Π°ΠΉΠ» Figma

Π—Π½Π°Π΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ ΠΎ Ρ€Π΅ΠΆΠΈΠΌΠ΅ наблюдСния Π² Figma? Π­Ρ‚ΠΎ позволяСт Π²Π°ΠΌ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° экраном Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ°, ΠΏΠΎΠΊΠ° ΠΎΠ½ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ прСдставляСт ΠΈΠ»ΠΈ Ρ€ΠΈΡ„ΠΌΡƒΠ΅Ρ‚. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ Π°Π²Π°Ρ‚Π°Ρ€ вашСго соавтора Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ всС, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π²ΠΈΠ΄ΠΈΡ‚ Π² Ρ„Π°ΠΉΠ»Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

This entry was posted in ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΠ΅