Figma er imponerende ... men har en grundlæggende fejl

Opdatering: Figma behandlede mange af disse problemer fra version 3.6.4.

Sidste uge begyndte jeg at bruge Figma til at bygge et designsystem fra bunden. Figma er utroligt hurtig og gennemtænkt. Deres komponentsystem er bedre end Sketch på mange måder. Men jeg fandt, at jeg arbejdede for langsomt. Det tog et stykke tid at diagnosticere problemet; det viste sig at være lagpanelet! Jeg bruger alt for meget tid på at jage rundt i lagene.

Figma har pakket en masse funktionalitet i deres lagpanel. Og panelet ser ud til at kollapse under pres. Her er nogle forslag til styrkelse af fundamentet.

Skift ikke tekstfarve til komponentlag

Når alt er lilla, er intet lilla.

Figma (til venstre) har dårlig kontrast og læsbarhed sammenlignet med Sketch (højre)

Figma bruger lilla tekst til komponentlag. Når du er et designsystem-freak som mig, bruger du en masse indlejrede komponenter. Dette betyder, at størstedelen af ​​dine lagnavn er lilla. Dette gør panelet meget svært at læse. Sammenlign med Sketch og føl dine øjne slappe af.

Bemærk også, hvor meget bedre de lilla symbolikoner skiller sig ud i skitse ved siden af ​​sort tekst. Figmas diamantformede komponentikoner er for lette og uvæsentlige.

Visuelt differentier rækkerne

Lag kan navngives hvad som helst og adskiller sig meget på tværs af projekter. I Figma er det vanskeligt at analysere rækkerne visuelt, når du scanner lodret. For at løse dette skal du blot skifte rækkefarve. Det er indlysende, men effektivt. Dette problem blev løst af regneark for aldre siden. Ingen grund til at innovere her.

Grupper er mapper

Dette skal være ligetil. Grupper er dybest set mapper. Giv dem et mappeikon. Når man ser på Sketch and Invision Studio, er det let at finde grupperne. Det er en gennemprøvet model, som alle allerede har lært.

Men på grund af Figmas unikke evne til at indlejre rammer og direkte manipulere komponenter, er begrebet grupper blevet indviklet. De er overindekseret ved signering af disse funktioner, hvilket gør det vanskeligt at differentiere grupper fra andre lag. Optimer i stedet for hurtig genkendelse og brug en subtil rådighed til at indikere, hvornår det er en komponent.

Bemærk for øvrig nogensinde, hvordan Sketch-grupper automatisk falder sammen, når du ikke bruger dem? Dette gør scanning lettere og reducerer dynamisk lagets højde på lagpanelet.

Få den øverste ramme til at skille sig ud

I panelet Lag er det vanskeligt at se, hvor den ene skærm slutter, og den anden begynder. Dette skyldes, at rammer kan indlejres. Hovedcontainerrammen har en subtil grå baggrund, men det hjælper ikke meget, når du scanner gennem snesevis af skærme. For den øverste ramme ville jeg miste ikonet og gøre det mere synligt.

Konsistent fremhævningsfarve

Et andet ulige valg er at ændre fremhævningsfarven, når du vælger et komponentlag. Deres højdepunkt er lilla i stedet for standardblåt. Problemet er, at resten af ​​applikationen har oplært dig til at kigge efter blåt. Dette betyder, at når du har valgt et symbol, ser det ikke ud som om noget er fremhævet. Og det bliver aldrig intuitivt. Hold fast med standardblåt for alt, og fjern de sekundære højdepunkter.

Nemmere at analysere?

Forhåbentlig er dette nyttig feedback til de smarte folk på Figma. Jeg er klar over, at det er meget lettere at kritisere udefra uden fuldt ud at forstå publikum, strategi og begrænsninger. Jeg har været meget imponeret over produktet og elsker modellen.