Komponenter i Figma

I dag er vi glade for at frigive komponenter i Figma. Ved at bringe koncepter som komposition, arv og ubegrænset tilsidesættelse fra teknik til design, bevæger komponenter os tættere på en verden, hvor vi let kan resonnere om designsystemer, når vi arbejder med vores daglige arbejde.

Kun to uger efter, at jeg begyndte at arbejde på Figma - for næsten et år siden - startede vi projektet med bygning af komponenter. Som nogen, der kommer fra en baggrund inden for både design og teknik, har jeg lagt mærke til, at vores design er meget anderledes end den måde, vi bygger software på. Folk forventer komplekse brugergrænseflader, der er levende, tilsluttet og altid forbedrer. Hvordan kan vi følge med som designere? Ingeniører har allerede fundet ud af dette.

Komponenter er et populært koncept inden for teknik, der bruges i alt fra iOS, Android, macOS, Windows, Unity, HTML og andre teknologier, der bruges til faktisk at bygge brugergrænseflader og spil. Reaktion er for eksempel en måde at opbygge store UI-systemer uden hovedpine ved at behøve at forstå alt på én gang gennem sammensætning af mindre dele til mere kompleks opførsel.

Hvad hvis vi anvendte dette koncept til designværktøjer?

Throwback til de gamle dage; Komponenter i aktion - Åben i Figma

Design med komponenter

Komposition er en grundlæggende del af design. Det giver os mulighed for at resonnere om en mindre del af et større system og gør det muligt for os at genbruge eksisterende dele, hvilket sparer os tid til ellers gentagne og kedelige arbejde. Tilføjelse af konceptet med komponenter til et designværktøj gør sammensætningen af ​​komplekse designs mere konsistent og mere effektiv.

For eksempel kan en adressebog-app have en tabel, der viser en kontakt pr. Række. At designe en god listevisning kræver at du finder den rigtige type størrelse, afstand, ikoner og anden grafik. Den samme komponent kan bruges mange steder på én gang, hver i en anden størrelse med lokale ændringer og forskelle:

Ikke kun gør det lettere at genbruge eksisterende dele hurtigt, men komponenter hjælper også med konsistensen. Og da genbrugte komponenter ikke er kopier, men forekomster af den samme komponent, afspejles alle ændringer, der anvendes senere, øjeblikkeligt på tværs af dit design.

Vores tilgang til komponenter

Hos Figma mener vi, at designværktøjer ikke bør komme i vejen for dit kreative arbejde. Mange værktøjer har forsøgt at tackle problemet med genanvendeligt design, men vi mener, at vores implementering er anderledes.

Når vi designede komponenter, var vores mål at gøre dem:

  • let at lære for enhver at komme i gang
  • kraftfuld nok til avancerede brugere
  • fleksibel nok til at arbejde gennem designprocessen

At designe systematisk bør ikke bremse dig - det skal ikke kræve mere omkostning. Det skal give dig mulighed for at bygge ting hurtigere og mere konsekvent uden at blokere din evne til at være kreativ og løse nye problemer.

Hvordan det virker

I Figma fungerer komponenter lige som rammer, med det drejning, som duplikater af en komponent skaber nye tilfælde i stedet for kopier. Vi starter med at vælge noget, vi ønsker at lave til en komponent, og klik på handlingen "Opret komponent" på værktøjslinjen:

På dette tidspunkt er det bare en ramme med en smuk lilla kontur. Nå, indtil vi opretter nogle tilfælde.

Vi kan holde alt-tasten og trække, bruge handlingen "Duplicate" eller blot kopiere og indsætte en komponent for at oprette tilfælde:

I to tilfælde har vi nu tre af den samme ting. Hver har en uafhængig position på lærredet, men er ellers identiske.

Enhver ændring, vi foretager i vores komponent, afspejles øjeblikkeligt i dens tilfælde:

Der er et vigtigt aspekt, der gør forekomster specielle: de er refleksioner af den komponent, de repræsenterer, og tillader tilsidesættelse af forskellige egenskaber, men begrænser et par egenskaber som placering og størrelse af objekter indeni, alt sammen for at gøre det så let som muligt at administrere og vedligeholde komponenter .

Da enhver ændring af en komponent afspejles i et tilfælde, hvad sker der, hvis vi ændrer noget i et eksempel? Forsvinder den ændring simpelthen, når komponenten ændres? Nej, det ville være skørt.

Tilsidesættelse af stil og ejendom

Ændringer foretaget i tilfælde kan betragtes som tilsidesættelse af den originale komponents stil og egenskaber. Lad os se, hvad der sker, hvis vi tilsidesætter farven og streget i vores tilfælde og derefter ændrer den originale komponent:

Hvad der sker her, er, at vi sagde, "for dette særlige tilfælde skal du udfylde farve være mørkegrå, og for dette skal farven og bredden på streget være rød og 6px, uanset hvad værdierne er for den originale komponent." Når vi senere foretager ændringer af komponenten, forbliver vores tilsidesættelser, men andre egenskaber, som vi ikke tilsidesætter, afspejles ordret.

Enhver egenskab i en hvilken som helst del af en instans kan tilsidesættes, inklusive eventuelle sublayere og deres egenskaber. Dette gør mulighederne næsten uendelige.

Når vi skifter mening og ønsker at rydde overstyringen fra vores tilfælde, kan vi blot vælge de ting, vi vil nulstille, og vælge "Nulstil forekomst."

Komplekse komponenter

Tidligere i denne artikel talte vi om at skabe systemer ud af let forståelige komponenter, og at komponenter kan indeholde andre tilfælde for at danne mere kompleks opførsel. Sådanne "indlejrede komponenter" er lige så lette at oprette og arbejde med ethvert andet objekt i Figma. Du skal blot tilføje en instans til en komponent, eller oprette en ny komponent fra en eller flere valgte forekomster:

Begrænsninger

Figma er kraftfuld på den måde, vi kan kombinere flere funktioner sammen. Begrænsninger er en af ​​disse funktioner, der, når de tilføjes til et design, tillader en helt ny dimension af kreativt udtryk, især i hvordan ting reagerer på forskellige størrelser og positioner:

Åben i Figma

Læs mere om begrænsninger i gittersystemer til skærmdesign

Denne udgivelse af komponenter er bare begyndelsen for os, men det er fundamentet for en række trin, vi tager for at bringe design tættere på teknik. Efterhånden som design bliver mere kompliceret og flere mennesker bliver involveret i designprocessen, vil det være endnu mere vigtigt, at vores værktøjer bliver smartere og hjælper os med at udføre arbejde, der kan automatiseres, så vi kan fokusere på at løse designproblemer. Prøv det, og lad os vide, hvad du synes!