Arayüz
Design Görünümü; ekran tasarımının yapıldığı bölümdür. Ekran hazırlama sürecinde ihtiyacınız olan Preview / Önizleme, Components / Bileşenler, Properties / Özellikler ve Styling / Stil gibi bölümler bulunur.
  1. 1.
    Breadcrumb / Belge Yolu : Açık olan ekran ve bulunduğu proje adı görünür. Burası bir bağlantı yapısındadır ve proje ekranını tıklayarak açabilirsiniz.
  2. 2.
    Save / Kaydet : Açık olan ekrana ait kayıt seçenekleri listelenir. Save, Save As.., Sav as a template ve Save as a Component Group seçenekleriyle kayıt işlemlerini yapabilirsiniz.
  3. 3.
    Undo-Redo / Önceki-Sonraki İşlem : Yaptığınız işlemler geri alabilir, geri aldıklarınızı yineleyebilirisniz.
  4. 4.
    Devices / Cihazlar : Çalıştığınız ekranı Web, telefon ve tablet boyutlarında görüntülemenizi sağlar. Modlar arasında dilediğiniz zaman geçiş yapabilirsiniz.
  5. 5.
    Preview Mode / Ön Gösterim : Hazırladığınız ekranı Designer uygulaması panelleri olmadan görüntülemenizi sağlar.
  6. 6.
    Approval / Onay Süreci : Proje oluşturma açılır penceresinde belirlediğiniz onay adımlarına göre açık olan akranı onaya göndermenizi sağlar.
  7. 7.
    Share / Paylaşım : Açık olan ekranı paylaşabilirsiniz.
  8. 8.
    Profile / Profil : Role Tanımlama (Roles) ve İşlem Tarihçesi (Logging) ekranlarına ulaşabilirsiniz.

Left Bar

  1. 1.
    Components /Bileşenler : Component Sets ile tanımlanmış bileşenlerin listelediği bölümdür. Bu listede ayrıca New Project açılır penceresi ile eklenen HTML etiketleri ve kullanıcılar tarafından hazırlanmış Component Groups / Bileşen grupları da bu bölümde listelenir.
  2. 2.
    Screens / Ekranlar : Proje içinde oluşturduğunu ekranların listesidir. Liste içinde açılmasına istediğiniz ekrana tıklamanız yetelidir.
  3. 3.
    Design Mode / Tasarım Modu : Ekran tasarımının yapıldı görünüm tipidir. Ekran üzerine bileşenler, ekleme, bileşenler üzerinde değişikliklerin yapıldığı görünümü açar. Ekranlar ilk açılışta design mode ile açılır.
  4. 4.
    Code View / Kod Görünümü : Tasarımını yaptığınız ekranın reaction kodlarının görüntülendiği görünüm tipidir. Bu ekranla kodları tekli veya çoklu olarak kaydedebilirsiniz.
  5. 5.
    Component Sets / Bileşen Setleri : Bileşen ve setlerinin ekleme, düzenleme işlemlerinin yapıldığı ekrandır.

Left Bar

  1. 1.
    Properties / Özellikler : Her bir bileşen için geliştirme ekibi tarafından tanımlanmış parametreler listelenir ve ihtiyaca göre düzenlemeler yapılabilir.
  2. 2.
    Styling / Stil : Pozisyon, font ve gölge gibi görsel düzenlemeleri yapabilirsiniz.
  3. 3.
    Documents / Belgeler : Ekran analizi, mockup, tasarım sistemi detayları gibi belgeleri URL bazlı ekleyebilirsiniz.
  4. 4.
    Comments / Yorumlar : Ekran paylaşımı gönderdiğiniz kullanıcılar tarafından ekran üzerinde bileşenlere yapılan yorumları görüntüleyebilir, yorumlara cevap gönderebilirsiniz.
  5. 5.
    History / Tarihçe : Açık olan ekranın versiyon tarihçesini listeleyebilir, onaylanmış versiyonlarını görüntüleyebilirsiniz.
  6. 6.
    Support / Destek : Teknik ekibe soru ve geri bildirimlerinizi gönderebilirsiniz.
  7. 7.
    User Guide / Kullanıcı Klavuzu : Yardım ve kullanım kılavuzunu açmanızı sağlar. Yeni sekmede açılır.
  1. 1.
    Breadcrumb / Bileşen Yolu : Ekran seçili bileşenin hiyerarşik olarak üstünde bulunan kolon, satır gibi diğer bileşenleri gösteren listedir.
  2. 2.
    Zoom / Yakınlaştır : Çalıştığınız ekranın yakınlık/uzaklık olarak görünümü değiştirmenize yardımcı olur.
  3. 3.
    Keyboard Shortcuts / Klavye Kısayolları : Kaydetme, silme veya görünüm modları arasında geçişler gibi işlemlere ait kısayolların listelendiği açılır penceredir.
  4. 4.
    Version / Versiyon : Uygulamanın anlık olarak bulunduğu versiyonunu gösterir.
  5. 5.
    Clean Screen / Ekranı Temizle : Ekran içindeki bileşenleri siler.

Canvas

Orta bölümde bulunan alan ise çalışma ekranıdır. Daha fazla bilgi için Yeni Ekran Oluşturma makalesini inceleyin.