figma

Figma: возмоТности ΠΈ ΠΊΠ°ΠΊ Π² Π½Π΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ

Π’ ΠΌΠΈΡ€Π΅ проСктирования интСрфСйсов сСйчас ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ нСсколько Π»Π°Π³Π΅Ρ€Π΅ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΏΠΎ инструмСнтам. Из ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ…: Figma, Sketch, Adobe XD. ΠŸΠΎΠΌΠ΅Π»ΡŒΡ‡Π΅: Axure, Framer, Invision. ПослСдняя Π³Ρ€ΡƒΠΏΠΏΠ° инструмСнтов большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для прототипирования, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ для проСктирования большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ пСрвая. Если ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Ρ‚ΠΎ я сСбя ΠΎΡ‚Π½ΠΎΡˆΡƒ ΠΊ Figma-господам ΠΈ Π΄Π°Π²Π½ΠΎ ΡƒΠΆΠ΅ Π²Ρ‹ΡˆΠ΅Π» ΠΈΠ· лагСря Sketch-ΡΡ€Π΅Π΄Π½Π΅Π²Π΅ΠΊΠΎΠ²ΡŒΡ ΠΈ Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Adobe-ΠΈΠ½Π²Π°Π»ΠΈΠ΄ΠΎΠ². ΠžΠ±Π·ΠΎΡ€ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… инструмСнтов, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ·Π΄Π½Π΅Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΡΡ…, Π° сСйчас ΠΏΡ€ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Figma.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Figma

Figma β€” это ΠΎΠ±Π»Π°Ρ‡Π½Ρ‹ΠΉ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ графичСский Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€. Π§Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚ Β«ΠΎΠ±Π»Π°Ρ‡Π½Ρ‹ΠΉΒ»: ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ Π² ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈΠ»ΠΈ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅, ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π² ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ памяти, Π° ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ΡΡ Π½Π° сСрвСрах Figma. Π’ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ врСмя ΠΌΠΎΠΆΠ½ΠΎ Π±Π΅Π· ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° ΠΈ Π΄Π°ΠΆΠ΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» сСбС Π½Π° Тёсткий диск, Π½ΠΎ это Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Ρ…ΡƒΠΆΠ΅ Π² ΠΏΠ»Π°Π½Π΅ удобства ΠΈ скорости Ρ€Π°Π±ΠΎΡ‚Ρ‹. Π’Π°ΠΊ ΠΆΠ΅ Π² Π€ΠΈΠ³ΠΌΠ΅ Π΅ΡΡ‚ΡŒ Π²Π΅Ρ€ΡΠΈΠΎΠ½Π½ΠΎΡΡ‚ΡŒ β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠΎΡ‚Π°Ρ‚ΡŒ врСмя Π½Π°Π·Π°Π΄, Ссли Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΡƒΠ΄Π°Π»ΠΈΠ», Π° ΠΎΠ½ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΡƒΠΆΠ½ΠΎ. На бСсплатной вСрсии Ρ‚ΠΎΠ»ΡŒΠΊΠΎ 30 Π΄Π½Π΅ΠΉ. МоТно Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΏΠ»Π΅Π΅Ρ€Π° ΠΈ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ курсор ΠΊΠΎΠ»Π»Π΅Π³ΠΈ, Π²Π½Π°Ρ‡Π°Π»Π΅ всСх бСсит, ΠΊΠΎΠ³Π΄Π° ΠΊΡ‚ΠΎ-Ρ‚ΠΎ смотрит, ΠΊΠ°ΠΊ Ρ‚Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΡˆΡŒ, Π° ΠΏΠΎΡ‚ΠΎΠΌ ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ°Π΅ΡˆΡŒ ΠΈ это Π΄Π°ΠΆΠ΅ Π±ΠΎΠ΄Ρ€ΠΈΡ‚. Π Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ люди Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Ρƒ особо Π½Π΅ ΠΌΠ΅ΡˆΠ°ΡŽΡ‚, ΠΊΠ°ΠΊ ΠΈ Π² Π³ΡƒΠ³Π» Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ….

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Figma

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

Figma: возмоТности ΠΈ ΠΊΠ°ΠΊ Π² Π½Π΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π’ ΠΌΠΈΡ€Π΅ проСктирования интСрфСйсов сСйчас ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ нСсколько Π»Π°Π³Π΅Ρ€Π΅ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΏΠΎ инструмСнтам. Из ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ…: Figma, Sketch, Adobe XD. ΠŸΠΎΠΌΠ΅Π»ΡŒΡ‡Π΅: Axure, Framer, Invision. ПослСдняя Π³Ρ€ΡƒΠΏΠΏΠ° инструмСнтов большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для прототипирования, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ для проСктирования большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ пСрвая. Если ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Ρ‚ΠΎ я сСбя ΠΎΡ‚Π½ΠΎΡˆΡƒ ΠΊ Figma-господам ΠΈ Π΄Π°Π²Π½ΠΎ ΡƒΠΆΠ΅ Π²Ρ‹ΡˆΠ΅Π» ΠΈΠ· лагСря Sketch-ΡΡ€Π΅Π΄Π½Π΅Π²Π΅ΠΊΠΎΠ²ΡŒΡ ΠΈ Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Adobe-ΠΈΠ½Π²Π°Π»ΠΈΠ΄ΠΎΠ². ΠžΠ±Π·ΠΎΡ€ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… инструмСнтов, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ·Π΄Π½Π΅Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΡΡ…, Π° сСйчас ΠΏΡ€ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Figma. Ρ„ΠΈΠ³ΠΌΠ° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°
Π‘Π»Π΅Π²Π° Π½Π°ΠΏΡ€Π°Π²ΠΎ: ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для проСктирования, ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для просмотра Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах, ассистСнт ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²

Π•Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ плюс Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π΅ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Π° Π² ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ β€” всС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΅ΡΡ‚ΡŒ Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ сразу ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ ΠΏΠΎΠΏΠ°Π»ΠΈ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π°Π΄ΠΎ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ассистСнт Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Π°. Figma ΡƒΠΌΠ΅Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ бСсплатныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ с Π³ΡƒΠ³Π» фонтс, Ссли Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΡˆΡŒ с Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с Π½ΠΈΠΌΠΈ, ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π±Π΅Π· ассистСнта.

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

Π€Π°ΠΉΠ»Ρ‹ Π² Figma

Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΎΡ‡Π΅Π½ΡŒ спСцифична, сначала Π±Ρ‹Π²Π°Π΅Ρ‚ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ. Π•ΡΡ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ (это ΠΏΠ°ΠΏΠΊΠ° с ΠΎΠ±Ρ‰ΠΈΠΌ доступом), Π² Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ (Ρ‚ΠΎΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ° с ΠΎΠ±Ρ‰ΠΈΠΌ доступом), Π²Π½ΡƒΡ‚Ρ€ΠΈ ΡƒΠΆΠ΅ сами Ρ„Π°ΠΉΠ»Ρ‹. Π’ бСсплатной вСрсии ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ стили Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, Π° Π² ΠΏΠ»Π°Ρ‚Π½ΠΎΠΉ β€” Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹. Π•ΡΡ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Ρ‚Π°Ρ€ΠΈΡ„, Π΅Π³ΠΎ Ρ†Π΅Π½Π° Π½Π° сайтС Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½Π°. Он Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя надстройку «компания», Π² ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²ΠΎΠΉΠ΄ΡƒΡ‚ всС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ ΠΈ участники, ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ созданныС со всСх элСктронных ΠΏΠΎΡ‡Ρ‚ ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΎΠΌΠ΅Π½Π°. Π’Π°ΠΊ ΠΆΠ΅ позволяСт ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΠ΅ стили ΡƒΠΆΠ΅ для всСх ΠΊΠΎΠΌΠ°Π½Π΄, Ρ‡Ρ‚ΠΎ ΡƒΠ΄ΠΎΠ±Π½ΠΎ для Π΄ΠΈΠ·Π°ΠΉΠ½-систСм, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ ΠΎΡ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠ°Π½Π΄Π°. Π’Π°ΠΊΠΆΠ΅ Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ всСгда Π΅ΡΡ‚ΡŒ Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ Β«Ρ‡Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊΠΈΒ». Π˜Ρ… Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ Π²ΠΈΠ΄ΠΈΡ‚ ΠΊΡ€ΠΎΠΌΠ΅ обладатСля ΠΈ Ρ‚Π΅Ρ…, ΠΊΠΎΠ³ΠΎ ΠΎΠ½ сам Ρ‚ΡƒΠ΄Π° пригласил. Много ΠΏΡƒΡ‚Π°Π½Π½ΠΈΡ†Ρ‹ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Β«Π½Π΅Π΄Π°Π²Π½Π΅Π΅Β», Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π² Π½Ρ‘ΠΌ свалСно всё ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠ΅ Ρ‚ΠΎΠ±ΠΎΠΉ ΠΊΠΎΠ³Π΄Π°-Ρ‚ΠΎ сразу Π² ΠΊΡƒΡ‡Ρƒ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Π½ΠΎΠ²ΠΈΠ·Π½Ρ‹. Π”Π°ΠΆΠ΅ Ρ‡ΡƒΠΆΠΎΠ΅. Когда ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ½Π΅ΡˆΡŒ, ΡƒΠ²ΠΈΠ΄ΠΈΡˆΡŒ, Ρ‡Ρ‚ΠΎ ΡƒΠ΄ΠΎΠ±Π½ΠΎ.

Как Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Figma

Π‘Π½Π°Ρ‡Π°Π»Π° придётся Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° сайтС figma.com, Π½Ρƒ ΠΈ всё β€” наТимаСшь плюсик Π² Ρ„Π°ΠΉΠ»Π°Ρ… ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΡˆΡŒ. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ горячих клавиш Ρ‚Π°ΠΊΠΈΠ΅ ΠΆΠ΅, ΠΊΠ°ΠΊ Π² ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ…, Π²Π½ΠΈΠ·Ρƒ Π΅ΡΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΎΡ‡ΠΊΠ° с Π²ΠΎΠΏΡ€ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π·Π½Π°ΠΊΠΎΠΌ, Π²Π½ΡƒΡ‚Ρ€ΠΈ β€” ΠΏΠΎΠΌΠΎΡ‰Π½ΠΈΠΊ ΠΏΠΎ хоткСям. ΠŸΠΎΠ΄ΡΠ²Π΅Ρ‡ΠΈΠ²Π°Π΅Ρ‚ Ρ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Ρ‹ ΡƒΠΆΠ΅ использовал. Π’ΠΎΡ‚ Ρ‚Π°ΠΊ.

Figma: возмоТности ΠΈ ΠΊΠ°ΠΊ Π² Π½Π΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π’ ΠΌΠΈΡ€Π΅ проСктирования интСрфСйсов сСйчас ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ нСсколько Π»Π°Π³Π΅Ρ€Π΅ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΏΠΎ инструмСнтам. Из ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ…: Figma, Sketch, Adobe XD. ΠŸΠΎΠΌΠ΅Π»ΡŒΡ‡Π΅: Axure, Framer, Invision. ПослСдняя Π³Ρ€ΡƒΠΏΠΏΠ° инструмСнтов большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для прототипирования, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ для проСктирования большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ пСрвая. Если ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Ρ‚ΠΎ я сСбя ΠΎΡ‚Π½ΠΎΡˆΡƒ ΠΊ Figma-господам ΠΈ Π΄Π°Π²Π½ΠΎ ΡƒΠΆΠ΅ Π²Ρ‹ΡˆΠ΅Π» ΠΈΠ· лагСря Sketch-ΡΡ€Π΅Π΄Π½Π΅Π²Π΅ΠΊΠΎΠ²ΡŒΡ ΠΈ Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Adobe-ΠΈΠ½Π²Π°Π»ΠΈΠ΄ΠΎΠ². ΠžΠ±Π·ΠΎΡ€ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… инструмСнтов, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ·Π΄Π½Π΅Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΡΡ…, Π° сСйчас ΠΏΡ€ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Figma. Ρ„ΠΈΠ³ΠΌΠ° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°

Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ бСссмыслСнно ΠΏΠΈΡΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ интСрфСйс Π² Ρ„ΠΈΠ³ΠΌΠ΅, Π΅ΡΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊΠΈ, Π½ΠΎ Π² Ρ†Π΅Π»ΠΎΠΌ всё ΠΎΡ‡Π΅Π½ΡŒ просто. Кнопкой «A» (Π»Π°Ρ‚ΠΈΠ½Π½ΠΈΡ†Π΅ΠΉ) Π²Ρ‹Π·Ρ‹Π²Π°Π΅ΡˆΡŒ инструмСнт Artboard. Он ΠΆΠ΅ Ρ„Ρ€Π΅ΠΉΠΌ. Π’ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΡˆΡŒ Π·Π°Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ шаблон Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана ΠΈΠ»ΠΈ Ρ‚ΡΠ½Π΅ΡˆΡŒ просто курсор, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ свой. А Π² Π½Ρ‘ΠΌ ΡƒΠΆΠ΅ сСтку ΠΈ ΠΏΠΎ Π½Π΅ΠΉ интСрфСйс. Всё, ΠΊΠ°ΠΊ Π²Π΅Π·Π΄Π΅.

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° ΠΈ возмоТности

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ прСимущСства:

  • ВсСгда Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ». Никакого final-last-final-update.psd Π² сотнС Π²Π°Ρ€ΠΈΠ°Ρ†ΠΈΠΉ, Π³Π΄Π΅ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ части интСрфСйса разбросаны Ρ€ΠΎΠ²Π½Ρ‹ΠΌ слоСм;
  • Командная Ρ€Π°Π±ΠΎΡ‚Π°. Один ΠΏΠ°ΡˆΠ΅Ρ‚ экраны, Π΄Ρ€ΡƒΠ³ΠΎΠΉ причёсываСт ΠΈΠΊΠΎΠ½ΠΊΠΈ, Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ вписываСт тСксты ΠΈ подвёрстываСт;
  • ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π’ΠΎΡ‚ прямо Π½Π° Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ смутило ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚;
  • Π’Π΅Ρ€ΡΠΈΠΎΠ½Π½ΠΎΡΡ‚ΡŒ. «Ой, я ΡƒΠΆΠ΅ ΡƒΠ΄Π°Π»ΠΈΠ» этот Ρ„Π°ΠΉΠ»Β» большС Π½Π΅ ΠΏΡ€ΠΎΠΊΠ°Ρ‚ΠΈΡ‚. ΠŸΡ€ΠΎΡ‰Π°ΠΉ Abstract (ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ сСрвис для вСрсионирования Sketch);
  • Π£Π½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. По ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ Π΅ΡΡ‚ΡŒ ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ ΠΈ Ρ€Π°Π·Π΄Π°Ρ‡Π° Ρ„Π°ΠΉΠ»Π° Π½Π° просмотр ΠΏΠΎ ссылкС ΠΈ экспорт ΠΊΠΎΠ΄Π° ΠΈ Π²ΠΎΡ‚ Π²ΠΎΠΎΠ±Ρ‰Π΅ это всё; ΠŸΡ€ΠΎΡ‰Π°ΠΉ Avocode, Zeplin, Sympli (ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ сСрвисы для ΠΎΡ‚Π³Ρ€ΡƒΠ·ΠΊΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ);
  • Π Π°Π±ΠΎΡ‚Π° с Π²Π΅ΠΊΡ‚ΠΎΡ€ΠΎΠΌ. Π’Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ сСтки β€” прсто ΠΈΠ·ΠΎΠ±Ρ€Π΅Ρ‚Π΅Π½ΠΈΠ΅ Π±ΠΎΠ³ΠΎΠ². Если Π²ΠΎ всСх ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°Ρ… Π²Π΅ΠΊΡ‚ΠΎΡ€ Π»ΠΈΠ½Π΅Π΅Π½ ΠΈ Π²ΠΎΡ‚ Π²Π·ΡΡ‚ΡŒ ΠΎΠ΄Π½Ρƒ линию ΠΏΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ ΠΊ сСрСдинС Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π½Π΅Ρ‚ возмоТности, Ρ‚ΠΎ Ρ‚ΡƒΡ‚ ΠΌΠΎΠΆΠ½ΠΎ. Для рисования ΠΈΠΊΠΎΠ½ΠΎΠΊ β€” бСсцСнно;
  • Π‘Π΅ΡΠΏΠ»Π°Ρ‚Π½ΠΎΡΡ‚ΡŒ. ΠŸΠΎΠ»Π½Ρ‹ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» с нСбольшими ограничСниями доступСн всСм ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ;
  • ΠœΡƒΠ»ΡŒΡ‚ΠΈΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½ΠΎΡΡ‚ΡŒ. Π”Π°, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π½Π° линуксС ΠΈ Π΄Π°ΠΆΠ΅ Π½Π° Π²ΠΈΠ½Π΄Π΅;
  • ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹. МоТно Π²ΠΎΠΎΠ±Ρ‰Π΅ всё. Π’ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Π΄Π²Π° ΠΊΠ»ΠΈΠΊΠ°, Ρ‚Ρ€Π΅ΠΉΡΠΈΡ‚ΡŒ изобраТСния, Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΈ Π²Ρ‹Π΄Π΅Π»ΡΡ‚ΡŒ ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ слоёв ΠΏΠΎ ΠΎΠ±Ρ‰ΠΈΠΌ свойствам (Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡ‚ΠΎΠΌ ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΠ°Ρ‚ΡŒ Π² Π½ΠΈΡ… Ρ€Π°Π·ΠΎΠΌ тСкст, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€);

На этом прСимущСства Π½Π΅ Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ. ΠœΠΈΠ½ΡƒΡΡ‹ Ρ‚ΠΎΠΆΠ΅ Π΅ΡΡ‚ΡŒ, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅.

ΠŸΡ€ΠΎΡΡ‚ΠΎΡ‚Π° освоСния

Figma, Sketch ΠΈ Adobe XD β€” ΠΏΠΎΡ‡Ρ‚ΠΈ Π±Π»ΠΈΠ·Π½Π΅Ρ†Ρ‹ Π² ΠΏΠ»Π°Π½Π΅ интСрфСйса, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½Ρ‹ΠΉ ΠΈ простой. По Ρ„Π°ΠΊΡ‚Ρƒ, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠΌ ΠΈ тСкстом ΠΈΠ· ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов, А Ρ‚Π°ΠΊΠΆΠ΅ свойствами ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΠΈΠ· ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ сайдбара β€” Π²ΠΎΡ‚ ΠΎΠ½ΠΈ ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹. ПанСль слоёв ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ самыС большиС ΠΌΠΎΠ»ΠΎΠ΄Ρ†Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ сразу Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ ΠΈΠΌΠ΅Π½ΡƒΡŽΡ‚ слови ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈ ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΠ²Π°ΡŽΡ‚ ΠΈΡ… для Π»ΡŽΠ±ΠΈΠΌΡ‹Ρ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². ΠšΡ‚ΠΎ Ρ‚Π°ΠΊ Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ‚ β€” Π½Π΅ ΠΌΠΎΠ»ΠΎΠ΄Π΅Ρ†. Π’ΠΎΡ‚ ΠΈ вСсь интСрфСйс, ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ Π½Π° Π±Π°Π·ΠΎΠ²ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ Π΅Π³ΠΎ ΠΎΡ‡Π΅Π½ΡŒ просто. Π”Π°Π»ΡŒΡˆΠ΅ ΠΈΠ΄Ρ‚ΠΈ Π² освоСнии слоТнСС, ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π² ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ… Π½Π΅Ρ‚ β€” привязки ΠΊ краям, стили, сСтки, Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΡ‹ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅, Π½ΠΎ всё Ρ€Π°Π²Π½ΠΎ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»Π΅Π³Ρ‡Π΅ всСм даётся, Ρ‡Π΅ΠΌ Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ½ΠΎΠ΅ Π»ΠΎΠΌΠ°Π½ΠΈΠ΅ Ρ€ΡƒΠΊ. Π•ΡΡ‚ΡŒ Π΅Ρ‰Ρ‘ ΡˆΡƒΡ‚ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠΎΡ€Π΅Π», Π½ΠΎ Ρ‚ΡƒΡ‚ я ΡƒΠ·Π½Π°Π», Ρ‡Ρ‚ΠΎ это Π½Π΅ ΡˆΡƒΡ‚ΠΊΠ°, ΠΈ ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎ Π² Π½Ρ‘ΠΌ Π΅Ρ‰Ρ‘ Π΄Π΅Π»Π°Π΅Ρ‚ интСрфСйсы.

Figma: возмоТности ΠΈ ΠΊΠ°ΠΊ Π² Π½Π΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π’ ΠΌΠΈΡ€Π΅ проСктирования интСрфСйсов сСйчас ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ нСсколько Π»Π°Π³Π΅Ρ€Π΅ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΏΠΎ инструмСнтам. Из ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ…: Figma, Sketch, Adobe XD. ΠŸΠΎΠΌΠ΅Π»ΡŒΡ‡Π΅: Axure, Framer, Invision. ПослСдняя Π³Ρ€ΡƒΠΏΠΏΠ° инструмСнтов большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для прототипирования, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ для проСктирования большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ пСрвая. Если ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Ρ‚ΠΎ я сСбя ΠΎΡ‚Π½ΠΎΡˆΡƒ ΠΊ Figma-господам ΠΈ Π΄Π°Π²Π½ΠΎ ΡƒΠΆΠ΅ Π²Ρ‹ΡˆΠ΅Π» ΠΈΠ· лагСря Sketch-ΡΡ€Π΅Π΄Π½Π΅Π²Π΅ΠΊΠΎΠ²ΡŒΡ ΠΈ Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Adobe-ΠΈΠ½Π²Π°Π»ΠΈΠ΄ΠΎΠ². ΠžΠ±Π·ΠΎΡ€ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… инструмСнтов, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ·Π΄Π½Π΅Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΡΡ…, Π° сСйчас ΠΏΡ€ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Figma. Ρ„ΠΈΠ³ΠΌΠ° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°
Π—Π΅Π»Ρ‘Π½Ρ‹ΠΉ β€” Ρ‚Π°Π±Ρ‹ для ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ², красный β€” панСль инструмСнтов Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, синий β€” слои, ΠΆΡ‘Π»Ρ‚Ρ‹ΠΉ β€” свойства ΠΈ стили

ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ

Π‘Ρ€Π΅Π΄ΠΈ ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚ΠΎΠ² Figma Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ…Π²Π°ΡΡ‚Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ. Бамая большая Π΅Ρ‘ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° β€” браузСрная основа. Π”Π°ΠΆΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ‚Ρ‹ ΡΠΊΠ°Ρ‡Π°Π΅ΡˆΡŒ, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° ядрС Chromium. А Ссли Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‚ΠΎ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Ρ…ΡƒΠΆΠ΅, ΠΈ часто ΠΏΠΎ ошибкС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ массу ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚ΠΎΠΆΠ΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ ΠΏΠ°ΠΌΡΡ‚ΡŒ.

Figma: возмоТности ΠΈ ΠΊΠ°ΠΊ Π² Π½Π΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π’ ΠΌΠΈΡ€Π΅ проСктирования интСрфСйсов сСйчас ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ нСсколько Π»Π°Π³Π΅Ρ€Π΅ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΏΠΎ инструмСнтам. Из ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ…: Figma, Sketch, Adobe XD. ΠŸΠΎΠΌΠ΅Π»ΡŒΡ‡Π΅: Axure, Framer, Invision. ПослСдняя Π³Ρ€ΡƒΠΏΠΏΠ° инструмСнтов большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для прототипирования, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ для проСктирования большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ пСрвая. Если ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Ρ‚ΠΎ я сСбя ΠΎΡ‚Π½ΠΎΡˆΡƒ ΠΊ Figma-господам ΠΈ Π΄Π°Π²Π½ΠΎ ΡƒΠΆΠ΅ Π²Ρ‹ΡˆΠ΅Π» ΠΈΠ· лагСря Sketch-ΡΡ€Π΅Π΄Π½Π΅Π²Π΅ΠΊΠΎΠ²ΡŒΡ ΠΈ Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Adobe-ΠΈΠ½Π²Π°Π»ΠΈΠ΄ΠΎΠ². ΠžΠ±Π·ΠΎΡ€ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… инструмСнтов, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ·Π΄Π½Π΅Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΡΡ…, Π° сСйчас ΠΏΡ€ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Figma. Ρ„ΠΈΠ³ΠΌΠ° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°

Π’Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ сСтки

ΠžΡ‡Π΅Π½ΡŒ прогрСссивный инструмСнт для рисования ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ ΠΏΡ€ΠΎΡ‡Π΅ΠΉ простой Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ. МоТно ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ ΠΊΡ€ΠΈΠ²ΡƒΡŽ с самой собой Π² любом мСстС. А Ссли ΠΏΠΎΡ‚ΡΠ½ΡƒΡ‚ΡŒ ΡƒΠ·Π΅Π» сочлСнСния, Ρ‚ΠΎ всС присоСдинённыС ΠΊ Π½Π΅ΠΌΡƒ ΠΊΡ€ΠΈΠ²Ρ‹Π΅ потянутся вмСстС с Π½ΠΈΠΌ.

Figma: возмоТности ΠΈ ΠΊΠ°ΠΊ Π² Π½Π΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π’ ΠΌΠΈΡ€Π΅ проСктирования интСрфСйсов сСйчас ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ нСсколько Π»Π°Π³Π΅Ρ€Π΅ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΏΠΎ инструмСнтам. Из ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ…: Figma, Sketch, Adobe XD. ΠŸΠΎΠΌΠ΅Π»ΡŒΡ‡Π΅: Axure, Framer, Invision. ПослСдняя Π³Ρ€ΡƒΠΏΠΏΠ° инструмСнтов большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для прототипирования, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ для проСктирования большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ пСрвая. Если ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Ρ‚ΠΎ я сСбя ΠΎΡ‚Π½ΠΎΡˆΡƒ ΠΊ Figma-господам ΠΈ Π΄Π°Π²Π½ΠΎ ΡƒΠΆΠ΅ Π²Ρ‹ΡˆΠ΅Π» ΠΈΠ· лагСря Sketch-ΡΡ€Π΅Π΄Π½Π΅Π²Π΅ΠΊΠΎΠ²ΡŒΡ ΠΈ Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Adobe-ΠΈΠ½Π²Π°Π»ΠΈΠ΄ΠΎΠ². ΠžΠ±Π·ΠΎΡ€ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… инструмСнтов, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ·Π΄Π½Π΅Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΡΡ…, Π° сСйчас ΠΏΡ€ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Figma. Ρ„ΠΈΠ³ΠΌΠ° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°

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

Аналог символов Π² Sketch, ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ свойством ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅, Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½ΠΈΡ… ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ сСтки (ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ привязаны ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΈ малСнькиС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹) ΠΈ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΠΌΠΈ для всСх ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹. МоТно ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ Ρ„Π°ΠΉΠ»Ρƒ нСсколько Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚. НапримСр Π³Π»Π°Π²Π½ΡƒΡŽ ΠΈ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ‡Π½ΡƒΡŽ для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Figma: возмоТности ΠΈ ΠΊΠ°ΠΊ Π² Π½Π΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π’ ΠΌΠΈΡ€Π΅ проСктирования интСрфСйсов сСйчас ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ нСсколько Π»Π°Π³Π΅Ρ€Π΅ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΏΠΎ инструмСнтам. Из ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ…: Figma, Sketch, Adobe XD. ΠŸΠΎΠΌΠ΅Π»ΡŒΡ‡Π΅: Axure, Framer, Invision. ПослСдняя Π³Ρ€ΡƒΠΏΠΏΠ° инструмСнтов большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для прототипирования, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ для проСктирования большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ пСрвая. Если ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Ρ‚ΠΎ я сСбя ΠΎΡ‚Π½ΠΎΡˆΡƒ ΠΊ Figma-господам ΠΈ Π΄Π°Π²Π½ΠΎ ΡƒΠΆΠ΅ Π²Ρ‹ΡˆΠ΅Π» ΠΈΠ· лагСря Sketch-ΡΡ€Π΅Π΄Π½Π΅Π²Π΅ΠΊΠΎΠ²ΡŒΡ ΠΈ Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Adobe-ΠΈΠ½Π²Π°Π»ΠΈΠ΄ΠΎΠ². ΠžΠ±Π·ΠΎΡ€ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… инструмСнтов, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ·Π΄Π½Π΅Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΡΡ…, Π° сСйчас ΠΏΡ€ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Figma. Ρ„ΠΈΠ³ΠΌΠ° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°

Π‘Ρ‚ΠΈΠ»ΠΈ

Помимо ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈ стили. Π­Ρ‚ΠΎ Π·Π°Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½Ρ‹Π΅ состояния ΠΈ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ для Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠŸΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π² порядкС, Π½Π° Ρ€Π°Π·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π±Π°Ρ€Π΄Π°ΠΊ ΠΈ Π½Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π΅Ρ‚Π°Ρ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΡƒΠΆΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π΅Ρ‚Π΅Π½ΠΎ.

Figma: возмоТности ΠΈ ΠΊΠ°ΠΊ Π² Π½Π΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π’ ΠΌΠΈΡ€Π΅ проСктирования интСрфСйсов сСйчас ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ нСсколько Π»Π°Π³Π΅Ρ€Π΅ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΏΠΎ инструмСнтам. Из ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ…: Figma, Sketch, Adobe XD. ΠŸΠΎΠΌΠ΅Π»ΡŒΡ‡Π΅: Axure, Framer, Invision. ПослСдняя Π³Ρ€ΡƒΠΏΠΏΠ° инструмСнтов большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для прототипирования, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ для проСктирования большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ пСрвая. Если ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Ρ‚ΠΎ я сСбя ΠΎΡ‚Π½ΠΎΡˆΡƒ ΠΊ Figma-господам ΠΈ Π΄Π°Π²Π½ΠΎ ΡƒΠΆΠ΅ Π²Ρ‹ΡˆΠ΅Π» ΠΈΠ· лагСря Sketch-ΡΡ€Π΅Π΄Π½Π΅Π²Π΅ΠΊΠΎΠ²ΡŒΡ ΠΈ Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Adobe-ΠΈΠ½Π²Π°Π»ΠΈΠ΄ΠΎΠ². ΠžΠ±Π·ΠΎΡ€ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… инструмСнтов, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ·Π΄Π½Π΅Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΡΡ…, Π° сСйчас ΠΏΡ€ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Figma. Ρ„ΠΈΠ³ΠΌΠ° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°

Π‘Ρ‚ΠΈΠ»ΠΈ Π±Ρ‹Π²Π°ΡŽΡ‚ Ρ‚Π°ΠΊΠΈΠ΅:

  • Π‘Ρ‚ΠΈΠ»ΠΈ тСкста β€” Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ссылки, простой тСкст ΠΈ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ для ΠΊΠ½ΠΎΠΏΠΎΠΊ, сносок ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Π¦Π²Π΅Ρ‚ Π² шаблонС тСкста Π½Π΅ сохраняСтся;
  • Π¦Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ стили β€” ΠΏΠΎΠ΄ Ρ†Π²Π΅Ρ‚ΠΎΠΌ подразумСваСтся Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ°, ΠΎΠ½ΠΎ Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ многослойным, Ρ†Π΅Π»ΡŒΠ½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ, с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ ΠΏΠΎΠ²Π΅Ρ€Ρ… ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ Π²Π½ΠΈΠ·Ρƒ, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ слой с Ρ€Π΅ΠΆΠΈΠΌΠ°ΠΌΠΈ налоТСния ΠΈ нСзависимой ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ;
  • Π¨Π°Π±Π»ΠΎΠ½Ρ‹ сСток – Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ шаблонС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ сразу нСсколько сСток, Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Ρ… ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ;
  • Π¨Π°Π±Π»ΠΎΠ½Ρ‹ эффСктов β€” Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‚Π΅Π½Π΅ΠΉ;

Autolayout

ΠŸΡ€ΠΎΡΡ‚ΠΎ спасСниС. Π”Π΅Π»Π°Π΅ΡˆΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅, Π² Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅ΠΉ ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΡ‹Π²Π°Π΅ΡˆΡŒ тСкст, ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΊΠΈ мСняСтся ΠΏΠΎΠ΄ Π½Π΅Π³ΠΎ. Π‘ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ β€” Бписок ΠΈΠ· Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π°Π²Ρ‚ΠΎΠ»Π΅ΠΉΠ°ΡƒΡ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сам пСрСвёрстываСтся ΠΏΡ€ΠΈ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈΠ· Π½Π΅Π³ΠΎ, Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ списка β€” Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Π°Π²Ρ‚ΠΎΠ»Π΅ΠΉΠ°ΡƒΡ‚, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Ссли, скаТСм, ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π²Π½Π°Ρ‡Π°Π»Π΅, всё сдвинСтся Π²Π»Π΅Π²ΠΎ, ΠΊΠ°ΠΊ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ интСрфСйсС. НСмного ΠΏΠΎΠ½ΠΈΠΆΠ°Π΅Ρ‚ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ, Π½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΏΡ€ΠΈ создании Π΄ΠΈΠ·Π°ΠΉΠ½Π° интСрфСйса. Π°Π²Ρ‚ΠΎΠ»Π΅ΠΉΠ°ΡƒΡ‚ β€” это Ρ‚ΠΎΠΆΠ΅ Ρ„Ρ€Π΅ΠΉΠΌ, ΠΈ ΠΎΠ½ Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΉ, Π½ΠΎ привязка ΠΊ краям внСшнСго Ρ„Ρ€Π΅ΠΉΠΌΠ° ΡƒΠΆΠ΅ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. ΠŸΠΎΠ΄ΠΊΠΎΡΡ‚Ρ‹Π»ΠΈΠ²Π°Π΅Ρ‚ΡΡ ΠΏΡ€ΠΎΠ±Π΅Π»Π°ΠΌΠΈ ΠΈΠ»ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ 0%.

ΠœΠ½ΠΎΠ³ΠΎΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Ρ€Π΅ΠΆΠΈΠΌ рСдактирования

Π’ ΠΊΡ€ΡƒΠΏΠ½ΠΎΠΌ ΠΏΡ€ΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΠΈ Π² Ρ„ΠΈΠ³ΠΌΠ΅ Π΅ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π²Π° Π²ΠΈΠ΄Π° ΠΏΡ€Π°Π²: ΠΏΡ€Π°Π²Π° Π½Π° Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΡ€Π°Π²Π° Π½Π° просмотр. Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π°ΠΌΠΈ Ρ„Π°ΠΉΠ»Π°, администраторами ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹, Π½ΠΎ это частности. ВсС Ρ€Π°Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄, Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²Π° ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ВсС, ΠΊΡ‚ΠΎ смотрит, Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²Π° Π½Π° Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.

Figma: возмоТности ΠΈ ΠΊΠ°ΠΊ Π² Π½Π΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π’ ΠΌΠΈΡ€Π΅ проСктирования интСрфСйсов сСйчас ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ нСсколько Π»Π°Π³Π΅Ρ€Π΅ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΏΠΎ инструмСнтам. Из ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ…: Figma, Sketch, Adobe XD. ΠŸΠΎΠΌΠ΅Π»ΡŒΡ‡Π΅: Axure, Framer, Invision. ПослСдняя Π³Ρ€ΡƒΠΏΠΏΠ° инструмСнтов большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для прототипирования, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ для проСктирования большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ пСрвая. Если ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Ρ‚ΠΎ я сСбя ΠΎΡ‚Π½ΠΎΡˆΡƒ ΠΊ Figma-господам ΠΈ Π΄Π°Π²Π½ΠΎ ΡƒΠΆΠ΅ Π²Ρ‹ΡˆΠ΅Π» ΠΈΠ· лагСря Sketch-ΡΡ€Π΅Π΄Π½Π΅Π²Π΅ΠΊΠΎΠ²ΡŒΡ ΠΈ Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Adobe-ΠΈΠ½Π²Π°Π»ΠΈΠ΄ΠΎΠ². ΠžΠ±Π·ΠΎΡ€ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… инструмСнтов, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ·Π΄Π½Π΅Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΡΡ…, Π° сСйчас ΠΏΡ€ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Figma. Ρ„ΠΈΠ³ΠΌΠ° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°
ΠœΠ½ΠΎΠ³ΠΎΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Ρ€Π΅ΠΆΠΈΠΌ Π² Figma. Π¦Π΅Π½ΠΈΡ‚Π΅Π»ΠΈ ΠΏΠΎΠΉΠΌΡƒΡ‚

Π Π°Π±ΠΎΡ‚Π° с Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ

ВсС ΠΎΠ±Π»ΠΎΠΆΠΊΠΈ ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ для этого Π±Π»ΠΎΠ³Π° я дСлаю Π² Ρ„ΠΈΠ³ΠΌΠ΅. Помимо интСрфСйсов, ΠΎΠ½Π° позволяСт Π½Π° Π±Π°Π·ΠΎΠ²ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ, Π½ΠΎ инструмСнтов ΠΌΠ°Π»ΠΎΠ²Π°Ρ‚ΠΎ, это Π½Π΅ Adobe Illustrator. Π§Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ: Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€ΠΈΠ²Ρ‹Π΅ бСзьС, Ρ„ΠΈΠ³ΡƒΡ€Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ маски, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅ΠΆΠΈΠΌΡ‹ налоТСния, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ свойства растровых ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠΊΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠŸΠ”Π€. Π§Ρ‚ΠΎ нСльзя: всё ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅. НапримСр, Π½Π΅Ρ‚ CMYK ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΎΡ„ΠΈΠ»Π΅ΠΉ, Π½Π΅ получится ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ вёрстку ΠΊΠ½ΠΈΠ³ΠΈ, ΠΈΠ»ΠΈ ΠΏΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ 3D ΠΎΠ±ΡŒΠ΅ΠΊΡ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ. Для простых ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… сСйчас ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΈ Π½Π°Π΄ΠΎ, Ρ„ΠΈΠ³ΠΌΠ° ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ.

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ вСрсий

Π’ ΠΏΠ»Π°Ρ‚Π½ΠΎΠΉ вСрсии хранится Π²ΠΎΠΎΠ±Ρ‰Π΅ всё, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π°-Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ сдСлано с ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ ΠΈ это супСрспасало мСня ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ Ρ€Π°Π·. Иногда Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π½Π΅ особо Π΄Π°Π»ΡŒΠ½ΠΎΠ²ΠΈΠ΄Π½Ρ‹. особСнно ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Ссли послС обновлСния Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ всё ΠΏΠΎΠ»Π΅Ρ‚Π΅Π»ΠΎ ΠΈ Π½Π°Π΄ΠΎ срочно ΠΎΡ‚ΠΌΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π·Π°Π΄.

Π€Ρ€Π΅ΠΉΠΌΡ‹

Аналог экранов, Π½ΠΎ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ. Π’ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠΌΠ΅Ρ‰Ρ‘Π½ Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ Ρ„Ρ€Π΅ΠΉΠΌ. Π­Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠΎΠ³Π΄Π° ΠΎΠ΄ΠΈΠ½ Ρ„Ρ€Π΅ΠΉΠΌ скроллится, Π΄Ρ€ΡƒΠ³ΠΎΠΉ оставался Π½Π° мСстС, ΠΈΠ»ΠΈ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ растягивании ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π½Π° Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ побольшС Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Ρ‚ΡΠ½ΡƒΠ»ΠΈΡΡŒ, Π° Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π±Ρ‹Π»ΠΈ зафиксированы. Если ΠΏΡ€ΠΈΠ½ΠΎΡ€ΠΎΠ²ΠΈΡ‚ΡŒΡΡ β€” ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ. ΠŸΡ€ΠΈ экспортС Π² ΠŸΠ”Π€ Ρ„Ρ€Π΅ΠΉΠΌΡ‹ прСвратятся Π² слайды.

ВСрсия: платная ΠΈΠ»ΠΈ Π½Π΅Ρ‚

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

Π˜Ρ‚ΠΎΠ³

Π₯ΠΎΡ‚Π΅Π» Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠ», Ссли Π²Ρ‹ крупная компания с большим количСством Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² β€” ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ Π½Π° Figma ΠΈ Π½Π΅ Π΄ΡƒΠΌΠ°ΠΉΡ‚Π΅, Π½ΠΎ понял, Ρ‡Ρ‚ΠΎ Π³Π»ΡƒΠΏΠΎΡΡ‚ΡŒ. Π”Π°ΠΆΠ΅ Ссли нСбольшая компания ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Ссли Ρ‚Ρ‹ Π²ΠΎΠΎΠ±Ρ‰Π΅ фрилансСр β€” всё Ρ€Π°Π²Π½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚Π΅. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ я описал лишь ΠΊΡ€ΠΎΡˆΠ΅Ρ‡Π½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ этого прСкрасного инструмСнта. ΠžΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ ΠΈΡΠΊΠ°Ρ‚ΡŒ Π² ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ Π±Π»ΠΎΠ³Π΅, Π² Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊΠ°Ρ… ΠΈ просто Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ
Π’Π΅Π»Π΅Π³Ρ€Π°Ρ„ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ°...

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