Dokument dine designsystemer med Fractal

Sep 11, 2025

hvordan

[1. 3]

Har du lyst på å lære mer om designsystemer? Så ikke gå glipp av senior ui ingeniør Mina Markham på Generer New York. Den 28. april, hvor hun vil diskutere hvordan hun opprettet Pantsuit, designsystemet som drev mange av applikasjonene som var vert for HillaryClinton.com. Og på vestkysten, på Generer San Francisco. 9. juni, Stephanie Rewis. Vil dele noen av leksjonene hun lærte mens hun bygde Salesforce Design System.

Nå er mange av oss kjent med stil guider . Men det er en ny rase av designsystemdokumentasjon som får damp: Mønsterbiblioteket. Den største forskjellen mellom de to er den primære kilden til verktøyets dokumentasjon.

En stilguideens dokumentasjon har en tendens til å stamme fra en Markdown-fil, så for å vise markeringen, blir forfatteren ofte tvunget til å kopiere og lime den inn i markeringen. Dette er nesten umulig å opprettholde når du monterer flere komponenter sammen.

Et mønsterbibliotek, derimot, behandler våre komponent HTML-filer som førsteklasses borgere. Hver komponent får sin egen side, hvor den viser markeringen og gjengitt HTML direkte fra HTML-filen. Dette sikrer at HTML-filene og dokumentasjonen aldri kommer ut av synkronisering.

Mønsterbiblioteker er ofte bygget med et templerende språk i stedet for vanlig HTML. Maler kan inneholde variabler og annen logikk, så vi kan passere i ulike sett med data, slik at variasjoner av en komponent skal vises.

Det er mulig å kombinere flere maler for å lage mer komplekse skjermer, eller til og med fulle sider. Disse filene er så fleksible de kan til og med brukes i produksjonen! Eventuelle endringer i vårt mønsterbibliotek blir automatisk hentet av vår nettside, som alle MarkUp - for biblioteket eller for produksjon - kommer fra et enkelt sett med kanoniske maler.

Design systems will be covered at both Generate New York and San Francisco this year — Design Systems vil bli dekket på begge generere New York og San Francisco i år

Gå inn i fraktal

Laget av Clearleft, Fraktal Hjelper deg med å bygge og dokumentere nettkomponentbiblioteker, og integrere dem i prosjektene dine. I denne opplæringen vil vi se nærmere på hvordan det fungerer (last ned en ferdig versjon av demoen på her ).

Fractal er en node.js-modul som er installert via NPM. Først vil du installere modulen globalt slik at du kan generere et nytt prosjekt:

npm install --global @frctl/fractal

Med denne pakken installert, opprett et nytt prosjekt:

fractal new project-name

Denne kommandoen brenner opp en installasjonsveiledning som går deg gjennom oppsettprosessen. Det vil spørre deg om tittelen på prosjektet; navnene på komponentene, dokumentasjonen og offentlige mapper; Og hvis du skal bruke GIT for versjonskontroll. Når disse spørsmålene er ferdige, installerer Fractal alle de nødvendige modulene og konfigurerer en mappestruktur akkurat som spesifisert.

Hvis du vil hoppe over den globale installasjonen og opprette prosjektet manuelt, kan manuelle installasjonsinstruksjonene bli funnet på her .

Spinner den opp

Nå har du et fullt installert fraktalprosjekt, spinn det opp ved å gå inn i prosjektmappen CD-prosjektnavn og kjører kommandoen Fractal Sync. Dette starter en lokal server, ser på filene for endringer og starter automatisk Browsersync:

fractal start --sync

Og akkurat slik har du en arbeidsinstans av fraktal. Åpne nettleseren din av valg og naviger til http: // localhost: 3000 for å se starten på ditt nye Fractal-prosjekt. For å unngå at alle skal installere Fractal Globalt, opprett et skript i din pakke.json. som kaller fraktal binær.

 "Skript": {
    "Fractal": "./node_modules/.bin/fractal start - Sync"
}

Nå kan du bruke npm kjøre fraktal uten å måtte installere noe globalt.

Legge til en komponent

Nå har du startet et fraktalprosjekt, det er på tide å legge til noen komponenter. Startfilene kommer med en komponent kalt 'Eksempel', men vi skal kvitte seg med det og lage en ny fra bunnen av.

En av de beste tingene med Fractal er at du kan organisere komponentene dine, men du liker inne i komponentmappen, og den vil automatisk etterligne den organisasjonen i navigasjonen på mønsterbiblioteket.

For den første komponenten, oppretter vi en ny primærnapp inne i en Knappmappe . For å gjøre det, opprett med en malfil på Komponenter / Knapper / Primær-knapp / Primærknapp.hbs . Fractal støtter styremedlemmer ut av boksen, så bruk .hb. filutvidelse:

  & LT; knappeklasse = "Primærknapp" & GT; {{TEXT}} & LT; / knappen

De {{tekst}} streng inne i knappetiketten er en variabel plassholder, og dette lar deg gjenbruke malen, passerer i forskjellige verdier for tekst fra datafilen.

For å opprette datafilen, bruk det samme grunnnavnet som styringsfilen, men med en annen YML. Utvidelse. Nå primær-knapp.config.yml. sitter inne i det Komponenter / Knapper / Primærknapper Mappen skal se slik ut:

 Tittel: Primærknapp
kontekst:
    Tekst: Klikk meg

Alt dette sammen skaper din første nye komponent, den primære knappen, et medlem av knappen Knapp, med teksten: 'Klikk meg'.

Komponentvarianter

Fractal støtter variasjoner av samme komponent, slik at vi kan vise samme komponent med ulike modifikatorklasser eller attributter. Så la oss si at vi ønsket å ha muligheten til å bruke en mørk tema-knapp. Vi kan opprette en ny malfil som heter Primær-knapp - Dark.hbs Ved siden av vår opprinnelige mal (dobbeltklassen betegner disse komponentvariasjonene). I denne malen bruker vi en modifikator vi kan koble til for å feste nye stiler.

 & lt; knappeklasse = "Primær-knapp" Data-tema = "Mørk" & GT; {{tekst}} & lt; / knappen & gt;

Nå når vi skriver våre CSS, kan vi inkludere følgende velger for å endre denne malen med endring av stiler.

 .Prim-knappen [Data-tema = "mørk"] {}

Datavarianter

Akkurat som vi kan definere variasjoner ved å lage flere malfiler, kan vi også lage variasjoner i våre data. Vi kan gjøre dette inne i primær-knapp.config.yml. fil ved å legge til et varianter array.

 Tittel: Primærknapp
kontekst:
    Tekst: Klikk meg
Varianter:
- Navn: Last ned
    kontekst:
Tekst: Last ned nå
- Navn: Installer
    kontekst:
Tekst: Installer nå

Dette vil opprette nye variasjoner som heter 'Last ned' og 'Installer', med forskjellig tekst som er angitt i knappen. Et mer praktisk eksempel kan være hvis du brukte det samme primær-knapp.hbs. Mal i Fractal så vel som produksjon. I dette tilfellet, i stedet for å opprette en helt ny mal for ditt mørke tema, kan du sende temaverdien som en variabel og bruke datavariasjonene til å vise alle de forskjellige knappene.

 & lt; knappeklasse = "Primær-knapp" Data-tema = "{{THEME}}" & gt; {{tekst}} & lt; / knappen & gt;

Tittel: Primærknapp
kontekst:
    Tekst: Klikk meg
    Tema: Lys
Varianter:
- Navn: Dark tema
    kontekst:
Tekst: Klikk meg
Tema: mørk

Håndtering av andre eiendeler

Fractal vil også håndtere andre filer enn MarkUp og Data. Eventuelle CSS, JavaScript, bilder eller andre eiendeler du legger til i komponentmappen, vises i kategorien 'Eiendeler'. Du kan spesifisere en Readme.md. Fil for komponenten slik at du kan skrive notater om hvordan komponenten brukes, eller lenke til andre deler av dokumentasjonen.

Neste skritt

Gjenta det forrige eksempelet for alle kjernekomponentene dine skaper en nyttig katalog over nettstedets hovedbygningsblokker. Men den virkelige kraften i et mønsterbibliotek kommer fra evnen til å kombinere disse stykkene sammen. Pass på å sjekke ut Fraktal dokumentasjon For å lære hvordan du kan begynne å skape mer komplekse komponenter ved å kombinere mindre atomelementer for å skape større.

Docs-mappen er et flott sted å sette tradisjonell stil guideinformasjon og tilleggsanvisninger. Dette kan dekke ting som ombord på dokumentasjon, retningslinjer for merkevarens stemme og tone, lister over farger og variabler, og så videre. Det følger samme mappebaserte navigasjon som komponenter gjør, og hvis du organiserer filene dine i Emne-mapper, finner du navigering av Fractal Docs. en bris.

Fractal støtter også mer komplekse datakilder. Hvis du trenger å generere et stort sett med data for en mal, eller vil du trekke den inn fra noen tredjeparts API, kan du bruke komponent-navn.config.js. Slik returnerer du et JavaScript-objekt i stedet for YML-fildataene.

Til slutt, Fractal lar deg bruke en rekke forskjellige templerende språk.Pass på å sjekke ut hele listen i dokumentasjonen.Og mest av alt, ha det gøy!

Bestill billetter til generere i dag!I New York. Du kan lære fra Mina Markham, som bygde designsystemet for Hillary Clintons presidentkampanje, og i San Fransisco Stephanie Rewis vil forklare hvordan du kan arkitektere og bygge et moderne CSS-rammeverk for et "levende designsystem" på bedriftsskalaen.

Denne artikkelen ble opprinnelig publisert i Net Magazine Issue 285, Kjøp det her

Dokument dine designsystemer med Fractal

Gå inn i fraktal

Spinner den opp

Legge til en komponent

Komponentvarianter

Datavarianter

Håndtering av andre eiendeler

Neste skritt

hvordan - Mest populære artikler

Hvordan bruke Cloud Storage som en kreativ

Slik laster du ned Instagram Photos: Alt du trenger å vite

Slik lager du en tegneserie

Opprett perspektiv i Adobe Illustrator

Lag collage effekter i nettleseren med CSS

Hvordan prototype en mobilapp med origami Studio

Hvordan lage realistisk CG-klut

Lag en sprut effekt i RealFlow

Kategorier