Eliberarea sistemelor de proiectare

Furnizarea de ieșiri interconectate către adoptatori în timp

Nr. 1 din 6 din seria lansatoare de sisteme de proiectare:
Produse | Cadență | Versiuni | Ruperea | Dependențe | Proces

Companiile realizează valoarea unui sistem de proiectare atunci când adoptă produse folosesc un sistem pentru a realiza și expedia experiențele pe care clienții lor le utilizează. Ca parte a acestui lanț de valoare, sistemul lansează funcții în timp. Acest lucru pune sistemul în mâinile clientului său: designeri și ingineri care își fac treaba.

Echipele de sistem puternice iau serios comunicările. Nu se consideră că eliberează doar cod de bibliotecă pentru componente. În schimb, furnizează multe alte rezultate: jetoane de proiectare, documentație, active de proiectare și alte resurse.

Această serie descrie multe fațete ale lansării sistemelor de proiectare. Începe prin a defini multe ieșiri ale unui sistem și unde sunt livrate. Articolele ulterioare acoperă subiecte de cadență, versiune, schimbări de rupere, dependențe și o abordare pas cu pas.

Aceste povești reflectă ceea ce am învățat să eliberez sisteme care lucrează cu echipe precum Discovery Education, Morningstar, Target și REI. Acestea sunt ridicate de perspectivele colegilor de la Salesforce, Adobe, Atlassian, Shopify și Financial Times. Vă mulțumim pentru a vă împărtăși cu grație timpul și practicile!

Rezultate: Ce s-a lansat?

Programele de sisteme de proiectare eliberează multe tipuri de ieșiri, nu doar cod. Drept urmare, un sistem ar trebui să diferențieze și să comunice această gamă de ieșiri versate dezvoltatorilor, proiectanților și altor clienți.

Cod, Sursa Adevărului

Cele mai multe sisteme oferă o sursă unică de adevăr a codului stratului de prezentare ca:

  • Biblioteca de componente UI ca marcare HTML și CSS. Adesea denumit „CSS”, consumul acestui pachet se bazează pe utilizarea sau compilarea CSS ca linie de referință a stilului vizual consistent, cuplată cu reutilizarea fragmentelor HTML.

și / sau ...

  • Biblioteca de componente UI ca Javascript: Multe sisteme înfășoară HTML și CSS cu JavaScript pentru a fortifica logica, a încapsula stilul și pentru a ușura integrarea și întreținerea mai direct într-un cadru la alegere. În timp ce majoritatea bibliotecilor vizează un cadru specific (React, Vue, Ember, Angular, ...), semnalele industriei sugerează o schimbare către crearea de componente web pentru toate cadrele. Ultimele mele șase eforturi de sistem? Mai târziu 2017: vanilie HTML, vanilie HTML. Începutul anului 2018: reacționează, Vue. Mai târziu 2018: Componente Web, Componente Web.

În plus, alte ieșiri proeminente pot fi lansate separat:

  • Proiectare jetoane care stabilește un stil vizual prin perechi de proprietăți-valoare semnificative semantic. Token-urile sunt variabile disponibile în mai multe formate pentru utilizare pe platforme (web, iOS, Android), preprocesoare (Sass și LESS) și cadre (cum ar fi React). Unele sisteme gestionează jetoane într-un depozit separat de codul componentei UI. Drept urmare, biblioteca lor - împreună cu alte implementări - pot depinde și de jeton ca pachet.
  • Demo Aplicații / Site-uri ca mediu cu exemple de pagină construite folosind biblioteca de componente. Demo este, de asemenea, pentru tutoriale și prototipare rapidă, inclusiv de către designeri!
  • Componente multiplă platformă potrivite pentru iOS, Android și Windows.

Active de proiectare

Majoritatea echipelor limitează înțelegerea a ceea ce eliberează la simplul „lansăm cod”. Le deschide ochii pentru ca ei să realizeze că publică atât de multe alte instrumente care se schimbă în timp. Ei includ:

  • Seturi de instrumente de proiectare ca fișiere șablon și biblioteci de simboluri oferite în software-ul de proiectare. Astăzi, aproape întotdeauna Schiță. Mâine, Figma, Invision Studio și alți concurenți emergenți?
  • Fonturi, icoane și chiar seturi de imagini ale lui Origami datorită rolului preconizat de multe ori al sistemului în distribuirea și versiunea acestor biblioteci.
  • Alte resurse de proiectare, cum ar fi ilustrația și arhiva de culori ASE / CLR fișiere ca un tramp pentru lucrări de artă personalizate. Aceste colecții se schimbă lent, mai puțin formal și prin contribuțiile membrilor comunității nu fac parte dintr-o echipă de bază a sistemului. Cu toate acestea, din perspectiva clientului și a comunicațiilor sistemului, aceasta face parte din sistem.

Site de documentare

Sistemele de proiectare au nevoie de o casă, un loc în care toată lumea știe că poate găsi o cale către tot ceea ce va avea cele mai recente și mai bune. Găsit la o adresă URL memorabilă, este adesea construit cu componente UI specifice misiunii sale.

  • Site-urile de documentare descriu funcții (cum ar fi un buton), la noi utilizatori și declanșează procese precum obținerea de ajutor sau contribuția. Echipele construiesc site-uri mai des folosind un generator de site static sau mai puțin adesea cu un sistem de gestionare a conținutului.
  • Componente de documentare - cod-exemplu-pereche, do-dont, hex-code, component-explorer - depind de biblioteca de componente UI și servesc, de regulă, doar site-ul doc. Astfel de componente pot fi versionate cu site-ul de documentare sau ca o a treia bibliotecă cu versiune separată în raport cu documentul și componentele UI între care se află.

Destinații: Unde merge?

Atunci când distribuiți coduri și active de proiectare, este esențial să oferiți codul în maniere cel mai ușor de consumat de către inginerii dvs. în adopție. Acest lucru înseamnă că unele sisteme trebuie să ofere alegere pentru mai multe opțiuni, în timp ce altele se pot baza pe o singură alegere ca standard organizațional.

Pentru Cod

  • MAI BUN: Registre precum npmjs (sau o omologă internă, cum ar fi nexusul lui Sonatype), care asigură accesul și gestionarea pachetelor de cod lansate. Dezvoltatorii folosesc apoi instrumente precum bower, npm, fire, webpack și babel pentru a integra și actualiza codul acesta în mediile lor.
  • BETTER: Active găzduite pe CDN-uri pentru link-uri directe la stilul și scriptul versat, precum și fonturi și pictograme care se schimbă mai lent.
  • JUST OK: Accesul la depozit la Github, Bitbucket sau altele similare pentru a clona, ​​furca sau a compila, utiliza și poate - eventual - contribui.
  • DACĂ ESTE NECESARĂ: Descărcări directe de cod, de regulă a „fișierului ZIP” al activelor de sistem compilate sau necompilate de pe site-ul doc pentru utilizare locală și / sau integrare manuală într-un depozit separat.

Bootstrap și Material Design Lite sunt exemple care se eliberează în 2+ destinații.

Pentru seturi de instrumente de proiectare

  • BEST: Creați nou ca o cale sincronizată, încorporată în meniul unui instrument de proiectare pentru a crea o nouă instanță dintr-un șablon.
  • MAI BUN: Versiune și distribuit folosind software de gestionare a activelor de proiectare bazat pe permisiune, cum ar fi Abstract sau Lingo.
  • BUN: Descărcare directă a setului de instrumente dintr-un site de documentare, cu o versiune clară indicată și documentul aferent Noțiuni introductive în apropiere.
  • JUST OK: Unitatea partajată, printr-o adresă internă bine publicizată și, eventual, simplificată (cum ar fi http: //system.uitoolkit).
  • FĂRĂ BUNĂ BUNĂ: îngropată pe o pagină de nivel al patrulea de pe un site wiki abia organizat pe care mulți nu îl pot găsi.

Următorul → # 2. Cadenţă