Как ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ сСтку Π² Ρ„ΠΈΠ³ΠΌΠ΅: Как Π² Figma Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСткой / Skillbox Media

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

ΠΊΠ°ΠΊ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ, ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, ΡƒΠ±Ρ€Π°Ρ‚ΡŒ, Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сСтку Π² Figma

1 min read
03.04.2021

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

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ бСсплатно 24 Ρ€Π°Π·Π΄Π΅Π»Π° landing page для figma

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сСтку Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сСтку Π² Ρ„ΠΈΠ³ΠΌΠ΅ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Ρ€Π΅ΠΉΠΌ ΠΈ Π² ΠΏΡ€Π°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ² надписи Β«Layout gridΒ» Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ плюса. ΠŸΠΎΡΠ²ΠΈΡ‚ΡΡ сСтка Π² Π²ΠΈΠ΄Π΅ ΠΊΠ»Π΅Ρ‚ΠΎΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ 10 Π½Π° 10 пиксСлСй.

Как Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сСтку Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сСтку Π² Ρ„ΠΈΠ³ΠΌΠ΅ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π² ΠΏΡ€Π°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ сСтки. Π’ появившСмся ΠΎΠΊΠ½Π΅ Π²Ρ‹ смоТСтС ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, Ρ†Π²Π΅Ρ‚ ΠΈ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ сСтки. Π’Π°ΠΊΠΆΠ΅ Π΄Π΅Π»Π°Ρ‚ΡŒ сСтку Π² Π²ΠΈΠ΄Π΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΡƒΡŽ сСтку, вмСсто значСния Β«GridΒ» (сСтка), Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ надпись Β«ColumnsΒ» (ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈΠ»ΠΈ столбцы).

Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π±Ρ‹Π»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ, Ρ‚ΠΎ слСдуСт Π·Π°Π΄Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«RowsΒ» (Ρ‡Ρ‚ΠΎ пСрСводится ΠΊΠ°ΠΊ строки, ряды).

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сСтку ΠΈΠ· 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π² Figma

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сСтку ΠΈΠ· 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠ² Π² Figma, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Ρ€Π΅ΠΉΠΌ. Π‘ΠΏΡ€Π°Π²Π° Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ сСтки, Π·Π°Ρ‚Π΅ΠΌ Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ Β«CountΒ» Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ†ΠΈΡ„Ρ€Ρƒ Β«12Β» ΠΈΠ· списка. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π²Ρ‹ Π·Π°Π΄Π°Π΄ΠΈΡ‚Π΅ 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.

Π‘Π΅Ρ‚ΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, Ссли Π²Π½ΠΈΠ·Ρƒ надписи Β«TypeΒ» ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Β«CenterΒ». По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ стоит Β«StretchΒ». Π’ этом случаС сСтка Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ.

Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сСтку справа, Ρ‚ΠΎ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΈΠ· списка Β«RightΒ».

Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ сСтка Π±Ρ‹Ρ€Π° Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Π° Π² Π»Π΅Π²ΠΎΠΌ ΠΊΡ€Π°ΡŽ, Ρ‚ΠΎ установитС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«LeftΒ».

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, Π·Π°Π΄Π°ΠΉΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² пиксСлях Π²Π½ΠΈΠ·Ρƒ надписи Β«WidthΒ» (ΡˆΠΈΡ€ΠΈΠ½Π°). НапримСр я ΡΡ‚Π°Π²Π»ΡŽ 80 пиксСлСй. Π’ этом случаС сСтка ΠΈΠ· 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 1180 px. Π¨ΠΈΡ€ΠΈΠ½Π° Ρ„Ρ€Π΅ΠΉΠΌΠ° 1920 px для Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ².

Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ сСтку ΠΏΠΎΠ²Π΅Ρ€Ρ… ΠΏΠ΅Ρ€Π²ΠΎΠΉ, Ρ‚ΠΎ снова Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° плюс Π² ΠΏΡ€Π°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ² надписи Β«Layout gridΒ».

Как ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ сСтку Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π½Π΅ Π½ΡƒΠΆΠ½ΡƒΡŽ сСтку Π² Ρ„ΠΈΠ³ΠΌΠ΅, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ минуса, Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ² Ρ‚ΠΎΠΉ сСтки, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ сСтки Π² Ρ„ΠΈΠ³ΠΌΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Ρ‘ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ

Для создания стиля сСтки, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Ρ€Π΅ΠΉΠΌ, Π³Π΄Π΅ Π΅ΡΡ‚ΡŒ сСтка ΠΈ справа, Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ² надписи Β«Layout gridΒ» Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ с Ρ‡Π΅Ρ‚Ρ‹Ρ€ΡŒΠΌΡ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ. ΠŸΠΎΡΠ²ΠΈΡ‚ΡΡ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ. Π—Π°Π΄Π°ΠΉΡ‚Π΅ имя стиля (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ).

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСтку ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌ, Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ с Ρ‡Π΅Ρ‚Ρ‹Ρ€ΡŒΠΌΡ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ Π² ΠΏΡ€Π°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ² надписи Β«layout gridΒ» ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ созданный Ρ€Π°Π½Π΅Π΅ ΡΡ‚ΠΈΠ»ΡŒ.

Как Π²Π»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ сСтку Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ сСтку Π² Ρ„ΠΈΠ³ΠΌΠ΅ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ горячих 3 клавиш Β«Ctrl + Shift + 4Β» для Windows ΠΈ Β«Ctrl + GΒ», Ссли Ρƒ вас опСрационная систСма Mac Os.

Π¨Π°Π±Π»ΠΎΠ½Ρ‹ сСток Π² 12, 9, 6, 3 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ для Figma.

КакиС сСтки ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Π»ΠΈΡ‡Π½ΠΎ я Π² своСй Ρ€Π°Π±ΠΎΡ‚Π΅? Π‘ΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для этой ΡΡ‚Π°Ρ‚ΡŒΠΈ я сдСлал ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ сСток. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот Ρ„Π°ΠΉΠ» ΠΏΠΎ ссылкС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅ сСтки ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ² я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ ΠΏΡ€ΠΈ создании Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайтов (Landing Page).

КакиС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ² с сСтками я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Π² Ρ„ΠΈΠ³ΠΌΠ΅?

Π₯ΠΎΡ‡Ρƒ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ своих сСток, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ. МнС ΡƒΠ΄ΠΎΠ±Π½ΠΎ с Π½ΠΈΠΌΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств с ΠΈΡ… ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ. ΠœΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ сСтки, Π½ΠΎ ΠΌΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Ρ‚ΠΎΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ. Π‘Π΅Ρ€ΠΈΡ‚Π΅ Π½Π° Π²ΠΎΠΎΡ€ΡƒΠΆΠ΅Π½ΠΈΠ΅.

Π‘Π΅Ρ‚ΠΊΠ° Π² Ρ„ΠΈΠ³ΠΌΠ΅ Π² 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ для ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π° (дСсктопа)

Π¨ΠΈΡ€ΠΈΠ½Π° Ρ„Ρ€Π΅ΠΉΠΌΠ° для ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π° (дСсктопа) β€” 1920 px. Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ сСтку Π² 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ. Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ столбцов 80 px. РасстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ β€” 20 px. Π Π°Π·ΠΌΠ΅Ρ€ 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ получаСтся 1180 px.

Π‘Π΅Ρ‚ΠΊΠ° 9 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ для ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠ² ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.

Π”Π°Π»Π΅Π΅ ΠΈΠ΄Π΅Ρ‚ Ρ„Ρ€Π΅ΠΉΠΌ с 9 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ для ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠ² ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρƒ мСня Π² 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠΉ сСткС. Π—Π΄Π΅ΡΡŒ ΡˆΠΈΡ€ΠΈΠ½Π° Ρ„Ρ€Π΅ΠΉΠΌΠ° β€” 1180 px. Аналогично ΡˆΠΈΡ€ΠΈΠ½Π΅ 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠΉ сСтки. 9 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ. Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ 80 px. Π Π°Π·Ρ€Ρ‹Π² ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ 20 px. Π¨ΠΈΡ€ΠΈΠ½Π° сСтки ΠΈ рабочая ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, Π³Π΄Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ 880 px.

Π‘Π΅Ρ‚ΠΊΠ° 6 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств

Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ„Ρ€Π΅ΠΉΠΌΠ° для сСтки с 6 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ β€” 880 px. ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ столбцов 6. Π¨ΠΈΡ€ΠΈΠ½Π° столбца 80 px, Ρ€Π°Π·Ρ€Ρ‹Π² ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами 20 px. Π¨ΠΈΡ€ΠΈΠ½Π° сСтки ΠΈΠ· 6 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ составляСт 580 px.

Π‘Π΅Ρ‚ΠΊΠΈ ΠΈΠ· 3 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств

Π¨ΠΈΡ€ΠΈΠ½Π° Ρ„Ρ€Π΅ΠΉΠΌΠ° β€” 446 px. Π¨ΠΈΡ€ΠΈΠ½Π° ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ 80 px. РасстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ 20 px. Π¨ΠΈΡ€ΠΈΠ½Π° 3 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств β€” 280 px.

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

Π˜Ρ‚Π°ΠΊ, Π² этом Π²ΠΈΠ΄Π΅ΠΎ Π²Ρ‹ ΡƒΠ·Π½Π°Π»ΠΈ ΠΏΡ€ΠΎ инструмСнт Β«Π‘Π΅Ρ‚ΠΊΠ°Β» Π² Ρ„ΠΈΠ³ΠΌΠ΅ (Figma).

P.S. Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ бонусныС ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ ΠΏΠΎ быстрому созданию Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайтов Π² Figma, Ρ‚ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ ΠΏΠΎ этой ссылкС.

Автор ΡΡ‚Π°Ρ‚ΡŒΠΈ: Π’Π»Π°Π΄ΠΈΠΌΠΈΡ€ Π§Π΅Ρ€Π½Ρ‹ΡˆΠΎΠ²

P. P.S. ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈ Π°Π²Ρ‚ΠΎΡ€ Π½Π΅ связан с ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠ΅ΠΉ Figma (Not affiliated with Figma).

Π‘Π΅Ρ‚ΠΊΠΈ Π² Figma. Π§Π°ΡΡ‚ΡŒ 1. Как Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с сСткой Π² Figma, СС… | by Figma Tips

Как Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с сСткой Π² Figma, Π΅Π΅ настройки, ΠΈ Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Grid Style.

Π‘Π΅Ρ‚ΠΊΠ° β€” ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Ρ‹Ρ… инструмСнтов ΠΏΡ€ΠΈ создании Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта. Она ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π½Π°ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ, Ρ€Π°ΡΡΡ‚Π°Π²ΠΈΡ‚ΡŒ всС ΠΏΠΎ мСстам ΠΈ ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ расчСты.

Figma Π΄Π°Π΅Ρ‚ Π½Π°ΠΌ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ инструмСнт Layout Grid, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ. Π‘ΠΎΡ‡Π΅Ρ‚Π°Π½ΠΈΠ΅ΠΌ горячих клавиш ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ сСтку (Ctrl+G), Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Ρ‘ Π½Π° Ρ€Π°Π·Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Ρ‡Ρ‚ΠΎ Π½Π΅Π·Π°ΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΏΡ€ΠΈ создании Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π‘Π΅Ρ‚ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠ° ΠΊ Ρ„Ρ€Π΅ΠΉΠΌΠ°ΠΌ ΠΈΠ»ΠΈ Π²Π½Ρ‚ΡƒΡ€ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ„Ρ€Π΅ΠΉΠΌ ΠΈ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ, ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ² ΠΏΠΎ названию. Π€Ρ€Π΅ΠΉΠΌ подсвСтится синСй Ρ€Π°ΠΌΠΊΠΎΠΉ, Π² ΠΏΡ€Π°Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Design появится ΠΏΡƒΠ½ΠΊΡ‚ Layout Grid.

ДобавляСм Π½ΠΎΠ²ΡƒΡŽ сСтку β€œ+” ΠΈ ΠΆΠΌΠ΅ΠΌ Π½Π° Π½Π΅Π΅. ΠŸΠΎΡΠ²Π»ΡΠ΅Ρ‚ΡΡ ΠΎΠΊΠ½ΠΎ настроСк.

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Figma создаСт сСтку Ρ‚ΠΈΠΏΠ° Grid. Она ΡƒΠ΄ΠΎΠ±Π½Π° ΠΏΡ€ΠΈ создании ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Нас, ΠΊΠ°ΠΊ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², интСрСсуСт вторая Π²ΠΊΠ»Π°Π΄ΠΊΠ° Columns. Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Π΅Π΅ ΠΈ Π²ΠΈΠ΄ΠΈΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ настройки.

ПанСль настроСк Layout Grid

  • Count β€” количСство ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ
  • Width β€” ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ
  • Gutter β€” ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ отступ
  • Margin β€” оступ сСтки ΠΎΡ‚ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ ΠΈ Π»Π΅Π²ΠΎΠ³ΠΎ края ΠΌΠ°ΠΊΠ΅Ρ‚Π°

Ну это, я Π΄ΡƒΠΌΠ°ΡŽ Π²Ρ‹ ΠΈ Π±Π΅Π· мСня прСкрасно поняли.

πŸ”₯ Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½Π°Ρ ΠΈ ваТная настройка это Type. Π’ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΌ спискС ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ:

  • Stretch–рСзиновая сСтка, ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ задаСтся автоматичСски ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΎΠΉ. А это Π·Π½Π°Ρ‡ΠΈΡ‚ Ρ‡Ρ‚ΠΎ Π½Π΅ Π½Π°Π΄ΠΎ самому ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΈ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ полупиксСли Ссли Π²Π΄Ρ€ΡƒΠ³ Π±Π»ΠΎΠΊΠΈ Π½Π΅ дСлятся ΠΏΠΎΡ€ΠΎΠ²Π½Ρƒ 😎
  • Center–сСтка цСнтруСтся. ΠŸΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ этого ΠΏΡƒΠ½ΠΊΡ‚Π° становится Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ окошко Width.
  • Left–тут понятно. Одно врСмя АртСмий Π›Π΅Π±Π΅Π΄Π΅Π² ΠΏΡ€ΠΎΠΏΠ°Π³Π°Π½Π΄ΠΈΡ€ΠΎΠ²Π°Π» сайты ΠΏΡ€ΠΈΠΆΠ°Ρ‚Ρ‹Π΅ ΠΊ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, вряд Π»ΠΈ это Π² Π΅Π³ΠΎ Ρ‡Π΅ΡΡ‚ΡŒ, Π½ΠΎ Π½Π°Π²Π΅Ρ€Π½ΠΎΠ΅ ΠΊΠΎΠΌΡƒ-Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ.

πŸ’£ МоТно ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ сСток Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠ΅, Ссли Π½ΡƒΠΆΠ½ΠΎ!!

ΠšΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΡƒΡ нСсколько сСток, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ‚Π°ΠΊ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅

А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΡƒΠ±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΡ‚ экранов слабонСрвных.

Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Stretch сСтку с Π½ΡƒΠΆΠ½Ρ‹ΠΌΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ ΠΈ Π½Π°Ρ‡ΠΈΠ½Π°Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Ρ€Π΅ΠΉΠΌΠ°. Π­Ρ‚ΠΎ ΠΆΠ΅ просто ΠΎΡ‚Ρ€Ρ‹Π² башки, ΠΈΠ·Π²ΠΈΠ½ΠΈΡ‚Π΅. Π‘Π΅Ρ‚ΠΊΠ° тянСтся вслСд Π·Π° ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ.

Растянули ΠΌΠ°ΠΊΠ΅Ρ‚, подровняли элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎ Π½ΠΎΠ²Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ, Π±ΡƒΠΌ, ΠΏΡ€ΠΎΡ„ΠΈΡ‚, Π½ΠΎΠ²ΠΎΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π³ΠΎΡ‚ΠΎΠ²ΠΎ!

Π‘Π΅Ρ‚ΠΊΠΈ Stretch. ΠœΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ отступ ΠΈ Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ отступы Ρ„ΠΈΠΊΡΠΈΡ€ΡƒΡŽΡ‚ΡΡ, Π° ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ мСняСтся

НавСрноС Π²Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ Layout Grid, рядом с плюсом, появляСтся Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° ΠΈΠΊΠΎΠ½ΠΊΠ° (4 Ρ‚ΠΎΡ‡ΠΊΠΈ). Π‘ΡƒΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ Ρ‡Ρ‚ΠΎ Π½Π°ΡˆΡƒ сСтку ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ ΡΡ‚ΠΈΠ»ΡŒ.

Π–ΠΌΠ΅ΠΌ ΠΏΠΎΡΠ²ΠΈΠ²ΡˆΡƒΡŽΡΡ ΠΈΠΊΠΎΠ½ΠΊΡƒ (послС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ создали сСтку ΠΈΠ»ΠΈ нСсколько сСток Π² вашСм Ρ„Ρ€Π΅ΠΉΠΌΠ΅), Π΄Π°Π΅ΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΡ‚ΠΈΠ»ΡŽ, Π³ΠΎΡ‚ΠΎΠ²ΠΎ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΈΠ· 4Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ, Π² Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΌ мСню появится ваш ΡΡ‚ΠΈΠ»ΡŒ сСтки. ΠœΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π΅Π΅ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ Π½ΠΎΠ²ΠΎΠΌΡƒ Ρ„Ρ€Π΅ΠΉΠΌΡƒ.

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Grid Style для Π½ΠΎΠ²ΠΎΠ³ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ°

А Π΄Π°Π²Π°ΠΉΡ‚Π΅ вспомни ΠΊΠ°ΠΊ ΠΌΡ‹ всС Ρ€Π°Π½ΡŒΡˆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ с сСтками Π² Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅.

Π’ Π»ΡƒΡ‡ΡˆΠ΅ΠΌ случаС это Π±Ρ‹Π» ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ слой, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ всСгда тСрялся ΠΈ Π΅Π³ΠΎ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ ΠΈΡΠΊΠ°Ρ‚ΡŒ Π² ΠΊΡƒΡ‡Π΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… слоСв, Π² Ρ…ΡƒΠ΄ΡˆΠ΅ΠΌ β€” сСтка ΠΈΠ· Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ…, которая мСшала Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΈ Ρ‚Ρ€Π°Π½ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты. Бколько ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, Π½Π΅ΠΏΡ€Π°Π²Π΄Π° Π»ΠΈ?

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

πŸ‘‰ Follow Us https://vk.com/figmatips

Layout Grid β€” руководство Figma

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

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

Рис. Руководство

1

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ рисунка Ρ„ΠΈΠ³ΠΌΠ°

0:54

2

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π½Π° рис.

1:17

3

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

2:14

9000 4

ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ , Π Π°Π·ΠΌΠ΅Ρ€, ΠŸΠΎΠ²ΠΎΡ€ΠΎΡ‚ ΠΈ Π£Π³Π»ΠΎΠ²ΠΎΠΉ радиус

1:27

5

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

1:13

7

Dark Mode с Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ Π²Ρ‹Π±ΠΎΡ€Π°

1:17

8

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

1:36

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

2:37

100003

Blends Modes

2:37

100003

.

2:02

11

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

1:24

12

Union ΠΈ ΡƒΠ³Π»ΠΎΠ²ΠΎΠΉ радиус

2:53

13

Shadow ΠΈ Blure.0002 1:48

14

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

2:00

15

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

3:21

16

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

1:37

17 17

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

1:13

18

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

19

Акнансовый Π΄ΠΈΠ·Π°ΠΉΠ½

3:07

20

ограничСния

1:11

21

.0003

2:00

22

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

8:17

23

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

0:55

24

Vector Network

1:19

Mockpss Mockps

2:00

26

3D Mockups

1:20

27

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

2:03

28

BOOLEANS

2:24

29

Dicon

2:24

9

. 0003

1:48

30

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

1:50

31

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹

2:14

32

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

1:59

33

1:41

34

Apple Watch Ring

2:23

35

Exporting Assets in Figma

1:39

36

Exporting CSS Code

1:04

37

Designing with Π”Π°Π½Π½Ρ‹Π΅

1:57

38

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

2:25

39

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

1:25

40

ΠœΠ½ΠΎΠ³ΠΎΠΊΠΎΠΏΠΎΡ€Ρ

5:39

42

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

43

UIKITS

4:47

44

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

5:47

45

Π‘ΠžΠ›Π•Π™Π‘Π―

4:47

9000 2

.0003

46

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

6:46

47

3D Π€ΠΎΡ€ΠΌΡ‹

12:27

48

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ параллакса Π½Π° Ρ„ΠΈΠ³ΠΌΠ°

7:52

49

3D 3DSPISPIPE : 16

50

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

9:16

51

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

12:54

52

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

29: 38

53

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

19:30

54

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

3:16

55

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ Π½Π° рис.

Π‘Π½ΠΈΠΌΠΈΡ‚Π΅ ΠΏΠ»Π°Π³ΠΈΠ½ BG

2:27

57

ΠšΡ€ΡƒΠ³Π»Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ Π£ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Ρ…ΠΎΠ΄

3:27

58

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

4:49

59

Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Image Π² Π²Π΅ΠΊΡ‚ΠΎΡ€

4:49

. ΠŸΠΎΠ²Π΅Ρ€Π½ΠΈΡ‚Π΅ Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.0003

3:11

60

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

3:42

61

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

62

Advanced Auto Mayout

4:13

63

Circleout

4:13

63

9000 2

9000 2

9000.

9000.

5:57

64

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

2:39

65

ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ Π±Π°Ρ€Π° Tab

4:37

66

Π’ΠΈΠ΄Π΅ΠΎ Π² рисункС.0003

Mesh Gradients

3:03

68

Figma Sections

69

Unsplash Stock Photos

2:07

70

Angular Gradient

4:17

71

Radial Gradient

5:11

72

ПослС прототипирования Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ

73

UI каркас

2:53

74

Lottie Animation0003

6:42

76

Content Generator

2:53

77

Design Lint Missing Style

2:36

78

Slice Tool

79

Adaptive Layout with Breakpoints

80

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

81

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

82

ΠŸΠ°Ρ€Ρ‚ΠΈΡ пСрСимСнования

83

Π”ΠΈΠ·Π°ΠΉΠ½. 0002 85

Smart Selection

86

Component Properties

87

RedLines

88

Interactive Calendar

89

Measure Distance

90

Variable Fonts

91

AI Plugins

92

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

93

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

94

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

95

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

96

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

97

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

98

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

99

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

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

ΠŸΠΎΠΊΡƒΠΏΠΊΠ° Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ доступ ΠΊ Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ 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

Π’Π΅ΠΌΠ½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ с Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠ² для Ρ‚Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

ΠΈ адаптация Π΄ΠΈΠ·Π°ΠΉΠ½Π° для Π΄ΠΈΠ·Π°ΠΉΠ½Π° с Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ выдСлСния

1:17

8

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

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

1:36

9

03 Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° Π”ΠΈΠ·Π°ΠΉΠ½ Ρ„ΠΎΠ½Π° Π² Figma

2:37

10

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

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

2:02

11

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, распрСдСлСниС,

Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ выравнивания ΠΈ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Ρ…ΠΎΠ΄Π° Π½Π° рис.

1:24

12

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

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

2:53

13

. Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΠΈ ΠΈ Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ Π² ваш Π΄ΠΈΠ·Π°ΠΉΠ½0003

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

3:21

16

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

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

1:37

17 Google

0

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

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

1:13

18

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

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

19

ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½

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

3:07

20

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

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

1:11

21

Layout Grid

. ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ сСтки, столбцы, строки ΠΈ поля.

2:00

22

Auto Layout in Figma

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

8:17

23

Vector Mode

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

0:55

24

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

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

1:19

25

. ΠŸΠ΅Ρ€ΡΠΏΠ΅ΠΊΡ‚ΠΈΠ²Π°

1:19

25

.

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

2:00

26

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

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

1:20

29

29

0003

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

2:03

28

BOOLEANS

ИспользованиС Π»ΠΎΠ³ΠΈΠΊΠΎΠ² для проСктирования Π·Π½Π°Ρ‡ΠΊΠΎΠ²

2:24

29

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

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹

1:48

30

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

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

1:50

31

Team Library

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

2:14

32

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

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

1:59

33

Looper Shape Duplication

. Ring

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

2:23

35

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

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

1:39

36

Экспорт CSS Code

Π Π°Π±ΠΎΡ‚Π° с CSS -ΠΊΠΎΠ΄ΠΎΠΌ Π½Π° рис.

1:04

37

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

ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ с Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ

1:57

38

.

Быстро создайтС вСсь ΠΏΠΎΡ‚ΠΎΠΊ для Π΄ΠΈΠ·Π°ΠΉΠ½Π° вашСго прилоТСния Π² Figma

2:25

39

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

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

1:25

40

03

Π£Π·Π½Π°ΠΉΡ‚Π΅ ΠΎ сотрудничСствС ΠΈ ΠΎΠ±ΠΌΠ΅Π½Π΅ с Ρ„ΠΈΠ³.

1:36

41

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

Π‘ΠΎΡ‡Π΅Ρ‚Π°Π½ΠΈΠ΅ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π² Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹

5:39

42

Interactive Components

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

.

UIKits

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

4:47

44

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

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

5:47

45

Π€ΠΎΠ½ ΠΊΠ°ΠΏΠ»ΠΈ

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ простой Ρ„ΠΎΠ½ ΠΊΠ°ΠΏΠ»ΠΈ Π² Figma

4:45

46

Π€ΠΎΠ½ Π²ΠΎΠ»Π½Ρ‹

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ Π²ΠΎΠ»Π½Ρ‹

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ Π²ΠΎΠ»Π½Ρ‹

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ Π²ΠΎΠ»Π½Ρ‹

6:46

47

3D-Ρ„ΠΎΡ€ΠΌΡ‹

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ 3D-ΠΏΠΎΡ…ΠΎΠΆΠΈΡ… Ρ„ΠΈΠ³ΡƒΡ€ с использованиСм Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… инструмСнтов Π½Π° рис.

12:27

48

Parallax Prototyping Π½Π° Figma

Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π½ΠΈΠΉ слои двиТутся с Ρ€Π°Π·Π½ΠΎΠΉ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ

7:52

49

3D UI Perspective Design

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

7:16

50

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

Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ Ρ„ΠΎΠ½Π°

9:16

51

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

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

12:54

52

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΈ анимация с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±ΡƒΠΊΠ²0003

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

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

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

3:16

55

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

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

4:07

56

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

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

3:27

58

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

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

4:49

59

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

3

3:11

60

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

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ Π½Π° вашСм Ρ„ΠΈΠ³ΠΌΠ° -ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ΅

3:42

61

. ΠΎΠ±ΡŠΠ΅ΠΌΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, фиксированная ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈΠ»ΠΈ высота, ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ заполнСния ΠΈ усСчСниС тСкста

62

Advanced Auto Layout

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

4:13

63

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

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ΠΊΡ€ΡƒΠ³ΠΎΠ²ΠΎΠΉ тСкст Π½Π° ΠΏΡƒΡ‚ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Π° ARC Π² Figma МобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Figma

2:39

65

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

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

4:37

66

900 Π’ΠΈΠ΄Π΅ΠΎ Figma0003

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π² качСствС Π·Π°Π»ΠΈΠ²ΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ любой Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ сСти ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡƒ Π Π°Π·Π΄Π΅Π»Ρ‹

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

69

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

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

2:07

70

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

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

5:11

72

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

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

73

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

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

3:55

75

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

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

6:42

76

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

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

2:36

78

Slice Tool

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

79

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

80

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

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

81

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

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

82

. Ρ„Π°ΠΉΠ»ΠΎΠ² Π² Figma с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΠΎΠ³ΠΎ модуля Batch Rename

83

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

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

84

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

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

85

Smart Selection

Π£ΡΠ΅ΠΈΠ²Π°Ρ‚ΡŒ слои Π±ΠΎΠ»Π΅Π΅ эффСктивно с ΡƒΠΌΠ½Ρ‹ΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ

86

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

87

RedLines

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

88

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

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

89

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

РазмСститС элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Π½ΡƒΠΆΠ½ΠΎΠΌ мСстС с ΠΈΠ·ΠΌΠ΅Ρ€Π΅Π½ΠΈΠ΅ΠΌ расстояния Π² Figma

90

Variable Fonts

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

91

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

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

92

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

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

93

ИзмСнСниС слоСв

Π‘Π±Ρ€ΠΎΡΡŒΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ слоСв с использованиСм ΠΌΠ°ΡΡˆΡ‚Π°Π±Π½ΠΎΠ³ΠΎ инструмСнта

94

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ слоСв

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

95

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

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

96

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

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

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

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

99

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

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

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

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

Π‘ΡƒΡ€ΡŒΡ Ананд

Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ

3 курса β€” 8 часов

Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ для iOS

ПолноС руководство ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ для iOS 14 с Π²ΠΈΠ΄Π΅ΠΎ, ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΈ Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

2 часа

Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π”ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. БСсплатныС ΡƒΡ‡Π΅Π±Π½Ρ‹Π΅ пособия для изучСния Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

2 часа

Руководство ΠΏΠΎ Figma

ПолноС руководство ΠΏΠΎ Π»ΡƒΡ‡ΡˆΠΈΠΌ совСтам ΠΈ рСкомСндациям Π² Figma

Figma β€” это Π²Π΅Π±-инструмСнт для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UX ΠΈ UI, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π΄Π΅Π»Π°Π΅Ρ‚ ΡƒΠΏΠΎΡ€ Π½Π° ΡΠΎΠ²ΠΌΠ΅ΡΡ‚Π½ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ½ поставляСтся с Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π΅ΠΆΠΈΠΌΠ°, которая поддСрТиваСтся Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹ΠΌΠΈ прилоТСниями для ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмы Windows ΠΈ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмы Mac. Π’ основном это касаСтся ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, Π½ΠΎ Π΅Π³ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° ΠΈ Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Figma grid ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡΠΎΠΏΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ прилоТСния Grid Figma Mirror для ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ Android ΠΈ iOS. Π‘Π΅Ρ‚ΠΊΠ° Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Figma ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ эффСктивно ΡƒΠ΄ΠΎΠ±Π½Π° для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΡƒΠ·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ сСтку ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² Figma.

  • Π§Π°ΡΡ‚ΡŒ 1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ сСтка Π² Figma
  • Π§Π°ΡΡ‚ΡŒ 2: Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сСтку ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² Figma
  • Π§Π°ΡΡ‚ΡŒ 3: Π»ΡƒΡ‡ΡˆΠ°Ρ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π° Figma

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ сСтка Π² Figma

Π‘Π½Π°Ρ‡Π°Π»Π° разбСрСмся, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ адаптивная сСтка Figma. По сути, сСтки ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π² Figma ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ°. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Layout Grids Π»Π΅Π³Ρ‡Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ структуру Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Layout Grids Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π½Π° ΠΏΠΈΠΊΡΠ΅Π»ΡŒΠ½ΡƒΡŽ сСтку, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π΅ зависят ΠΎΡ‚ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈΠ»ΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊ Ρ„Ρ€Π΅ΠΉΠΌΠ°ΠΌ.

(источник изобраТСния: laptrinhX)

Layout Grid ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Figma ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя принятия Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ ΠΏΡ€ΠΈ исправлСнии ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², сокращаСт врСмя, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ для опрСдСлСния ΠΌΠ°ΠΊΠ΅Ρ‚Π° для каркасов ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Layout Grid Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π·Π½Π°Ρ‡ΠΊΠΈ, Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Ρ†Π΅Π»Ρ‹Ρ… страниц, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ…, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Android, iOS ΠΈ Ubuntu. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Layout Grid ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ Ρ„Ρ€Π΅ΠΉΠΌΡƒ, Π½ΠΎ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Ρ‚ΠΎΠΆΠ΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ„Ρ€Π΅ΠΉΠΌΠ°ΠΌΠΈ, ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Layout Grids ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈ ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°ΠΉΡ‚ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Layout Grid Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ свойств Π² Figma.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сСтку ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² Figma?

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Layout Grid, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ шаги:

  • Π‘Π½Π°Ρ‡Π°Π»Π° Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ€Π°ΠΌΠΊΡƒ Π½Π° холстС ΠΈΠ»ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ слоСв, Π³Π΄Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ создаСт ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ.
  • Π—Π°Ρ‚Π΅ΠΌ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ свойств ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚ Π·Π½Π°Ρ‡ΠΎΠΊ Β«+Β» рядом с сСткой ΠΌΠ°ΠΊΠ΅Ρ‚Π°.
  • АвтоматичСски появится равномСрная сСтка ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π° ΠΊ Ρ„Ρ€Π΅ΠΉΠΌΡƒ, это Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ Figma ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
  • Π—Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ сСтки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ любоС ΠΈΠ· свойств Π² настройках сСтки ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ сСтки ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² доступны Π² Ρ‚Ρ€Π΅Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ…: сСтка, строки ΠΈ столбцы Π² Π΅Π΄ΠΈΠ½ΠΎΠΌ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π΅. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ»ΠΈ Ρ†Π²Π΅Ρ‚ сСтки ΠΏΠΎ своСму Π²Ρ‹Π±ΠΎΡ€Ρƒ. Для строк ΠΈ столбцов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π»Π΅Π³ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ высоту ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚, ΠΈ Ρ‚ΠΎ ΠΆΠ΅ самоС ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с полями ΠΈ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠ°ΠΌΠΈ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ сСтку ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия:

  • Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ сСтки Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ свойств, Π·Π°Ρ‚Π΅ΠΌ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню сСтки Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ свойств сСтки ΠΌΠ°ΠΊΠ΅Ρ‚Π°.
  • ПослС этого ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ сСтку со столбцами, сСтку со строками ΠΈ ΠΎΠ΄Π½ΠΎΡ€ΠΎΠ΄Π½ΡƒΡŽ сСтку
  • ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сСтку ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ.

РавномСрная сСтка ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ любого Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΏΠΎΠ·ΠΆΠ΅ ΠΎΠ½ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚, сколько пиксСлСй Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΎΠ². Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Ρ‰Π΅Π»ΠΊΠ°Π΅Ρ‚ Π·Π½Π°Ρ‡ΠΎΠΊ сСтки ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ настройку сСтки ΠΌΠ°ΠΊΠ΅Ρ‚Π°, ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ, ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ просто Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ Π·Π½Π°ΠΊ Β«XΒ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ холсту Π±Π°Π½ΠΊΠΈ.

Π‘Π΅Ρ‚ΠΊΠΈ столбцов ΠΈ строк ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ вмСстС, это обСспСчиваСт Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ свойства сСтки, просто поняв, Ρ‡Ρ‚ΠΎ Β«ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎΒ» опрСдСляСт количСство строк ΠΈ столбцов Π² сСткС, Β«Π–Π΅Π»ΠΎΠ±ΠΎΠΊΒ» опрСдСляСт пространство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строкой ΠΈ столбцом, «Поля» опрСдСляСт пространство ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ. Π‘Ρ‚ΠΎΠ»Π±Π΅Ρ† ΠΈΠ»ΠΈ ряд ΠΎΡ‚ края, ΠΎΠ΄Π½Π°ΠΊΠΎ это ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ растянутым сСткам, ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, Β«Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅Β» опрСдСляСт пространство ΠΌΠ΅ΠΆΠ΄Ρƒ рядом ΠΈΠ»ΠΈ столбцом свСрху ΠΈΠ»ΠΈ слСва.

Π›ΡƒΡ‡ΡˆΠ°Ρ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π° Figma

Однако ΠΏΠΎΠΌΠΈΠΌΠΎ Figma ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ инструмСнты для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ проСктирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€ΡΡŽΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ потрСбности ΠΈ трСбования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. К Π½ΠΈΠΌ относятся Sketch, InVision, iDoc, UXpin, Wondershare Mockitt ΠΈ Ρ‚. Π΄. InVision β€” мощная Π²Π΅Π±-ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° для совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹, которая стоит всСго 25 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² Π² мСсяц. Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€ для проСктирования с высокой Π½Π°Π΄Π΅ΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ. Он поставляСтся с Ρ‚Π°ΠΊΠΈΠΌΠΈ функциями, ΠΊΠ°ΠΊ InVision + Sketch ΠΈ InVision + Adobe, ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этих Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ качСствСнныС ΠΈ эффСктивныС ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹. UXpin Π·Π° 44 Π΄ΠΎΠ»Π»Π°Ρ€Π° Π² Π³ΠΎΠ΄ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ всС для UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π° для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π»Π΅Π³ΠΊΡƒΡŽ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ Ρ„Π°ΠΉΠ»ΠΎΠ² Π² Photoshop ΠΈ Sketch.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ бСсплатно

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

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° Mockitt ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Figma:

  • НСобходимо ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, насколько это ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡƒΠ΄ΠΎΠ±Π½ΠΎ для ΠΊΠ°Ρ€ΠΌΠ°Π½Π½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ² ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Figma ΠΈΠ»ΠΈ Sketch.
  • ΠŸΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ΡΡ с ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠΉ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π΅ΠΉ, которая позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ†Π²Π΅Ρ‚ ΠΈ Ρ„ΠΎΡ€ΠΌΡƒ элСмСнтов.
  • ΠŸΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ΡΡ с панСлью ТСстов ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ², которая позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π½Π°ΡΠ»Π°ΠΆΠ΄Π°Ρ‚ΡŒΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π²ΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΈ элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π°.