Udvikling af designsystem. Hvordan man undgår uventet rutine.

Fire enkle ting at huske og følge inden designsystemudvikling

Hvis du udvikler designsystemer, lærte du sandsynligvis, at sekvensen er vigtig. Når en komponent eller symbol blev oprettet, og du har multipliceret den, før den er tildelt de nødvendige egenskaber, blev risikoen for en rutine mulig.

Eksempel: Du har oprettet komponenten fra indlejrede symboler inde i den. Hvis du glemte at specificere størrelsen på parametre / begrænsninger til tiden, skaleres alle de klonede forkert.

Fremskynd design og udviklingstid med op til 50%

Materialedesignsystem til Figma består nøjagtigt af 512 materialer UI-komponenter og 1171 materialeikoner.

  • Unik arkitektur til hurtig tilpasning
  • Udstyret med enkel og klar dokumentation
  • Dedikeret til at passe desktop- og mobilapplikationer
  • Lavet med retningslinjer for materialedesign efter
  • Bruger Figma 'Forekomst' -funktioner maksimalt
  • Understøtter Figma web API til realtid integration
  • Kunder understøtter 7 dage om ugen!

Lær mere → http://setproduct.com/material

Hvis du stadig er i tvivl, anbefaler jeg dig at se oversigten

① Opret en liste med gentagne elementer

Identificer og grupper alle gentagne objekter i nøjagtigt layout, prototype eller koncept. Ikke kun knapper på listen. Etiketter, ikoner, input, overskrifter og så videre. Det er værd at tilføje baggrunde og endda skygger params, hvis du vil bygge et tilstrækkeligt fleksibelt system. Nedenfor lærer du formålet med disse handlinger.

Nogle af gentagne komponenter

② Bestem alle mulige tilstande

Begynd nu at danne en liste til en slags elementer, hvor systemrespons er muligt, eller brugeren vil sandsynligvis interagere med. Hvis din mission kræver at beskrive endda onhover-tilstande, vil jeg anbefale at holde denne proces senere til de sidste udviklingsstadier, når alle komponenter er visuelt kendte, og så kan du spørge dig selv ”Hvilken af ​​dem kræver at blive klonet til yderligere tilstande ?”

Få mulige tilstande for tekstindgange

③ Juster begrænsninger eller ændre størrelsen på parametre

Få dig en regel: ❝ Når jeg arbejder med en komponent, husker jeg altid, hvordan det skalerer sc. Kan du huske eksemplet, hvorfra jeg startede dette indlæg? Den nederste linje er, at du skal indstille begrænsningerne / ændre størrelsen på parametre umiddelbart efter, at du har konverteret rammen til en komponent. Ellers sidder du fast med rutine, hvis du bliver nødt til at justere det manuelt for hvert element i fremtiden.

Ikoner, der ændrer størrelse på params, indstilles til at klikke til højre

④ Tilgængelige navne kom først, angiver - efter

Har din komponent lagt lagt og klonet den til yderligere tilstande? Fremragende, men anvend for det første et tilgængeligt navn på det. Pas på dig selv og dets team, og brug klare navne. Husk, at klonet komponent beholder navnet på overordnet. Hvis du foretrækker ordnethed, forventer jeg, at dit tekstfelt skal lyde som:

Tekstfelter / Understreget / Standard

Nu kan komponenten klones sikkert. Fjern derefter forekomsten, anvend visuelle nødvendige ændringer, og det gjenstår kun at redigere i slutningen:

Tekstfelter / Understreget / Aktiv

⑤ Noget til desserten

Ingen rutine. Min designproces er nu beskæftiget med designsystem og vist live på YouTube:

Den nederste linje ⤑ bevarer sekvensen ♛

Det handler om det grundlæggende i dag. Ingen tvivl, der er mange flere nuancer i designsystemudvikling, måske vil jeg beskrive senere. Del venligst dine egne metoder / trin i kommentarer, når du begynder at designe systemet fra bunden. Skål.

Hvad er det næste? Start dit materialeprojekt hurtigt med dette Figma-bibliotek

Oprettet med Material prototypesystem til Figma
❶ Udforsk systemet → http://setproduct.com/material
❷ Oversigt over komponenter → http://setproduct.com/material/components
❸ Flere videoer → http://setproduct.com/material/videos
❹ Køb & download → http://setproduct.com/material/download
❺ 1000+ materialeikoner → http://setproduct.com/material/icons_pro