Bir tasarım sistemi oluşturma ve yeniden kullanma
Marka referanslarını renk, tipografi ve bileşenlere yönelik yeniden kullanılabilir kurallara dönüştürün, ardından bir proje için bu sistemi seçin.
Markanızı tanımlayan referansları toplayın
Home kenar çubuğunda Design systems'ı açın, ardından Create'ı seçin. Oluşturmadan önce kaynak materyal ekleyin: bir web sitesi veya GitHub bağlantısı, marka referansı, dosyalar ya da yazılı bir açıklama. Oluşturma ekranı, her biri en fazla 12 MB olan dosyaları kabul eder. Seçilen hizmete sağlama izniniz olan referansları kullanın.
Önceden yazılmış tasarım kurallarınız varsa DESIGN.md içeriğini yapıştırın. Başlangıç noktası olarak mevcut bir tasarım sistemini de kopyalayabilirsiniz. Marka renkleri, tipografi, logo boşlukları veya bileşen davranışı gibi değiştirilmeden kalması gereken unsurları belirtin.
Kod veya Figma'yı referans olarak kullanın
Bir GitHub deposu, yerel kod, .fig dosyası veya Figma dosya URL'si eklemek için Advanced'ı genişletin. İlgisiz bir proje klasörü yüklemek yerine uygun kaynağı seçin. Varlıkları ve bileşenleri açıklayan dosyaları bir arada tutun.
Figma URL'si bir kaynak referansıdır; her özel dosyanın okunabileceğine dair bir vaat değildir. Erişim başarısız olursa yetkilendirilmiş yerel bir .fig kopyası veya net ekran görüntüleri sağlayın. Bir Figma referansını içe aktarmak, yerel Figma dosyasına doğrudan dışa aktarmayı etkinleştirmez.
Sistemi oluşturun, inceleyin ve iyileştirin
- Sağlanan referansları kontrol edin ve Generate'ı seçin. Sistemi hazır kabul etmeden önce ayıklama veya oluşturma işleminin tamamlanmasını bekleyin.
- Oluşturulan önizlemeleri ve DESIGN.md dosyasını inceleyin. Renkleri, yazı boyutlarını, boşlukları ve bileşenleri referanslarınızla karşılaştırın; eksikleri veya çelişen kuralları düzeltin.
- Düzenlenen DESIGN.md dosyasını kaydedin. Aracıdan sistemi gözden geçirmesini isterseniz yayımlamadan önce sonucu yeniden inceleyin.
Başka bir projenin uygulayabileceği gereksinimler yazın: her rengin nerede kullanılacağını, başlıklar ve gövde metni için hangi yazı tipinin seçileceğini ve düğmelerin, formların ve durumların nasıl davranması gerektiğini belirtin. Yalnızca çekici ekran görüntülerinden oluşan bir koleksiyon bu kuralları tanımlamaz.
Yayımlayın ve bir proje için seçin
- Sistem kontrol edildikten sonra Published denetimini kullanın. Taslak, incelemeniz için kullanılabilir durumda kalır; diğer projelerin sistemi kullanmasını beklemeden önce yayımlayın.
- Home'a veya projenin tasarım sistemi seçicisine dönün. Kullanmak istediğiniz sistemi seçin ve önizlemesini onaylayın.
- Oluşturulacak çalışmayı ve önemli kuralları açıklayın. Oluşturulan çıktıyı sistemle karşılaştırın, ardından farklılıkları gidermek için odaklı revizyonlar kullanın.
Kuralları kaydetmek, bir sistemi yayımlamak ve onu bir projeye uygulamak ayrı işlemlerdir. Bir tasarım sistemini değiştirmek, mevcut çıktıların yeniden oluşturulduğunu kanıtlamaz. İlgili projeyi yeniden açın ve sonucu kontrol edin.
Bir arayüz iş akışı için prototipler ile devam edin. Mevcut bir HTML çıktısındaki küçük değişiklikler için tuval düzenleme bölümüne bakın.
Bir sistem eksikse veya salt okunursa
Etkin çalışma alanını ve sistemin yayımlanmış olup olmadığını kontrol edin. Ekip kaynakları ile kişisel kaynaklar farklı olabilir. Bir ekip arkadaşının senkronize edilmiş kopyası salt okunur olabilir; kaynağını veya yayımlama durumunu değiştirmek için sahibini ya da gerekli çalışma alanı izinlerine sahip bir hesabı kullanın.
Ayıklama başarısız olursa kaynak URL'sini, dosya boyutunu ve erişimi doğrulayın. Erişilemeyen bir kaynağı kaldırın veya izin verilen yerel bir referansla değiştirin, ardından yeniden deneyin. Kaydetme başarısız olursa ekrandan ayrılmadan önce düzenlediğiniz kuralların bir kopyasını saklayın. OpenDesign içinde yayımlamak, değişiklikleri GitHub'a geri göndermez.