De siste årene har Figma vokst raskt i popularitet, og det er ikke rart. Den gratis skybaserte programvaren er lett tilgjengelig på alle enheter og krever ingen avdrag eller nedlastinger. Fra å designe mobilapp-grensesnitt til å lage innlegg på sosiale medier, med Figma kan du eksperimentere med alle slags grafiske designfunksjoner og utvide ferdighetene dine.
For enda mer konsistens i designene dine, kan det være lurt å vurdere å bruke komponenter i arbeidet ditt. Komponenter er brukergrensesnittelementer (UI) som kan brukes på tvers av flere filer på Figma. Disse kan ofte være et sterkt tillegg til designene dine og forbedre den generelle kvaliteten.
Enten du er ny på Figma eller har brukt den en stund og er usikker på hvordan du skal bruke komponenter på en vellykket måte, er vi her for å hjelpe.
I denne artikkelen vil vi utforske hvordan du bruker Figma-komponenter og hvordan dette kan hjelpe deg med å heve arbeidet ditt.
Hvis du er interessert i å finne ut mer, så fortsett å lese.
Slik bruker du komponenter i Figma
Å mestre bruken av komponenter kan hjelpe deg med organisering og konsistens når du betjener Figma. Disse UI-elementene kan brukes igjen og igjen over ulike designprosjekter du kanskje jobber med. En komponent kan lages i et ikon, en knapp og mer, avhengig av prosjektet ditt.
Det fine med å introdusere komponenter til Figma-opplevelsen din er at det sparer deg for mye tid. Eventuelle endringer du kan gjøre i en komponent blir automatisk oppdatert på de andre. Dette kan være spesielt nyttig hvis du har en stram tidsramme eller samarbeider med andre designere og ønsker å få fart på arbeidsflyten.
Når du kommer i gang, vil du legge merke til at det er to sidefelt på hver side av hovedlerretet du bruker. Du kan bruke verktøy fra en av disse sidefeltene for å gjøre endringer i prosjektet ditt.
Sidefeltet på høyre side gir deg tilgang til alle prototypeinnstillinger og lar deg justere eller redigere alle egenskapene til komponentene dine. Sidefeltet til venstre viser deg imidlertid lagene, ressursene og sidene som brukes i prosjektet ditt. Dette omtales som lagpanelet.
Komponenter bør introduseres til arbeidet ditt ganske tidlig. De hjelper deg å opprettholde konsistens i designene dine og lar deg øke hastigheten du gjør endringer på tvers av prosjektene dine. Det er to nøkkelelementer i en komponent:
- Hovedkomponenten (eller hovedkomponenten) (firedobbelt diamantikon)
- En forekomstkomponent (enkelt diamantikon)
Hovedkomponenter
Før noe annet må du først opprette hovedkomponenten. For å gjøre dette, følg trinnene nedenfor:
- Høyreklikk på laget, gruppen eller rammen.
- Velg Opprett komponent.
- På venstre side av skjermen vil du se en rullegardinmeny som sier Komponent. Klikk på denne.
- Herfra vil du legge merke til en meny der du kan gjøre endringer i komponenten din og redesigne stiler på tvers av prosjekter.
En annen måte å lage en hovedkomponent på er å bruke snarveiene:
- Alternativer + Kommando + K for Mac
- Ctrl + Alt + K for Windows
Selvfølgelig fungerer denne metoden bare hvis du bruker Figma på en PC.
Øyeblikkelige komponenter
En øyeblikkelig komponent er en kopi av hovedkomponenten din. Når hovedkomponenten er redigert på noen måte, oppdateres forekomsten automatisk for å matche eventuelle endringer som er gjort. Hvis du bygger et nettsted, kan dette verktøyet være spesielt nyttig og spare deg for mye tid. For eksempel ville dagene med å gå inn i alle komponentene dine manuelt være borte for å gjenta de samme redigeringene. I stedet endrer Figma dem alle for deg.
Det kan komme et punkt hvor du har opprettet flere forekomster og ønsker å gå tilbake til hovedkomponenten din slik at du kan gjøre en rask endring av alle komponentene dine. For å få tilgang til hovedkomponenten din, gjør følgende:
- Høyreklikk på en hvilken som helst forekomst.
- Klikk på Gå til hovedkomponent.
- Hovedkomponenten vises i sidefeltet på venstre side.
Selv om det er relativt enkelt å lage komponenter én om gangen; du kan få fart på ting ved å lage dem i bulk. For å gjøre dette, følg disse trinnene:
hvordan du sender en lang video på iPhone
- Fra lagpanelet velger du lagene der du vil lage komponenter.
- Klikk på det nedovervendte pilikonet ved siden av hovedkomponentikonet i lagpanelet.
- Velg Opprett flere komponenter fra de tilgjengelige alternativene.
- Derfra vil Figma lage en komponent for hvert rammelag.
Ytterligere vanlige spørsmål
Hvordan overstyrer eller kobler jeg fra en forekomst?
Det kan være tider når du ønsker å gjøre endringer i en bestemt forekomsts egenskaper uten å endre alle de andre. Du kan lage variasjoner av forskjellige komponenter. I Figma omtales dette som overordnet.
Når du overstyrer en forekomst, vil ikke endringer som gjøres i hovedkomponenten påvirke den. For å gjøre dette, sjekk ut trinnene nedenfor:
1. Klikk på instanskomponenten.
2. Fra Egenskaper-panelet på høyre side av skjermen, velg Komponent.
3. Fra rullegardinmenyen som vises, velg Koble fra forekomst.
Hvis du ønsker å fjerne en overstyring, velg komponenten og velg deretter Tilbakestill forekomst fra den øverste midtlinjen på skjermen.
Hva gjør jeg hvis jeg ved et uhell sletter hovedkomponenten min?
Når du bruker hele dagen på å redigere innhold, kan du noen ganger ved et uhell skli opp og slette noe viktig, som hovedkomponenten din. Frykt ikke, for å gjenopprette er det så enkelt som 1-2-3. Bare følg disse grunnleggende trinnene for å få tilbake den manglende hovedkomponenten:
1. Gå til en av forekomstene av komponenten.
2. I egenskapspanelet på høyre side av skjermen velger du Gjenopprett hovedkomponent.
3. Hovedkomponenten vises umiddelbart.
Hvordan legger jeg til en beskrivelse for komponentene mine?
Når du oppretter komponentene dine, kan det å legge til en beskrivelse og en dokumentasjonslenke til hver enkelt hjelpe deg med å navigere i prosjektet ditt bedre. Det er også nyttig for alle samarbeidspartnere du kanskje jobber med å ha tilgang til flere notater. For å legge til en beskrivelse, gå til Egenskaper-panelet på høyre side av siden og velg Legg til en beskrivelse.
Når du har gjort det, kan alle eksterne seere få tilgang til denne informasjonen ved å gå til inspeksjonspanelet i høyre sidefelt.
Hvordan importerer jeg komponenter til Figma?
Du kan importere alle slags filer til en Figma-komponent. Den enkleste måten å gjøre det på er fra skrivebordet. Bare følg disse trinnene:
1. I Figma åpner du siden der du vil importere en fil.
2. Fra filene dine velger du den spesifikke filen du ønsker å bruke.
3. Dra og slipp den valgte filen til Figma-siden.
4. Når du er ferdig med dette, klikker du på Ferdig.
Veien til suksess
Figma er et flott verktøy å bruke enten du er ny innen design eller har vært i spillet i årevis. Programvaren tilbyr et nybegynnervennlig redigeringssystem der designere kan lage innhold fra bunnen av eller bruke hjelp av en mal om nødvendig.
Å forstå hvordan du bruker komponenter på en vellykket måte på Figma kan spare deg for mye tid når du utfører et designprosjekt. Ved å lære hvordan du lager et komponentsystem av høy kvalitet, vil du kunne vokse som designer. Ikke bare det, men det kan også hjelpe deg med å opprettholde konsistent arbeidsflyt gjennom hele den kreative reisen din og la fremtidige samarbeidspartnere enkelt finne arbeidet ditt.
Har du prøvd å bruke Figma til dine kreative prosjekter? Hvordan fant du bruken av komponenter? Fortell oss mer om opplevelsen din i kommentarfeltet nedenfor.
