Figma Styles beta: En ny måde at anvende tekst- og lagattributter på

Redigering: Betagruppen Styles er nu lukket. Tak til alle, der viste interesse! Vi følger snart op.

I dag er vi glade for at annoncere en privat beta til Figma Styles. Stilarter forenkler din arbejdsgang og holder tekst- og lagattributter ensartede på tværs af alle dine dokumenter. Vi tog en modulær tilgang, så du kunne anvende tekst-, udfyldnings-, layoutnettet, effekt og strejkestilarter separat.

Disse stilarter er tilgængelige i dit teambibliotek, så alle kan forblive synkroniseret med de mest opdaterede versioner. Du kan aktivere dit teams stilarter, og du vil modtage underretninger, når der er ændringer.

Efter at have deltaget i Figma, arbejdede jeg sammen med Rasmus, en af ​​vores designere, for at færdiggøre interaktionsmodellen for Styles. Gennem tidligere brugerundersøgelser dukkede han og teamet op på nøglesmerter med brug af stilarter i andre værktøjer. De faldt ind på de nøjagtige problemer, jeg kæmpede med, og jeg var begejstret over deres løsninger.

Når vi frigiver Figma Styles offentligt, vil vi gøre et dybt dybde i vores tilgangs fordele. I mellemtiden er her et glimt af to af de største smertepunkter, det løser:

Smertepunkt 1: Opsætning af tekstformater

Traditionelt binder tekstformer form, farve og justering sammen. Hvis dit brand bruger en skrifttype som Helvetica, skal du oprette Helvetica-stilarter til overskrifter (h1), underoverskrifter (h2) og afsnitstekst (p). Hvis du tilføjer et par farver til blandingen - for eksempel at fremhæve linketekst - bliver ting eksponentielt kompliceret. I de fleste designværktøjer kan du ikke adskille tekst og farvestil, så du skal oprette 9 stilarter - 3 farver til hver af de 3 tekstformater (og det inkluderer ikke engang tekstjustering).

Hvis dit brand ændrer sig - lad os sige, at du er klar over, at din 'lysegrå' linkfarve ikke består godkendelsestests - skal du manuelt opdatere alle de stilarter, der er påvirket af denne ændring.

Vi løste dette problem ved at nedbryde form, farve og justering. Alle tre attributter kan indstilles (og derefter bruges) individuelt. Hvis din linkfarve ændrer sig, skal du blot opdatere den originale udfyldningstil, og den spreder sig gennem dit design på alle de steder, hvor det blev brugt.

Smertepunkt 2: Brug af stilarter i tekstfelter

Overskyd enhver del af dit tekstfelt med en bestemt typografi

I de fleste designværktøjer kan tekstfelter kun indeholde en stil. Det betyder, at hvis du vil formatere en del af en sætning som et link, inkludere en sektionsoverskrift eller foretage andre justeringer, vil du fordreje forbindelsen mellem tekstfeltet og den oprindeligt anvendte stil.

I Figma fungerer tekstfelter lidt anderledes. Brugere kan vælge og anvende forskellige tekst- og udfyldningsformater i et tekstfelt ved at fremhæve en del af teksten. Dette vil gøre det lettere at tilføje underoverskrifter eller definere sektioner af teksten som links (blandt andet). De vil beholde deres forbindelse og opdatere, når du ændrer den relaterede stil.

Tilmeld dig nu

Dette er en ny måde at arbejde med stilarter på, og selvom det muligvis er en justering, tror vi, at belønningen vil være det værd. Det vil lette daglige smertepunkter for individuelle designere og give holdene fleksibilitet til at tilpasse deres designsystemer i skala.

Hvis du er interesseret i at tjekke det ud, slip os en linje her.

Bemærk: Med beta-enheden migrerer vi mindre hold før større hold, og det er en envejs migration.