Melepaskan Sistem Desain

Memberikan Output yang Saling Terhubung ke Adopsi Seiring Waktu

# 1 dari 6 seri Melepaskan Sistem Desain:
Keluaran | Irama | Versi | Breaking | Ketergantungan | Proses

Perusahaan menyadari nilai sistem desain ketika mengadopsi produk menggunakan sistem untuk membuat dan mengirimkan pengalaman yang digunakan pelanggan mereka. Sebagai bagian dari rantai nilai itu, sistem melepaskan fitur seiring waktu. Ini menempatkan sistem ke tangan pelanggannya: desainer dan insinyur melakukan pekerjaan mereka.

Tim sistem yang kuat menanggapi rilis dengan serius. Mereka tidak melihat diri mereka sendiri hanya merilis kode perpustakaan komponen. Sebaliknya, mereka memberikan lebih banyak output: token desain, dokumentasi, aset desain, dan sumber daya lainnya.

Seri ini menjelaskan banyak sisi dari melepaskan sistem desain. Ini dimulai dengan mendefinisikan banyak output sistem dan di mana mereka dikirimkan. Artikel selanjutnya membahas topik irama, versi, perubahan melanggar, dependensi, dan pendekatan langkah-demi-langkah.

Kisah-kisah ini mencerminkan apa yang telah saya pelajari tentang sistem pelepasan yang bekerja dengan tim-tim seperti Discovery Education, Morningstar, Target, dan REI. Mereka diangkat oleh wawasan dari rekan-rekan di Salesforce, Adobe, Atlassian, Shopify dan Financial Times. Terima kasih telah berbagi waktu dan latihan Anda!

Keluaran: Apa yang Dirilis?

Program sistem desain mengeluarkan banyak jenis keluaran, bukan hanya kode. Akibatnya, suatu sistem harus membedakan dan mengkomunikasikan kisaran keluaran berversi ini kepada pengembang, perancang, dan pelanggan lainnya.

Kode, Sumber Kebenaran

Sebagian besar sistem menawarkan satu sumber kebenaran kode lapisan presentasi sebagai:

  • Perpustakaan Komponen UI sebagai Markup HTML & CSS. Sering disebut sebagai "CSS," konsumsi paket ini didasarkan pada penggunaan atau kompilasi CSS sebagai garis dasar gaya visual yang konsisten ditambah dengan menggunakan kembali potongan-potongan HTML.

dan / atau ...

  • Perpustakaan Komponen UI sebagai Javascript: Banyak sistem membungkus HTML & CSS dengan JavaScript untuk memperkuat logika, merangkum gaya, dan memudahkan integrasi dan pemeliharaan lebih langsung dalam kerangka pilihan. Sementara sebagian besar perpustakaan menargetkan kerangka kerja tertentu (Bereaksi, Vue, Ember, Angular, ...), sinyal industri menyarankan pergeseran untuk membuat komponen web untuk semua kerangka kerja. Enam upaya sistem terakhir saya? Kemudian 2017: Vanilla HTML, Vanilla HTML. Awal 2018: Bereaksi, Vue. Kemudian 2018: Komponen Web, Komponen Web.

Selain itu, output menonjol lainnya dapat dirilis secara terpisah:

  • Token Desain membangun gaya visual melalui pasangan nilai properti yang secara semantik bermakna. Token adalah variabel yang tersedia dalam banyak format untuk digunakan di seluruh platform (web, iOS, Android), preprosesor (Sass dan KURANG), dan kerangka kerja (seperti Bereaksi). Beberapa sistem mengelola token dalam repositori yang terpisah dari kode komponen UI. Akibatnya, pustaka mereka - bersama dengan implementasi lainnya - juga dapat bergantung pada token sebagai sebuah paket.
  • Demo Aplikasi / Situs sebagai lingkungan dengan contoh halaman yang dibuat menggunakan perpustakaan komponen. Demo juga untuk tutorial dan pembuatan prototipe cepat, termasuk oleh desainer!
  • Komponen lintas platform yang cocok untuk iOS, Android, dan Windows.

Aset Desain

Sebagian besar tim membatasi pemahaman tentang apa yang mereka lepaskan ke “kami merilis kode” sederhana. Ini membuka mata bagi mereka untuk menyadari bahwa mereka menerbitkan begitu banyak alat lain yang berubah seiring waktu. Mereka termasuk:

  • Desain Toolkit sebagai file templat dan pustaka simbol yang ditawarkan dalam perangkat lunak desain. Hari ini, hampir selalu Sketsa. Tomorrow, Figma, Invision Studio, dan kompetitor baru lainnya?
  • Font, Ikon, dan bahkan Kumpulan Gambar Origami karena peran sistem yang sering diharapkan dalam mendistribusikan dan membuat versi pustaka semacam itu.
  • Sumber Daya Desain Lainnya seperti file ASE / CLR ilustrasi dan carikan warna sebagai batu loncatan untuk karya seni yang dipesan lebih dahulu. Koleksi ini berubah perlahan, kurang formal, dan melalui kontribusi oleh anggota masyarakat bukan bagian dari tim inti sistem. Namun, dari perspektif pelanggan dan komunikasi sistem, itu adalah bagian dari sistem.

Situs Dokumentasi

Sistem desain membutuhkan rumah, tempat semua orang tahu mereka dapat menemukan jalan ke segala sesuatu yang akan memiliki yang terbaru dan terhebat. Bertempat di URL yang mudah diingat, sering dibangun dengan komponen UI khusus untuk misi itu.

  • Situs Dokumentasi mendeskripsikan fitur (seperti tombol), memberi pengguna baru, dan memicu proses seperti mendapatkan bantuan atau berkontribusi. Tim membangun situs lebih sering menggunakan generator situs statis atau lebih jarang menggunakan sistem manajemen konten.
  • Komponen Dokumentasi - kode-contoh-pasangan, jangan-lakukan, kode-hex, komponen-explorer - bergantung pada pustaka komponen UI dan biasanya hanya melayani situs dokumen. Komponen tersebut dapat diversi versi dengan situs dokumentasi atau sebagai pustaka ketiga, versi terpisah relatif terhadap dokumen dan komponen UI di antara keduanya.

Tujuan: Ke Mana Pergi?

Saat mendistribusikan kode dan aset desain, penting untuk menawarkan kode dengan cara yang paling mudah dikonsumsi oleh insinyur adopsi Anda. Ini berarti bahwa beberapa sistem harus menawarkan pilihan di banyak pilihan, sementara yang lain dapat mengandalkan pilihan tunggal sebagai standar organisasi.

Untuk Kode

  • TERBAIK: Registri seperti npmjs (atau mitra internal seperti nexus Sonatype) yang menyediakan akses dan pengelolaan paket kode yang dirilis. Pengembang kemudian menggunakan alat-alat seperti bower, npm, benang, webpack, dan babel untuk mengintegrasikan dan meningkatkan kode itu dengan lancar di lingkungan mereka.
  • LEBIH BAIK: Aset yang diinangi pada CDNs untuk tautan langsung ke gaya dan skrip versi serta font dan ikon yang berubah lebih lambat.
  • JUST OK: Akses Repositori ke Github, Bitbucket atau sejenisnya untuk mengkloning, fork, atau mengkompilasi, menggunakan dan mungkin - pada akhirnya - berkontribusi.
  • JIKA PERLU: Unduhan Kode Langsung, biasanya dari "file ZIP" dari aset sistem yang dikompilasi atau tidak dikompilasi dari situs doc untuk penggunaan lokal dan / atau integrasi manual ke dalam repositori terpisah.

Bootstrap dan Material Design Lite adalah contoh yang dirilis ke 2+ tujuan.

Untuk Desain Toolkit

  • TERBAIK: Buat Baru sebagai jalur yang disinkronkan dan disematkan di menu alat desain untuk membuat instance baru dari templat.
  • LEBIH BAIK: Diberi versi dan didistribusikan menggunakan perangkat lunak manajemen aset desain berbasis izin seperti Abstrak atau Lingo.
  • BAIK: Pengunduhan langsung toolkit dari situs dokumentasi, dengan versi yang jelas ditunjukkan dan dokumen Memulai yang Terkait di dekatnya.
  • JUST OK: Drive bersama, melalui URL internal yang dipublikasikan dan mungkin disederhanakan (seperti http: //system.uitoolkit).
  • TIDAK CUKUP BAIK: Dikubur di halaman tingkat keempat di situs wiki yang hampir tidak terorganisir, banyak orang tidak dapat menemukannya.

Berikutnya → # 2. Irama