Maak een responsief dashboard met Figma

Sep 10, 2025

Procedures

Figma is een grafisch tool voor UI-ontwerpers. Het heeft een eenvoudige interface en stelt u in staat om samen te werken met uw teamgenoten. Als u offline wilt werken, kunt u ervoor kiezen om de desktop-app te gebruiken. Als alternatief werkt Figma op elk besturingssysteem (Hallo, Windows), dus u hoeft helemaal niets te installeren. En aan de slag is eenvoudig - u kunt uw vorige lay-outontwerpen van schets importeren.

Kies een website-builder: 16 Tophulpmiddelen

In Figma kun je alles creëren wat je nodig hebt voor je interface, van geïllustreerde vectorpictogrammen tot aangepaste lay-outs. Multiplayer-bewerking kan veel tijd besparen voor ontwerpteams, omdat het betekent dat alle teamleden tegelijkertijd op dezelfde lay-out kunnen werken. En deze zijn niet eens al zijn geweldige functies.

In deze tutorial laat ik je laten zien hoe je met Figma wordt opgezet, loop dan door hoe je een scherm voor een mobiel app, stap voor stap maakt. In dit geval ontwerpen we het dashboard voor een fictieve statistieken-app. Als je klaar bent, kun je verschillende interfaces in Figma maken en er in realtime aan je team werken.

01. Meld je aan

Allereerst moet je je aanmelden bij www.figma.com Bepaal of u de tool in uw browser wilt gebruiken of de desktop-app wilt downloaden. Om de Desktop-versie te downloaden, gaat u naar het Hamburger-menu in de linkerbovenhoek en klikt u op 'Desktop-app'.

02. Maak een artboard en raster

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — Voeg een baseline-rooster toe om u te helpen uw elementen harmonieus te positioneren (klik op afbeelding om te vergroten)

Raken EEN om een artboard te maken. U kunt een van de presets kiezen of uw eigen aangepaste grootte maken. Voor dit project gaan we telefoon & GT gebruiken; iPhone 7 (375x667px). Als u een raster wilt maken, selecteert u eerst het Artboard. Dan op de rechterhandbalk vinden 'Layout Grid' en druk op '+'. Columnelling instellen: 6, goot: 16, marges: 8 en type: stretch.

03. Teken een rechthoek voor de achtergrond

Laten we beginnen met de achtergrond. druk op R Om het gereedschap rechthoek op te nemen en een rechthoek te tekenen # 5F98fa zonder grenzen. Stel de afmetingen in op 375x363 met behulp van het paneel Eigenschappen aan de rechterkant.

04. Voeg een statusbalk toe

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) — Stel de gradiënt in voor de statusbalk met behulp van het paneel Eigenschappen aan de rechterkant op het scherm. Hier kunt u de kleuropties aanpassen om een lineair verloop te maken (klik op afbeelding om te vergroten)

Vervolgens willen we een statusbalk aan de bovenkant van het scherm plaatsen. druk op R Breedte instellen: 375, hoogte: 64, positie (x: 0; y: 0). Laten we voor onze navigatiebalk de verloopvulling instellen met behulp van het inspecteurpaneel van de eigenschap aan de rechterkant. Zoek de optie 'Fill', druk op de kleurvoorbeeld en selecteer 'Linear' in het vervolgkeuzemenu. De kleur aan de bovenkant moet # 77A6f7 zijn en aan de onderkant # 5A93F5 (dekking 100 procent voor beide).

05. Importeer een IOS-statusbalk

Helaas omvat Figma geen IOS UI-elementen standaard. Er is echter een bestand genaamd 'Sample File', dat is een iOS-app-ontwerp, zodat we de statusbalk van dat kunnen lenen. Kopieer de optie Lichtstatus, plak deze in het huidige bestand en plaats deze op (x: 0; y: 0). Gebruik van de Text Tool ( T ), klik op je artboard om een koptekst aan de navigatiebalk toe te voegen. Ik ben weg voor Avenir Heavy, 15px, #ffffff. Lijn de kop uit door horizontaal centrum, Y: 33.

06. Maak een back-pictogram

Aan de linkerkant van de navigatiebalk moet een 'back'-pictogram zijn. Ik ga dit helemaal opnieuw creëren. Maak een rechthoek 14x14px, voeg 45-graden rotatie toe, x: 14; y: 43. Dupliceer deze rechthoek en plaats het op x: 18; y: 43. Selecteer beide rechthoeken als onder het bovenste menu Ga naar Boolean Groups & GT; Selectie aftrekken. Ga daarna terug naar Boolean Groups & GT; Afvlakken selectie of druk op cmd + e

07. Maak het pijlpictogram af

Ons pijlpictogram is bijna klaar. Nu hoeven we alleen de breedte en hoogte aan numerieke waarden in te stellen - in mijn kofferbreedte: 12px; Hoogte: 20px. De laatste stap is om de vulkleur in te stellen op #ffffff.

08. Maak een grafiek

Nu gaan we een grafiek maken. Ten eerste zullen we enkele richtlijnen instellen. Selecteer het gereedschap Rechthoek ( R ) en set x: 24 y: 147; Breedte: 1; Hoogte: 166; Vul kleur # b3dcff en dekking 20%.

Dupliceer deze rechthoek vier keer met 80px-marges. Onderaan elke richtlijn moeten we een datumetiket toevoegen met behulp van tekstlagen ('feb 2', 'feb 9', '16 feb.', '23 februari', 'maart 1'). Ik heb Avenir Medium gebruikt, bij 11 px, # C1D8FF.

09. Maak de datalijn

Gebruik van de pentool ( P ) We moeten een vector maken om de datalijn te vertegenwoordigen. Klik en sleep om een Bézier Point te maken. Deze vorm moet een 4px-beroerte hebben en geen vulling, #ffffff.

Laten we een druppelschaduw toevoegen om de lijn op te staan: klik op de sectie '+' op de effecten en kies 'Schaduw'. Gebruik de volgende instellingen om een soepele en elegante schaduw te maken: Blur: 3px, Y: 7px, # 2951FF, Dekking: 100%.

10. Voeg details toe aan de grafiek

Use the Text tool to add values to the places the guidelines intersect with the data line — Gebruik de teksttool om waarden toe te voegen aan de plaatsen die de richtlijnen elkaar kruisen met de datalijn

Op de punten waar de richtlijnen elkaar kruisen met de datalijn gaan we cirkels toevoegen. Deze keer gebruiken we het tool van Ellips ( O ), die u vindt in het vervolgkeuzemenu dat bij het gereedschap Rechthoek vergezelt. Teken 8x8px-cirkels op elke kruising en stel de vulkleur in op # 5F98FA. We moeten een slag toevoegen: klik op de knop '+' naast de sectie Stroke, Gewicht instellen: 2px en align: Center.

11. Laatste aanrakingen

Om het grafiekgedeelte af te maken, moeten we alleen waarden toevoegen aan onze kruispunten. Met het Tekst Tool ( T ) Selecteer Avenir Zwart, 11 PX, # 1F4991.

12. Drie informatieve dozen

Hieronder de lijngrafiek gaan we drie cellen maken die meer informatie weergeven. Gebruik van de Text Tool ( T ) Laten we onze eerste rubriek maken: 'Geschatte waarde van uw Aandelen': X: 16; y: 391, Avenir Medium, 15px, # 5D7EB6. Rechts van de cel plaats de waarde '$ 1.115', tekststijl: Avenir Heavy, 22px, # 5F98FA, tekstuitlijning: links, x: 287; Y: 387.

13. Een separator maken

Teken een rechthoek die 1px in hoogte is en de volledige breedte van het scherm overspant (# f5f5f5; x: 0; y: 435) - dit zal optreden als de scheider tussen de cellen. Selecteer de kop, waarde en separator en maak een groep ( cmd + g

14. Rubrieken toevoegen

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — Onder de grafiek zijn drie cellen die belangrijke stukjes gegevens tonen (klik op afbeelding om te vergroten)

Dupliceer deze groep, dus je hebt drie groepen met 24px verticale afstand tussen hen. Verander tweede rubriek op 'Total Leden' en de derde groep naar 'Vrienden aangemeld' en de relevante waarden bijwerken.

15. Teken en lijn een andere rechthoek aan

Nu gaan we een oproep aan actie toevoegen. Teken een rechthoek onder de laatste cel, breedte: 195; Hoogte: 44, Y-as afstand van de laatste scheider 21px.

Gebruik van de uitlijnende gereedschappen, lijn de rechthoek op via horizontaal centrum. Stel vervolgens de vulkleur in op # 5F98FA en ronddruk tot 22 (u vindt dit veld na 'Rotatie' in het paneel Eigenschappen). Daarna voegt een druppelschaduw-effect toe (kleur: #ABDAFF, Dekking: 100%; Y: 5; Blur: 11).

16. Zet wat tekst op de knop

Voeg tekst toe aan de knop met behulp van de teksttool ( T ): 'Krijg meer aandelen!' Stel dit in Avenir Black, 15px, #ffffff. Lijn de tekst uit door het midden van de knop. Tot slot, groepeer alle elementen samen en noem ze goed.

17. Maak het reagerend

Nu gaan we onze lay-out aanpassen, zodat het reageert op verschillende iPhones (320x568, 375x667 en 414x736). Om dit te doen, moeten we beperkingen gebruiken, die u zult vinden in het menu Eigenschappen aan de rechterkant.

18. Krijg de lay-out rechts

Als u 'links' of 'rechts' op de horizontale vervolgkeuzelijst selecteert, pint de groep naar de gekozen zijde van het scherm, en zal het niet uitrekken. Als u 'Center' selecteert, zal de groep of de laag zich uitrekken, zodat deze de breedte van het scherm vult. We moeten de statusbar drijven op zijn plaats, dus we willen de optie 'Rechts & amp; links' (of houd ze 'cmd' ingedrukt en klik op de linker- en rechterbalken op het diagram).

19. Test het

Laten we dit uitproberen. Met de geselecteerde statusbalk, druk op de optie 'Rechts & amp; links'. Selecteer een artboard en kies in plaats van iPhone 7 iPhone 7 Plus. Het werkt goed, zelfs als u de iPhone SE-grootte selecteert.

20. Controleer elke laag

Laten we de rest van de lagen overwegen. Voor de navigatiebalkachtergrond willen we 'rechts + links' gebruiken. Voor navigatiebalk titel: 'Center'. Voor het pictogram van de achterpijl, het is het beste om de optie 'Links'-optie te gebruiken - op deze manier wordt de pijl vastgemaakt aan de linkerkant van het scherm.

21. Stel de lijngrafiek in

Laten we nu de lijngrafiek instellen. Voor de richtlijnen, datums en kruispunten willen we 'Center' gebruiken. Voor de datalijn en achtergrond gebruiken we 'Rechts & amp; links'. In het gedeelte Extra gegevens willen we 'Left' gebruiken voor elke titel, 'rechts' voor elke waarde en 'Rechts & amp; links' voor de scheidingsleidingen. Voor de CTA Button Group Laten we 'Center' instellen.

22. Zet de verticale beperkingen

De laatste stap is om de verticale beperkingen in te stellen. De statusbalk, navigatiebalk, datalijn en kruispunten en bijbehorende titels moeten worden ingesteld op 'TOP'. De achtergrond van grafiek, datums en richtlijnen moet worden ingesteld op 'Centrum'. Elke groep extra gegevens moet worden ingesteld op Vertical 'Center', en de CTA-knopgroep moet worden ingesteld op 'Bottom'.

23. Laat het werken voor elke schermgrootte

Laten we het artboard twee keer dupliceren en een op de grootte van een iPhone 7 plus en de andere op de grootte op een iPhone SE instellen. Op de plus-versie moet u de kloof tussen de laatste cel van extra informatie en de CTA-knop verminderen door de cellengroep te selecteren en de hoogte van 195 tot 225 te vergroten. Op de SE-versie ziet u dat informatiecellen overlopen De CTA-knop, dus we moeten de groepsgroep selecteren en zijn hoogte tot 150 verminderen.

24. Alles gedaan!

Hé, gefeliciteerd! We hebben het hele app-scherm in Figma voltooid. Controleer voor nu gewoon alles is gedaan en je kunt achterover leunen en voelen als een expert.

Dit artikel was oorspronkelijk in netto tijdschrift kwestie 288; koop het hier.

Gerelateerde artikelen:

Nieuw Behance-concept ziet eruit als een moordende app
Ontwerpen voor sociale impact
8 tips voor Ace Tech Jobs Interviews