Hozzon létre egy reagáló műszerfalat a figmával

Sep 17, 2025

kézikönyv

A Figma grafikus eszköz az UI tervezők számára. Egyszerű felülete van, és lehetővé teszi, hogy együttműködjön a csapattársaival való munkavégzéshez. Ha offline állapotban szeretne dolgozni, akkor az asztali alkalmazást választhatja. Alternatív megoldásként a Figma bármely operációs rendszeren (Hello, Windows) működik, így egyáltalán nem kell telepíteni semmit. És az első lépések könnyűek - importálhatja az előző elrendezést a vázlatból.

Válasszon egy weboldal építőt: 16 felső szerszámok

A Figma-ban létrehozhat mindent, amire szüksége van az interfészhez, az illusztrált vektorikonoktól az egyéni elrendezésekhez. A multiplayer szerkesztés sok időt takaríthat meg a tervezési csapatok számára, mivel ez azt jelenti, hogy az összes csapat tag ugyanabban az időben működhet. És ezek még mindig nem mindegyik nagyszerű tulajdonságai.

Ebben a bemutatóban megmutatom, hogyan kell beállítania a figma-t, akkor sétálhatsz, hogyan hozhat létre mobilalkalmazást, lépésről lépésre. Ebben az esetben megtervezzük a műszerfalat egy fiktív statisztikai alkalmazáshoz. Ha végzett, akkor képes lesz arra, hogy különböző interfészeket hozzon létre a figma-ban, és valós időben dolgozzon rájuk.

01. Regisztráció

Először is, fel kell jelentkeznie www.figma.com . Döntse el, hogy szeretné-e használni a szerszámot a böngészőben, vagy töltse le az asztali alkalmazást. Az asztali verzió letöltéséhez lépjen a Hamburger menübe a bal felső sarokban, és kattintson a "Get Desktop alkalmazás" gombra.

02. Hozzon létre egy alkotót és rácsot

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — Adjon hozzá egy kiindulási rácsot, hogy az elemeket harmonikusan állítsa be (kattintson a képre a nagyításhoz)

Találat A hozzon létre egy képet. Kiválaszthatja az egyik előbeállítást, vagy hozzon létre saját egyedi méretét. Ehhez a projekthez telefonon fogunk használni a telefon & gt; iphone 7 (375x667px). Grid létrehozásához először válassza ki az alkotót. Ezután a jobb oldali oldalsávon találja az "Elrendezés rácsot", és nyomja meg a "+" gombot. Állítsa be az oszlopszámot: 6, csatorna: 16, Margins: 8 és típusa: Stretch.

03. Rajzoljon egy téglalapot a háttérben

Kezdjük a háttérrel. nyomja meg R Ahhoz, hogy felállítsa a téglalap eszközt, rajzoljon egy téglalapot # 5F98FA, nincsenek határok nélkül. Állítsa be a méreteket 375x363-ra a jobb oldali tulajdonságpanel segítségével.

04. Adjon hozzá egy állapotsávot

Set the gradient for the status bar using the properties panel on the right on the screen. Here you can adjust the colour options to create a linear gradient (click image to enlarge) — Állítsa be az állapotsor színátmenetét a képernyőn jobb oldali tulajdonságpanel segítségével. Itt beállíthatja a színbeállításokat egy lineáris gradiens létrehozásához (kattintson a képre a nagyításhoz)

Ezután egy állapotsávot szeretnénk elhelyezni a képernyő tetején. nyomja meg R Szélesség beállítása: 375, magasság: 64, pozíció (x: 0; y: 0). A navigációs sávunkhoz állítsa be a gradiens kitöltését a jobb oldalon lévő ingatlanfelügyelő panel segítségével. Keresse meg a "Fill" opciót, nyomja meg a Color Preview elemet, és válassza a "Lineáris" lehetőséget a legördülő menüből. A tetején lévő színnek a # 77a6f7, és az alsó # 5a93f5 (az opacitás 100% -os).

05. Illessze IOS állapotsávot

Sajnos, a figma nem tartalmaz iOS UI elemeket alapértelmezés szerint. Azonban van egy "mintafájl", amely IOS App Design, így kölcsönözhetjük az állapotsávot. Másolja ki a fényállapot-sáv opciót, illessze be az aktuális fájlba, és helyezze el (x: 0, Y: 0). A szöveges eszköz használata ( T ), Kattintson a Művészlapra, hogy hozzáadjon egy fejlécet a navigációs sávhoz. Elmentem az Avenir nehéz, 15px, #ffffff. Igazítsa a fejlécet vízszintes központ, Y: 33.

06. Hozzon létre egy hátsó ikont

A bal oldalán a navigációs sávnak "vissza" ikonra van szükség. Ezt a karcolásból fogom létrehozni. Hozzon létre egy téglalapot 14x14px, 45 fokos forgás, x: 14; Y: 43. Duplikálja ezt a téglalapot, és helyezze el X: 18-ra; Y: 43. Válassza ki mindkét téglalapot, és a felső menü alatt megy a Boolean Groups & GT; Kivonja a választást. Ezt követően menj vissza a logikai csoportokba & gt; Lapos kiválasztása, vagy nyomja meg a gombot cmd + e .

07. Befejezze a nyíl ikont

A nyíl ikonunk majdnem kész. Most már csak be kell állítani a szélességét és magasságát a numerikus értékeket - az én esetemben szélesség: 12px; Magasság: 20px. Az utolsó lépés az, hogy a kitöltési színt a #FFFFFF-hez állítsa be.

08. Hozzon létre egy grafikont

Most létrehozunk egy grafikonot. Először is, néhány iránymutatásba kerülünk. Válassza ki a téglalap eszközt ( R ) és az X: 24 Y: 147 beállítása; Szélesség: 1; Magasság: 166; Töltse ki a színét # B3DCFF és opacity 20%.

Ez a téglalap négyszer 80px marginokkal. Az alján minden iránymutatást, mi kell hozzá egy dátum címke segítségével szöveges rétegek (február 2. ",„február 9”,„február 16”,„február 23”,„március 1”). Az Avenir Mediumot használtam, 11px, # C1D8FF.

09. Az adatvonal készítése

A toll eszközzel ( P ) Vektorot kell létrehoznunk az adatvonal képviseletére. Kattintson és húzza a Bézier pont létrehozásához. Ez az alaknak 4px stroke és nincs kitöltése, #FFFFFF.

Adjunk hozzá egy csepp árnyékot, hogy segítsen a vonal kiemelkedése: Kattintson a "+" gombra a Effects szakaszon, és válassza a "Drop Shadow" lehetőséget. Használja a következő beállításokat, hogy sima és elegáns árnyékot készítsen: Blur: 3px, Y: 7PX, # 2951FF, Opacity: 100%.

10. Adja meg a részleteket a grafikonhoz

Use the Text tool to add values to the places the guidelines intersect with the data line — Használja a Szöveges eszközt az értékek hozzáadásához Az iránymutatások metszi az adatvonalral

A pontokon, ahol az iránymutatások metszi az adatvonalat, amelyek körvonalakat fogunk hozzáadni. Ezúttal az ellipszis eszközt használjuk ( O ), amelyet a téglalap eszközt kísérő legördülő menüben talál. Rajzoljon 8x8px köröket minden egyes kereszteződésen, és állítsa be a kitöltési színt a # 5f98FA-ra. A stroke-t hozzá kell adnunk: kattintson a "+" gombra a stroke szakasz mellett, állítsa be a súlyt: 2px és igazítsa a központot.

11. Végső érintések

A grafikon szakasz befejezéséhez csak értékeket kell hozzáadnunk a metszéspontokhoz. A szöveges eszközzel ( T ) Válassza ki avenir fekete, 11px, # 1f4991.

12. Három tájékoztató doboz

A vonalgrafikon alatt három olyan cellát fogunk létrehozni, amelyek több információt jelenítenek meg. A szöveges eszköz használata ( T ) Hozzunk létre első címsorunkat: "A részvények becsült értéke": x: 16; Y: 391, Avenir Medium, 15px, # 5d7eb6. A cella jobb oldalán helyezze el az értéket "$ 1,115", szövegstílus: avenir nehéz, 22px, # 5F98FA, szöveges igazítás: bal, x: 287; Y: 387.

13. Elválasztó készítése

Rajzoljon egy 1px magasságú téglalapot, és a képernyő teljes szélességét (# F5F5F5, X: 0, Y: 435) húzza - ez a sejtek közötti szeparátorként működik. Válassza ki a fejlécet, az értéket és az elválasztót, és hozzon létre egy csoportot ( cmd + g ).

14. Headings hozzáadása

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — A grafikon alatt három cella lesz, amely kulcsfontosságú adatokat mutat (kattintson a képre a nagyításhoz)

Duplikálja ezt a csoportot, így három csoportja van 24px függőleges távolsággal közöttük. Változtassa meg a második fejezetet a "teljes tagok" és a harmadik csoport, amely a "barátok aláírása", és frissíti a releváns értékeket.

15. Rajzoljon és igazítsa egy másik téglalapot

Most hozzáadunk egy hívást a cselekvésre. Rajzoljon egy téglalapot az utolsó cella alatt, Szélesség: 195; Magasság: 44, Y-tengely távolság az utolsó elválasztótól 21px.

Az igazítási eszközök használata vízszintes központ segítségével állítsa fel a téglalapot. Ezután állítsa be a kitöltési színt a # 5f98FA-ra és a kerekségre 22-re (a "Forgatás" után megtalálja ezt a mezőt a Tulajdonságok panelen). Ezután hozzáad egy csepp árnyékhatást (szín: # #Abdaff; Opacity: 100%, Y: 5, Blur: 11).

16. Tegyen szöveget a gombra

Szöveg hozzáadása a gombhoz a szöveges eszköz segítségével ( T ): "További részvények!" Állítsa be ezt az avenir fekete, 15px, #ffffff. Illessze a szöveget a gomb középpontjával. Végül csoportosítsa az összes elemet, és nevezze meg őket megfelelően.

17. Legyen reagálva

Most be kell állítanunk az elrendezést, így a különböző iphonesre (320x568, 375x667 és 414x736) reagál. Ehhez olyan korlátokat kell használnunk, amelyek a jobb oldalon található Tulajdonságok menüben találhatók.

18. Az elrendezés jobb megszerzése

Ha a vízszintes legördülő "balra" vagy "jobbra" lehetőséget választja, akkor a csoport a képernyő kiválasztott oldalára fog, és nem fogja megnyújtani. Ha a "Center" opciót választja, a csoport vagy a réteg megnyílik, így kitölti a képernyő szélességét. Meg kell tennünk az állapotsávot a helyén, így a "jobb és a" bal oldali "opciót szeretnénk (vagy tartsa lenyomva a cmd-t", és kattintson a bal és jobb sávok a diagramon).

19. Tesztelje meg

Próbáljuk ki ezt. A kiválasztott állapotsor segítségével nyomja meg a "jobb & amp; bal" opciót. Válasszon ki egy alkotót, és az iPhone 7 helyett válassza az iPhone 7 Plus lehetőséget. Ez akkor működik, ha az iPhone SE méretét választja.

20. Ellenőrizze az egyes réteget

Tekintsük a réteg többi részét. A navigációs sáv hátteréhez szeretnénk használni a "jobb + balra". A navigációs sáv címe: "Center". A hátsó nyíl ikonra a legjobb, ha a "bal" opciót használja - így a nyíl a képernyő bal oldalára kerül.

21. Állítsa be a vonalgrafikát

Most állítsa be a vonal grafikonját. Az iránymutatások, dátumok és metszéspontok körében szeretnénk használni a "Center" -t. Az adatsor és a háttér esetében a "jobb & amp; balra" használjuk. Az extra adat akarjuk használni „Bal” minden cím, „Right” minden érték, és a „Right & amp; Left” az elválasztó vonalak. A CTA gombcsoporthoz tartsuk a "Center" -t.

22. Állítsa be a függőleges korlátozásokat

Az utolsó lépés a függőleges korlátok beállítása. Az állapotsor, navigációs sáv adatsort és kereszteződés körök és a kapcsolódó címeket kell beállítani „Top”. A grafikon, a dátumok és az iránymutatások hátterét "központba" kell állítani. Az extra adatok minden csoportját függőleges "központba" kell állítani, és a CTA gombcsoportot "alulra" kell állítani.

23. Működjön az egyes képernyőmérethez

Nézzük meg kétször, és állítsuk meg az egyiket az iPhone 7 Plus méretére és a másikra az iPhone SE méretére. A plusz verzióban csökkenteni kell az extra információ és a CTA gomb utolsó sejtje közötti különbséget a sejtek csoportjának kiválasztásával, és 195-ről 225-re növeli magasságát. A SE verzióban az információs sejtek túlcsordulnak A CTA gomb, így ki kell választanunk a sejtcsoportokat, és csökkenteni kell a magasságát 150-re.

24. Minden kész!

Hé, gratulálok! Elvégeztük az egész alkalmazás képernyőt a figma-ban. Most csak ellenőrizze, hogy mindent megtesz, és leülhetsz, és úgy érzi, mint egy szakértő.

Ez a cikk eredetileg szerepelt net magazin 288. kiadás; Vásárolja meg itt.

Kapcsolódó cikkek:

Az új betani koncepció úgy néz ki, mint egy gyilkos alkalmazás
Tervezési társadalmi hatás
8 tipp az Ace Tech Jobs interjúkhoz