Skapa en reagerande instrumentpanel med Figma

Sep 11, 2025

Hur

Figma är ett grafikverktyg för UI-designers. Det har ett enkelt gränssnitt och gör att du kan samarbeta på jobbet med dina lagkamrater. Om du vill arbeta offline kan du välja att använda skrivbordsappen. Alternativt fungerar Figma på vilket operativsystem som helst (Hej, Windows), så du behöver inte installera någonting alls. Och att komma igång är enkelt - du kan importera dina tidigare layoutdesigner från skiss.

Välj en webbplatsbyggare: 16 Toppverktyg

I Figma kan du skapa allt du behöver för ditt gränssnitt, från illustrerade vektorikoner till anpassade layouter. Multiplayer redigering kan spara mycket tid för designteam, eftersom det betyder att alla lagmedlemmar kan arbeta på samma layout samtidigt. Och det är inte ens alla sina fantastiska egenskaper.

I den här handledningen ska jag visa dig hur du ska ställas in med Figma och gå igenom hur du skapar en mobil appskärm, steg för steg. I det här fallet kommer vi att utforma instrumentbrädan för en fiktiv statistikapp. När du är klar kan du skapa olika gränssnitt i Figma och arbeta med dem med ditt lag i realtid.

01. Registrera dig

Först och främst måste du registrera dig på www.figma.com . Bestäm om du vill använda verktyget i din webbläsare eller ladda ner skrivbordsappen. För att ladda ner skrivbordsversionen, gå till Hamburger-menyn längst upp till vänster och klicka på "Hämta Desktop App".

02. Skapa ett ämne och galler

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — Lägg till ett baslinjegrång som hjälper dig att placera dina element harmoniskt (klicka på bilden för att förstora)

Träffa A för att skapa ett ämne. Du kan välja en av förinställningarna eller skapa din egen anpassade storlek. För det här projektet ska vi använda telefon och gt; iPhone 7 (375x667px). För att skapa ett rutnät, välj först tavlan. Sedan hittar du "Layout Grid" och tryck på '+'. Ställ in kolumnräkning: 6, Gutter: 16, Marginaler: 8 och Typ: Stretch.

03. Rita en rektangel för bakgrunden

Låt oss börja med bakgrunden. Tryck R För att ta upp rektangelverktyget och dra en rektangel # 5F98FA utan gränser. Ställ in dimensionerna till 375x363 med egenskapspanelen på höger sida.

04. Lägg till en statusfält

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) — Ställ in gradienten för statusfältet med egenskapspanelen till höger på skärmen. Här kan du justera färgalternativen för att skapa en linjär gradient (klicka på bilden för att förstora)

Därefter vill vi placera en statusfält längst upp på skärmen. Tryck R För att ställa in bredden: 375, höjd: 64, position (x: 0; y: 0). För vår navigeringsfält, låt oss ställa in lutningsfyllningen med hjälp av egenskapsinspektörpanelen till höger. Hitta "Fyll" -alternativet, tryck på Färgförhandsgranskningen och välj "Linjär" från rullgardinsmenyn. Färgen på toppen ska vara # 77A6F7, och i botten # 5A93F5 (opacitet 100 procent för båda).

05. Importera en iOS-statusfält

Tyvärr inkluderar Figma inte iOS UI-element som standard. Det finns dock en fil som heter "Provfil", som är en IOS-appdesign, så vi kan låna statusfältet från det. Kopiera alternativet Light Status Bar, klistra in den i den aktuella filen och placera den på (x: 0; y: 0). Använda textverktyget ( T ), klicka på ditt ämne för att lägga till en rubrik till navigeringsfältet. Jag har gått för Avenir tung, 15px, #ffffff. Justera rubriken med horisontellt centrum, y: 33.

06. Skapa en baksidaikon

Till vänster om navigeringsfältet ska du vara en "back" -ikon. Jag ska skapa detta från början. Skapa en rektangel 14x14px, tillsätt 45-graders rotation, X: 14; Y: 43. Duplicera denna rektangel och placera den vid x: 18; Y: 43. Välj båda rektanglarna och under toppmenyn Gå till booleska grupper och GT; Subtrahera urval. Därefter, gå tillbaka till booleska grupper och gt; Flattenval, eller tryck på cmd + e .

07. Avsluta pilikonen

Vår pilikon är nästan klar. Nu behöver vi bara ställa bredden och höjden till numeriska värden - i mitt fallbredd: 12px; Höjd: 20px. Det sista steget är att ställa in fyllfärgen till #ffffff.

08. Skapa en graf

Nu ska vi skapa ett diagram. Först kommer vi att lägga i några riktlinjer. Välj rektangelverktyget ( R ) och ställ in x: 24 y: 147; Bredd: 1; Höjd: 166; Fyll färg # b3dcff och opacitet 20%.

Duplicera denna rektangel fyra gånger med 80px marginaler. På botten av varje riktlinje måste vi lägga till en databe etikett med hjälp av textlager ('feb 2', "9 februari", 16 februari, "23 februari", "mar 1"). Jag har använt Avenir medium, vid 11px, # c1d8ff.

09. Gör datalinjen

Använda pennverktyget ( F ) Vi måste skapa en vektor för att representera datalinjen. Klicka och dra för att skapa en Bézier-punkt. Denna form ska ha en 4px stroke och ingen fyllning, #ffffff.

Låt oss lägga till en droppskugga för att hjälpa linjen att sticka ut: Klicka på "+" på effekterna och välj "Drop Shadow". Använd följande inställningar för att göra en smidig och elegant skugga: oskärpa: 3px, y: 7px, # 2951ff, opacitet: 100%.

10. Lägg till detaljer i diagrammet

Use the Text tool to add values to the places the guidelines intersect with the data line — Använd textverktyget för att lägga till värden på de platser som riktlinjerna skärs med datalinjen

Vid de punkter där riktlinjerna skär med datalinjen kommer vi att lägga till cirklar. Den här gången använder vi Ellipse-verktyget ( O ), som du hittar i rullgardinsmenyn som åtföljer rektangelverktyget. Rita 8x8px cirklar på varje korsning och ställ in fyllfärgen till # 5f98fa. Vi måste lägga till en stroke: Klicka på "+" -knappen bredvid stroke-sektionen, Ange vikt: 2px och Justera: Centrum.

11. Slutliga beröring

För att avsluta grafavsnittet behöver vi bara lägga till värden till våra korsningspunkter. Med textverktyget ( T ) Välj Avenir Black, 11px, # 1f4991.

12. Tre informativa lådor

Under linjediagrammet ska vi skapa tre celler som visar mer information. Använda textverktyget ( T ) Låt oss skapa vår första rubrik: "Beräknat värde på dina aktier": X: 16; Y: 391, Avenir Medium, 15px, # 5d7eb6. Till höger om cellen Placera värdet "$ 1,115", textstil: Avenir tunga, 22px, # 5f98fa, textjustering: vänster, x: 287; Y: 387.

13. Gör en separator

Rita en rektangel som är 1px i höjd och spänner över hela bredden på skärmen (# F5F5F5; X: 0; Y: 435) - Detta kommer att fungera som separatorn mellan cellerna. Välj rubrik, värde och separator och skapa en grupp ( cmd + g ).

14. Lägga till rubriker

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — Under grafen kommer tre celler som visar viktiga data (klicka på bilden för att förstora)

Duplicera den här gruppen så att du har tre grupper med 24px vertikalt avstånd mellan dem. Ändra andra rubrik till "Total medlemmar" och den tredje gruppen på väg till "vänner registrerade" och uppdatera de relevanta värdena.

15. Rita och rikta en annan rektangel

Nu ska vi lägga till ett samtal till handling. Rita en rektangel under den sista cellen, bredd: 195; Höjd: 44, Y-axelavstånd från den sista separatorn 21px.

Använda justeringsverktygen, radera rektangeln med horisontellt centrum. Ställ sedan fyllfärgen till # 5F98FA och rundhet till 22 (du hittar det här fältet efter "rotation" i egenskapspanelen). Därefter lägger du till en droppskuggningseffekt (färg: #abdaff; opacitet: 100%; y: 5; suddighet: 11).

16. Lägg lite text på knappen

Lägg till text på knappen med hjälp av textverktyget ( T ): "Få fler aktier!" Ställ in detta i Avenir Black, 15px, #ffffff. Justera texten med mitten av knappen. Slutligen gruppera alla element tillsammans och namnge dem ordentligt.

17. Gör det mottagligt

Nu ska vi justera vår layout så att den är mottaglig för olika iPhones (320x568, 375x667 och 414x736). För att göra detta måste vi använda begränsningar, som du hittar under menyn Egenskaper till höger.

18. Få layouten rätt

Om du väljer "vänster" eller "höger" på den horisontella rullgardinsmenyn, kommer gruppen att stifta till din valda sida av skärmen och kommer inte att sträcka sig. Om du väljer "Center", kommer gruppen eller lagret att sträcka sig så det fyller skärmens bredd. Vi måste göra statusfältet flyta på plats, så vi vill ha alternativet "Right & amp; vänster" (eller håll ner "cmd" och klicka på vänster och högerfält på diagrammet).

19. Testa det

Låt oss prova det här. Med den statusfält som valts, tryck på "höger & amp; vänster" alternativet. Välj ett ämne och, i stället för iPhone 7, välj iPhone 7 Plus. Det fungerar ordentligt även om du väljer iPhone SE-storleken.

20. Kontrollera varje lager

Låt oss överväga resten av lagren. För navigeringsfältet, vill vi använda "höger + vänster". För navigeringsstångens titel: "Center". För tillbaka pilikonen är det bäst att använda alternativet "Vänster" - så här är pilen fast vid vänster sida av skärmen.

21. Ställ in linjediagrammet

Låt oss nu ställa in linjediagrammet. För riktlinjerna, datum och korsningscirklar, vill vi använda "Center". För datalinjen och bakgrunden använder vi 'Right & Amp; vänster'. I den extra datasektionen vill vi använda "vänster" för varje titel, "höger" för varje värde och "höger & amp; vänster" för separatorlinjerna. För CTA-knappgruppen Låt oss ställa in "Center".

22. Ställ in de vertikala begränsningarna

Det sista steget är att ställa in de vertikala begränsningarna. Statusfältet, navigeringsfältet, datalinjen och skärningscirklar och tillhörande titlar ska ställas in på "Top". Bakgrunden till graf, datum och riktlinjer ska ställas in på "Center". Varje grupp extra data ska ställas in på vertikal "Center", och CTA-knappgruppen ska ställas in på "Bottom".

23. Gör det att fungera för varje skärmstorlek

Låt oss duplicera artskortet två gånger och sätt en till storleken på en iPhone 7 plus och den andra till storleken på en iPhone SE. På plusversionen måste du minska klyftan mellan den sista cellen av extra information och CTA-knappen genom att välja cellergruppen och öka dess höjd från 195 till 225. På SE-versionen ser du att informationsceller överflödar CTA-knappen, så vi måste välja cellergruppen och minska höjden till 150.

24. Allt gjort!

Hej, grattis! Vi har avslutat hela appskärmen i Figma. För nu kolla bara allt är klart, och du kan luta dig tillbaka och känna dig som en expert.

Den här artikeln var ursprungligen inneburad i nätmagasin utgåva 288; Köp det här.

Relaterade artiklar:

Ny behance koncept ser ut som en mördare app
Utformning för social påverkan
8 tips till Ace Tech jobb intervjuer