UI Design modülü ile mobil veya web uygulamalarının ekranlarını tasarlayabilirsiniz.
Arayüzü tasarlamak istediğiniz uygulamayı oluşturmak için Apps'e gelin ve web uygulaması geliştirmek istiyorsanız Create Web App, mobil uygulama geliştirmek istiyorsanız Create Mobile Compatible'ye tıklayın. Ardından isim vererek CREATE butonuna tıklayın. Oluşturulan uygulama, UI Design modülüyle açılır. Bu modülde soldaki Elements paneli ile ekrana yeni elementler ekleyebilir, sağdaki Properties (Özellikler) paneli ile bu elementlerin özelliklerini düzenleyebilirsiniz.
Açık olan ekran, UI Design modülünün orta alanında görüntülenir. Screens (Ekranlar) paneli ile yeni ekranlar oluşturabilir ve bu ekranları New Folder'a tıklayın, klasör isimlendirmesini yapın ve CREATE butonuna tıklayınız. Oluşturduğunuz klasör içerisinde screens'leri düzenleyebilirsiniz.
Responsive ekran tasarımı hazırlıyorsanız, ekran genişliği için ücretsiz ve önceden tanımlanmış seçenekleri kullanabilirsiniz. Seçtiğiniz web, tablet ve telefon görünümünde UI tasarımınıza devam edebilirsiniz.
Kuika, Container, Data, Display ve Text Input gibi farklı kategorilerde elementlere sahiptir. Elementler panelinden ilgili elementi ekrana sürükleyip bırakarak ekleyebilirsiniz.
Item Tree (Bileşen Ağacı) ile ekranın ve elementlerin hiyerarşisini görüntüleyebilirsiniz. Buna yardımcı olması için alt kenardaki Bread Crumb satırını da kullanabilirsiniz. Bu alanda, seçilen elementin parent ve child ilişkilerini görüntüleyebilirsiniz. Ayrıca diğer elementleri de görüntüleyebilir ve tek tıkla ilgili elementi seçebilirsiniz.
Bir elementi seçtiğinizde, sağ taraftaki Properties (Özellikler) paneli, elemente ait parametreleri düzenlemek için de kullanılır. Properties (Özellikler) panelinin içeriği, seçilen elementin özelliklerine göre değişir. O anda açık olan ekranın özelliklerini görüntüleyebilmeniz için ekranın seçili olduğundan emin olun. Ekranın alt kenarına veya dış alanına tıklayarak ekranı seçebilir ve özelliklerini ayarlayabilirsiniz. Ayrıca Styling (Stil) paneli ile seçilen elementin görsel düzenlemelerini yapabilirsiniz. Styling(Stil) paneli aracılığıyla, boşlukları, tipografileri ve kenarlıkları düzenleyebilirsiniz.