Lag et responsivt dashbord med figma

Sep 15, 2025

hvordan

Figma er et grafikkverktøy for UI-designere. Den har et enkelt grensesnitt og gjør det mulig å samarbeide på jobb med lagkameratene dine. Hvis du vil jobbe offline, kan du velge å bruke Desktop-appen. Alternativt fungerer Figma på ethvert operativsystem (Hei, Windows), så du trenger ikke å installere noe i det hele tatt. Og å komme i gang er lett - du kan importere dine tidligere layoutdesign fra skisse.

Velg en nettsidebygger: 16 toppverktøy

I Figma kan du lage alt du trenger for grensesnittet ditt, fra illustrerte vektorikoner til tilpassede layouter. Multiplayer-redigering kan spare mye tid for designteam, da det betyr at alle lagmedlemmer kan fungere på samme layout på samme tid. Og disse er ikke engang alle sine flotte funksjoner.

I denne opplæringen vil jeg vise deg hvordan du får satt opp med Figma, og deretter gå gjennom hvordan du lager en mobilapp-skjerm, trinnvis. I dette tilfellet vil vi designe dashbordet for en fiktiv statistikk-app. Når du er ferdig, vil du kunne lage forskjellige grensesnitt i Figma og jobbe med dem med teamet ditt i sanntid.

01. Registrer deg

Først og fremst må du registrere deg på www.figma.com. . Bestem om du vil bruke verktøyet i nettleseren din eller laste ned skrivebordsprogrammet. Hvis du vil laste ned skrivebordsversjonen, gå til Hamburger-menyen øverst til venstre og klikk på 'Få Desktop App'.

02. Lag en artbord og rutenett

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — Legg til et baseline rutenett for å hjelpe deg med å plassere elementene dine harmonisk (klikk på bildet for å forstørre)

Truffet EN å skape et antrekke. Du kan velge en av forhåndsinnstillingene eller lage din egen tilpassede størrelse. For dette prosjektet skal vi bruke Telefon & GT; iPhone 7 (375x667px). For å lage et rutenett, velg først artenet. Deretter finner du på høyre sidefelt 'Layout Grid' og trykk '+'. Sett opp kolonne teller: 6, Gutter: 16, Marginer: 8 og Type: Strekk.

03. Tegn et rektangel for bakgrunnen

La oss starte med bakgrunnen. trykk R. Å få opp rektangelverktøyet og tegne et rektangel # 5F98FA uten grenser. Still dimensjonene til 375x363 ved hjelp av egenskapspanelet på høyre side.

04. Legg til en statuslinje

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) — Sett gradienten for statuslinjen ved hjelp av Egenskaper-panelet til høyre på skjermen. Her kan du justere fargealternativene for å lage en lineær gradient (klikk på bildet for å forstørre)

Deretter vil vi plassere en statuslinje øverst på skjermen. trykk R. For å angi bredde: 375, høyde: 64, posisjon (X: 0; Y: 0). For vår navigasjonslinje, la oss sette gradientfyllingen ved hjelp av eiendomsinspektørpanelet til høyre. Finn alternativet "Fyll", trykk på forhåndsvisning av farge og velg 'Lineær' fra rullegardinmenyen. Fargen på toppen skal være # 77A6F7, og på bunnen # 5A93F5 (opasitet 100 prosent for begge).

05. Importer en IOS-statuslinje

Dessverre inkluderer FIGMA ikke iOS UI-elementer som standard. Det er imidlertid en fil som heter 'Eksempelfil', som er en IOS-app-design, så vi kan låne statuslinjen fra det. Kopier ut alternativet Lys statuslinje, lim den inn i den nåværende filen og legg den på (X: 0; Y: 0). Bruke tekstverktøyet ( T. ), Klikk på ditt fellesbord for å legge til en header i navigasjonslinjen. Jeg har gått for Avenir Heavy, 15px, #FFFFFF. Juster overskriften med horisontalt senter, Y: 33.

06. Lag et bakikon

Til venstre for navigasjonslinjen skal det være et "tilbake" -ikon. Jeg skal lage dette fra grunnen av. Opprett et rektangel 14x14px, tilsett 45-graders rotasjon, X: 14; Y: 43. Dupliser dette rektangelet og legg det på x: 18; Y: 43. Velg begge rektangler og under toppmenyen, gå til boolske grupper og GT; Subtrahere valg. Etter det, gå tilbake til boolske grupper og GT; Flatt utvalg, eller trykk CMD + E. .

07. Fullfør pilikonet

Vår pilikon er nesten ferdig. Nå trenger vi bare å sette bredden og høyden til numeriske verdier - i min tilfelle bredde: 12px; Høyde: 20px. Det endelige trinnet er å sette fyllingsfargen til #FFFFFFF.

08. Lag en graf

Nå skal vi lage en graf. Først vil vi sette inn noen retningslinjer. Velg rektangelverktøyet ( R. ) og sett X: 24 Y: 147; Bredde: 1; Høyde: 166; Fyll farge # b3dcff og opacity 20%.

Dupliser dette rektangelet fire ganger med 80px marginer. På bunnen av hver retningslinje må vi legge til en datoetikett ved hjelp av tekstlag ('Feb 2', '9. februar', '16. februar', '23. februar', 'Mar 1'). Jeg har brukt Avenir Medium, på 11px, # C1D8FF.

09. Lag datalinjen

Bruker pennverktøyet ( S ) Vi må opprette en vektor for å representere datalinjen. Klikk og dra for å lage et Bézier-punkt. Denne formen skal ha et 4px slag og ingen fyll, #ffffff.

La oss legge til en drop shadow for å hjelpe linjen til å skille seg ut: klikk på '+' på Effects-delen og velg 'Drop Shadow'. Bruk følgende innstillinger for å lage en jevn og elegant skygge: uskarphet: 3px, y: 7px, # 2951ff, opacity: 100%.

10. Legg til detaljer i grafen

Use the Text tool to add values to the places the guidelines intersect with the data line — Bruk tekstverktøyet til å legge til verdier til de stedene retningslinjene krysser med datalinjen

På de punktene der retningslinjene krysser med datalinjen, skal vi legge til sirkler. Denne gangen bruker vi Ellipse-verktøyet ( O. ), som du finner i rullegardinmenyen som følger med rektangelverktøyet. Tegn 8x8px sirkler på hvert skjæringspunkt og sett fyllfargen til # 5F98FA. Vi må legge til et slag: Klikk på '+' -knappen ved siden av Stroke-delen, sett vekt: 2px og juster: Senter.

11. Final Touches.

For å fullføre grafsnittet må vi bare legge til verdier i krysset våre. Med tekstverktøyet ( T. ) Velg Avenir Black, 11px, # 1f4991.

12. Tre informative bokser

Under linjediagrammet skal vi lage tre celler som viser mer informasjon. Bruke tekstverktøyet ( T. ) La oss lage vår første overskrift: 'Estimert verdi av aksjene': X: 16; Y: 391, Avenir Medium, 15px, # 5D7EB6. Til høyre for cellen plasserer verdien '$ 1,115', tekststil: Avenir Heavy, 22px, # 5f98fa, tekstjustering: Venstre, X: 287; Y: 387.

13. Gjør en separator

Tegn et rektangel som er 1px i høyden og spenner over hele skjermen på skjermen (# F5F5F5; X: 0; Y: 435) - dette vil fungere som separatoren mellom cellene. Velg overskriften, verdien og separatoren og opprett en gruppe ( CMD + G. ).

14. Legge til overskrifter

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — Under grafen vil være tre celler som viser viktige deler av dataene (klikk på bildet for å forstørre)

Dupliser denne gruppen, slik at du har tre grupper med 24px vertikal avstand mellom dem. Endre andre på vei til "Totalmedlemmer" og den tredje gruppen som går til "Venner registrert" og oppdaterer de relevante verdiene.

15. Tegn og juster et annet rektangel

Nå skal vi legge til et anrop til handling. Tegn et rektangel under den siste cellen, bredden: 195; Høyde: 44, Y-aksen Avstand fra den siste separatoren 21px.

Bruke justeringsverktøyene, sett opp rektangelet med horisontalt senter. Sett deretter fyllfargen til # 5F98FA og rundhet til 22 (du finner dette feltet etter "rotasjon" i egenskapspanelet). Etter det legg til en dråpe skygge effekt (farge: #abdaff; opacity: 100%; y: 5; uskarphet: 11).

16. Sett litt tekst på knappen

Legg til tekst i knappen ved hjelp av tekstverktøyet ( T. ): "Få flere aksjer!" Sett dette i Avenir Black, 15px, #FFFFFFF. Juster teksten i midten av knappen. Til slutt, gruppere alle elementene sammen og navnet dem på riktig måte.

17. Gjør det lydhør

Nå skal vi justere vår layout, så det er lydhør overfor forskjellige iPhones (320x568, 375x667 og 414x736). For å gjøre dette må vi bruke begrensninger, som du finner under Egenskapsmenyen til høyre.

18. Få oppsettet til høyre

Hvis du velger "Venstre" eller "RIGHT" på den horisontale rullegardinmen, vil gruppen slå til den valgte siden av skjermen, og ikke strekke seg. Hvis du velger 'Center', vil gruppen eller laget strekke seg slik at den fyller bredden på skjermen. Vi må gjøre statuslinjen flyte på plass, så vi vil ha "Høyre & amp, venstre" -alternativet (eller hold nede "CMD" og klikk på venstre og høyre stang på diagrammet).

19. Test det

La oss prøve dette ut. Med den valgte statuslinjen, trykk på "Høyre & Amp, venstre" -alternativet. Velg en artjerm og, i stedet for iPhone 7, velg iPhone 7 Plus. Det fungerer riktig, selv om du velger iPhone SE-størrelsen.

20. Kontroller hvert lag

La oss vurdere resten av lagene. For navigeringslinjens bakgrunn vil vi bruke 'Right + Left'. For navigeringslinje Tittel: 'Center'. For bakgrunnsikonet er det best å bruke alternativet "Venstre" - slik pilen vil bli festet til venstre side av skjermen.

21. Sett linjediagrammet

La oss nå sette linjediagrammet. For retningslinjene, datoer og skjæringssirkler vil vi bruke "senter". For datalinjen og bakgrunnen bruker vi 'Right & Amp; Venstre'. I den ekstra dataseksjonen vil vi bruke "Venstre" for hver tittel, "Rett" for hver verdi og "Høyre & Amp, venstre" for separatorlinjene. For CTA-knappen Gruppe la oss sette 'senter'.

22. Sett de vertikale begrensningene

Det endelige trinnet er å sette de vertikale begrensningene. Statuslinjen, navigasjonslinjen, datalinjen og skjæringssirkler og tilhørende titler skal settes til 'Top'. Bakgrunnen for graf, datoer og retningslinjer skal settes til 'Center'. Hver gruppe av ekstra data skal settes til vertikal 'senter', og CTA-knappen skal settes til 'Bunn'.

23. Gjør det til å fungere for hver skjermstørrelse

La oss duplisere tavlen to ganger, og sett en til størrelsen på et iPhone 7 Plus og den andre til størrelsen på en iPhone SE. På plussversjonen må du redusere gapet mellom den siste cellen med ekstra informasjon og CTA-knappen ved å velge cellegruppen og øke høyden fra 195 til 225. På SE-versjonen ser du at informasjonsceller overløper CTA-knappen, så vi må velge cellegruppen og redusere høyden til 150.

24. Alt gjort!

Hei, gratulerer! Vi har fullført hele app-skjermen i Figma. For nå bare sjekk alt er gjort, og du kan lene deg tilbake og føle deg som en ekspert.

Denne artikkelen ble opprinnelig omtalt i Net Magazine. utgave 288; Kjøp det her.

Relaterte artikler:

Nytt Behance Concept ser ut som en morder-app
Design for sosial innvirkning
8 tips til ACE Tech Jobs Interviews