5 væsentlige måder at bruge designbegrænsninger på

Husk den gode æra med teknisk design, da du skulle oprette grænseflader - højst - til en pc og en Mac? Heller ikke mig. Dette univers synes lysår væk i dagens skærmafhængige verden.

Designernes job er vokset eksponentielt sværere med introduktionen af ​​mobiltelefoner og tablets. Du designer til uendelige tilpasninger og kontekster, en uendelig sisifisk opgave.

Vi føler din smerte hos Figma, og derfor byggede vi vores værktøj med en kraftfuld begrænsningsfunktion. Det giver dig mulighed for at fastgøre elementer af dit design på forskellige sider af deres overordnede ramme. Hvis du indstiller dine begrænsninger korrekt, skaleres dit design efter enhver skærmstørrelse.

Du kan finde dem her i panelet til højreegenskaber, når du vælger en ramme:

Forskellige begrænsningsmuligheder

Begrænsninger er fantastiske, men de tager lidt at vænne sig til. I Figma lader vi dig fastgøre objekter til venstre, højre, øverste, nederste, midt, skala, venstre & højre eller top og bund. Du kan lege med en simpel knap i en ramme for at se, hvordan objekter reagerer på forskellige typer begrænsninger.

Hvordan en knap med forskellige begrænsninger reagerer, når en ramme ændres til størrelse

Brug for hjælp til at finde ud af, hvordan man udfører dem i praksis? Vi har samlet fem måder, som begrænsninger kan gøre dit liv meget lettere, lige fra begynderniveau til mellemliggende.

1) Fastgør en knap i hjørnet

Mange mobile UI'er har handlingsknapper, der er placeret samme sted hver gang. F.eks. Favoriserer Googles retningslinjer for materialedesign en knap nederst til højre (også kendt som en FAB), der opfordrer brugeren til at tage en handling.

Med begrænsninger kan du indstille knappen til det nederste og højre hjørne af dets overordnede ramme. Det sikrer, at knappen ikke flyder rundt på skærmen, når skærmstørrelsen udvides - den forbliver nøjagtigt, hvor du vil have den.

2) Magien ved komponenter + begrænsninger

Du kan arbejde nogle sjove designmagier ved at bruge Figmas komponentfunktion i forbindelse med gitre. Komponenter (som andre applikationer kalder symboler) giver dig mulighed for at omdanne dele af dit design til gentagne, spejlvendte tilfælde. Når du foretager ændringer til originalen, afspejles ændringerne andre steder, du brugte den komponent. (Du kan læse mere om komponenter her.)

For at tilføje begrænsninger til dette: Når du har begrænset de vigtigste dele af dit design til siderne af rammen, skal du omdanne rammen til en komponent. Kopier rammen til flere skærmstørrelser. Når du ændrer attributter for originalen, som farve eller tekststørrelse, kan du straks se dem afspejlet i forskellige skærmstørrelser.

3) Magien med begrænsninger + gitter

Okay, spænd ind, fordi vi bliver lidt mere avancerede. Med Figma kan du bruge begrænsninger til at fastgøre objekter til et gitter. Dette er især praktisk til noget som en navigationslinje i bunden af ​​en app.

For at oprette en fleksibel nav-bar i Figma skal du oprette den ramme, der tjener som telefonskærmen, og derefter nestle nav-bar-rammen i bunden af ​​skærmen.

Indstil nav-bar-begrænsningerne til venstre og højre og nederst. Når den nav-barramme stadig er valgt, skal du vælge et layoutgitter fra panelet til højre egenskaber og indstille typen til “stræk”.

Placer derefter et objekt - som en cirkulær knap - inde i hver gitterkolonne. Indstil begrænsningerne på hver knap, der skal centreres. Når skærmstørrelsen ændres, tilpasser dine knapper sig i overensstemmelse hermed. Se dette indlæg for en endnu dybere dykning i gitre.

4) Tabelceller

Du kan bruge begrænsninger til at lave genanvendelige bordcelle-design, der er fleksible. Designere har ofte brug for tabelceller for at præsentere lister over mennesker eller information, og at tilføje begrænsninger til den grundlæggende celle gør det lettere at tilpasse sig. For eksempel grupperede jeg tekst og en avatar sammen (ved at trykke på kontrol g) og begrænsede den til midten af ​​venstre side af rammen. Derefter grupperede jeg tekst og et rektangel med afrundede hjørner sammen til en knap og begrænsede det til midten til højre for rammen.

Som du kan se, reagerer komponenten nu, som du håber, det ville gøre, med hvert stykke information, der kramar den side af rammen, hvor den hører til, uanset rammestørrelse.

5) Sjove illustrationer

Til sidst regnede vi med at vi ville kaste et sjovt eksempel på begrænsninger bare for spark. Du kan sætte vandrette eller lodrette begrænsninger på illustrationer eller tegninger for at tilføje en ekstra smule humor. Du kan forvandle en hotdog til en slinky version af sig selv, eller forvandle en hund, der ligner en hotdog til endnu mere en. Vi spillede rundt med det til en af ​​vores designerers nylige fødselsdage på Figma.

Stor tak til Chris Hamamoto, Johan Prag og Rasmus Andersson for deres hjælp og illustrationer til dette indlæg.