Fantastiske ting i Figma

Det er meget lang tid, siden jeg kan huske, at jeg var så begejstret for designværktøjets tilstand. Siden Adobes migration til Creative Cloud, så der ud til at være en forholdsvis [til nu] stillestående tidsramme, hvor håndtering af det ekspanderende udvalg af visningsstørrelser og pixeltætheder blev mere og mere frustrerende. Heldigvis er der mindre, mere smidige softwarevirksomheder, der bygger fantastiske produkter, der leverer helt nye tilgange og arbejdsgange til designværktøjer i UI / UX-genren.

Sketch har fået en fortjent bemærkelsesværdig brugerbase, og selvom Adobe har forsøgt at svare med XD (er det for tidligt at sige, at jeg ikke er imponeret?), Er jeg mest begejstret for potentialet for Figma.

Hvis du er ny med Figma, føles det meget velkendt, hvis du nogensinde har brugt Sketch. Vindukonfigurationen er næsten identisk: værktøjer øverst, lag til venstre, inspektør til højre og lærred i midten - UI'et er dog anderledes: fladt (i sin stil) og minimal sammenlignet med OSX GUI i Sketch. Artboards kaldes rammer, og symboler kaldes komponenter i Figma. Redigering af komponenter foregår inline (ikke på en separat side, som det gør i Sketch), og endda udfylde og strække farver og andre attributter kan tilsidesættes ud over at ændre tekst. En af Figmas mest imponerende og unikke funktioner er dens multiplayer-tilstand, der gør det muligt for brugere at samarbejde i realtid - du får se dine kollaboratører, der arbejder på det samme lærred, der interagerer med designet. Fordi det er browserbaseret (lad ikke det skræmme dig - det er hurtigt og responsivt), kan enhver med en browser bruge den, uanset OS. Det betyder, at der ikke kræves proprietær software, hvilket resulterer i en endnu lettere overdragelse til udviklere.

Selvom multiplayer-tilstand muligvis ikke passer ind i enhver i dag arbejdsgang, har jeg mistanke om, at dette vil ændre sig. Jeg har allerede fundet det virkelig nyttigt at arbejde eksternt med kolleger, selv som et virtuelt tavle til at skylle ud ru ramme og strømme i de tidlige faser af et projekt. At se dine kollaboratører markøren bygge designet sammen med din egen er tillidsinspirerende - det eliminerer følelsen af ​​usikkerhed, som du ofte får om versionskontrol og overskrivning, der opstår, når du bruger nogle sky-applikationer.

Tilfældigt til side: Efter mange års brug af Illustrator elsker jeg helt, at jeg bare kan trykke på 'Jeg' for at få adgang til pipetteværktøjet!

Mens Figma (på dette tidspunkt) mangler nogle af de funktioner, som Sketch har (især omkring stildefinitioner, og et tilgængeligt API til plugin-udvikling), er der en masse virkelig smarte funktioner, som jeg er begejstret for. Deres hurtige frigørelsesplan giver mig tillid til, at mange af de manglende funktioner og funktioner, som brugerne foreslår, ikke er for langt nede. Formålet med dette indlæg er ikke at gå i detaljer om mange af Figmas kendetegn, der er dokumenteret andetsteds (her, her, her og her); I stedet ville jeg fremhæve et par af mine yndlings "små store detaljer", som jeg bifalder teamet hos Figma til implementering. Disse detaljer gør kumulativt en enorm forskel.

Valg af forgrundsobjekter

Når du har en række objekter stablet oven på et baggrundsobjekt (som et kort-brugergrænseflade, eller som indeholder baggrund), kan du nemt vælge objekter ovenpå uden at skulle skifte + klikke på dem individuelt eller låse baggrundslaget for at gøre et markeringshus. Dette vil endda arbejde for at vælge objekter i komponenter eller grupper. Hold blot CMD og træk en markeringsmarkering rundt om de objekter, du vil vælge. Før du trækker, mens du trykker på CMD, skal du holde musen hen over det indeholdende objekt - det vil fremhæve det med en kontur - når du først klikker og begynder at trække for at markere det, ignorerer dette objekt og giver dig mulighed for at vælge objekter i forgrunden. Smart!

Størrelse og justering af tekstfelt

Figma giver dig mulighed for at indstille både bredder og højder på tekstbokse og ud over tekstens lodrette justering. Dette er en virkelig grundlæggende funktion, men det mangler fra Sketch. Tag brugssagen ovenfor. I Sketch skulle jeg enten oprette to symboler: en til etiketter med en enkelt linjeknap og en til to linjekonfigurationer - eller - Jeg skulle oprette tre symboler; to for at huse hver tekstfeltkonfiguration og udveksle dem som tilsidesættelser på et tredje hovedsymbol. Løsningen, mens det er muligt, er besværlig og resulterer i yderligere symboler, og det ekstra besvær med at skulle bytte ud tilsidesætter, når jeg opdager, at en bestemt tekststreng er for lang. I Figma kan jeg udføre dette med et enkelt symbol. Når tekststrengen er for lang til den ene linje, indpakkes den i to linjer og forbliver lodret centreret inden i tekstfeltet med fast højde.

Flere raster kan tilføjes til hver ramme. Tavler kan indstilles til at være fast midt eller venstre eller til at strække. Hvert gitter kan farves uafhængigt.

gitre

Netindstillingerne (layout) i Sketch fungerer… men der er noget ved det, der aldrig føltes rigtigt for mig. Netoprettelse i Figma føles meget enklere og alsidig. Du kan tilføje så mange gitre til en ramme, som du vil, og du kan endda tilføje gitre i dine komponenter. Du kan style hvert gitter individuelt til identifikation. For eksempel kan du have et 3-kolonnet rist og et 6 kolonnes gitter og farve dem unikt. Figma har også en indstilling, der vil strække gitteret og skalere det til dimensionerne på din ramme. Evnen til at specificere faste og flydende (stretch) gitter er virkelig praktisk, når man bygger ud et system til at arbejde på tværs af en række visningsstørrelser. Tilføjelse af rækker til gitteret fungerer nøjagtigt på samme måde, men kontrolleres uafhængigt af kolonner som et ekstra gitterlag. Hvert gitter kan styres og skiftes uafhængigt fra inspektøren. CTRL + G skifter hurtigt gitter over alle rammer.

Juster efter gitteret

Når du opretter komponenter i Figma, kan du fastgøre objekter i din komponent til din rammes gitter. Justeringen opretholdes, mens du skalerer din komponent eller ramme. Disse detaljer har magten til at gøre det lettere at tilpasse dine designs til forskellige visningsstørrelser!

Klipindhold

Figma har en praktisk og latterligt enkel funktion, der giver dig mulighed for at skifte, om dine kunstværker er beskåret til din ramme eller ej. Først tænkte jeg ikke meget på denne funktion, før jeg var nødt til at kortlægge nogle strømme mellem tegnebræt i Sketch. Når du vil gøre noget enkelt som at tegne pile, der forbinder knapper på et tegnebræt til en anden ramme, bliver pilene beskåret inden i dit artboard. De mulige løsninger er at holde dine pile uden for tegnebrættet eller indeholde alle dine artboards på et andet artboard. I Figma skal du bare fjerne markeringen i boksen - dette er endnu mere nyttigt, når du arbejder på skærme med langt rulleindhold, fordi du kan forhåndsvise det, du måtte se i visningen, men let får adgang til at redigere det indhold, der falder uden for rammen.

Begrænsninger

Jeg havde ikke til hensigt at gå i detaljer om begrænsninger, fordi dette er en temmelig veldokumenteret funktion, men det ville være svært at skrive om Figma uden at nævne dem, der ikke kender dem. Sammenlignet med Sketch (som giver dig 4 forskellige begrænsningstilstande), giver Figma dig 5 forskellige tilstande og giver dig mulighed for at tildele dem uafhængigt som lodrette eller vandrette attributter. Brugergrænsefladen til at kontrollere begrænsningerne er overraskende enkel. Det kan styres via dropdown-menuvalg eller ved at identificere begrænsningsplaceringerne på en lille tværhårvisualisering. Hvis diagrammet ikke giver mening først, vil det, når du begynder at foretage valg fra dropdowns. Jeg kan godt lide at de ikke forsøgte at vælge forvirrende ikoner i rullemenuen her, tekstindstillinger er meget mere beskrivende. Figma giver dig mulighed for at definere begrænsningerne inde i dine komponenter og til din komponent som helhed i forhold til din ramme, så de reagerer på ændringer i rammestørrelse.

Et par ting vil jeg gerne se i Figma

Komponent-til-komponentbegrænsninger
Evnen til at definere begrænsninger eller forhold mellem to eller flere komponenter. Når et objekt eller en tekstboks bliver længere, kan evnen til at flytte / skifte et tilstødende objekt eller endda udvide, der indeholder objekt.

Live data
Mulighed for at indsætte live data eller brugerdefinerede datasæt, inklusive billeder i designet (som vi ser med Craft from Invision).

Gitterbredde
Muligheden for også at definere gitre ud fra deres samlede bredde og automatisk beregne søjlebredder.

Type kontrol
Flere muligheder for at kontrollere type, såsom adgang til OpenType-funktioner, lister med bestilte og nummererede, hængende tegnsætning, adgang til en glyph-palet og muligheden for at definere stilarter af universel type.

sider
Sider er en funktion, jeg virkelig kan lide og har fundet nyttig i Sketch for at adskille, organisere og gruppere skærme.

Figma har endnu ikke annonceret deres langvarige prismodel (den er i øjeblikket gratis), eller hvis der er planer om en arbejds-offline tilstand, eller alternative metoder til håndtering af projekter, der er for følsomme til at gemme i skyen - men jeg ser entusiastisk ud frem til at se, hvad der kommer næste. Jeg skal også bemærke, at selvom jeg har haft mange af disse funktioner, bruger jeg også Sketch dagligt og nyder grundigt at bruge det. Der er et fantastisk plugin-udviklingssamfund med Sketch og nyttige tilføjelser som Craft. Jeg har lige endnu ikke læst noget om plugin-udvikling eller et tilgængeligt API for Figma, men jeg har læst, at teamet undersøger måder, hvor brugere kan bringe reelle data ind i designet. Jeg elsker, at så meget af Sketchs funktionalitet generøst udvides af et samfund af plugin-udviklere, men jeg spekulerer på, om dette introducerer udfordringer, når nye versioner af Sketch frigives. Virker det open source-plugin, du er kommet til at stole på, stadig det samme efter hver opdatering? Blir det vanskeligt at opretholde kompatibilitet eller teste for konflikter / fejl? Jeg er virkelig nysgerrig. Under alle omstændigheder kan jeg ikke vente med at se, hvad der er næste!

Del nedenfor dine yndlingsfunktioner / detaljer i Figma!