Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

Π‘Π΅Ρ‚ΠΊΠ° Π² Figma ΠΠ°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² Π€ΠΈΠ³ΠΌΠ΅

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

Π’ Π€ΠΈΠ³ΠΌΠ΅ сСтка ΡƒΠΆΠ΅ Π²ΡˆΠΈΡ‚Π° Π² систСму ΠΈ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ Π΄ΠΎΠΊΠ°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ это Π±Ρ‹Π»ΠΎ с ΠΎΠ΄Π½ΠΎΠΉ ΠΎΡ‡Π΅Π½ΡŒ извСстной ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΎΠΉ. Π’ΡƒΡ‚ всС ΠΏΠΎΠ΄ Ρ€ΡƒΠΊΠΎΠΉ. К Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ сСтка Ρƒ нас Π½Π΅ Π² Π²ΠΈΠ΄Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ слоя, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Π΅Ρ€ΡΡ‚ΡŒΡΡ, Π° сущСствуСт, ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ структура сайта.

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

Π‘Π΅Ρ‚ΠΊΠ° Π² Figma

Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ grid Figma ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Ρ„Ρ€Π΅ΠΉΠΌ. Π’Ρ‹Π±Π΅Ρ€ΠΈ Ρ„Ρ€Π΅ΠΉΠΌ ΠΈ Π²ΠΎΡ‚ Ρ‚ΡƒΡ‚ ΡƒΠ²ΠΈΠ΄ΠΈΡˆΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΈ Ρ‚ΡƒΡ‚ ΡƒΠΆΠ΅ Π² настройках ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сСтку ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎΠ΄ сСбя. Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ всС, Ρ‡Ρ‚ΠΎ ΡƒΠ³ΠΎΠ΄Π½ΠΎ, Ρ…ΠΎΡ‚ΡŒ бутсрап, Ρ…ΠΎΡ‚ΡŒ Π΅Ρ‰Π΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ. НастраиваСтся всС Π³ΠΈΠ±ΠΊΠΎ ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятно.

КликаСшь + ΠΈ видишь настройки. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ создаСтся ΠΈΠΌΠ΅Π½Π½ΠΎ сСточка с шагом Π² 10 пиксСлСй. К слову ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Π»ΡŽΠ±Ρ‹Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π² Π€ΠΈΠ³ΠΌΠ°, Ссли Ρ‚Ρ‹ ΠΈΡ… Π±ΡƒΠ΄Π΅ΡˆΡŒ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒ стрСлочками, Π΄Π²ΠΈΠ³Π°ΡŽΡ‚ΡΡ Π½Π° 1 пиксСль, Π° Ссли Π±ΡƒΠ΄Π΅ΡˆΡŒ Π·Π°ΠΆΠΈΠΌΠ°Ρ‚ΡŒ ΠΏΡ€ΠΈ этом Shift Ρ‚ΠΎ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π½Π° 10 пиксСлСй. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ, Ссли помСняСшь Ρ‚ΡƒΡ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π° ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ( Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»ΡŽΠ±ΡΡ‚ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ 8 ΠΈ Π² этом Π΅ΡΡ‚ΡŒ Ρ€Π°Π·ΡƒΠΌΠ½ΠΎΠ΅ Π·Π΅Ρ€Π½ΠΎ) Ρ‚ΠΎ придСтся ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈ настройки пСрСмСщСния ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° с ΡˆΠΈΡ„Ρ‚ΠΎΠΌ Π½Π° 8. ДСлаСтся это Π²ΠΎΡ‚ Ρ‚ΡƒΡ‚ Π² мСню

Как Ρ‚Ρ‹ понимаСшь, Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ шаг сСтки ΠΈ Nudge Amount, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π»ΠΎ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΈ ΠΎΠ½ΠΈ всСгда Π±Ρ‹Π»ΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹, ΠΊΠ°ΠΊ Π½ΡƒΠΆΠ½ΠΎ, Π½Ρƒ Π° Ссли Ρ‚Ρ‹ любишь Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² 10 пиксСльной всСлСнной, Ρ‚ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ.

Колонки в ЀигмС

Π‘ сСткой понятно, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉ разбСрСмся с ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ. На Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Ρ‚Ρ‹ моТСшь Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΡƒΡŽ сСтку Π² Π€ΠΈΠ³ΠΌΠ΅.

Π£ нас Ρ‚ΡƒΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ настройки:

Count β€” количСство ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ

Width β€” ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ (ΠΏΡ€ΠΈ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌ Type Stretch Π·Π°Π΄Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π½Π΅ получится β€” Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠ΅ расстояниС)

Gutter β€” ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ отступ ( ΠΎΠ½ всСгда Ρƒ нас Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½Ρ‹ΠΌ, Π½Π° Ρ‚ΠΎ это ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ)))

Margin β€” отступ сСтки ΠΎΡ‚ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ ΠΈ Π»Π΅Π²ΠΎΠ³ΠΎ края ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Π² случаС ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, Ссли Ρ‚Ρ‹ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Π΅ΡˆΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ сСтку, Ρ‚ΠΎ Margin Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ΄Π²ΠΈΠ³Π°Ρ‚ΡŒ Ρ‚Π²ΠΎΠΈ строки свСрху ΠΈ снизу. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉ рассмотрим, Ρ‡Ρ‚ΠΎ ΠΆΠ΅ Ρƒ нас кроСтся Π² Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΌ спискС Type

Stretch– тянущаяся ΠΈΠ»ΠΈ рСзиновая сСтка. Колонки Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ„Ρ€Π΅ΠΉΠΌΠ°. МоТно Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠ΅ расстояниС, ΡˆΠΈΡ€ΠΈΠ½Π° Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ„Ρ€Π΅ΠΉΠΌΠ°. ΠžΡ‡Π΅Π½ΡŒ крутая ΡˆΡ‚ΡƒΠΊΠΎΠ²ΠΈΠ½Π° для создания Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π°. МоТно Π·Π°Π΄Π°Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ отступ справа ΠΈ слСва, Ссли Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°Ρ….

Center–БСтка ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ самой ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π½ΠΎ ΠΏΡ€ΠΈ этом ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ„Ρ€Π΅ΠΉΠΌΠ° ΡˆΠΈΡ€ΠΈΠ½Π° сСтки ΠΈ расстояния ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΠΎΠΉ.

Left–тут всС ΠΈ Ρ‚Π°ΠΊ понятно.

ΠžΠ±Ρ€Π°Ρ‚ΠΈ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сразу ΠΌΠ½ΠΎΠ³ΠΎ сСток, Ρ…ΠΎΡ‚ΡŒ ΠΌΠΈΠ»Π»ΠΈΠΎΠ½.

Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ-Π’Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ сСтку Π½Π° Windows Ctrl+Shift+4. На Mac Cmd+g

Колонки bootstrap 4 Figma

Как ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉ создадим ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΡƒΡŽ систСму сСток ΠΏΠΎΠ΄ бутстрап 4 Π² Π€ΠΈΠ³ΠΌΠ΅. ДСлаСтся это ΠΎΡ‡Π΅Π½ΡŒ просто. Π‘ΠΎΠ·Π΄Π°ΠΉ Ρ„Ρ€Π΅ΠΉΠΌ, любой, ΠΊΠ°ΠΊΠΎΠΉ Ρ‚Π΅Π±Π΅ нравится. Π― создал для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 1920. ΠœΡ‹ Π·Π½Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ области Π² bootstrap 4 для дСсктопа составляСт 1140 пиксСлСй, (!)30Ρ€Ρ… ΠΏΠΎ краям ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° я Π½Π΅ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ я просто создам ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ Π΄Π»ΠΈΠ½ΠΎΠΉ 1140 ΠΈ Ρ†Π΅Π½Ρ‚Ρ€ΡƒΡŽ Π΅Π³ΠΎ Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ΅.

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

ΠœΠ΅ΡΡ‚ΠΎ, Π³Π΄Π΅ Ρƒ нас Π±ΡƒΠ΄Π΅Ρ‚ сСтка Π²Ρ‹Π±Ρ€Π°Π»ΠΈ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉ создадим Π΅Π΅, Ρ€ΠΎΠ΄ΠΈΠΌΡƒΡŽβ€¦ ΠΏΠΎ Π½ΠΎΠΌΠ΅Π½ΠΊΠ»Π°Ρ‚ΡƒΡ€Π΅ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ бутстрап Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½Π°, Π·Π°Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ 30. Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€ΡƒΡ‡ΠΊΠ°ΠΌΠΈ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Center Ρ‚Π°ΠΊΡƒΡŽ сСтку Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, создаСм ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΡƒΡŽ сСтку bootstrap 4 Π² figma ΠΏΠΎ срСдствам Stretch, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ‚ Π»ΡŽΠ±ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π·Π°Π΄Π°Π΅ΠΌ Π½ΡƒΠΆΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π² настройках ΠΈ всС. Π’ΠΎΡ‚ ΠΈ эти ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹: 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ с ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΌ расстояниСм Π² 30 пиксСлСй. Π’ΡƒΡ‚ всС понятно, Π° Π²ΠΎΡ‚ ΠΊΠ°ΠΊ Π±Ρ‹Ρ‚ΡŒ с ΠΌΠ°Ρ€Π΄ΠΆΠΈΠ½ΠΎΠΌ? Π’ΠΎ ΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… Π½Π΅Ρ‚. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΌΠ΅Ρ€ΡΠ΅ΡˆΡŒ расстояниС ΠΎΡ‚ ΠΊΡ€Π°Π΅Π² ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° Π΄ΠΎ ΠΊΡ€Π°Π΅Π² Ρ‚Π²ΠΎΠ΅Π³ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ° ΠΈ Ρ‚Π°ΠΊΠΎΠΉ выставляй ΠΌΠ°Ρ€Π΄ΠΆΠΈΠ½. Π’ ΠΌΠΎΠ΅ΠΌ случаСт это 390. Если Ρ‡Ρ‚ΠΎ β€” ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ расстояниС ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° Π΄ΠΎ ΠΊΡ€Π°Π΅Π² Ρ„Ρ€Π΅ΠΉΠΌΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΎΠΌ Alt

Π’Π΅ΠΏΠ΅Ρ€ΡŒ сСточка становится просто идСально, ΠΊΠ°ΠΊ Π½Π°ΠΌ ΠΈ Π½ΡƒΠΆΠ½ΠΎ. Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ΄ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, Π½ΠΎ Π½Π΅ бСспокойся β€” я ΡƒΠΆΠ΅ всС сдСлал Π·Π° тСбя ΠΈ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΡƒΡŽ сСтку bootstrap 4 Π² figma моТСшь Ρ‚ΡƒΡ‚. ΠŸΠΎΠ»ΡŒΠ·ΡƒΠΉΡΡ Π½Π° Π·Π΄ΠΎΡ€ΠΎΠ²ΡŒΠ΅. Π’Π°ΠΌ ΠΈ ΠΏΠΎΠ΄ дСсктоп ΠΈ ΠΏΠΎΠ΄ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚, всС Π΅ΡΡ‚ΡŒ.

ВсС Ρ‚Π΅ ΠΆΠ΅ настройки ΠΈ Π»ΠΎΠ³ΠΈΠΊΠ° процСсса Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΈ с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ сСтками, поэтому Ρ€Π°ΡΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ ΠΈ ΠΊΠ°ΠΊ я Π½Π΅ стану.

ΠžΠ±Ρ€Π°Ρ‚ΠΈ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ρ‚Ρ‹ моТСшь Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ Ρ„Ρ€Π΅ΠΉΠΌ Π²ΠΎ Π²Ρ€Π΅ΠΌ ΠΈ Π²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΌ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ сСтку ΠΏΠΎΠ΄ свои Π½ΡƒΠΆΠ΄Ρ‹. ΠšΡƒΠ΄Π° Ρ‚Π°ΠΌ Π΄ΠΈΠ½ΠΎΠ·Π°Π²Ρ€Ρƒ Ρ„Ρˆ Π΄ΠΎ Ρ‚Π°ΠΊΠΎΠ³ΠΎ.

Π›ΠΈΠ½Π΅ΠΉΠΊΠ° Π² Figma

Π­Ρ‚ΠΎ Π½Π΅Ρ‡Ρ‚ΠΎ ΠΈΠ½ΠΎΠ΅ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π² нашСм ΠΎΠ±Ρ‰Π΅ΠΌ Π΄Ρ€ΡƒΠ³Π΅ Ρ„Ρˆ. ΠŸΡ€Π΅Π΄ΡƒΡΡ‚Π°Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹Ρ… Π»ΠΈΠ½Π΅Π΅ΠΊ Π² Ρ„ΠΈΠ³ΠΌΠ΅ Π½Π΅Ρ‚, Π½ΠΎ Ρ‚Ρ‹ всСгда моТСшь Π²Ρ‹Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ ΠΈΡ… слСва ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ…Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ области ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

Π‘Ρ‚Ρ€Π°Π½Π½ΠΎ ΠΊΠ°ΠΊ-Ρ‚ΠΎ получаСтся… Π·Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ½Ρ‹ ΠΈ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ сСтки ΠΈΠ· ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ с ΠΊΡƒΡ‡Π΅ΠΉ настроСк ΠΈ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ Π² Π€ΠΈΠ³ΠΌΠ΅? На самом Π΄Π΅Π»Π΅ Π½ΠΈΡ‡Π΅Π³ΠΎ странного Ρ‚ΡƒΡ‚ Π½Π΅Ρ‚. Π›ΠΈΠ½Π΅ΠΉΠΊΠΈ β€” это просто Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Ρ‚Ρ‹ Ρ€ΠΎΠ²Π½ΡΠ΅ΡˆΡŒ Π±Π»ΠΎΠΊΠΈ, Π° Layout grid Figma Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² тСсной связкС с constraints, Ρ‡Ρ‚ΠΎ позволяСт Ρ‚Π΅Π±Π΅ Π±Ρ‹ΡΡ‚Ρ€Π΅Π½ΡŒΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Ρ‹.

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ констрСйтс Ρ‡ΠΈΡ‚Π°ΠΉ Ρ‚ΡƒΡ‚.

БистСма сСток Bootstrap 4 Π² figma

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

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

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

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

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

7 Π»Π°ΠΉΡ„Ρ…Π°ΠΊΠΎΠ² Π² Figma, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ упростят Π²Π°ΠΌ Ρ€Π°Π±ΠΎΡ‚Ρƒ

РассказываСм, ΠΊΠ°ΠΊ быстро Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹, ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ°Ρ‡ΠΊΡƒ Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ² Π·Π° Ρ€Π°Π· ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ прогрСсс-Π±Π°Ρ€ Π² нСсколько ΠΊΠ»ΠΈΠΊΠΎΠ².

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

ΠšΠ°Ρ‚Ρ Павловская для Skillbox Media

Π’ Figma Π΅ΡΡ‚ΡŒ мноТСство скрытых Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ горячих клавиш, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π½Π΅ Ρ‚Π°ΠΊ просто. Но Ссли ΠΈΡ… ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ, Π²Ρ‹ смоТСтС ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π°Π΄ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ: быстрСС ΠΈΡΠΊΠ°Ρ‚ΡŒ Ρ„Ρ€Π΅ΠΉΠΌΡ‹ ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈ ΠΏΠΎΠ΄Π±ΠΈΡ€Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΈΠΏΠ΅Ρ‚ΠΊΠΈ.

РассказываСм ΠΎ сСми простых Π»Π°ΠΉΡ„Ρ…Π°ΠΊΠ°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ быстрСС Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Figma.

Π‘Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΡ‹ ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹

Если Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π½Π°Π΄ большим ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ, Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ становится слоТно ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈΠ·-Π·Π° большого количСства Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ², Π³Ρ€ΡƒΠΏΠΏ ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², особСнно ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ всС Ρ€Π°Π·Π²Ρ‘Ρ€Π½ΡƒΡ‚Ρ‹.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½ΠΎ ΡΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ всС Ρ„Ρ€Π΅ΠΉΠΌΡ‹, Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ сочСтаниС клавиш Alt (βŒ₯) + L.

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€. ΠŸΠΈΡˆΠ΅Ρ‚ ΠΏΡ€ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠ½ΠΈΠ³ΠΈ, ΡˆΡƒΡ‚ΠΈΡ‚ ΡˆΡƒΡ‚ΠΊΠΈ, смотрит Π°Π½ΠΈΠΌΠ΅.

ΠŸΡ€Π΅Π΄ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ Ρ†Π²Π΅Ρ‚Π°

Π’Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ любой Ρ„Ρ€Π΅ΠΉΠΌ ΠΈΠ»ΠΈ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ I, Π·Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ ΠΈ Π²ΠΎΠ΄ΠΈΡ‚Π΅ курсором ΠΏΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ. Π›ΡŽΠ±ΠΎΠΉ Ρ†Π²Π΅Ρ‚ ΠΏΠΎΠ΄ Π½ΠΈΠΌ станСт Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ для Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ элСмСнта. Π’Π°ΠΊ Π²Ρ‹ смоТСтС быстрСС Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΎΡ‚Ρ‚Π΅Π½ΠΎΠΊ для ΠΊΠ½ΠΎΠΏΠΊΠΈ, тСкста ΠΈΠ»ΠΈ основного Ρ„ΠΎΠ½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

ΠŸΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ²

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Figma создаёт Π½ΠΎΠ²Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΡ‹ с Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Frame 1 β€” ΠΎΠ½ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ ΠΎ содСрТимом Ρ„Ρ€Π΅ΠΉΠΌΠ°, особСнно для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π² ваш ΠΌΠ°ΠΊΠ΅Ρ‚ Π·Π°Ρ…ΠΎΠ΄ΠΈΡ‚ Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅. ΠŸΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Ρ‚Π°ΠΊΠΎΠΉ Ρ„Ρ€Π΅ΠΉΠΌ β€” Π»Π΅Π³ΠΊΠΎ, Π½ΠΎ Ссли ΠΈΡ… 10 ΠΈΠ»ΠΈ 20, Ρ‚ΠΎ придётся ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π½Π° это ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

Π§Ρ‚ΠΎΠ±Ρ‹ быстро ΡΠΈΡΡ‚Π΅ΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ названия ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Ρ… ΠΏΠΎ смыслу Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ², Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ ΠΈΡ…, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ сочСтаниС клавиш Π‘trl (⌘) + R. ΠžΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ΡΡ мСню, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹:

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

Настройки пСрСимСнования ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ²:

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ с Tidy up

Π”Π²Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ€ΠΎΠ²Π½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ просто. Но Ссли ΠΈΡ… 10 ΠΈΠ»ΠΈ 20, это прСвращаСтся Π² Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΈ Π½ΡƒΠ΄Π½ΡƒΡŽ Π·Π°Π΄Π°Ρ‡Ρƒ. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Π½Π΅ занимался ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ Ρ€ΡƒΡ‚ΠΈΠ½ΠΎΠΉ, Π² Figma Π΅ΡΡ‚ΡŒ функция Tidy up, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ автоматичСски Ρ€Π°ΡΡΡ‚Π°Π²ΠΈΡ‚ΡŒ всС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Ρ€ΠΎΠ²Π½ΠΎ, ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΡ… мСстами ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ отступы.

Как ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Tidy up

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ прогрСсс-Π±Π°Ρ€

Если Π²Ρ‹ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚Π΅ΡΡŒ интСрфСйсом тСхничСски слоТного прилоТСния, скорСС всСго, Π²Π°ΠΌ понадобится прогрСсс-Π±Π°Ρ€. Π’ Figma Π΅ΡΡ‚ΡŒ мноТСство способов Π΅Π³ΠΎ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ, Π½ΠΎ самый простой β€” с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ тСкста!

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ прогрСсс-Π±Π°Ρ€ ΠΈΠ· тСкста

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ вас Π΅ΡΡ‚ΡŒ Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ прогрСсс-Π±Π°Ρ€. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΄Π»ΠΈΠ½Ρƒ полосы Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, просто добавляйтС Π² Π½Π΅Π³ΠΎ тСкст:

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

ΠšΡ€ΡƒΠ³Π»Ρ‹ΠΉ прогрСсс-Π±Π°Ρ€

Если вмСсто Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ прогрСсс-Π±Π°Ρ€Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΉ, Π΅Π³ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ ΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ.

Π“ΠΎΡ‚ΠΎΠ²ΠΎ β€” получился ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΉ прогрСсс-Π±Π°Ρ€. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π΄Π»ΠΈΠ½Ρƒ, Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ курсор Π½Π° Ρ„ΠΈΠ³ΡƒΡ€Ρƒ, Π·Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΊΠΎΠ½Ρ†ΠΎΠ² Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ ΠΈ тянитС.

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

ΠšΠ»ΡΠΊΡΡ‹ стандартными инструмСнтами

Π’ Figma Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для создания интСрСсных Ρ„ΠΎΡ€ΠΌ, Π½ΠΎ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стандартных инструмСнтов. НапримСр β€” сфСры ΠΈ связки, ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ Π½Π° кляксы.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ кляксу

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ ΠΊΠ°ΠΊ ΡƒΠ³ΠΎΠ΄Π½ΠΎ ΠΈ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΡ…ΠΎΠΆΠΈ Π½Π° кляксы:

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

Как ΡƒΠ±Ρ€Π°Ρ‚ΡŒ grid Π² figma

ВСхнология Bootstrap вСрстки являСтся ΠΎΡ‡Π΅Π½ΡŒ популярной Ρƒ front-end Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ смоТСт быстро ΠΈ качСствСнно ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ. Данная сСтка являСтся ΠΎΡ‚Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ стандартных ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² Bootstrap сСтки: 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ с Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΌΠΈ 30 пиксСлСй ΠΈ ΠΊΡ€Π°ΠΉΠ½ΠΈΠΌΠΈ 15 пиксСлСй отступами.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΠΎΠΉ сСтки Π² Figma.

Π€Π°ΠΉΠ» ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½: Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ сСтки Π’Π‘Π•Π₯ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ bootstrap.

Π£Π·Π½Π°Π²Π°ΠΉΡ‚Π΅ ΠΎ Π½ΠΎΠ²Ρ‹Ρ… ΡˆΠ°Π±Π»ΠΎΠ½Π°Ρ…, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°Ρ… Π² Π³Ρ€ΡƒΠΏΠΏΠ΅ Π’ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅

Π’ этой ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠΉ инструкции ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ, ΠΏΡ€ΠΎ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ ΠΈ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² Ρ„ΠΈΠ³ΠΌΠ΅. Рассмотрим ΠΊΠ°ΠΊ Π²Π»ΡŽΡ‡Π°Ρ‚ΡŒ, ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π»ΠΈΠ½ΠΈΠΈ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ Figma.

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

Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ Π²Ρ‹ ΡƒΠ·Π½Π°Π»ΠΈ ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π»ΠΈΠ½ΠΈΠΈ. Каким ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π»ΠΈΠ½Π΅ΠΉΠΊΠ°ΠΌΠΈ Π² Figma. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ ΠΊΠ°ΠΊ Π²Π»ΡŽΡ‡Π°Ρ‚ΡŒ, ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ горячих клавиш.

Как Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² Ρ„ΠΈΠ³ΠΌΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² Ρ„ΠΈΠ³ΠΌΠ΅ достаточно ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ это ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ для вас способом. Π‘Π°ΠΌΡ‹ΠΉ простой способ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° горячиС клавиши Β«Shift + RΒ».

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π»ΠΈΠ½ΠΈΠΈ Π² Ρ„ΠΈΠ³ΠΌΠ΅ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ Π½Π΅ΠΉ ΠΌΡ‹ΡˆΠΊΠΎΠΉ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Β«BacspaceΒ». Π›ΠΈΠ±ΠΎ Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ курсор ΠΌΡ‹ΡˆΠΈ Π½Π° Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΡƒΡŽ, Π·Π°ΠΆΠΌΠΈΡ‚Π΅ Π»Π΅Π²ΡƒΡŽ клавиши ΠΌΡ‹ΡˆΠΈ ΠΈ потянитС Π΄ΠΎ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ.

Как Π²Π»ΡŽΡ‡ΠΈΡ‚ΡŒ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ Π² Ρ„ΠΈΠ³ΠΌΠ΅

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ Π² Ρ„ΠΈΠ³ΠΌΠ΅ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ горячиС клавиши Β«Shift + RΒ». ΠŸΠΎΡΠ²ΡΡ‚ΡΡ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ свСрху ΠΈ слСва. ΠžΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

Π’Ρ‚ΠΎΡ€ΠΎΠΉ способ для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π»ΠΈΠ½Π΅Π΅ΠΊ. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² мСню Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡƒΠ½ΠΊΡ‚ Β«ViewΒ» Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° надпись Β«RulersΒ».

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

Π’Ρ€Π΅Ρ‚ΠΈΠΉ способ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ. ΠΠ°ΠΆΠ°Ρ‚ΡŒ свСрху, справа Π½Π° Ρ†ΠΈΡ„Ρ€Ρ‹ с ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°ΠΌΠΈ ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ надпись Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ Β«RelersΒ».

Когда слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅

ΠΠ°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ³Π΄Π° трСбуСтся Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ элСмСнты ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³-Π΄Ρ€ΡƒΠ³Π°. НапримСр для выравнивания тСкста ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡƒΡŽ Π±Π°Π·ΠΎΠ²ΡƒΡŽ линию. Базовая линия β€” это линия Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ стоит тСкст.

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

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

Π£Π·Π½Π°Π²Π°ΠΉΡ‚Π΅ ΠΎ Π½ΠΎΠ²Ρ‹Ρ… ΡˆΠ°Π±Π»ΠΎΠ½Π°Ρ…, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°Ρ… Π² Π³Ρ€ΡƒΠΏΠΏΠ΅ Π’ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

Π£Π·Π½Π°Π²Π°ΠΉΡ‚Π΅ ΠΎ Π½ΠΎΠ²Ρ‹Ρ… ΡˆΠ°Π±Π»ΠΎΠ½Π°Ρ…, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°Ρ… Π² Π³Ρ€ΡƒΠΏΠΏΠ΅ Π’ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² Ρ„ΠΈΠ³ΠΌΠ΅

Как Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² figma

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

Как Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π² Ρ„ΠΈΠ³ΠΌΠ΅?

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

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

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