ΠΠ»Π°ΡΡΠΎΡΠΌΠ°: Π²Π΅Π±, iOS, Android. ΠΠ°ΡΠ΅Π³ΠΎΡΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ: Π‘ΠΎΡ ΡΠ΅ΡΡ. ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΊΡΠ°Π½ΠΎΠ²: ΠΠ½ΠΎΠΏΠΊΠΈ. ΠΡΡΡ ΡΠ΅ΡΠ΅ΡΠ΅Π½Ρ. ΠΡΠΆΠ½ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΡΡΠΈΠ»Π΅ Liquid Glass / soap bubble / polished glass. ΠΠ½Π΅ Π½ΡΠΆΠ½Ρ Π½Π΅ ΡΠΊΡΠ°Π½Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ Figma-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ 5 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²: 1. Primary CTA button Π Π°Π·ΠΌΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ: 220 ? 60 Π’Π΅ΠΊΡΡ: βΠ‘ΠΎΠ·Π΄Π°ΡΡ ΠΌΠ°ΡΡβ 2. Small primary button Π Π°Π·ΠΌΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ: 140 ? 44 Π’Π΅ΠΊΡΡ: βΠΡΠΊΡΡΡΡβ 3. Active segmented tab Π Π°Π·ΠΌΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ: 160 ? 52 Π’Π΅ΠΊΡΡ: βΠΠ°ΡΡΠΈβ 4. Active filter chip Π Π°Π·ΠΌΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ: 80 ? 40 Π’Π΅ΠΊΡΡ: βΠΡΠ΅β 5. Inactive glass chip Π Π°Π·ΠΌΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ: 140 ? 44 Π’Π΅ΠΊΡΡ: βΠ‘Π΅Π³ΠΎΠ΄Π½Ρβ Π‘ΡΠΈΠ»Ρ: * liquid glass; * ΡΡΡΠ΅ΠΊΡ ΠΌΡΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠ·ΡΡΡ; * ΠΏΡΠΎΠ·ΡΠ°ΡΠ½Π°Ρ Π²ΡΠΏΡΠΊΠ»Π°Ρ ΡΡΠ΅ΠΊΠ»ΡΠ½Π½Π°Ρ Π»ΠΈΠ½Π·Π°; * ΠΌΡΠ³ΠΊΠΈΠΉ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ Π»Π°ΠΉΠΌΠΎΠ²ΡΠΉ tint; * ΡΠ΅ΡΠΎ-Π³ΠΎΠ»ΡΠ±ΠΎΠΉ reflection ΡΠΏΡΠ°Π²Π°/ΡΠ½ΠΈΠ·Ρ; * ΡΡΠΊΠ°Ρ ΡΠΎΠ½ΠΊΠ°Ρ ΡΡΠ΅ΠΊΠ»ΡΠ½Π½Π°Ρ ΠΊΡΠΎΠΌΠΊΠ°; * Π±Π΅Π»ΠΎ-ΡΠ΅ΡΠ΅Π±ΡΡΠ½ΡΠΉ Π²Π΅ΡΡ
Π½ΠΈΠΉ glossy highlight; * Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡΠ½ΡΠΉ glare/ΠΎΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅; * premium, Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎ, Π±Π΅Π· ΠΊΠΈΡΠ»ΠΎΡΠ½ΠΎΡΡΠΈ. ΠΡΠΆΠ½Π° ΡΡΡΡΠΊΡΡΡΠ° ΡΠ»ΠΎΡΠ² Π² Figma, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΌΠΎΠ³ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠΈ ΡΡΠΎ Π² React/CSS: * base glass * lime tint * gray-blue reflection * top glossy highlight * diagonal glare * rim/stroke * text ΠΡΠ΅ ΡΠ»ΠΎΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌΡΠΌΠΈ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΠΎ Π½Π°Π·Π²Π°Π½Ρ. ΠΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΡΠ΅ΡΠ΅Π· Figma Components Ρ Π²Π°ΡΠΈΠ°Π½ΡΠ°ΠΌΠΈ: CTA / Small / Tab Active / Chip Active / Chip Inactive. Π€ΠΎΡΠΌΠ°Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°: * Figma-ΡΠ°ΠΉΠ»; * ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π½Π° ΡΡΠΌΠ½ΠΎΠΌ ΡΠΎΠ½Π΅; * ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΡΠΎΠ½Π΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ; * Π΄Π°ΡΡ ΠΊΡΠ°ΡΠΊΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠ»ΠΎΡΠ² ΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ²: fill, stroke, opacity, blur, shadows.