Opret et responsivt instrumentbræt med FIGHA

Sep 13, 2025

hvordan

Figa er et grafikværktøj til UI designere. Det har en simpel grænseflade og giver dig mulighed for at samarbejde om arbejde med dine holdkammerater. Hvis du vil arbejde offline, kan du vælge at bruge desktop-appen. Alternativt arbejder Figha på ethvert operativsystem (Hej, Windows), så du behøver ikke at installere noget overhovedet. Og Kom godt i gang er nemt - du kan importere dine tidligere layoutmesign fra skitse.

Vælg en hjemmeside Builder: 16 Topværktøjer

I Figha kan du oprette alt, hvad du behøver for din grænseflade, fra illustreret vektorikoner til brugerdefinerede layouter. Multiplayer redigering kunne spare meget tid for designteams, da det betyder, at alle holdmedlemmer kan arbejde på samme layout på samme tid. Og det er ikke engang alle sine store funktioner.

I denne vejledning viser jeg dig, hvordan du bliver oprettet med Figha, så gå gennem, hvordan du opretter en mobilappskærm, trin for trin. I dette tilfælde vil vi designe instrumentbrættet for en fiktiv statistikapp. Når du er færdig, vil du kunne oprette forskellige grænseflader i Figha og arbejde på dem med dit hold i realtid.

01. Tilmeld dig

Først og fremmest skal du tilmelde dig på www.figma.com. . Bestem, om du vil bruge værktøjet i din browser eller download skrivebordsprogrammet. For at downloade desktop-versionen skal du gå til Hamburger-menuen i øverste venstre hjørne og klikke på 'Get Desktop App'.

02. Opret et Artboard og Gitter

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — Tilføj et baseline-gitter for at hjælpe dig med at placere dine elementer harmonisk (klik på billedet for at forstørre)

Hit EN at oprette et tegnebræt. Du kan vælge en af forudindstillingerne eller oprette din egen brugerdefinerede størrelse. For dette projekt skal vi bruge telefon og gt; iPhone 7 (375x667px). For at oprette et gitter skal du først vælge tegnebrættet. Derefter på højre sidebjælke finde 'layout grid' og tryk på '+'. Set Up Column Count: 6, Gutter: 16, Margins: 8 og type: Stretch.

03. Tegn et rektangel til baggrunden

Lad os starte med baggrunden. Trykke R. For at hente rektangelværktøjet og tegne et rektangel # 5f98fa uden grænser. Indstil dimensionerne til 375x363 ved hjælp af egenskabspanelet på højre side.

04. Tilføj 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) — Indstil gradienten for statuslinjen ved hjælp af panelet Egenskaber til højre på skærmen. Her kan du justere farveindstillingerne for at oprette en lineær gradient (klik på billedet for at forstørre)

Dernæst ønsker vi at placere en statuslinje øverst på skærmen. Trykke R. For at indstille Bredde: 375, Højde: 64, Position (X: 0; Y: 0). For vores navigationslinje Lad os sætte gradientfyld ved hjælp af Ejendomsinspektørpanelet til højre. Find indstillingen 'Fill', tryk på Farve-forhåndsvisning og vælg 'Lineær' i rullemenuen. Farven på toppen skal være # 77A6F7, og i bunden # 5a93f5 (opacitet 100 procent for begge).

05. Importer en IOS-statuslinje

Desværre omfatter Figha ikke iOS UI-elementer som standard. Der er dog en fil kaldet 'prøvefil', som er et iOS app design, så vi kan låne statuslinjen fra det. Kopier indstillingen Light Status Bar, indsæt den i den aktuelle fil og læg den ved (x: 0; y: 0). Brug af tekstværktøjet ( T. ), Klik på dit Artboard for at tilføje en header til navigationslinjen. Jeg er gået til Avenir Heavy, 15px, #ffffff. Juster overskriften med vandret center, Y: 33.

06. Opret et tilbage-ikon

Til venstre for navigationslinjen skal der være et 'tilbage' ikon. Jeg skal skabe dette fra bunden. Opret et rektangel 14x14px, tilsæt 45 graders rotation, X: 14; Y: 43. Duplikere dette rektangel og læg det ved x: 18; Y: 43. Vælg begge rektangler og under topmenuen Gå til Boolean Groups & GT; Subtrahere udvælgelse. Derefter gå tilbage til boolske grupper og gt; Fladvalg, eller tryk på cmd + E. .

07. Afslut pilens ikon

Vores pilikon er næsten færdig. Nu skal vi bare indstille bredden og højden til numeriske værdier - i mit tilfælde bredde: 12px; Højde: 20px. Det sidste trin er at indstille fyldfarven til #ffffff.

08. Opret en graf

Nu skal vi oprette en graf. For det første vil vi sætte nogle retningslinjer. Vælg rektangelværktøjet ( R. ) og sæt X: 24 Y: 147; Bredde: 1; Højde: 166; Fyld farve # b3dcff og opacitet 20%.

Duplikere dette rektangel fire gange med 80pxmargener. På bunden af hver retningslinje skal vi tilføje en dato etiket ved hjælp af tekstlag ('feb 2', '9 februar', 'feb 16', 'Feb 23', 'Mar 1'). Jeg har brugt Avenir Medium, på 11px, # C1d8ff.

09. Lav datalinjen

Brug af penværktøjet ( P. ) Vi skal oprette en vektor for at repræsentere datalinjen. Klik og træk for at oprette et Bézier Point. Denne form skal have en 4px slagtilfælde og ingen fyld, #ffffff.

Lad os tilføje en drop skygge for at hjælpe linjen til at skille sig ud: Klik på afsnittet '+' på effekterne og vælg 'Drop Shadow'. Brug følgende indstillinger for at gøre en glat og elegant skygge: sløret: 3px, y: 7px, # 2951ff, opacitet: 100%.

10. Tilføj detaljer til grafen

Use the Text tool to add values to the places the guidelines intersect with the data line — Brug tekstværktøjet til at tilføje værdier til de steder, retningslinjerne skærer med datalinjen

På de punkter, hvor retningslinjerne skærer med den datalinje, vil vi tilføje cirkler. Denne gang bruger vi ellipse-værktøjet ( O. ), som du finder i rullemenuen, der ledsager rektangelværktøjet. Tegn 8x8px cirkler på hvert kryds og sæt fyldfarven til # 5f98fa. Vi skal tilføje et slagtilfælde: Klik på '+' knappen ved siden af slagtilfælde. Sæt vægt: 2px og juster: Center.

11. Final Touches.

For at afslutte grafafsnittet, skal vi bare tilføje værdier til vores skæringspunkter. Med tekstværktøjet ( T. ) Vælg Avenir Black, 11PX, # 1F4991.

12. Tre informative kasser

Under linjediagrammet skal vi oprette tre celler, der viser flere oplysninger. Brug af tekstværktøjet ( T. ) Lad os oprette vores første overskrift: "Anslået værdi af dine aktier": x: 16; Y: 391, Avenir Medium, 15px, # 5D7EB6. Til højre for cellen Placer værdien '$ 1.115', tekst Stil: Avenir Heavy, 22PX, # 5F98FA, Tekstjustering: Venstre, X: 287; Y: 387.

13. Gør en separator

Tegn et rektangel, der er 1px i højden og spændes den fulde bredde på skærmen (# F5F5F5; X: 0; Y: 435) - Dette vil fungere som separatoren mellem cellerne. Vælg overskrift, værdi og separator og opret en gruppe ( cmd + G. ).

14. Tilføjelse af overskrifter

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — Under grafen vil være tre celler, der viser nøgle stykker af data (klik på billedet for at forstørre)

Duplikere denne gruppe, så du har tre grupper med 24px lodret afstand mellem dem. Skift andet overskrift til 'Total medlemmer' og den tredje gruppe på vej til 'venner, der er tilmeldt' og opdaterer de relevante værdier.

15. Tegn og juster et andet rektangel

Nu skal vi tilføje et opkald til handling. Tegn et rektangel under den sidste celle, bredde: 195; Højde: 44, Y-akseafstand fra den sidste separator 21px.

Ved hjælp af justeringsværktøjerne skal du linke rektanglet med vandret center. Indstil derefter fyldfarven til # 5F98FA og rundhed til 22 (du finder dette felt efter "rotation" i panelet Egenskaber). Derefter tilsættes en drop skyggeffekt (farve: #abdaff; opacitet: 100%; Y: 5; sløret: 11).

16. Sæt nogle tekst på knappen

Tilføj tekst til knappen ved hjælp af tekstværktøjet ( T. ): 'Få flere aktier!' Sæt dette i Avenir Black, 15px, #ffffff. Juster teksten ved midten af knappen. Endelig gruppér alle elementer sammen og navngiv dem ordentligt.

17. Gør det lydhør

Nu skal vi justere vores layout, så det svarer til forskellige iPhones (320x568, 375x667 og 414x736). For at gøre dette skal vi bruge begrænsninger, som du finder under egenskabsmenuen til højre.

18. Få layoutet til højre

Hvis du vælger 'Venstre' eller 'Højre' På rullemenuen Horisontal, lyser gruppen til din valgte side af skærmen og vil ikke strække. Hvis du vælger 'Center', strækker gruppen eller laget, så det fylder skærmens bredde. Vi skal gøre statuslinjen til at flyde på plads, så vi vil have 'Right & Amp; venstre' mulighed (eller hold nede 'cmd' og klik på venstre og højre stænger på diagrammet).

19. Test det

Lad os prøve det her ud. Med den valgte statuslinje, tryk på 'Højre & Amp; venstre'. Vælg et Artboard og i stedet for iPhone 7, vælg iPhone 7 Plus. Det fungerer korrekt, selvom du vælger iPhone SE-størrelsen.

20. Kontroller hvert lag

Lad os overveje resten af lagene. For navigationslinjen baggrunden vil vi bruge 'højre + venstre'. Til navigationsbjælke Titel: 'Center'. For tilbage-pilikonet er det bedst at bruge 'venstre' mulighed - på denne måde vil pilen blive fastgjort til venstre side af skærmen.

21. Indstil linjediagrammet

Lad os nu sætte linjediagrammet. For retningslinjerne, datoer og skæringscirkler, vil vi bruge 'center'. For datalinjen og baggrunden bruger vi 'højre & amp; venstre'. I den ekstra data sektion ønsker vi at bruge 'Venstre' for hver titel, 'Højre' for hver værdi og 'Højre & Amp; Venstre' til separatorlinierne. For CTA-knappen Group Lad os sætte 'Center'.

22. Sæt de vertikale begrænsninger

Det sidste trin er at sætte de lodrette begrænsninger. Statuslinjen, navigationslinjen, datalinjen og skæringscirkler og tilhørende titler skal indstilles til 'TOP'. Baggrunden for graf, datoer og retningslinjer bør indstilles til 'Center'. Hver gruppe af ekstra data skal indstilles til Vertikal 'Center', og CTA-knapgruppen skal indstilles til 'BOTTOM'.

23. Gør det arbejde for hver skærmstørrelse

Lad os duplikere kunstkortet to gange, og sæt en til størrelsen på en iPhone 7 plus og den anden til størrelsen på en iPhone SE. På plus-versionen skal du reducere kløften mellem den sidste celle med ekstra information og CTA-knappen ved at vælge cellergruppen og øge dens højde fra 195 til 225. På SE-versionen kan du se, at informationsceller overløber CTA-knappen, så vi skal vælge cellergruppen og reducere dens højde til 150.

24. Alt gjort!

Hey, tillykke! Vi har afsluttet hele app-skærmen i Figha. For nu skal du bare kontrollere alt er færdigt, og du kan læne dig tilbage og føle dig som en ekspert.

Denne artikel blev oprindeligt fremhævet i Net Magazine. Udgave 288; Køb det her.

Relaterede artikler:

Nyt Behance koncept ligner en morder app
Udformning af sociale konsekvenser
8 tips til Ace Tech Jobs Interviews