ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΡΠ΅ΠΉΠΌ Π² ΡΠΈΠ³ΠΌΠ΅
ΠΠ°ΠΊ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ Π² ΡΠΈΠ³ΠΌΠ΅: ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ»ΠΎΠΈ, ΡΠΈΠ³ΡΡΡ. 4 Π»ΡΡΡΠΈΡ ΡΠΏΠΎΡΠΎΠ±Π°.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΡΠ°ΡΡΠΊΠ°ΠΆΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ Π² ΡΠΈΠ³ΠΌΠ΅ (Figma). ΠΡ ΡΠ·Π½Π°Π΅ΡΠ΅ 4 ΠΏΡΠΎΡΡΡΡ ΡΠΏΠΎΡΠΎΠ±Π°, ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ»ΠΎΠΈ, Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΡΠΈΠ³ΡΡΡ, ΠΎΠ±ΡΠ΅ΠΊΡΡ ΠΈ Ρ.Π΄. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊ ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Π³ΡΡΠΏΠΏΠ° Β«GroupΒ» ΠΈ ΡΡΠ΅ΠΉΠΌ Β«FrameΒ». Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΏΡΠΎ Β«Union selectionΒ» ΠΈ Β«Flatten selectionΒ».
ΠΠ°ΠΊ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π³ΡΡΠΏΠΏΡ Π² ΡΠΈΠ³ΠΌΠ΅
Π§ΡΠΎΠ±Ρ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π³ΡΡΠΏΠΏΡ (ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ ) Π½Π°ΠΆΠΌΠΈΡΠ΅ Π½Π° ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ Π³ΠΎΡΡΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡ Β«Ctrl + GΒ». Π ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ»ΠΎΡΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ Π³ΡΡΠΏΠΏΡ Ρ ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠ»ΠΈ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΡΡΡΠ΅Π»ΠΊΡ Π½Π°ΠΏΡΠΎΡΠΈΠ² Π³ΡΡΠΏΠΏΡ Π² ΡΠ»ΠΎΡΡ , ΡΠΎ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΅ΡΡΡ Π²Π½ΡΡΡΠΈ.
ΠΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Figma Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ΅ΠΉΠΌΠ°
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ΅ΠΉΠΌΠ°. ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠ΅ΠΉΠΌ Π²ΠΎΠΊΡΡΠ³ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π²ΡΠ±Π΅ΡΠΈΡΠ΅ Π΅Π³ΠΎ Π² ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠ²Π΅ΡΡ Ρ ΠΈ Π½Π°ΡΠΈΡΡΠΉΡΠ΅ Π΅Π³ΠΎ Π²ΠΎΠΊΡΡΠ³ Π½ΡΠΆΠ½ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ². Π’Π°ΠΊΠΆΠ΅ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠ΅ΠΉΠΌΠ° ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π³ΠΎΡΡΡΠΈΠΌΠΈ ΠΊΠ»Π°Π²ΠΈΡΠ°ΠΌΠΈ Β«Ctrl + Alt + GΒ»
ΠΠ°ΠΊ ΡΠ°Π·Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ Π² ΡΠΈΠ³ΠΌΠ΅
Π§ΡΠΎΠ±Ρ ΡΠ°Π·Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ· Π³ΡΡΠΏΠΏΡ ΠΈΠ»ΠΈ ΡΡΠ΅ΠΉΠΌΠ° Π² ΡΠΈΠ³ΠΌΠ΅ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ΅ 3 ΠΊΠ»Π°Π²ΠΈΡΠΈ Β«Ctrl + Shift + GΒ». Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΏΡΠ°Π²ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ ΠΌΡΡΠΈ ΠΈ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΡΠ½ΠΊΡ Β«Ungroun selectionΒ».
ΠΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅ΠΌ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΡΠΈΠ³ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Β«Union selectionΒ»
Π§ΡΠΎΠ±Ρ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΡΠΈΠ³ΡΡΡ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ Union selection, Π²ΡΠ±Π΅ΡΠΈΡΠ΅ 2 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π‘Π²Π΅ΡΡ Ρ Π³Π΄Π΅ Π΅ΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ° Β«Boolean GroupsΒ» Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΡΠ½ΠΊΡ Β«Union selectionΒ».
ΠΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΠΈΠ³ΠΌΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Β«Flatten selecitonΒ»
ΠΠ»Ρ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ Flatten selection. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ Π½ΡΠΆΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΡΡΡ Π½Π°Π΄ΠΏΠΈΡΡ ΠΈΠ· Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠ° ΡΠ²Π΅ΡΡ Ρ.
ΠΡΠ»ΠΈΡΠΈΡ Β«Union selectionΒ» ΠΈ Β«Flatten selecitonΒ» Π² Figma
ΠΡΠΈ Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ Β«Union selectionΒ», Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΈΠ³ΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ Π΅ΡΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π΄ΠΈΡΠ΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Β«RectangleΒ», ΡΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΡΡΠ³Π»ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅ΡΡΡΡΡ ΡΠΎΡΠ΅ΠΊ Π½Π° ΡΠ³Π»Π°Ρ .
ΠΡΠ»ΠΈ Π±ΡΠ΄Π΅ΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π³ΡΡΠΏΠΏΠ΅ Β«Flatten selectionΒ», ΡΠΎ Π±ΡΠ΄ΡΡ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ. Π‘ ΠΈΡ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ Π² ΡΠΈΠ³ΠΌΠ΅ Π»ΡΠ±ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ»ΠΎΠΈ, ΡΠΈΠ³ΡΡΡ ΠΈ Ρ.Π΄. ΠΡ ΡΠ·Π½Π°Π»ΠΈ ΠΎ 4 ΠΌΠ΅ΡΠΎΠ΄Π°Ρ ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π²ΠΎΠΏΡΠΎΡΡ, ΡΠΎ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΠΏΠΈΡΠΈΡΠ΅ ΠΈΡ Π½ΠΈΠΆΠ΅ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ .
Frame Π² Figma β ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΠΉ ΡΠ°Π·Π±ΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°
ΠΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Frame Π² Figma. ΠΠ΅ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·Π±ΠΎΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ΅ Figma. Π£ΡΠΎΠΊ Π² Π²ΠΈΠ΄Π΅ΠΎ ΠΈ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅. ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Frame Π² Figma? ΠΡΠ»ΠΈ Π²Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, ΡΠΎ ΡΡΠΎΡ ΡΡΠΎΠΊ ΠΎΡΠΊΡΠΎΠ΅Ρ Π²Π°ΠΌ Π²ΡΠ΅ ΡΠ΅ΠΊΡΠ΅ΡΡ ΡΡΠΎΠ³ΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Frame Π² Figma ΠΈ Ρ ΡΠ΅ΠΌ Π΅Π³ΠΎ Π΅Π΄ΡΡ?
Frameβ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Ρ ΠΎΠ±Π»Π°ΡΡΡ, Π³Π΄Π΅ Π±ΡΠ΄ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠ΅ΠΉΠΌ Π² ΡΠΈΠ³ΠΌΠ΅?
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Frame Π² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ΅ Figma Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΡ ΡΠ»Π΅Π²Π° ΠΈ ΡΠ²Π΅ΡΡ Ρ Π² ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ². ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ Π½Π° ΠΏΡΡΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π»Π΅Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ. ΠΠΎΡΡΡΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠΈ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠ΅ΠΉΠΌΠΎΠ² β Β«FΒ» ΠΈ Β«AΒ».
ΠΠΎΡΠ΅ΠΌΡ 2 Π³ΠΎΡΡΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ, Π° Π½Π΅ ΠΎΠ΄Π½Π°? ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Sketch. Π’Π°ΠΌ Π΅ΡΡΡ Π°Π½Π°Π»ΠΎΠ³ ΡΡΠ΅ΠΉΠΌΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Π·ΡΠ²Π°ΡΡΡΡ Β«ΠΡΡΠ±ΠΎΡΠ΄ΡΒ». Π§ΡΠΎΠ±Ρ Π² ΡΠΊΠ΅ΡΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π°ΡΡΠ±ΠΎΡΠ΄ Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΊΠ»Π°Π²ΠΈΡΡ Β«ΠΒ». ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΊΠ΅ΡΡ β ΡΡΠΎ Π³Π»Π°Π²Π½ΡΠΉ ΠΊΠΎΠ½ΠΊΡΡΠ΅Π½Ρ ΡΠΈΠ³ΠΌΡ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π»Π΅Π³ΡΠΈΡΡ ΡΠ°Π±ΠΎΡΡ ΡΠ΅ΠΌ, ΠΊΡΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡ Π½Π° ΡΠΈΠ³ΠΌΡ ΡΠΎ ΡΠΊΠ΅ΡΡΠ°, ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠ΅ΡΠΈΠ»ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΡΠΈΠ²ΡΡΠ½ΠΎΠ΅ Π΄Π»Ρ ΡΡΠΈΡ Π»ΡΠ΄Π΅ΠΉ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅.
ΠΡΠ»ΠΈ Π½Π΅ ΡΡΠ½ΡΡΡ ΠΌΡΡΠΊΠΎΠΉ ΠΈ ΠΏΡΠΎΡΡΠΎ Π½Π°ΠΆΠ°ΡΡ Π½Π° Π»Π΅Π²ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ ΠΌΡΡΠΈ, ΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ ΡΡΠ΅ΠΉΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ 100 Π½Π° 100px.
ΠΡΠ»ΠΈ Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΡΡΠ½ΡΡΡ, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ.
ΠΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠ΅ΠΉΠΌΠΎΠ² Π² Figma ΠΈ ΡΠ°Π±Π»ΠΎΠ½Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²
Π ΠΏΡΠ°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠ΅ΠΉΠΌΠΎΠ² (Π°ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΡΠΈ Π²ΡΠ±ΠΎΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° ΡΡΠ΅ΠΉΠΌ):
ΠΡΠ±ΠΈΡΠ°Π΅ΠΌ Π΄ΡΡΠ³ΠΎΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΉΠΌΠ° ΠΈΠ· ΡΠΏΠΈΡΠΊΠ°
ΠΡΠ»ΠΈ Π²ΡΠ±ΡΠ°ΡΡ ΡΡΠ΅ΠΉΠΌ, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ Π²ΡΠ±ΡΠ°Π² Π² Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅ΠΌ ΡΠΏΠΈΡΠΊΠ΅ ΡΠΏΡΠ°Π²Π° Π΄ΡΡΠ³ΠΎΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π»ΠΈΠ±ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ Π½Π° Π³ΡΡΠΏΠΏΡ.
Π§ΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π±Π»ΠΎΠ½ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΈ Π²ΡΠ±ΡΠ°ΡΡ Π΄ΡΡΠ³ΠΎΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π»ΠΈΠ±ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ· ΡΡΠ΅ΠΉΠΌΠ° Π³ΡΡΠΏΠΏΡ. ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Β«FrameΒ» Π½Π° Β«GroupΒ» ΠΈΠ»ΠΈ Π²ΡΠ±ΠΎΡ Π΄ΡΡΠ³ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠ· ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ². ΠΡΡΠΏΠΏΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½ΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΡΠ΅ΠΉΠΌΠ° Π² Π³ΡΡΠΏΠΏΠ΅ ΠΌΠ΅Π½ΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΠΈ Π½Π΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ.
ΠΠ΅Π½ΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎ ΡΠΌΠ½ΠΎΠΌΡ. ΠΠ°ΠΊ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΈΠ»ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ Frame Π² Figma?
Π§ΡΠΎΠ±Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ, ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΡΡΠ΅ΠΉΠΌ ΠΈΠ»ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΡΡΠ΅ΠΉΠΌ, ΠΏΡΠΎΡΡΠΎ Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΠΊΡΠ°ΠΉ ΠΈ ΠΏΠΎΡΡΠ½ΠΈΡΠ΅ Π² ΡΡΠΎΡΠΎΠ½Ρ. Π’Π°ΠΊΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³ΠΎΡΡΡΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠΈ, ΡΡΠΎΠ±Ρ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ.
ΠΡΠ»ΠΈ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ Π½ΠΈΠΆΠ΅, ΡΠΎ Π±ΡΠ΄Π΅Ρ Π²Π°ΠΌ ΡΡΠ°ΡΡΡΠ΅:
Ctrl β ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π½ΡΡΡΠΈ Π½Π΅ ΠΏΡΠΈΠ²ΡΠ·Π°Π½Ρ ΠΊ ΠΊΡΠ°ΡΠΌ.
Alt β ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ΅ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΉΠΌΠ° ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π°, ΡΠ²Π΅ΡΡ
Ρ ΠΈ ΡΠ½ΠΈΠ·Ρ.
Shift β ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ ΡΡΠΈΡ
Π³ΠΎΡΡΡΠΈΡ
ΠΊΠ»Π°Π²ΠΈΡ.
Π‘Π»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠ΅ΠΉΠΌΠ° β ΡΡΠΎ ΠΌΠ΅Π½ΡΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ Π½Π° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ Π΅ΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΡΡΠ΅ΠΉΠΌΠ° 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° Π²ΡΡΠΎΡΠ° 100, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΌΠ΅ΡΡΠ°ΠΌΠΈ, ΠΏΡΠΎΡΡΠΎ Π½Π°ΠΆΠΈΠΌΠ°Ρ Π½Π° ΡΡΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ.
ΠΠΊΠΎΠ½ΠΊΠ° ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠ°ΠΌΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ΄ΠΎΠ³Π½Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠ΅ΠΉΠΌΠ° ΠΏΠΎΠ΄ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΅ΡΡΡ Π²Π½ΡΡΡΠΈ ΡΡΠ΅ΠΉΠΌΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ Π²ΠΎΠ·ΡΠΌΠ΅ΠΌ Π³ΡΠ°ΡΠΈΠΊ, ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π½Π° ΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ. Π Π°Π·ΠΌΠ΅ΡΡ Π±ΡΠ΄ΡΡ ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Π½Ρ ΠΏΠΎΠ΄ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅.
Π§ΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΉΠΌΠ° ΠΏΠΎ ΠΎΡΠΈ Π₯ ΠΈ Y ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΠΌ Π΅ΡΡΡ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ W ΠΈ H ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²ΠΈΠ΄Π΅ΡΡ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠ΅ΠΉΠΌΠ°. Π‘ΠΏΡΠ°Π²Π° Π΅ΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠ΅ΠΏΠΈ. ΠΡΠ»ΠΈ Π΅Ρ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ, ΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±ΡΠ΄ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ Π΅ΡΠ»ΠΈ Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ ΠΈ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠ΅ΠΉΠΌ 100 Π½Π° 100px. Π’ΠΎ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ Π½Π° 140 Π²ΡΡΠΎΡΠ° ΡΠΎΠΆΠ΅ Π±ΡΠ΄Π΅Ρ 140px. ΠΡΠ»ΠΈ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ³Π»Π° Π½Π°ΠΊΠ»ΠΎΠ½Π° ΠΈ ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅ ΡΠ³Π»ΠΎΠ²
Π§ΡΠΎΠ±Ρ ΡΠΊΡΡΠ³Π»ΠΈΡΡ ΡΠ³Π»Ρ Ρ ΡΡΠ΅ΠΉΠΌΠ° (ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΠΊΡΡΠ³Π»ΡΠΌ), ΡΠΌΠΎΡΡΠΈΡΠ΅ Π² ΠΏΡΠ°Π²ΡΡ ΠΏΠ°Π½Π΅Π»Ρ. Π‘Π²Π΅ΡΡ Ρ Π΅ΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΡ ΡΠ³Π»ΠΎΠ² ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π½Π°ΠΊΠ»ΠΎΠ½Π° ΡΠ³Π»Π°. Π’Π°ΠΊΠΆΠ΅ Π΅ΡΠ»ΠΈ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΡΠ°ΠΌΡΡ ΠΏΡΠ°Π²ΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ, ΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΊΡΡΠ³Π»ΡΡΡ Π»ΡΠ±ΡΠ΅ ΡΠ³Π»Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ.
Π€ΡΠ½ΠΊΡΠΈΡ Clip content β ΡΡΠΎ ΡΡΠΎ?
Clip content ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΡΠ΅ΠΉΠΌΠΎΠ². ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ Π½Π° ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΡΠ²Π΅ΡΡ Ρ ΡΡΠ° Π³Π°Π»ΠΎΡΠΊΠ° ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π°, Π° Π½Π° Π²ΡΠΎΡΠΎΠΌ Π²ΠΊΠ»ΡΡΠ΅Π½Π°.
ΠΠ°ΠΊ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ ΡΡΠ΅ΠΉΠΌ Π² Auto Layout?
ΠΡΠ»ΠΈ Π²ΡΠ±ΡΠ°ΡΡ ΡΡΠ΅ΠΉΠΌ, ΡΠΎ Π² ΠΏΡΠ°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π±ΡΠ΄Π΅Ρ Π½Π°Π΄ΠΏΠΈΡΡ Auto Layout.
ΠΡΠ»ΠΈ Π²Π½ΡΡΡΠΈ ΡΡΠ΅ΠΉΠΌΠ° Π±ΡΠ΄Π΅Ρ Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ 3 ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°, ΠΏΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Π½Π° ΠΏΠ»ΡΡΠΈΠΊ, ΡΠΎ ΠΏΠΎΡΠ²ΡΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ.
ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΡΡΡΠ΅Π»ΠΊΠΈ ΡΠΏΡΠ°Π²Π°, ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠ΅ΡΠ΅ΡΡΡΠΎΠΈΡΡΡΡ. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ.
ΠΡΠ»ΠΈ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΠΊΠ°ΠΊΠΎΠΉ ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΡΡΡΠΈ Auto Layout ΠΈ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡ Β«CtrlΒ» Β«DΒ», ΡΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π΄ΡΠ±Π»ΠΈΡΡΠ΅ΡΡΡ ΠΈ Π²ΡΠ΅ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ.
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ Auto Layout ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΌ ΡΡΠΎΠΊΠ΅.
Π‘Π΅ΡΠΊΠΈ Π²ΠΎ ΡΡΠ΅ΠΉΠΌΠ°Ρ
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ΅ΡΠΊΡ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π½Π°ΠΏΡΠΎΡΠΈΠ² Π½Π°Π΄ΠΏΠΈΡΠΈ Β«GridsΒ» Π½Π° ΠΏΠ»ΡΡ.
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΠΊΠΈ (Grid, column, row).
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΡΡΠ΅ΠΉΠΌΠ° ΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ
Π§ΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΡΠ΅ΠΉΠΌΠ° Π²ΡΠ΄Π΅Π»ΠΈΡΠ΅ Π΅Π³ΠΎ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ²Π΅Ρ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΡΠΈΡΡΠ½ΠΊΠ΅ Π²ΡΡΠ΅.
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΏΠ»ΡΡ Π½Π°ΠΏΡΠΎΡΠΈΠ² Π½Π°Π΄ΠΏΠΈΡΠΈ Stroke
ΠΠ°ΠΊ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΡΠ΅ΠΉΠΌ ΠΈΠ· Figma Π² PNG, JPG, SVG, PDF
Π§ΡΠΎΠ±Ρ ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠ΅ΠΉΠΌΡ ΠΈΠ· ΡΠΈΠ³ΠΌΡ ΠΈ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈΡ ΠΊ ΡΠ΅Π±Π΅ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅Ρ, Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΡΡΠ΅ΠΉΠΌ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π½Π° ΠΏΠ»ΡΡ Π½Π°ΠΏΡΠΎΡΠΈΠ² Π½Π°Π΄ΠΏΠΈΡΠΈ Β«ExportΒ» Π² ΠΏΡΠ°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, Π²ΡΠ±Π΅ΡΠΈΡΠ΅ Π½ΡΠΆΠ½ΡΠΉ Π²Π°ΠΌ ΡΠΎΡΠΌΠ°Ρ Π΄Π»Ρ ΡΠΊΡΠΏΠΎΡΡΠ° (PNG, JPG, SVG, PDF) ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Β«ExportΒ». ΠΠ΅ΡΠ΅Π΄ ΡΡΠΈΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡ Π½Π°ΠΆΠ°Π² Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡ Β«PrewieΒ».
Π§ΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΡΠΈ ΡΠΊΡΠΏΠΎΡΡΠ΅, Π½ΡΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° 1Ρ Π΄ΡΡΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΡΠ»ΠΈ Π²ΡΠ±ΡΠ°Π½ΠΎ 1Ρ , ΡΠΎ ΡΠΊΡΠΏΠΎΡΡ Π±ΡΠ΄Π΅Ρ ΠΎΠ΄ΠΈΠ½ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ. ΠΡΠ»ΠΈ Π²ΡΠ±ΡΠ°ΡΡ 2Ρ , ΡΠΎ ΠΌΠ°ΡΡΡΠ°Π± ΠΏΡΠΈ ΡΠΊΡΠΏΠΎΡΡΠ΅ Π±ΡΠ΄Π΅Ρ Π² 2 ΡΠ°Π·Π° Π±ΠΎΠ»ΡΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ Π΅ΡΠ»ΠΈ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ 2Ρ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠ΅ΠΉΠΌΠ° 300px Π½Π° 300px, ΡΠΎ ΡΠΎΡ ΡΠ°Π½Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 600px Π½Π° 600px.
ΠΡΠΈΠ²ΡΠ·ΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΠΎ ΡΡΠ΅ΠΉΠΌΠ΅.
ΠΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΠΎ ΡΡΠ΅ΠΉΠΌΠ΅ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ. ΠΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠΏΡΠ°Π²Π° Π² ΠΏΠ°Π½Π΅Π»Π΅, Π²Π½ΠΈΠ·Ρ Π½Π°Π΄ΠΏΠΈΡΠΈ Constraints. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΈΠ΄Π΅Ρ ΠΊ Π»Π΅Π²ΠΎΠΌΡ Π²Π΅ΡΡ Π½Π΅ΠΌΡ ΡΠ³Π»Ρ. ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠ΅ΠΉΠΌΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Ρ ΡΠ°ΠΌ.
ΠΠ°ΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π½ΡΡΡΠΈ ΡΡΠ΅ΠΉΠΌΠ° ΠΏΡΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π΅
ΠΠ»ΡΠΈ Π²ΡΠ±ΡΠ°ΡΡ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ ΠΌΠ΅Π½Ρ (ΠΊΠ°ΠΊ Π½Π° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅ Π²ΡΡΠ΅), Π° Π·Π°ΡΠ΅ΠΌ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Π³Π°Π»ΠΎΡΠΊΡ Π½Π°ΠΏΡΠΎΡΠΈΠ² Π½Π°Π΄ΠΏΠΈΡΠΈ Β«Fix position when scrollingΒ», ΡΠΎ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΈ Π±ΡΠ΄Π΅Ρ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½.
ΠΠΎΡΡΡΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΡΡΠ΅ΠΉΠΌΠ°ΠΌΠΈ Π² ΡΠΈΠ³ΠΌΠ΅
ΠΠ°ΠΊ ΡΠ΄Π°Π»ΠΈΡΡ ΡΡΠ΅ΠΉΠΌ Π² ΡΠΈΠ³ΠΌΠ΅
ΠΡΠ»ΠΈ Π²Π°ΠΌ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°Π»ΠΎΡΡ ΡΠ΄Π°Π»ΠΈΡΡ ΡΡΠ΅ΠΉΠΌ Π² ΡΠΈΠ³ΠΌΠ΅, ΠΏΡΠΎΡΡΠΎ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ»Π°Π²ΠΈΡΡ Β«BackspaceΒ» Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ΅. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π΅Π³ΠΎ ΡΠ±ΡΠ°ΡΡ ΠΈΠ· Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
2 ΡΠΏΠΎΡΠΎΠ±Π° ΠΊΠ°ΠΊ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠ΅ΠΉΠΌ Π² ΡΠΈΠ³ΠΌΠ΅
ΠΠ°ΠΊ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ Frame Π² Figma
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΡΡΠ΅ΠΉΠΌΡ ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΠΎ ΡΡΠ΅ΠΉΠΌ. ΠΡΠ΄Π΅Π»ΠΈΡΠ΅ Π½ΡΠΆΠ½ΡΠ΅ Π²Π°ΠΌ ΡΡΠ΅ΠΉΠΌΡ ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π½Π° ΠΊΠ»Π°Π²ΠΈΡΠΈ Β«CtrlΒ» Β«GΒ», Π»ΠΈΠ±ΠΎ Π½Π° ΠΏΡΠ°Π²ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ ΠΌΡΡΠΈ ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΡΠ½ΠΊΡ Β«Group selectionΒ». ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Β«ΠΡΡΠΏΠΏΠ°Β».
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π³ΡΡΠΏΠΏΡ ΠΈ ΡΡΠ΅ΠΉΠΌΡ Π² Figma
Π Π°Π±ΠΎΡΠ°Ρ Π² Figma, Π²Ρ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡΠ΄Ρ ΡΡΠ°Π»ΠΊΠΈΠ²Π°Π»ΠΈΡΡ Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ Π²ΡΠ±ΠΎΡΠ°, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ΅ΠΉΠΌ ΠΈΠ»ΠΈ Π³ΡΡΠΏΠΏΡ? ΠΠ±Π° Π²Π°ΡΠΈΠ°Π½ΡΠ° β ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ², Π½ΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΈ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈ ΡΠ»ΡΡΠ°ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. ΠΠ΅ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ Π΄ΡΡΠ³ ΠΎΡ Π΄ΡΡΠ³Π°, ΠΏΠΎΡΡΠΎΠΌΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡ ΠΈΡ , Ρ Π½Π°ΠΏΠΈΡΠ°Π» ΡΡΡ ΡΡΠ°ΡΡΡ.
ΠΡΡΠΏΠΏΡ
ΠΠ°ΠΊ ΠΈ Π² Π΄ΡΡΠ³ΠΈΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π³ΡΡΠΏΠΏΡ Π² Figma ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΠΌΠ΅ΡΡΠ΅ Π² ΠΎΠ΄ΠΈΠ½ ΡΠ»ΠΎΠΉ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ. ΠΡΠ°Π½ΠΈΡΡ Π³ΡΡΠΏΠΏΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ Π΅Π΅ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π³ΡΠ°Π½ΠΈΡ Π³ΡΡΠΏΠΏΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π³ΡΡΠΏΠΏΡ, Π²ΡΠ±ΡΠ°Π² ΠΎΠ±ΡΠ΅ΠΊΡΡ ΠΈ Π½Π°ΠΆΠ°Π²: β + G (Mac) ΠΈΠ»ΠΈ Ctrl + G (Win).
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π³ΡΡΠΏΠΏΡ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΄Π΅ΡΡΡΡΠΊΡΠΈΠ²Π½ΡΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ΠΌ β ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½Π° Π½Π΅ Π½Π°Π²ΡΠ΅Π³Π΄Π° Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΠΈΠ»ΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ ΡΠ»ΠΎΠΈ Π²ΠΌΠ΅ΡΡΠ΅. Π Π»ΡΠ±ΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π°ΠΆΠ°Π²: β + Shift + G (Mac) ΠΈΠ»ΠΈ Ctrl + Shift G (Win).
ΠΡΡΠΏΠΏΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΠΏΠΎΡ ΠΎΠΆΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΌΠ΅Π½ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΡΠ»ΠΎΠ΅Π². ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ Π²Π°Ρ Π΅ΡΡΡ Π½Π°Π±ΠΎΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠ² ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π³ΡΡΠΏΠΏΡ β ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΡ Π² ΠΎΠ΄ΠΈΠ½ Π±ΠΎΠ»Π΅Π΅ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΠΉ ΡΠ»ΠΎΠΉ β ΠΊΠ»ΠΈΠΊΠ½ΡΠ² ΠΏΠΎ Π»ΡΠ±ΠΎΠΌΡ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π²Π°ΡΠ΅ΠΉ Π³ΡΡΠΏΠΏΠ΅, Π²Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΠ΅ Π²ΡΡ Π³ΡΡΠΏΠΏΡ, ΠΈ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠΌ, ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½ΡΠΌ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠΌ Π½Π° Ρ ΠΎΠ»ΡΡΠ΅. ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π³ΡΡΠΏΠΏΠ΅, Π΄Π²Π°ΠΆΠ΄Ρ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡΠ΅ ΠΏΠΎ Π½Π΅ΠΌΡ.
Π’Π°ΠΊΠΆΠ΅ Π²Π½ΡΡΡΠΈ Π³ΡΡΠΏΠΏΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΡΡ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠ°ΠΊ Smart Selections, ΡΡΠΎΠ±Ρ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ Π³ΡΠ°Π½ΠΈΡ Π³ΡΡΠΏΠΏΡ Π΄Π»Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ ΠΎΠ±ΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Π°.
ΠΠΎΠ³Π΄Π° Π²Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ Π³ΡΡΠΏΠΏΡ, Π΅Π΅ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡΡΡ, ΠΊΠ°ΠΊ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΡΠ΅ΠΊΡΡ, ΠΊΠΎΠ½ΡΡΡΡ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠ° Π½Π΅ Π±ΡΠ΄ΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡΡΡ. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ°ΠΊΠΆΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π»ΠΈΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ (K). ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠ°ΡΡΠΌΠΎΡΡΠΈΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠ΅ΠΉΠΌΠ°. ΠΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΡΡΡ ΠΊ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅ΠΌΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΡΠ΅ΠΉΠΌΡ, Π° Π½Π΅ ΠΊ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌ Π³ΡΡΠΏΠΏΡ. ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎΠ± ΡΡΠΎΠΌ Π² ΡΠ°Π·Π΄Π΅Π»Π΅, ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π½ΠΎΠΌ ΡΡΠ΅ΠΉΠΌΠ°ΠΌ!
Π€ΡΠ΅ΠΉΠΌΡ
Π€ΡΠ΅ΠΉΠΌ Π² Figma β ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΌΡ Π½Π°Π·ΡΠ²Π°Π΅ΠΌ Β«Π°ΡΡΠ±ΠΎΡΠ΄Β» Π² Π΄ΡΡΠ³ΠΈΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌ ΡΡΠ΅ΠΉΠΌΡ, ΠΊΠ°ΠΊ ΠΎΡΠ½ΠΎΠ²ΠΎΠΏΠΎΠ»Π°Π³Π°ΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΡΡΡΠΏΠ°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ ΠΈ / ΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π²Π°ΡΠ΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π€ΡΠ΅ΠΉΠΌΡ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ²Π»ΡΡΡΡΡ Π½Π΅ΠΎΡΡΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ ΡΠ°ΡΡΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Π² Figma.
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΡΠ³Π»ΡΠ±ΠΈΠΌΡΡ Π² ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΡΠ΅ΠΉΠΌΠΎΠ², Π΄Π°Π²Π°ΠΉΡΠ΅ Π±ΡΡΡΡΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΏΠΎΡΠΎΠ±Π° ΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ ΠΈ ΡΠ΄Π°Π»ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΡΠ΅ΠΉΠΌΠ°, ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΈΠΌ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΏΡΠΈ ΡΠ°Π·Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠ΅: β + Shift + G (Mac) ΠΈΠ»ΠΈ Ctrl + Shift + G (Win). Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ³Π»ΡΠ±ΠΈΠΌΡΡ Π² ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΈ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠ΅ΠΉΠΌΠΎΠ².
Π Π°Π·ΠΌΠ΅ΡΡ ΡΡΠ΅ΠΉΠΌΠΎΠ²
Π Π°Π·ΠΌΠ΅ΡΡ ΡΡΠ΅ΠΉΠΌΠΎΠ² ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΈΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠ»ΠΈ Π²Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΠΈΠ»ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΠ΅ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π½ΡΡΡΠΈ ΡΡΠ΅ΠΉΠΌΠ°, Π΅Π³ΠΎ Π³ΡΠ°Π½ΠΈΡΡ Π½Π΅ Π±ΡΠ΄ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡΡΡ. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠ΅ΠΉΠΌΠ° ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°Π»ΠΈΡΡ ΠΏΠΎΠ΄ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΆΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Β«Resize to FitΒ» Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΏΡΠ°Π²Π°.
Π’Π°ΠΊΠΆΠ΅ Π²Π°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π² Figma Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΡΡΠ΅ΠΉΠΌΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ ΡΡΠ΅ΠΉΠΌ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² Π΄ΡΡΠ³ΠΈΡ ΠΌΠ΅ΡΡΠ°Ρ , ΠΈ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΎΡΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΉ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΎΠ½ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅ΡΡΡ Π²ΠΎ ΡΡΠ΅ΠΉΠΌ.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡΠΌΠΈ
ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠ΅ΠΉΠΌΡ ΠΈ Π³ΡΡΠΏΠΏΡ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ. ΠΠ°ΠΊ ΡΠΆΠ΅ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡ ΡΠ°Π½Π΅Π΅, ΡΠ°Π·ΠΌΠ΅Ρ Π³ΡΡΠΏΠΏ Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ. Π Π°Π·ΠΌΠ΅ΡΡ ΡΡΠ΅ΠΉΠΌΠ° Π±ΡΠ΄ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ΄Π½Π°ΠΊΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π΄Π°ΡΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π»ΠΈΡΡΡ Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΡΠ΅ΠΉΠΌΠ°. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ Π½Π° Β«TopΒ» ΠΈ Β«LeftΒ».
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½Π°, ΠΊΠΎΠ³Π΄Π° Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΡ ΡΠ°Π½ΡΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠ΅ΠΉΠΌΠ°, ΡΡΠΎ ΠΎΠ±ΡΡΠ½ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΡΠ°Π·Π»ΠΈΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π³ΡΡΠΏΠΏΠ°ΠΌΠΈ, ΡΡΠ΅ΠΉΠΌΠ°ΠΌΠΈ ΠΈ ΡΡΠ΅ΠΉΠΌΠ°ΠΌΠΈ Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡΠΌΠΈ.
ΠΠΎΠ½ΡΠ΅Π½Ρ, Π²ΡΡ ΠΎΠ΄ΡΡΠΈΠΉ Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΡΠ΅ΠΉΠΌΠ°
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π³ΡΠ°Π½ΠΈΡΡ ΡΡΠ΅ΠΉΠΌΠ° ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ Π΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΡΠ½ΠΊΡΠΈΡ Β«clip contentΒ» (Π΄ΠΎΡΡΡΠΏΠ½Π°Ρ Π½Π° ΠΏΡΠ°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²) ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ. ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ²:
Π‘Π΅ΡΠΊΠΈ
Π‘Π΅ΡΠΊΠΈ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² (Layout grids) ΡΠ²Π»ΡΡΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ ΡΡΠ΅ΠΉΠΌΠΎΠ² ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΡΠ΅ΠΉΠΌΡ ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π² Π²Π°ΡΠ΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ΠΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ±Π»Π°ΡΡΠΈ Π²Π°ΡΠ΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈΠΌΠ΅Π»ΠΈ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΠ΅ ΡΠ΅ΡΠΊΠΈ. ΠΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π² Figma ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ ΡΠ΅ΡΠΊΠ°ΠΌΠΈ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ². Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ Π½Π° Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΡΠΎΠ²Π½Π΅ Π΅ΡΡΡ ΡΠ΅ΡΠΊΠ° ΠΈΠ· 2 ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π²ΡΠΎΡΠΈΡΠ½ΡΠΉ ΡΡΠ΅ΠΉΠΌ Π΄Π»Ρ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠ΅ΡΠΊΡ ΠΈΠ· 3 ΡΡΠΎΠ»Π±ΡΠΎΠ². ΠΡΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ, ΠΊΠΎΠ³Π΄Π° ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠ΅ΠΉΠΌΠ° Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ, Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΡΠΊΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ°.
ΠΡΠ²ΠΎΠ΄
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³ΡΡΠΏΠΏΡ ΠΈ ΡΡΠ΅ΠΉΠΌΡ (Π²ΠΌΠ΅ΡΡΠ΅ ΠΈΠ»ΠΈ ΠΏΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΡΡΠΈ) Π΄Π»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ².
ΠΠΎΡΠΎΡΠΊΠΎ ΠΎ Π³Π»Π°Π²Π½ΠΎΠΌ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π³ΡΡΠΏΠΏΡ, Π΅ΡΠ»ΠΈ:
ΠΠΎΡΠΎΡΠΊΠΎ ΠΎ Π³Π»Π°Π²Π½ΠΎΠΌ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠ΅ΠΉΠΌΡ, Π΅ΡΠ»ΠΈ:
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠ΅ΠΉΠΌΠΎΠ² ΠΈ Π³ΡΡΠΏΠΏ ΡΠΈΡΠ°ΠΉΡΠ΅ Π² Π½Π°ΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Π»ΠΈΡΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΠ· ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, Π½Π°ΠΆΠΌΠΈΡΠ΅ Π·Π΄Π΅ΡΡ, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠΎΠΏΠΈΡ ΡΠ°ΠΉΠ»Π° Π² Figma.
Π€ΡΠ΅ΠΉΠΌ Π² Figma
Π€ΡΠ΅ΠΉΠΌ Π² Figma
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅! Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Figma. Π Π½Π°ΡΠ½Π΅ΠΌ Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°, ΠΊΠ°ΠΊ ΡΡΠ΅ΠΉΠΌ.
Π€ΡΠ΅ΠΉΠΌ ΠΈΠ»ΠΈ Π°ΡΡΠ±ΠΎΡΠ΄ β ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Π€ΠΈΠ³ΠΌΠ΅. ΠΡΠΎ Π·Π°ΠΊΠΎΠ½ΡΠ΅Π½Π½ΡΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ ΡΠΊΡΠ°Π½ΠΎΠΌ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π΄Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠ΅ΠΉΠΌΠ° ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ»ΠΈ Π²ΡΠ±ΡΠ°ΡΡ Π³ΠΎΡΠΎΠ²ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½ΠΎΠ² ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² β Π½ΠΎΡΡΠ±ΡΠΊΠΎΠ², ΡΠ°ΡΠΎΠ², ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² β Π² ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΡΠ°Π²Π°.
Π€ΡΠ΅ΠΉΠΌ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ ΠΎΠ±ΡΠ΅ΠΊΡΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π±Ρ. ΠΠΎΠ³Π΄Π° Π²Ρ ΡΠΎΠ·Π΄Π°ΡΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π½ΡΡΡΠΈ ΡΡΠ΅ΠΉΠΌΠ°, Π² ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ»Π΅Π²Π° Π±ΡΠ΄ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΡΠ»ΠΎΠΈ. Π‘Π»ΠΎΠΈ Π² Π€ΠΈΠ³ΠΌΠ΅ β ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΡΡΠ΅ΠΉΠΌΠ°: ΠΎΠ±ΡΠ΅ΠΊΡΡ, ΡΠ΅ΠΊΡΡ, ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ Π²ΠΎ ΡΡΠ΅ΠΉΠΌ ΠΈΠ»ΠΈ ΡΠ°Π·Π±ΠΈΡΡ Π΅Π³ΠΎ Π½Π° ΠΎΠ±ΡΠ΅ΠΊΡΡ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΡΠΌΠΈ ΠΊΠ»Π°Π²ΠΈΡ
Windows | MacOS | |
---|---|---|
Ctrl + Alt + G | Cmd + Opt + G | ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΡ Π²ΠΎ ΡΡΠ΅ΠΉΠΌ |
Ctrl + Shift + G | Cmd + Shift + G | ΡΠ°Π·Π±ΠΈΡΡ ΡΡΠ΅ΠΉΠΌ Π½Π° ΠΎΠ±ΡΠ΅ΠΊΡΡ |
Π§ΡΠΎΠ±Ρ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΡ Π²ΠΎ ΡΡΠ΅ΠΉΠΌΠ΅ ΠΏΠΎ ΠΎΡΠΈ X/Y ΠΈΠ»ΠΈ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΠ°Π½Π΅Π»Ρ ΡΠΏΡΠ°Π²Π°.
ΠΠ±ΡΠ΅ΠΊΡΡ Π²Π½ΡΡΡΠΈ ΡΡΠ΅ΠΉΠΌΠ° ΠΌΠΎΠΆΠ½ΠΎ Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ. ΠΠΎΠΏΡΡΡΠΈΠΌ, Π²Ρ Π΄Π΅Π»Π°Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ°Π½ΠΈΡ ΡΠ°ΠΉΡΠ°. ΠΠ° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²Π½ΠΈΠ·Ρ ΡΠΊΡΠ°Π½Π° Ρ Π²Π°Ρ Π±ΡΠ΄ΡΡ ΠΊΠΎΠ½ΡΠ°ΠΊΡΡ: ΡΠ΅Π»Π΅ΡΠΎΠ½ ΠΈ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½Π°Ρ ΠΏΠΎΡΡΠ°. Π‘Π³ΡΡΠΏΠΏΠΈΡΡΠΉΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ ΠΈΠ· ΠΌΠ΅Π½Ρ Object β Group Selection ΠΈΠ»ΠΈ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ΠΌ ΠΊΠ»Π°Π²ΠΈΡ Ctrl (Cmd) + G. ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΠ»ΠΎΡΡ
ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² β ΠΎΠ½ΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΠ»ΠΈΡΡ Π² Π³ΡΡΠΏΠΏΡ. Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ Π²ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ ΡΠ°Π·ΠΎΠΌ.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΠΎ ΡΡΠ΅ΠΉΠΌΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Π°ΡΠ΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π±ΡΠ»Π° Π²ΡΠ΅Π³Π΄Π° Π² ΡΠ³Π»Ρ ΡΠΊΡΠ°Π½Π°, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠ΅ΠΉΠΌΠ° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ. ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡ Π²ΠΎ ΡΡΠ΅ΠΉΠΌΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Constraints Π² ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΏΡΠ°Π²Π°.
Π€ΡΠ΅ΠΉΠΌ β ΡΡΠΎ Π·Π°ΠΊΠΎΠ½ΡΠ΅Π½Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°ΡΠ°ΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΡΠ°ΠΉΠ»ΠΎΠΌ. ΠΡΠΈ ΡΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΠΈ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π²ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π²Π½ΡΡΡΠΈ ΡΡΠ΅ΠΉΠΌΠ°. ΠΡΠ»ΠΈ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»ΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΊΡΠ° Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΡΠ΅ΠΉΠΌΠ°, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠ΅ΡΡΡΡ ΡΠ°ΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΠ΅ΡΠ΅Π΄ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ, ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ ΠΏΡΠ΅Π²ΡΡ ΡΠ°ΠΉΠ»Π°, ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ Π½ΡΠΆΠ½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ.
ΠΡΠ»ΠΈ Π²Ρ Π½Π°ΡΠ»ΠΈ ΠΎΡΠΈΠ±ΠΊΡ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π²ΡΠ΄Π΅Π»ΠΈΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΡΠ΅ΠΊΡΡΠ° ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Ctrl+Enter.
ΠΠ°ΠΊ ΠΈ ΠΏΠΎΡΠ΅ΠΌΡ ΡΡΠΎΠΈΡ Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Figma
ΠΡΠΎΠΉ Π·Π°ΠΏΠΈΡΡΡ ΠΌΡ ΠΎΡΠΊΡΡΠ²Π°Π΅ΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΠΊΡΡΡ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ Ρ ΠΎΡΠ΅Ρ ΠΎΡΠ²ΠΎΠΈΡΡ Π½Π° Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½Π΅ΠΉΡΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Figma. ΠΠ΅ΡΡ ΠΊΡΡΡ Π² Π²ΠΈΠ΄Π΅ΠΎΡΠΎΡΠΌΠ°ΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΠΏΡΠΎΠΉΡΠΈ Π½Π° GeekBrains. ΠΡΠ΅ΠΏΠΎΠ΄Π°Π²Π°ΡΠ΅Π»Ρ β ΠΠ»ΡΡ ΠΠΎΠ»ΡΠ½ΡΠΊΠΈΠΉ, Π²Π΅Π΄ΡΡΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΡΠΈΡΡΠΎΠ²ΡΡ ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠ² Π² Β«ΠΠΎΡΡΠ΅ Π ΠΎΡΡΠΈΠΈΒ».
ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΎΠΈΡ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Figma?
ΠΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±Π»Π°Π΄Π°ΡΡ ΡΠΈΡΠΎΠΊΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡΡ ΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ Π±ΡΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΡΠΌ. Figma β ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ! ΠΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°:
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΡΠ±Π΅Π΄ΠΈΠ»ΠΈΡΡ, ΡΡΠΎ Figma ΡΡΠΎΠΈΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π΅Ρ ΠΈΠ·ΡΡΠ°ΡΡ, β ΠΏΠΎΡΠ° ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΡΠ°Π±ΠΎΡΠ΅!
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ Ρ Figma
Π¨Π°Π³ 1. Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ:
ΠΡΡΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΡΠΊΡΠΎΠΏΠ½ΡΡ Π²Π΅ΡΡΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
Π¨Π°Π³ 2. ΠΠ°Π³ΡΡΠ·ΠΊΠ° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Figma:
Π£ΡΠ°! Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ Π³ΠΎΡΠΎΠ²Ρ Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ. ΠΠ°ΠΏΡΡΠΊΠ°Π΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π°Π²ΡΠΎΡΠΈΠ·ΡΠ΅ΠΌΡΡ ΡΠ΅ΡΠ΅Π· Π±ΡΠ°ΡΠ·Π΅Ρ (ΡΠ΅ΠΌ ΠΆΠ΅ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΌ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π»ΠΈΡΡ) ΠΈ ΠΏΡΠΈΡΡΡΠΏΠ°Π΅ΠΌ ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠΌΡ ΡΡΠΎΠΊΡ.
ΠΠ΅ΡΠ²ΡΠΉ ΡΡΠΎΠΊ ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ°Π±ΠΎΡΡ Swatch Library, Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΡΠ²Π΅ΡΠΎΠ². Π£Π·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ Π΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ, ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ, ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΡΠ²Π΅ΡΠ° ΠΈ Π½Π°ΡΠ°ΡΡ Ρ Π½Π΅ΠΉ ΡΠ°Π±ΠΎΡΡ.
Π Π°Π½Π΅Π΅ ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ ΠΈ Π·Π°ΠΏΡΡΡΠΈΠ»ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Figma. ΠΠΎΡ ΡΡΠΎ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ:
Π‘ΠΎΠ·Π΄Π°ΡΠΌ Π½ΠΎΠ²ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ, Π½Π°ΠΆΠ°Π² Π½Π° ΠΏΠ»ΡΡΠΈΠΊ Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ, ΠΈ ΡΡΠ°Π·Ρ Π΄Π°ΡΠΌ Π΅ΠΌΡ ΡΠ΄ΠΎΠ±Π½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅. ΠΠ°Π»Π΅Π΅ ΡΠ°ΡΠΊΡΡΠ²Π°Π΅ΠΌ ΡΠΏΠΈΡΠΎΠΊ ΡΡΡΠ°Π½ΠΈΡ Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ ΠΈ Π½Π°Π·ΡΠ²Π°Π΅ΠΌ ΠΏΠ΅ΡΠ²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Swatch Library. ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡ Π² Figma β ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π½Π° ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ ΡΠ°ΡΡΠΈ. ΠΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅.
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Figma
Π€ΡΠ΅ΠΉΠΌΡ
ΠΠ½ΡΡΡΡΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΠΌ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ, β ΡΡΠ΅ΠΉΠΌΡ.
Π€ΡΠ΅ΠΉΠΌ β ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Figma. ΠΡΠΎ Π·Π°ΠΊΠΎΠ½ΡΠ΅Π½Π½ΡΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ ΡΠΊΡΠ°Π½ΠΎΠΌ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ΅ΠΊΡΡ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π΄Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠ΅ΠΉΠΌΠ° ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ»ΠΈ Π²ΡΠ±ΡΠ°ΡΡ Π³ΠΎΡΠΎΠ²ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½ΠΎΠ² ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² Π² ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΡΠ°Π²Π°.
ΠΠ΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΡΠΎΡΠΌΡ
ΠΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ β Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΡΠΎΡΠΌΡ. Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ Shape Tool. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° β Π² ΡΠΎΡΠΌΠ΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠ², Π»ΠΈΠ½ΠΈΠΉ, ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠ², ΡΡΡΠ΅Π»ΠΎΠΊ, ΠΊΡΡΠ³ΠΎΠ², Π·Π²ΡΠ·Π΄.
Π‘ ΡΠ΅Π³ΠΎ ΡΡΠΎΠΈΡ Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ Π½Π°Π΄ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ
ΠΡΠ°ΠΊ, ΠΏΡΠΈΡΡΡΠΏΠ°Π΅ΠΌ. Π‘ΠΎΠ·Π΄Π°ΡΠΌ ΡΡΠ΅ΠΉΠΌ Desktop 1440×1024, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠΎΡΠΌΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 128Ρ 128, Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ ΠΎΡΡΠ΅Π½ΠΎΠΊ ΠΈ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ Π² ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΡΠ°Π²Π°.
Π‘ΠΎΠ·Π΄Π°ΡΠΌ ΡΠ²ΠΎΡ ΠΏΠ°Π»ΠΈΡΡΡ ΡΠ²Π΅ΡΠΎΠ², Π΄ΡΠ±Π»ΠΈΡΡΡ ΠΏΠ΅ΡΠ²ΡΡ ΡΠΎΡΠΌΡ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ΠΌ ΠΊΠ»Π°Π²ΠΈΡ Ctrl+D.
Π¦Π²Π΅ΡΠ° Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎ ΠΈΠ»ΠΈ ΠΏΠΈΠΏΠ΅ΡΠΊΠΎΠΉ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π»ΡΡΡΠ΅Π΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΎΡΡΠ΅Π½ΠΊΠΎΠ².
ΠΠΎΠ³Π΄Π° Π²ΡΡ ΠΏΠ°Π»ΠΈΡΡΠ° Π³ΠΎΡΠΎΠ²Π°, ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡΡΠΈΠ²ΡΠΈΠ΅ΡΡ ΡΠ²Π΅ΡΠ° β ΡΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΡΠΎΠΌ.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡ Style Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΡΠ΅ΡΠ΅Π· + ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΠΌ Π½Π°ΡΠΈ ΡΠ²Π΅ΡΠ° Ρ ΠΏΠΎΠ½ΡΡΠ½ΡΠΌΠΈ Π²Π°ΠΌ Π½Π°Π·Π²Π°Π½ΠΈΡΠΌΠΈ. ΠΠ΅ΡΠ²Π°Ρ ΡΠ°ΡΡΡ Π½Π°Π·Π²Π°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡ ΡΠ²Π΅ΡΠ°, Π° Π²ΡΠΎΡΠ°Ρ, ΠΏΠΎΡΠ»Π΅ ΡΠ»Π΅ΡΠ°, Π±ΡΠ΄Π΅Ρ Π΅Π³ΠΎ ΠΈΠΌΠ΅Π½Π΅ΠΌ. ΠΠ°ΡΠΌ Π½Π°Π·Π²Π°Π½ΠΈΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π³ΡΡΠΏΠΏΠ΅ ΡΠ²Π΅ΡΠΎΠ² ΠΈ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ.
Π’Π΅ΠΏΠ΅ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π±ΡΡΡΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΈΠ³ΡΡΡ ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ³ΠΎ Π½Π°ΠΌ ΡΠ²Π΅ΡΠ°.
ΠΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠΌ Π½ΠΎΠ²ΡΡ Π·Π°Π΄Π°ΡΡ: ΠΊΠ»ΠΈΠ΅Π½ΡΡ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΠΈΡΡ ΡΠ²Π΅ΡΠ° Π½Π° ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ ΠΈ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡ ΠΏΠΎΠ²ΡΠΎΡΠΈΡΡ. ΠΠ΅Π³ΠΊΠΎ! ΠΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ΠΌ ΠΊΠ»Π°Π²ΠΈΡ Ctrl+Shift+K, ΡΠΎΠ·Π΄Π°ΡΠΌ ΡΠΈΠ³ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΠ΅ΡΠ΅Π΄Π°Π΄ΠΈΠΌ ΡΠ²Π΅ΡΠ°, ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΈΠΏΠ΅ΡΠΊΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΡΠ΅ΠΌ ΠΈΡ .
Π£ΡΠ»ΠΎΠΆΠ½ΠΈΠΌ Π·Π°Π΄Π°ΡΡ: Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ. Π‘ΠΎΠ·Π΄Π°ΡΠΌ Π΅ΡΡ ΠΎΠ΄ΠΈΠ½ ΡΡΠ΄ ΡΠΈΠ³ΡΡ, ΠΎΡΠΊΡΡΠ²Π°Π΅ΠΌ ΠΏΠ°Π»ΠΈΡΡΡ ΡΠ²Π΅ΡΠΎΠ² ΠΈ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΡΠΈΠΏ Π·Π°Π»ΠΈΠ²ΠΊΠΈ Linear. ΠΠ°Π»Π΅Π΅ ΠΏΠΈΠΏΠ΅ΡΠΊΠΎΠΉ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ Π²Π΅ΡΡ Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡΠ°ΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ 100% ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ Ρ ΠΎΠ±ΠΎΠΈΡ ΠΊΡΠ°ΡΠ².
ΠΡΠ°Π΄ΠΈΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ ΠΈ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΡΠ²Π΅ΡΠ°, ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ. ΠΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡΠ΅ΠΉ Π»ΠΈΠ½ΠΈΠΈ.
ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π½Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΡΠ²Π΅ΡΠΎΠ², Π½Π°ΡΡΠΈΠ»ΠΈΡΡ Π΄Π΅Π»Π°ΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈΡ Π² Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ. ΠΠ°ΡΠ°Π»ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ! Π£Π²ΠΈΠ΄ΠΈΠΌΡΡ Π² ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ°ΡΡΡΡ ΠΊΡΡΡΠ°.
ΠΡΠΎΠΉ Π·Π°ΠΏΠΈΡΡΡ ΠΌΡ ΠΎΡΠΊΡΡΠ²Π°Π΅ΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΠΊΡΡΡ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ Ρ ΠΎΡΠ΅Ρ ΠΎΡΠ²ΠΎΠΈΡΡ Π½Π° Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½Π΅ΠΉΡΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Figma. ΠΠ΅ΡΡ ΠΊΡΡΡ Π² Π²ΠΈΠ΄Π΅ΠΎΡΠΎΡΠΌΠ°ΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΠΏΡΠΎΠΉΡΠΈ Π½Π° GeekBrains. ΠΡΠ΅ΠΏΠΎΠ΄Π°Π²Π°ΡΠ΅Π»Ρ β ΠΠ»ΡΡ ΠΠΎΠ»ΡΠ½ΡΠΊΠΈΠΉ, Π²Π΅Π΄ΡΡΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΡΠΈΡΡΠΎΠ²ΡΡ ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠ² Π² Β«ΠΠΎΡΡΠ΅ Π ΠΎΡΡΠΈΠΈΒ».
ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΎΠΈΡ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Figma?
ΠΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±Π»Π°Π΄Π°ΡΡ ΡΠΈΡΠΎΠΊΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡΡ ΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ Π±ΡΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΡΠΌ. Figma β ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ! ΠΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°:
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΡΠ±Π΅Π΄ΠΈΠ»ΠΈΡΡ, ΡΡΠΎ Figma ΡΡΠΎΠΈΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π΅Ρ ΠΈΠ·ΡΡΠ°ΡΡ, β ΠΏΠΎΡΠ° ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΡΠ°Π±ΠΎΡΠ΅!
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ Ρ Figma
Π¨Π°Π³ 1. Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ:
ΠΡΡΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΡΠΊΡΠΎΠΏΠ½ΡΡ Π²Π΅ΡΡΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
Π¨Π°Π³ 2. ΠΠ°Π³ΡΡΠ·ΠΊΠ° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Figma:
Π£ΡΠ°! Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ Π³ΠΎΡΠΎΠ²Ρ Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ. ΠΠ°ΠΏΡΡΠΊΠ°Π΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π°Π²ΡΠΎΡΠΈΠ·ΡΠ΅ΠΌΡΡ ΡΠ΅ΡΠ΅Π· Π±ΡΠ°ΡΠ·Π΅Ρ (ΡΠ΅ΠΌ ΠΆΠ΅ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΌ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π»ΠΈΡΡ) ΠΈ ΠΏΡΠΈΡΡΡΠΏΠ°Π΅ΠΌ ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠΌΡ ΡΡΠΎΠΊΡ.
ΠΠ΅ΡΠ²ΡΠΉ ΡΡΠΎΠΊ ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ°Π±ΠΎΡΡ Swatch Library, Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΡΠ²Π΅ΡΠΎΠ². Π£Π·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ Π΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ, ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ, ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΡΠ²Π΅ΡΠ° ΠΈ Π½Π°ΡΠ°ΡΡ Ρ Π½Π΅ΠΉ ΡΠ°Π±ΠΎΡΡ.
Π Π°Π½Π΅Π΅ ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ ΠΈ Π·Π°ΠΏΡΡΡΠΈΠ»ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Figma. ΠΠΎΡ ΡΡΠΎ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ:
Π‘ΠΎΠ·Π΄Π°ΡΠΌ Π½ΠΎΠ²ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ, Π½Π°ΠΆΠ°Π² Π½Π° ΠΏΠ»ΡΡΠΈΠΊ Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ, ΠΈ ΡΡΠ°Π·Ρ Π΄Π°ΡΠΌ Π΅ΠΌΡ ΡΠ΄ΠΎΠ±Π½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅. ΠΠ°Π»Π΅Π΅ ΡΠ°ΡΠΊΡΡΠ²Π°Π΅ΠΌ ΡΠΏΠΈΡΠΎΠΊ ΡΡΡΠ°Π½ΠΈΡ Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ ΠΈ Π½Π°Π·ΡΠ²Π°Π΅ΠΌ ΠΏΠ΅ΡΠ²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Swatch Library. ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡ Π² Figma β ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π½Π° ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ ΡΠ°ΡΡΠΈ. ΠΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅.
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Figma
Π€ΡΠ΅ΠΉΠΌΡ
ΠΠ½ΡΡΡΡΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΠΌ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ, β ΡΡΠ΅ΠΉΠΌΡ.
Π€ΡΠ΅ΠΉΠΌ β ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Figma. ΠΡΠΎ Π·Π°ΠΊΠΎΠ½ΡΠ΅Π½Π½ΡΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ ΡΠΊΡΠ°Π½ΠΎΠΌ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ΅ΠΊΡΡ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π΄Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠ΅ΠΉΠΌΠ° ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ»ΠΈ Π²ΡΠ±ΡΠ°ΡΡ Π³ΠΎΡΠΎΠ²ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½ΠΎΠ² ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² Π² ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΡΠ°Π²Π°.
ΠΠ΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΡΠΎΡΠΌΡ
ΠΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ β Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΡΠΎΡΠΌΡ. Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ Shape Tool. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° β Π² ΡΠΎΡΠΌΠ΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠ², Π»ΠΈΠ½ΠΈΠΉ, ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠ², ΡΡΡΠ΅Π»ΠΎΠΊ, ΠΊΡΡΠ³ΠΎΠ², Π·Π²ΡΠ·Π΄.
Π‘ ΡΠ΅Π³ΠΎ ΡΡΠΎΠΈΡ Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ Π½Π°Π΄ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ
ΠΡΠ°ΠΊ, ΠΏΡΠΈΡΡΡΠΏΠ°Π΅ΠΌ. Π‘ΠΎΠ·Π΄Π°ΡΠΌ ΡΡΠ΅ΠΉΠΌ Desktop 1440×1024, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠΎΡΠΌΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 128Ρ 128, Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ ΠΎΡΡΠ΅Π½ΠΎΠΊ ΠΈ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ Π² ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΡΠ°Π²Π°.
Π‘ΠΎΠ·Π΄Π°ΡΠΌ ΡΠ²ΠΎΡ ΠΏΠ°Π»ΠΈΡΡΡ ΡΠ²Π΅ΡΠΎΠ², Π΄ΡΠ±Π»ΠΈΡΡΡ ΠΏΠ΅ΡΠ²ΡΡ ΡΠΎΡΠΌΡ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ΠΌ ΠΊΠ»Π°Π²ΠΈΡ Ctrl+D.
Π¦Π²Π΅ΡΠ° Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎ ΠΈΠ»ΠΈ ΠΏΠΈΠΏΠ΅ΡΠΊΠΎΠΉ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π»ΡΡΡΠ΅Π΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΎΡΡΠ΅Π½ΠΊΠΎΠ².
ΠΠΎΠ³Π΄Π° Π²ΡΡ ΠΏΠ°Π»ΠΈΡΡΠ° Π³ΠΎΡΠΎΠ²Π°, ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡΡΠΈΠ²ΡΠΈΠ΅ΡΡ ΡΠ²Π΅ΡΠ° β ΡΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΡΠΎΠΌ.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡ Style Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΡΠ΅ΡΠ΅Π· + ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΠΌ Π½Π°ΡΠΈ ΡΠ²Π΅ΡΠ° Ρ ΠΏΠΎΠ½ΡΡΠ½ΡΠΌΠΈ Π²Π°ΠΌ Π½Π°Π·Π²Π°Π½ΠΈΡΠΌΠΈ. ΠΠ΅ΡΠ²Π°Ρ ΡΠ°ΡΡΡ Π½Π°Π·Π²Π°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡ ΡΠ²Π΅ΡΠ°, Π° Π²ΡΠΎΡΠ°Ρ, ΠΏΠΎΡΠ»Π΅ ΡΠ»Π΅ΡΠ°, Π±ΡΠ΄Π΅Ρ Π΅Π³ΠΎ ΠΈΠΌΠ΅Π½Π΅ΠΌ. ΠΠ°ΡΠΌ Π½Π°Π·Π²Π°Π½ΠΈΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π³ΡΡΠΏΠΏΠ΅ ΡΠ²Π΅ΡΠΎΠ² ΠΈ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ.
Π’Π΅ΠΏΠ΅ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π±ΡΡΡΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΈΠ³ΡΡΡ ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ³ΠΎ Π½Π°ΠΌ ΡΠ²Π΅ΡΠ°.
ΠΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠΌ Π½ΠΎΠ²ΡΡ Π·Π°Π΄Π°ΡΡ: ΠΊΠ»ΠΈΠ΅Π½ΡΡ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΠΈΡΡ ΡΠ²Π΅ΡΠ° Π½Π° ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ ΠΈ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡ ΠΏΠΎΠ²ΡΠΎΡΠΈΡΡ. ΠΠ΅Π³ΠΊΠΎ! ΠΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ΠΌ ΠΊΠ»Π°Π²ΠΈΡ Ctrl+Shift+K, ΡΠΎΠ·Π΄Π°ΡΠΌ ΡΠΈΠ³ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΠ΅ΡΠ΅Π΄Π°Π΄ΠΈΠΌ ΡΠ²Π΅ΡΠ°, ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΈΠΏΠ΅ΡΠΊΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΡΠ΅ΠΌ ΠΈΡ .
Π£ΡΠ»ΠΎΠΆΠ½ΠΈΠΌ Π·Π°Π΄Π°ΡΡ: Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ. Π‘ΠΎΠ·Π΄Π°ΡΠΌ Π΅ΡΡ ΠΎΠ΄ΠΈΠ½ ΡΡΠ΄ ΡΠΈΠ³ΡΡ, ΠΎΡΠΊΡΡΠ²Π°Π΅ΠΌ ΠΏΠ°Π»ΠΈΡΡΡ ΡΠ²Π΅ΡΠΎΠ² ΠΈ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΡΠΈΠΏ Π·Π°Π»ΠΈΠ²ΠΊΠΈ Linear. ΠΠ°Π»Π΅Π΅ ΠΏΠΈΠΏΠ΅ΡΠΊΠΎΠΉ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ Π²Π΅ΡΡ Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡΠ°ΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ 100% ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ Ρ ΠΎΠ±ΠΎΠΈΡ ΠΊΡΠ°ΡΠ².
ΠΡΠ°Π΄ΠΈΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ ΠΈ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΡΠ²Π΅ΡΠ°, ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ. ΠΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡΠ΅ΠΉ Π»ΠΈΠ½ΠΈΠΈ.
ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π½Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΡΠ²Π΅ΡΠΎΠ², Π½Π°ΡΡΠΈΠ»ΠΈΡΡ Π΄Π΅Π»Π°ΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈΡ Π² Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ. ΠΠ°ΡΠ°Π»ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ! Π£Π²ΠΈΠ΄ΠΈΠΌΡΡ Π² ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ°ΡΡΡΡ ΠΊΡΡΡΠ°.