Design System Krok 2 - Component Inventory

V prvním kroku tvorby design systému jsme si vyjasnili jaké principy by měly být pilíře design systému.

V dalším kroku tvorby design systému projdeme všechno, co už máme nadesignované (asi i naprogramované) a rozebereme to na ty nejmenší části. Vytvoříme si Component Inventory pro každou část aplikace.

Postup

 

  1. Naším cílem je zaznamenat úplně všechny vizuální elementy, které jsou v aplikaci aktuálně použité.

  2. Najděte si ve Figmě část aplikace, kterou se chystáte rozebrat.

  3. Zkopírujte si obsah, který potřebujete do předpřipravené podstránky ve Figmě.
    Eg. do podstránky: “--- Settings & Messages - Component Inventory”

  4. Podle vzoru pro inventář rozeberte všechny komponenty uživatelského rozhraní na ty nejmenší prvky. Atomy.

  5. Pokud najdeš nějaké komponenty, které jsou větší, než atomy, umísti je mezi Molekuly, nebo Organismy.

  6. Ze všech komponent vyber všechny použité barvy, kombinace barev (text a pozadí), průhlednost a přechody; vyplň je do sloupečku Colours.

  7. Jestliže máš stejný button na každé stránce, není potřeba ho rozebírat na atomy na všech stránkách. Důležité je aby ti neunikla žádná komponenta a její stav.

  8. Až budeš mít hotový Component inventory, označ stránku ve Figma checkboxem ☑️

 

Co bude dál

Až dokončíme Inventář, společnými silami ho projdeme a začneme komponenty sdružovat do skupin podle použití. Nějaké komponenty budou duplicitní a v různých variantách, tyhle komponenty budeme sjednocovat a řešit jak je do systému zapojit.

Společně s vývojáři budeme vytvářet a pojmenovávat komponenty. Zároveň je budeme dokumentovat a tak vytvářet Loono Design System.