ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°

Ѐункция экспорта Π² Figma

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ вопросы:

Как Π΄Π΅Π»Π°Ρ‚ΡŒ Π² Figma экспорт элСмСнтов ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏ? КакиС Π²ΠΈΠ΄Ρ‹ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² figma ΠΈ ΠΊΠ°ΠΊ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π² Ρ„ΠΈΠ³ΠΌΠ΅ Ρ€Π°Π±ΠΎΡ‚Ρƒ?

Ѐункция экспорта Π² Figma позволяСт Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² Π΅Π΄ΠΈΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π½Π°Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ для Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΉ вСрстки интСрфСйса. Данная функция находится Π²Π½ΠΈΠ·Ρƒ Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹.

Экспорт Π² JPG

Экспорт ΠΌΠ°ΠΊΠ΅Ρ‚ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ изобраТСния JPG являСтся самым популярным. Π’ настройках экспорт Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΎΠΌ экспорта, Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ суффиксы ΠΊ ΠΈΠΌΠ΅Π½ΠΈ, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ вписан послС ΠΈΠΌΠ΅Π½ΠΈ Ρ„Π°ΠΉΠ»Π°, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ нСсколько вСрсий ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² (вСрсия для ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, для ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, для behance), Ρ‚ΠΎ просто Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° Π·Π½Π°ΠΊ плюса ΠΈ настройтС Π½ΡƒΠΆΠ½Ρ‹Π΅ ΠΎΠΏΡ†ΠΈΠΈ.

ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°

Экспорт Π² PDF

По ΠΌΠΎΠ΅ΠΌΡƒ мнСнию Π΄Π°Π½Π½Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ Π½ΡƒΠΆΠ΅Π½, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π½Π° Π²Ρ‹Ρ…ΠΎΠ΄Π΅ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π² нСсколько Ρ€Π°Π· большС вСсит, Ρ‡Π΅ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°. И Ссли Ρƒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° Π½Π΅Ρ‚ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ для чтСния Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° – ΠΎΠ½ просто Π½Π΅ смоТСт ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΅Π³ΠΎ.

Но Ρƒ этого Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° Π΅ΡΡ‚ΡŒ особСнности экспорта:

Казалось Π±Ρ‹ прСимущСства ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹, Π½ΠΎ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅, Π»ΠΈΡ‡Π½ΠΎ я Π΅Ρ‰Π΅ Π½ΠΈ Ρ€Π°Π·Ρƒ Π½Π΅ сталкивался с ΠΏΡ€ΠΎΡΡŒΠ±ΠΎΠΉ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PDF.

Экспорт Π² PSD

ΠžΡ‡Π΅Π½ΡŒ частый вопрос: ΠΊΠ°ΠΊ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ psd Π² Figma, ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ psd Π² Figma? К соТалСнию, Π² Figma Π½Π΅ прСдусмотрСн экспорт Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Adobe Photoshop. Π’Π°ΠΊ ΠΊΠ°ΠΊ Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏ Π±ΠΎΠ»Π΅Π΅ слоТная ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°, Ρ‚ΠΎ ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚Π°Ρ‚ΠΎΡ€ для Π½Π΅Π³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ слоТно Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, ΠΏΠΎ ΠΌΠΎΠ΅ΠΌΡƒ мнСнию, просто Π½Π΅ хотят Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ. Π”Π° ΠΎΠ½ΠΎ ΠΈ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ особо, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ всС большС людСй ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ Π½Π° спСциализированный для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° софт.

Экспорт Π² SVG

Экспорт Π² HTML

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ экспорта Π² html Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ Figma Π½Π΅Ρ‚. Но Π΅ΡΡ‚ΡŒ подсказки для Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ° Π² Π²ΠΈΠ΄Π΅ свойств ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°. Они находятся Π² Π»Π΅Π²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«CodeΒ». Π—Π΄Π΅ΡΡŒ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΏΠΎΠ»Π½Ρ‹ΠΉ список CSS свойств для вСрстки сайта, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π½Π° iOS ΠΈ Android.

ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°

Один ΠΈΠ· вопросов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΎΠ»Π½ΡƒΠ΅Ρ‚ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ: ΠΊΠ°ΠΊ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π² Ρ„ΠΈΠ³ΠΌΠ°?

Π‘ΠΎΡ…Ρ€Π°Π½Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π² Figma происходит с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ экспорта Ρ„Π°ΠΉΠ»Π° с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ «.fig». Для этого Π½ΡƒΠΆΠ½ΠΎ Π² Π³Π»Π°Π²Π½ΠΎΠΌ мСню Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ «Save as».

Π­Ρ‚ΠΎΠΌΡƒ вопросу я посвятил Π²ΠΈΠ΄Π΅ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½ΠΈΠΆΠ΅.

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

Figma β€” простоС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°, слоТноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°

ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°

Если Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π² области web-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, Ρ‚ΠΎ Ρ€Π°Π½ΠΎ ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π΄Π½ΠΎ, Π²Π°ΠΌ суТдСно Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с Figma. Π‘ΠΌΠΈΡ€ΠΈΡ‚Π΅ΡΡŒ с этим Ρ„Π°ΠΊΡ‚ΠΎΠΌ ΠΈ Π½Π°Ρ‡ΠΈΠ½Π°ΠΉΡ‚Π΅ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ. Π― ΠΆΠ΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΡŽ ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния повсСднСвного ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Для Π½Π°Ρ‡Π°Π»Π° стоит ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚ΡŒ ΠΎ ΠΏΠ°Ρ€ΠΎΡ‡ΠΊΠ΅ приятных ΠΌΠΎΠΌΠ΅Π½Ρ‚ΠΎΠ², Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π»ΡŽΠ±ΡΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Figma. Π§Ρ‚ΠΎ ΠΆ приступим:

ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°

Π‘Π°ΠΌΡ‹ΠΉ нСоспоримый плюс – халява

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ повсСднСвных ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π±ΡƒΠ΄ΡŒ Ρ‚ΠΎ Adobe ΠΏΠ°ΠΊΠ΅Ρ‚ (Photoshop, Illustrator, Adobe XD … ), ΠΈΠ»ΠΈ Bohemian Coding (Sketch) эта ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° условно бСсплатная для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. РазумССтся Π·Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ финансовыС вливания Π’Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ плюшки, Π½ΠΎ ΠΈ Π±Π΅Π· ΠΎΠ½Ρ‹Ρ…, ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ выглядит Π²ΠΏΠΎΠ»Π½Π΅ достойно. Π‘ΡƒΠ΄Π΅ΠΌ Π½Π°Π΄Π΅ΡΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ данная ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠ° Π½Π΅ помСняСтся, ΠΈ ΠΏΡ€Π°Π²ΠΎΠΎΠ±Π»Π°Π΄Π°Ρ‚Π΅Π»ΠΈ Π½Π΅ Π½Π°Ρ‡Π½ΡƒΡ‚ Π·Π°ΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ Π³Π°ΠΉΠΊΠΈ. Аминь.

Для Ρ‚Π΅Ρ… ΠΊΡ‚ΠΎ Π½Π΅ Π² Ρ‚Π΅ΠΌΠ΅ – это ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ ΠΎΠ΄Π½ΠΈΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ нСскольким людям. И ΠΊΠΎΠ³Π΄Π° я написал ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ, Ρ‚ΠΎ это Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚Π°ΠΊ, я ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ, Π²ΠΈΠΆΡƒ, ΠΊΠ°ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€(ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹) правят ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ realtime прям Π½Π° своСм ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π΅. Выглядит этот эффСкт ΠΊΠ°ΠΊ teamViewer. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ большС Π½Π΅ Ρ…Ρ€Π°Π½ΠΈΡ‚ свои ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ локально, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ это всё ΠΆΠΈΠ²Π΅Ρ‚ Π² ΠΎΠ±Π»Π°ΠΊΠ°Ρ…. НС Π½ΡƒΠΆΠ½ΠΎ большС ΠΎΠ±ΠΌΠ΅Π½ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π°ΠΌΠΈ с ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ΠΎΠΌ, процСсс создания ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° стал ΠΏΡƒΠ±Π»ΠΈΡ‡Π½Ρ‹ΠΌ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ с Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΉ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°.

ЗадСйствован ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ кроссплатформСнности

Π‘Ρ‚Π°Π»Π° Π½Π΅ Π²Π°ΠΆΠ½Π° опСрационная систСма (Windows, MacOS, Linux) Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ° ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°. Они смогут Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ ΠΎΠ΄Π½ΠΈΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ нСсовмСстимости ОБ.

Π£Π΄ΠΎΠ±Π½Ρ‹Π΅ быстрыС клавиши

Если Π²Ρ‹ ΡƒΠΆΠ΅ ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ»ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с графичСскими Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌΠΈ посрСдством hot key для вас Π½Π΅ составит Ρ‚Ρ€ΡƒΠ΄Π° быстро ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒΡΡ с Π½ΠΎΠ²Ρ‹ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ.

ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΈΠΌΠ΅Π΅Ρ‚ довольно Ρ‚ΠΎΠ»ΠΊΠΎΠ²ΠΎΠ΅ описаниС клавиш быстрого Π²Ρ‹Π·ΠΎΠ²Π°, ΠΈ ΠΊ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ ΠΎΠ½ΠΈ сильно ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» клавиш Photoshop ΠΈΠ»ΠΈ Sketch, Π·Π° Ρ‡Ρ‚ΠΎ Π°Π²Ρ‚ΠΎΡ€Π°ΠΌ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ спасибо. ВсС вСдь Π»Π΅Π½ΠΈΠ²Ρ‹Π΅ ΠΈ Π½Π΅ хотят ΠΎΠΏΡΡ‚ΡŒ ΠΎΠ±ΡƒΡ‡Π°Ρ‚ΡŒΡΡ, ΠΊΠ°ΠΊ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ элСмСнт Pen.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ

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

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ создания ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

Π”Π°, для Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ² поясню, Ρ‡Ρ‚ΠΎ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Ρ‚ΠΎΠΆΠ΅ Π΅ΡΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. И ΠΈΠΌ Ρ‚ΠΎΠΆΠ΅ Π΄Π°Ρ€ΠΎΠ²Π°Π½ΠΎ свойство НаслСдования (ΠΏΡ€ΠΈΠ²Π΅Ρ‚ ООП). К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚ΠΈΠΏΠΎΠ²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Π° ΠΏΠΎΡ‚ΠΎΠΌ β€œΠΏΡ€ΠΎΠ΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ” Π΅Ρ‘ ΠΏΠΎ всСм Π°Ρ€Ρ‚Π±ΠΎΡ€Π΄Π°ΠΌ. И ΠΏΠΎΡ‚ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΎΡ‚ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠ° ΠΏΡ€ΠΈΠ΄Ρ‘Ρ‚ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Π°ΡΠΈΡ‚ΡŒ всС ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Ρ€ΠΎΠ·ΠΎΠ²Ρ‹ΠΉ Π³ΠΎΡ€ΠΎΡˆΠ΅ΠΊ, это всё Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ Π·Π° ΠΏΠ°Ρ€Ρƒ ΠΊΠ»ΠΈΠΊΠΎΠ² (разумССтся, Ссли Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΡƒΠΌΠ΅Π΅Ρ‚ Π΄Π°Π½Π½Ρ‹ΠΌ свойством ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ)

Π’ Π€ΠΈΠ³ΠΌΠ΅ Π΅ΡΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» настраиваСмых ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΠΈ ΠΈΡ… Ρ‚Π°ΠΌ довольно ΠΌΠ½ΠΎΠ³ΠΎ.

ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½Ρ‹ ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹ частных ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ, Ρ‚Π°ΠΊ ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ open source сообщСства. Пока Ρ‡Ρ‚ΠΎ, ΠΈΠ·-Π·Π° частых ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ софта ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π·Π°Π±Π°Π³ΠΎΠ²Π°Π½ΠΎΡΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π°, Π½ΠΎ я ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ это поправят.

ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°

А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎ Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°Ρ…, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Figma Π² процСссС Ρ€Π°Π±ΠΎΡ‚Ρ‹, Π½Ρƒ ΠΈΠ»ΠΈ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Π΅Π³ΠΎ Ρ‚Π°ΠΊ Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚, Π° ΠΎΡ‡Π΅Π½ΡŒ Π½Π°Π΄ΠΎ.

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ фактичСских Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² элСмСнтов ΠΈ расстояния ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ

К соТалСнию, Π² процСссС вСрстки постоянно ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡΡŒ с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΡŽ ΡƒΠ·Π½Π°Ρ‚ΡŒ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ΅ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами. ОсобСнно ΠΏΠ»ΠΎΡ…ΠΎ обстоят Π΄Π΅Π»Π°, Ссли Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Π·Π°Π±Ρ‹Π» ΠΎΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΎΡ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π° (transparent background) ΠΈΠ»ΠΈ Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ прописал мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» для тСкста.

ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°

Иногда эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, Π²Ρ‹Π±Ρ€Π°Π² элСмСнт отсчСта, Π° Π·Π°Ρ‚Π΅ΠΌ с Π·Π°ΠΆΠ°Ρ‚ΠΎΠΉ клавишСй Alt Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° элСмСнт, расстояниС Π΄ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠ·Π½Π°Ρ‚ΡŒ, Π½ΠΎ это Π½Π΅ всСгда Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

ΠŸΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ ΠΈ Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ слои

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

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с тСкстом

Π° Ссли ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹ΠΉ шаблон ΡƒΠΆΠ΅ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°, Ρ‚ΠΎ ΡƒΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ Roboto Bold задСйствовано.

ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°

БСмСйство ΡˆΡ€ΠΈΡ„Ρ‚Π° Π²Ρ€ΠΎΠ΄Π΅ ΠΆ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ, Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² процСссС вСрстки Π΅Π³ΠΎ всё Ρ€Π°Π²Π½ΠΎ Ρ‡Π΅Ρ€Π΅Π· свойство @font-face ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π½Π°Π΄ΠΎ, ΠΈΠ½Π°Ρ‡Π΅ эффСкта ΠΊΠ°ΠΊ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ. И ΠΏΠΎΠΊΠ° Π½Π΅ затянитС Π½Π° свой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Π²Ρ‹ этого Π½Π΅ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ (ΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ»Π³ΠΎ ΠΈΠ³Ρ€Π°Ρ‚ΡŒΡΡ со свойством font-width).

Если ΠΆΠ΅ Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌΠΈ Google ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌΠΈ, Π½ΠΎ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ Π½Π°Π±ΠΎΡ€, Π° ΠΎΠ½ Π΅Ρ‰Ρ‘ ΠΈ ΠΊΠΈΡ€ΠΈΠ»Π»ΠΈΡ‡Π½Ρ‹ΠΉ, Ρ‚ΠΎ Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ ΠΊ ΠΏΡ€ΠΈΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡΠΌ.

ΠžΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Π°Π½Ρ†Ρ‹ с Π±ΡƒΠ±Π½ΠΎΠΌ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ΡΡ, Ссли ваш Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΎΡ‡Π΅Π½ΡŒ Π»ΡŽΠ±ΠΈΡ‚ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ с тСнями ΠΈ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ°ΠΌΠΈ.

ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°

Π’ΡƒΡ‚ Π² ΠΊΠΎΠ΄, прСдоставляСмый Π€ΠΈΠ³ΠΌΠΎΠΉ, ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ. Как Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹ΠΉ тСкст Π² SVG (ΠΈΠ½ΠΎΠ³Π΄Π° это дСшСвлС Ρ‡Π΅ΠΌ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊ страницС Π½ΠΎΠ²Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚), Π½Ρƒ Π° Ссли всё-Ρ‚Π°ΠΊΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π°Π½Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Π½Π° ΡΠ΅Ρ€ΡŒΠ΅Π·Π½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅, Ρ‚ΠΎ ΠΎΠΏΡΡ‚ΡŒ Π·Π°Π±ΠΈΡ€Π°ΠΉΡ‚Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π° свой Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.

ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°

Π’ΡƒΡ‚ ΠΏΡ€Π°Π²Π΄Π° Ρƒ мСня Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ вопросы, ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π²ΠΎΠ·Π»Π΅ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠ² смСны значСния Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ полСнились вывСсти хотя Π±Ρ‹ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ значСния, Π½Π΅ говоря ΡƒΠΆΠ΅ ΠΏΡ€ΠΎ ΡƒΠ³ΠΎΠ» направлСния Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°, ΠΈ ΠΌΠ½Π΅ ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΡƒ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ самому ΡƒΠ³Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π°Π΄ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² background: linear-gradient, Π° ΠΏΠΎΡ‚ΠΎΠΌ ΠΏΠΎΡ‡ΠΈΠ½ΠΈΡ‚ΡŒ это Ρ‡Π΅Ρ€Π΅Π· background-clip: text; БобствСнно свойство text-stroke Π² ΠΊΠΎΠ΄Π΅ Ρ„ΠΈΠ³ΠΌΡ‹ я ΠΏΠΎΠΊΠ° Ρ‚ΠΎΠΆΠ΅ Π½Π΅ встрСчал, хотя Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ это связано Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ Π΅Ρ‰Ρ‘ Π½Π΅ Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Π·Π΅Π»Π΅Π½ΠΎΠ΅.

*Π”Π΅Π»ΠΈΡ‚Π΅ΡΡŒ своими мнСниями Π² коммСнтариях, ΠΏΠΎΡ‡Π΅ΠΌΡƒ это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚Π°ΠΊ слоТно Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

Figma являСтся ΠΎΠ±Π»Π°Ρ‡Π½Ρ‹ΠΌ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ

Π˜Π½Π°Ρ‡Π΅ говоря, Ссли Ρƒ Вас Π½Π΅Ρ‚Ρƒ связи с глобальной ΠΏΠ°ΡƒΡ‚ΠΈΠ½ΠΎΠΉ Π½Π° Ρ…ΠΎΡ€ΠΎΡˆΠΈΡ… скоростях, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΠΉΡ‚Π΅ΡΡŒ Π² свою ΠΏΠ΅Ρ‰Π΅Ρ€Ρƒ ΠΊ настСнной Тивописи, ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ Π½Π° ΠΎΡ„Ρ„Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹. Π’ΡƒΡ‚ Π€ΠΈΠ³ΠΌΠ° ΡƒΠ²Ρ‹ бСссильна ΠΈ Π’Π°ΡˆΠ΅ творчСство Ρ‚Π°ΠΊ ΠΈ останСтся нСдоступно для общСствСнности, ΠΈ Π½Π΅ Π²Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎ сроки горят, ΠΈ Π·Π°Π²Ρ‚Ρ€Π° ΡΠ΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.

Π Π°Π±ΠΎΡ‚Π° Π² Ρ„ΠΈΠ³ΠΌΠ΅ расхолаТиваСт Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, это Π»ΠΈΡ‡Π½ΠΎ ΠΌΠΎΡ‘ ΡΡƒΠ±ΡŠΠ΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ½Π΅Π½ΠΈΠ΅, Π½ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ‚Π΄Π°ΡŽΡ‚ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ ΠΏΠΎΠ΄ вСрстку сайтов, Π½ΠΈΠΆΠ΅ качСством ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΌΠΈ Π² Photoshop ΠΈΠ»ΠΈ Sketch. (* я прям Ρ‡ΡƒΠ²ΡΡ‚Π²ΡƒΡŽ, Ρ‡Ρ‚ΠΎ сСйчас Ρƒ ΠΊΠΎΠ³ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠ΄Π³ΠΎΡ€Π΅Π»ΠΎ)

ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°

И Π»Π°Π΄Π½ΠΎ, Ссли с тСкстом это Π΅Ρ‰Ρ‘ ΠΌΠΎΠΆΠ΅Ρ‚ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠΊΠ°Ρ‚ΠΈΡ‚ΡŒ, Π»Π΅Π½ΠΈΠ²Ρ‹ΠΉ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ с ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½ΠΎΠ³ΠΎ прСдставлСния Ρ†Π²Π΅Ρ‚Π°

скорСС всСго ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅Ρ‚ ΠΊ rgba ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΡŽ

А Π²ΠΎΡ‚ Ссли Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Ρ€Π΅ΡˆΠΈΡ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ ΡˆΡ‚ΡƒΠΊΡƒ ΠΊ Π±Π»ΠΎΠΊΡƒ элСмСнтов (Ρ‚Π°ΠΌ Π³Π΄Π΅ ΠΏΡ€ΠΎ background-color, color, background: linear-gradient ….), ΠΏΡ€ΠΈ этом, ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° элСмСнтов Π±ΡƒΠ΄Π΅Ρ‚ с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ, Π° вторая, Π½Π΅Ρ‚, Ρ‚ΠΎ Ρ‚ΡƒΡ‚ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Code ΠΈ Π½Π΅ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ.

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ, Π€ΠΈΠ³ΠΌΡƒ нСльзя Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт для ΠΌΠΎΠ»ΠΎΠ΄ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°. ΠŸΠΎΡ€ΠΎΠ³ Π²Ρ…ΠΎΠ΄Π°, Ρ‚ΡƒΡ‚ ΠΏΠΎΠ½ΠΈΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚, Π½ΠΎ ΠΈ Π½Π΅Ρ€Π²Ρ‹ Π²Ρ‹ своими ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌ испортитС.

ΠžΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΠΈΠ΅ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΉ Π’Π΅ΠΌΠ½ΠΎΠΉ Ρ‚Π΅ΠΌΡ‹

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

Π›ΡƒΡ‡ΡˆΠ΅ Π± ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Ρ‡Ρ‚ΠΎΠ± Π·Π° Π΄Π°Π½Π½Ρ‹ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» ΠΎΡ‚Π²Π΅Ρ‡Π°Π»ΠΈ Ρ‚Π΅, ΠΊΡ‚ΠΎ ΠΏΠΈΡˆΠ΅Ρ‚ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚

Π›ΠΈΡ‡Π½Ρ‹Π΅ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠΈ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π’Π΅ΠΌΠ½ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ. (Windows 10, Chrome 76) Π±Ρ‹Π»ΠΈ ΠΏΠ΅Ρ‡Π°Π»ΡŒΠ½Ρ‹.

ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ Ρ„ΠΈΠ³ΠΌΠ°

*Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρƒ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² Mac-ΠΎΠ² Π΄Π΅Π»Π° обстоят Π»ΡƒΡ‡ΡˆΠ΅. Π”Π΅Π»ΠΈΡ‚Π΅ΡΡŒ Π² коммСнтариях…

О Ρ‚ΠΎΠΌ ΠΏΠΎΡ‡Π΅ΠΌΡƒ это Π²Π°ΠΆΠ½ΠΎ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π² ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Вёмная сторона Π²Π΅Π±Π°, Никиты Π”ΡƒΠ±ΠΊΠΎ НадСюсь Ρ‡Ρ‚ΠΎ поправят. Всё-Ρ‚Π°ΠΊΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ β€” Ρ‚ΠΎΠΆΠ΅ люди, ΠΈ ΠΈΠΌ Ρ‚ΠΎΠΆΠ΅ Π½Π°Π΄ΠΎ Π΄Π°Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ 8 часов Π² сутки 5 Π΄Π½Π΅ΠΉ Π² нСдСлю.

Π’ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠΉ Π²ΠΎΡ‚ ΠΊΡ€Π°Ρ‚Π΅Π½ΡŒΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ€Ρ‡ΠΈΠΊ Figma Ρƒ мСня Π²Ρ‹ΡˆΠ΅Π» с поТСланиями ΠΈ Π²ΠΎΡ€Ρ‡Π°Π½ΠΈΠ΅ΠΌ.

НадСюсь, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΉ пост ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚ ΠΊΡ‚ΠΎ-Ρ‚ΠΎ ΠΈΠ· Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° ΠΈ смоТСт Π΅Π³ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ. Π’ любом случаС Π·Π° Π΄Π°Π½Π½Ρ‹ΠΌ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ я Π²ΠΈΠΆΡƒ Π±ΡƒΠ΄ΡƒΡ‰Π΅Π΅, ΠΈ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ± ΠΎΠ½ развивался Π² ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ.

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

Figma: всё, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ

Π­Ρ‚ΠΎ руководство ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΎ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Figma.

Π’ послСдниС Π³ΠΎΠ΄Ρ‹ ΠΌΡ‹ ΠΌΠ½ΠΎΠ³ΠΎ пользовались Sketch ΠΈ Π΄ΠΎ сих ΠΏΠΎΡ€ остаСмся Π΅Π³ΠΎ большим ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊΠΎΠΌ. Однако ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹, появлялись ΠΌΡƒΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ трудности ΠΈ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ ΠΈΡΠΊΠ°Ρ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹. Π§Ρ‚ΠΎ Π±Ρ‹ ΠΌΡ‹ Π½ΠΈ использовали, ΠΎΠ½ΠΈ казалась Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌΠΈ ΠΈ Π²Ρ‹Π·Π²Π°Π»ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ трудности, с ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π΄Π΅Π»Π° обстояли Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ. Figma ΠΏΠΎΠΎΠ±Π΅Ρ‰Π°Π»Π° ΠΎΠ±Π»Π΅Π³Ρ‡ΠΈΡ‚ΡŒ Π½Π°ΠΌ Тизнь ΠΈ сдСрТала своС ΠΎΠ±Π΅Ρ‰Π°Π½ΠΈΠ΅.

Π—Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° figma.com, Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ ΠΈ слСдуйтС инструкциям. Π§Π΅Ρ€Π΅Π· ΠΏΠ°Ρ€Ρƒ ΠΌΠΈΠ½ΡƒΡ‚ всС Π±ΡƒΠ΄Π΅Ρ‚ Π³ΠΎΡ‚ΠΎΠ²ΠΎ!

Π’Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Figma позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… я расскаТу ΠΏΠΎΠ·ΠΆΠ΅, Π° ΠΏΠΎΠΊΠ° просто создайтС Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» (ΠΈΠ· мСню ΠΈΠ»ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ cmd + N).

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Sketch, Ρ„Π°ΠΉΠ»Ρ‹ Figma хранятся Π½Π΅ Π½Π° Π’Π°ΡˆΠ΅ΠΌ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅, Π° Π² ΠΎΠ±Π»Π°ΠΊΠ΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊΠΎ всСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌ Ρ‡Π΅Ρ€Π΅Π· Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π² любоС врСмя ΠΈ Π² любом мСстС. БущСствуСт ΠΈ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для Mac ΠΈ PC. Π― Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΈΡ…, Π½ΠΎ это вовсС Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ.

НСдостатки: Π²Π°ΠΌ всС Ρ‚Π°ΠΊ ΠΆΠ΅ Π½ΡƒΠΆΠ΅Π½ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚. Однако Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Ρ€Π°Π½Π΅Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅.

Figma позволяСт быстро ΠΈ Ρ‚ΠΎΡ‡Π½ΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ Sketch. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» Sketch Π½Π° холст Figma!

Π’Π°ΠΊΠΆΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ элСмСнты ΠΈΠ· Sketch, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² ΠΏΠΎ Π½ΠΈΠΌ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΈ скопировав ΠΈΡ… ΠΊΠ°ΠΊ SVG!

☝Π‘ΠΎΠ²Π΅Ρ‚: я Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΈΠ³ΠΌΡ‹ ΠΏΡ€ΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π΅ ΠΈΠ· Sketch, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½Ρ‹ ΠΈ это испортит ваш Ρ„Π°ΠΉΠ».

Если Ρ€Π°Π½ΡŒΡˆΠ΅ Π²Ρ‹ использовали Sketch, Π²Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π»Π΅Π³Ρ‡Π΅ ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒΡΡ. НаТмитС A ΠΈΠ»ΠΈ F, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ всС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ„Ρ€Π΅ΠΉΠΌΠ° Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ свойств справа ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ»ΠΈ ΠΆΠ΅ просто нарисуйтС свой собствСнный Ρ„Ρ€Π΅ΠΉΠΌ. Как ΠΈ Π² Sketch, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с 1x (Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ фактичСский Ρ€Π°Π·ΠΌΠ΅Ρ€ пиксСля, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π½Π΅Ρ‚ ΠΏΠΎΡ‚Π΅Ρ€ΠΈ качСства). Π’Ρ‹ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ассСты любого Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ.

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Π°Ρ€Ρ‚Π±ΠΎΡ€Π΄ΠΎΠ², ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ Ρ„Ρ€Π΅ΠΉΠΌΡ‹ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ Π² Π΄Ρ€ΡƒΠ³Π°. Π­Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ слоТныС конструкции.

Для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΡ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½ΡƒΡŽ сСтку ΠΈΠ· 8 ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ². Для Π²Π΅Π±Π° это Π½Π΅ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Ρ‹, сколько сСтки ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ с популярной 12-ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠΉ сСтки, Ρ‚Π°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π»Π΅Π³Ρ‡Π΅. Π•ΡΡ‚ΡŒ ΠΈ Π±ΠΎΠ»Π΅Π΅ слоТный ΠΈ соврСмСнный Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ β€” настраиваСмая CSS сСтка. Π›ΡƒΡ‡ΡˆΠ΅ всСго Π·Π°Ρ€Π°Π½Π΅Π΅ ΠΎΠ±Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ всС со своим Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ ΠΈ Π΄ΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒΡΡ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊΡƒΡŽ ΠΈΠ· сСток Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

ΠžΡ‚Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΠΉΡ‚Π΅ сСтку Π² мСню свойств справа. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΎΡ‚ сСтки ΠΊ столбцам ΠΈΠ»ΠΈ строкам, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ фиксированным ΠΈΠ»ΠΈ ΠΆΠΈΠ΄ΠΊΠΈΠΌ.

Π‘Π°ΠΌΠΎΠ΅ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π² сСтках ΠΈ столбцах Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сразу нСсколько сСток ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈΡ…. Π­Ρ‚ΠΎ удобная функция, которая ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π² Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΏΠΎΠ΄ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ устройства, ΠΎΠ±ΠΌΠ΅Π½Π° ΠΈΠΌΠΈ с Ρ‡Π»Π΅Π½Π°ΠΌΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΈΠ»ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ использования Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ….

☝Π‘ΠΎΠ²Π΅Ρ‚: Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ ctrl + G.

Как ΠΈ Π² Sketch, Π² Π»Π΅Π²ΠΎΠΉ части экрана Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ панСль слоСв.

Figma ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ сСти, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ слоТныС Ρ„ΠΎΡ€ΠΌΡ‹!

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ…ΠΎΡ‚ΠΊΠ΅Π΅Π² R (ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ), L (линия) ΠΈΠ»ΠΈ O (эллипс). Π£Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ shift, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ. КаТдая такая Ρ„ΠΈΠ³ΡƒΡ€Π° автоматичСски создаёт свой собствСнный слой.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ P ΠΈΠ»ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€ΠΎ Π² мСнюшкС свСрху. По Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ просто Π½Π°ΠΆΠΌΠΈΡ‚Π΅ enter. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ свойства ΠΈ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΌΠΈ Ρ„ΠΈΠ³ΡƒΡ€Π°ΠΌΠΈ Π² любой ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π² процСссС проСктирования Ρ‡Π΅Ρ€Π΅Π· мСню свойств с ΠΏΡ€Π°Π²ΠΎΠΉ стороны.

☝ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π²Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² любом Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅. Они идСально подходят для создания простых Ρ„ΠΎΡ€ΠΌ, ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π·Π½Π°Ρ‡ΠΊΠΎΠ², Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ всСвозмоТных простых ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ.

ΠŸΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ€Π°Π±ΠΎΡ‡ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ. Π’ Figma изобраТСния всСгда ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ (сродни, маски). Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ свойства изобраТСния, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° β€œFill” Π² ΠΎΠΊΠ½Π΅ свойств справа ΠΈ мСняйтС ΠΈΡ… Π½Π° своС усмотрСниС.

Π’ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ спискС Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ:

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Figma позволяСт Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ свойства ΠΊΠ°ΠΊ Ρ†Π²Π΅Ρ‚ ΠΈ Π½Π°ΡΡ‹Ρ‰Π΅Π½Π½ΠΎΡΡ‚ΡŒ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ потСряСтС исходныС свойства изобраТСния, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π½Π΅ стоит Π²ΠΎΠ»Π½ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ.

☝ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΡƒΠΆΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. НаТмитС Π½Π° Ρ„ΠΈΠ³ΡƒΡ€Ρƒ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Β«FillΒ» ΠΈ Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ спискС Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β«imageΒ».

☝ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Ссли Π²Ρ‹ Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ, ΠΈΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Π»Π°Π΄Π΅Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΏΠΎΠΊΡƒΠΏΠ°Ρ‚ΡŒ ΠΏΡ€Π°Π²Π° Π½Π° изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅. Π’Π°ΠΊΠΆΠ΅ Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡΡƒΠΆΠ΄Π°Ρ‚ΡŒ использованиС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π±Π΅Π· Π»ΠΈΡ†Π΅Π½Π·ΠΈΠΈ, ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π² Unsplash.

Π’ Π€ΠΈΠ³ΠΌΠ΅ ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ прСдустановлСнныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΎΡ‚ Google! Но Ссли Π²Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Font Helper ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для Π€ΠΈΠ³ΠΌΡ‹. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Ρƒ всСх, ΠΊΡ‚ΠΎ взаимодСйствуСт с Ρ„Π°ΠΉΠ»ΠΎΠΌ, Π΅ΡΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹.

НаТмитС T для создания тСкстового ΠΎΠΊΠ½Π°. Как ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ всС свойства для тСкста Π² мСню свойств справа.

☝Π‘ΠΎΠ²Π΅Ρ‚: Ссли Π²Ρ‹ новСнький Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ вашСго тСкста Π½Π΅ мСньшС 16 пиксСлСй, ΡΡ‚Ρ€Π΅ΠΌΠΈΡ‚Π΅ΡΡŒ ΠΊ 18 пиксСлям. Π’ зависимости ΠΎΡ‚ вашСго ΡˆΡ€ΠΈΡ„Ρ‚Π° я Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ высоту строки для Π»ΡƒΡ‡ΡˆΠ΅ΠΉ читаСмости.

Π‘Ρ‚ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ свойства. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹. МоТно ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ стили для Ρ†Π²Π΅Ρ‚Π°, тСкста, сСток ΠΈ Ρ‚Π°ΠΊΠΈΡ… эффСктов ΠΊΠ°ΠΊ Ρ‚Π΅Π½ΠΈ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ всС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ стили, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ сСрому Ρ„ΠΎΠ½Ρƒ рядом с Ρ€Π°ΠΌΠΊΠΎΠΉ ΠΈ ΠΎΠ½ΠΈ отобразятся Π² мСню свойств справа.

Π‘Ρ‚ΠΈΠ»ΠΈ Ρ†Π²Π΅Ρ‚Π° ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° Π² Figma просто Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½Ρ‹. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΡΡ‚ΠΈΠ»ΡŒ ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для тСкста, Π·Π°Π»ΠΈΠ²ΠΎΠΊ ΠΈ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ²! Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ ΠΈΡ… Π² любоС врСмя, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² ΠΏΠΎ ΡΡ‚ΠΈΠ»ΡŽ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ.

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свой Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΡΡ‚ΠΈΠ»ΡŒ:

2. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π·Π°Π»ΠΈΠ²ΠΊΡƒ Π½Π° ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π°

3. НаТмитС Π½Π° ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹ΠΉ символ, содСрТащий Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ стили

4. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Β«+Β», для добавлСния класса. Π“ΠΎΡ‚ΠΎΠ²ΠΎ!

☝Π‘ΠΎΠ²Π΅Ρ‚: ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π΄Π°Ρ‘Ρ‚Π΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΡ‚ΠΈΠ»ΡŽ, ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ Π½Π°ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ Π΅Π³ΠΎ области примСнСния, Π° Π½Π΅ просто Π²ΠΏΠΈΡˆΠΈΡ‚Π΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ самого Ρ†Π²Π΅Ρ‚Π° (Β«Ρ†Π²Π΅Ρ‚ выдСлСния», Π° Π½Π΅ Β«ΠΎΡ€Π°Π½ΠΆΠ΅Π²Ρ‹ΠΉΒ»).

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

Настройка стиля тСкста схоТа с настройкой Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… стилСй:

2. Π’ ΠΏΡ€Π°Π²ΠΎΠΌ мСню свойств Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΠΎΠΌΡƒ Π·Π½Π°Ρ‡ΠΊΡƒ стилСй.

3. НаТмитС Π½Π° Β«+Β» ΠΈ Π΄Π°ΠΉΡ‚Π΅ Π²Π°ΡˆΠ΅ΠΌΡƒ Π΅ΠΌΡƒ имя

4. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌΡƒ тСксту β€” Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ тСксту, Π° Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ Π² мСню справа.

ПослС добавлСния стиля Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π΅Π³ΠΎ свойства ΠΈΠ»ΠΈ вовсС ΡƒΠ±Ρ€Π°Ρ‚ΡŒ Π΅Π³ΠΎ Ρ‡Π΅Ρ€Π΅Π· мСню.

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

Π‘Π΅Ρ‚ΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² качСствС стилСй.

А Π΅Ρ‰Π΅ Ρ‚Π°ΠΊΠΈΠ΅ эффСкты ΠΊΠ°ΠΊ Ρ‚Π΅Π½ΡŒ, внутрСнняя Ρ‚Π΅Π½ΡŒ, Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ слоя ΠΈ Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ Ρ„ΠΎΠ½Π°:

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ элСмСнты ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΡƒΡ‚ΠΈΠ»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π΄Π΅Π»Π°ΡŽΡ‚ ваш Π΄ΠΈΠ·Π°ΠΉΠ½ (ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅) согласованным, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π»Π΅Π³ΠΊΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‡Ρ‚ΠΎ сэкономит Π²Π°ΠΌ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ!

1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ создания ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π²Π²Π΅Ρ€Ρ…Ρƒ экрана ΠΈΠ»ΠΈ cmd + alt + K.

2. На ΠΏΠ°Π½Π΅Π»ΠΈ слоёв Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ создали Π³Π»Π°Π²Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.

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

Π’Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ всС свои ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Assets рядом со слоями слСва, Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ ΠΈΡ… Π½Π° своС Ρ€Π°Π±ΠΎΡ‡Π΅Π΅ пространство.

☝Π‘ΠΎΠ²Π΅Ρ‚: Π² долгосрочной пСрспСктивС Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΡ‚Ρ€Π΅ΠΌΠΈΡ‚ΡŒΡΡ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Ρ‚ΡŒ ваши ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Figma с интСрфСйсными (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ Π² ReactJS). Π›ΡƒΡ‡ΡˆΠ΅ ΠΎΠ±ΡΡƒΠ΄ΠΈΡ‚ΡŒ это со своСй ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ программистов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΠ΅ дСйствия.

ЭкзСмпляры ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Ρ‹ Π² Π³Π»Π°Π²Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρƒ вас ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² (Ссли Π²Ρ‹ смотрСли Inception, Π²Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ я имСю Π² Π²ΠΈΠ΄Ρƒ).

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ мСстами Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ экзСмпляры, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ мСню Π·Π°ΠΌΠ΅Π½Ρ‹ экзСмпляров справа ΠΈΠ»ΠΈ просто удСрТивая cmd + alt + option ΠΈ пСрСтаскивая ΠΈΡ… ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ.

ЭкзСмпляр всСгда Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ основному ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ ΠΈ ΠΎΠ±Ρ‰Π΅ΠΌΡƒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ свойства экзСмпляра ΠΊΠ°ΠΊ Ρ†Π²Π΅Ρ‚, тСкст ΠΈ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Ρ‹.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΡ‚ΠΌΠ΅Π½Ρ‹ Π² мСню свойств, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ всС Π² исходноС состояниС. Π’Π°ΠΊΠΆΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ экзСмпляр, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² ΠΏΠΎ Π½Π΅ΠΌΡƒ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Β«/Β» для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Ρ‚ΡŒ β€œshare-icon” Π² icon/share. Π’ΠΎΠ³Π΄Π° Figma автоматичСски создаст Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΡƒΡŽ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΡŽ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ icon, которая Π²ΠΎΠΏΠ»ΠΎΡ‚ΠΈΡ‚ Π² Тизнь всС ваши ΠΌΠ΅Ρ‡Ρ‚Ρ‹ ΠΎΠ± ΠΎΠ±ΠΌΠ΅Π½Π΅ экзСмплярами ΠΈ экспортС!

ΠšΡΡ‚Π°Ρ‚ΠΈ, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ Π³Π»Π°Π²Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… страницах, ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ ΠΏΠΎ страницам.

☝Π‘ΠΎΠ²Π΅Ρ‚: Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π±Ρ‹Π»ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹, создайтС Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΡ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Β«ΠΊΠ½ΠΎΠΏΠΊΠΈΒ» ΠΈΠ»ΠΈ Β«Ρ„ΠΎΡ€ΠΌΡ‹Β». Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Ρ‚ΡƒΠ΄Π° свои Π³Π»Π°Π²Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. ВсС элСмСнты Π±ΡƒΠ΄ΡƒΡ‚ прСдставлСны Π² Π°Π»Ρ„Π°Π²ΠΈΡ‚Π½ΠΎΠΌ порядкС.

АвтоматичСская ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ динамичСскиС Ρ„Ρ€Π΅ΠΉΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°ΡŽΡ‚ΡΡ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ измСнСния содСрТимого Π² Π½ΠΈΡ…. Π­Ρ‚ΠΎ нСвСроятная функция, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½Π° ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ массу Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ всСго ΠΎΠ΄Π½ΠΈΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ ΠΌΡ‹ΡˆΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π»ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ваш Π΄ΠΈΠ·Π°ΠΉΠ½ с Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ.

Auto Layout ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ, сочСтая Π² сСбС Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ для создания ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ интСрфСйса.

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹, снова Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Shift + A, Ρ„Ρ€Π΅ΠΉΠΌ автоматичСской ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ являСтся Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠΎΠΌ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ. Π§Ρ‚ΠΎΠ±Ρ‹ тСкстовыС Ρ„Ρ€Π΅ΠΉΠΌΡ‹ Π½Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π»ΠΈΡΡŒ лишь Π² ΠΎΠ΄Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ высоту.

☝Π‘ΠΎΠ²Π΅Ρ‚: Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ мСстами Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΡ‹ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΡ… пСрСмСщая слои. Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ приятная Ρ„ΠΈΡ‡Π°.

☝ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π»ΡŽΠ±Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΡ‹ с auto-layout ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Однако overflow ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ автоматичСской ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ΅. Π­Ρ‚ΠΎ становится Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎ для прототипирования. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ Ρ…ΠΈΡ‚Ρ€ΠΎΡΡ‚ΡŒ, помСстив Ρ„Ρ€Π΅ΠΉΠΌ с auto-layout Π²Π½ΡƒΡ‚Ρ€ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ°.

Π’ Figma Π΅ΡΡ‚ΡŒ фантастичСскоС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ для вашСго Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Никакой Π΄Ρ€ΡƒΠ³ΠΎΠΉ инструмСнт Π²Π°ΠΌ Π½Π΅ понадобится.

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Ρ€Π΅ΠΉΠΌ ΠΈ Π² ΠΏΡ€Π°Π²ΠΎΠΉ части мСню свойств Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Β«PrototypeΒ», Π΄Π°Π»Π΅Π΅ ΠΏΠΎ Β«Prototype SettingsΒ» ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ устройство, ΠΏΠΎΠ΄ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ. Π”Π°Π»ΡŒΡˆΠ΅ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ воспроизвСдСния Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ваш Π΄ΠΈΠ·Π°ΠΉΠ½ Π² дСйствии. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Figma Mirror Π½Π° свой Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ для ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π° вашСм устройствС.

Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ΡΡŒ Π² мСню ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² справа. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ синюю Ρ€Π°ΠΌΠΊΡƒ с малСньким синим ΠΊΡ€ΡƒΠΆΠΊΠΎΠΌ. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ Π½Π΅ΠΌΡƒ ΠΈ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅. ΠŸΡ€ΠΈ пСрСтаскивании появляСтся стрСлочка, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠΎΠΌ.

На ΠΏΠ°Π½Π΅Π»ΠΈ свойств с ΠΏΡ€Π°Π²ΠΎΠΉ стороны Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ дСйствиС (смахиваниС, Ρ‰Π΅Π»Ρ‡ΠΎΠΊ, Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΡ‹ΡˆΠΈ ΠΈ Ρ‚.Π΄.) ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (ΡΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ, Π½Π°ΠΆΠ°Ρ‚ΡŒ, ΡΠ²Π°ΠΉΠΏΠ½ΡƒΡ‚ΡŒ ΠΈ Ρ‚.Π΄.)

Помимо Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Figma ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΎΡ‡Π΅Π½ΡŒ рСалистичноС ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² случаС пСрСполнСния.

Smart Animate ΠΈΡ‰Π΅Ρ‚ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ слои, распознаСт различия ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ ΠΈ Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΡ… ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ„Ρ€Π΅ΠΉΠΌΠ°ΠΌΠΈ. Π­Ρ‚ΠΎ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠΎΡ‰Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹. ПослС освоСния Smart Animate Π²Π°ΠΌ, скорСС всСго, Π½Π΅ ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ инструмСнты для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ².

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

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

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ, просто Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π‘reate new teamΒ» ΠΈ слСдуйтС инструкциям.

☝ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌΠΈ Π² любоС врСмя.

ΠŸΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ Π² ΠΊΠΎΠΌΠ°Π½Π΄Π΅ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ΄Π½ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ΅ мСсто, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ хранятся послСдниС обновлСния всСх ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ стилСй, ΠΈ ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΈΠΌΠ΅ΡŽΡ‚ доступ всС Ρ‡Π»Π΅Π½Ρ‹ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ Π΅Π΄ΠΈΠ½Ρ‹ΠΉ источник истины. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Figma прСкрасно справляСтся с этим ΠΈ станСт основой вашСй Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы.

☝ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: систСмы Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π°ΠΆΠ½ΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ UX / UI Π² настоящСС врСмя ΠΈ стоит ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя Π½Π° ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ с ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠ΅ΠΉ ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°ΠΌΠΈ.

ΠŸΠ»ΠΎΡ…ΠΈΠ΅ новости: Π² бСсплатной вСрсии Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ стили Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹. Для сохранСния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π²Π°ΠΌ понадобится Pro-статус.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ:

1. Π’ мСню слСва ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² Assets ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π½Π° Π·Π½Π°Ρ‡ΠΎΠΊ ΠΊΠ½ΠΈΠ³ΠΈ.

3. Π”Π°ΠΉΡ‚Π΅ вашСй ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ имя

4. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ чистый Ρ„Π°ΠΉΠ» Π² Ρ€Π°ΠΌΠΊΠ°Ρ… ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹

5. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Assets, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π½Π° Π·Π½Π°Ρ‡ΠΎΠΊ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠΉΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ ΡΠΎΠ·Π΄Π°Π½Π½ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ.

ОбновлСниС ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ:

ΠŸΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ основного ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΈΠ»ΠΈ стиля, Figma ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ Π²Π°ΠΌ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ. ПослС обновлСния, всС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ‡Π»Π΅Π½Ρ‹ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ для Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ доступны обновлСния, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈΠ»ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ всС Π·Π° Ρ€Π°Π·.

☝ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: ΠžΠ±Ρ‰ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΎΡ‡Π΅Π½ΡŒ эффСктивны ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΡ‚Π°Ρ‚ΡŒ основой вашСго процСсса проСктирования.

ΠŸΡ€ΠΈΠ³Π»Π°ΡΠΈΡ‚Π΅ людСй, Π½Π°ΠΆΠ°Π² Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡΒ» Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ мСню ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ адрСс элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ ΠΈΠ»ΠΈ ΠΆΠ΅ скопируйтС ссылку ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΡŒΡ‚Π΅ Π΅Ρ‘ вашим ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌ.

Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈ ΠΊΠΎΠΏΠΈΡ€Π°ΠΉΡ‚Π΅Ρ€Ρ‹ β†’ УстановитС EDIT MODE. Он прСдоставит ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ доступ ΠΊΠΎ всСм функциям. Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Π°Π²Π°Ρ‚Π°Ρ€Ρ‹ ΠΈ курсоры Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈ смоТСтС Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ вмСстС Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅!

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ β†’ установитС VIEW MODE. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ смоТСт Π²ΠΈΠ΄Π΅Ρ‚ΡŒ всС спСцификации (ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° CSS, iOS ΠΈ Android). Π’Π°ΠΊΠΆΠ΅ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡƒ Π² дСйствии ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ ассСты Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

☝ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Ссли Π²Ρ‹ Π΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ Ρ€Π°Π±ΠΎΡ‚ΠΎΠΉ с Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ, ΠΏΠΎΠΊΠ° всС Π΅Ρ‰Π΅ Π΄ΠΎΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Π»ΡƒΡ‡ΡˆΠ΅ всСго Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ страницу, с самой Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ вСрсиСй ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, Π΄Π°Π±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΏΡƒΡ‚Π°Π½ΠΈΡ†Ρ‹.

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

2. НаТмитС Π½Π° экспорт Π² мСню свойств справа.

3. ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π³ΠΎΡ‚ΠΎΠ²ΠΎ!

Π‘ΠΎΠ»ΡŒΡˆΠ΅ интСрСсных ΠΈ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… статСй ΠΈΡ‰ΠΈΡ‚Π΅ Π² нашСм Π±Π»ΠΎΠ³Π΅ ΠΈ Ρ‚Π΅Π»Π΅Π³Ρ€Π°ΠΌ-ΠΊΠ°Π½Π°Π»Π΅.

ПолСзная ΡΡ‚Π°Ρ‚ΡŒΡ. Бпасибо большоС!

НСплохой Π³Π°ΠΉΠ΄ ΠΏΠΎ стартС Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π² Figma. Бпасибо!

Бпасибо Π·Π° Ρ…ΠΎΡ€ΠΎΡˆΡƒΡŽ ΡΡ‚Π°Ρ‚ΡŒΡŽ.

Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ ΡΡ‚Π°Ρ‚ΡŒΡ для Π½Π°Ρ‡Π°Π»Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹, Π½Π΅Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ Ρ€Π°Π·Π²Π΅ Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² ΠΏΡ€ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ ΠΊΠΎΠΌΡŒΡŽΠ½ΠΈΡ‚ΠΈ

Бпасибо. ВсС просто, наглядно ΠΈ понятно.

ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ ΡƒΠ΄Π°Π»Π΅Π½ ΠΏΠΎ ΠΏΡ€ΠΎΡΡŒΠ±Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ

ΠŸΠΎΡ‡Π΅ΠΌΡƒ люди сидят Π½Π° скСтчС? Он ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ Ρ‡Π΅ΠΌ Ρ„ΠΈΠ³ΠΌΠ°?

Π’Ρ‹ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎΠΉ Π±ΠΎΠΉ Ρ‡Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅? )))
Π― Π½Π°Ρ‡ΠΈΠ½Π°Π» со скСтча, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎ нСобходимости ΠΈ Ρ‚Π°ΠΌ ΠΈ Ρ‚Π°ΠΌ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽ. На ΠΌΠΎΠΉ взгляд сСйчас Ρ„ΠΈΠ³ΠΌΠ° ΠΎΠ±ΠΎΠ³Π½Π°Π»Π° скСтч ΠΏΠΎ удобству ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Ρƒ ΠΈ, самоС Π³Π»Π°Π²Π½ΠΎΠ΅, развиваСтся быстрСС (хотя я ΠΎΡΡ‚Π°ΡŽΡΡŒ большС сторонником скСтча πŸ™‚ ).

Как ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ ΠΏΠΎΠ»Π½ΠΎΠΉ истории Π±ΠΎΡ€Π΄Π°, Ссли ΠΎΠΏΠ»Π°Ρ‚ΠΈΠ» ΠΏΠ»Π°Π½ professional?

Учимся Π²ΠΎΠ²Π»Π΅ΠΊΠ°Ρ‚ΡŒ Π·Ρ€ΠΈΡ‚Π΅Π»Π΅ΠΉ ΠΈ ΡΠΏΠ»Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ Ρ„Π°Π½-сообщСство Ρƒ Π»ΠΈΠ΄Π΅Ρ€ΠΎΠ² ΠΊΡ€Π°ΡƒΠ΄Ρ„Π°Π½Π΄ΠΈΠ½Π³Π°.

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

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

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