Sağ paneldeki Design sekmesi, her elementin görsel görünümünü kontrol eder. Kullanılabilir özellikler element türüne göre değişir, ancak çoğu element ortak styling seçeneklerini paylaşır.

Boyut ve boşluk

Görünürlük

Visibility açma/kapama düğmesi, öğenin ekranda görünüp görünmeyeceğini belirler.

• Show Show (varsayılan): Öğe her zaman görünürdür.
• Conditional Conditional: Öğe yalnızca belirli koşullar sağlandığında görünür. Daha fazla bilgi için bkz. Koşullu görünürlük.
• Hide Hide: Öğe her zaman gizlidir. Bir öğeyi silmeden flow’dan geçici olarak kaldırmak için bunu kullanın.

Boyutlandırma

Her elementin Width ve Height kontrolleri üç modda çalışır:

• Fill: Üst öğedeki tüm kullanılabilir alana yayılır
• Hug: Elementin içeriğine göre küçülür
• Fixed: Boyutlar için tam piksel değeri belirlenir

Aralık

Spacing bölümünde iki katmanlı bir kutu modeli görüntülenir:

• Margin: Öğe ile komşuları arasındaki boşluk. Üst kapsayıcının sınırlarını, değeri ne olursa olsun, aşamaz.
• Padding: Öğenin kenarlığı ile içeriği arasındaki boşluk.

Her kenar için değeri ayrı ayrı ayarlayabilirsiniz.

Doldur

Fill bölümü, öğenin arka planını kontrol eder. Dört farklı dolgu türü mevcuttur: düz renk, gradyan, resim ve video.

Bu özelliği tüm ekranın ana görseli / videosu olarak ayarlamak için kullanın.

• Düz renk Solid color. Renk seçiciyi kullanın, hex değeri girin veya proje genelinde bir renk stili atayın. Arka planı yarı saydam yapmak için opaklık değerini ayarlayın.
• Gradyan Gradient. İki veya daha fazla renk duraklamasıyla gradyan dolgu ekleyin. Geçişi ayarlamak için duraklamaları sürükleyin, yönünü kontrol etmek için gradyan açısını değiştirin.

• Image Image veya Video Video. Elementin arka planı olarak bir resim / video ayarlayın.

Kenarlık

Kenarlıklar varsayılan olarak kapalıdır. Eklemek için sağ panelde Border yanındaki Plus simgesine tıklayın. Kenarlığı kaldırmak için Border başlığının yanındaki Close simgesine tıklayın.

Kenarlık eklendiğinde şu ayarları yapılandırabilirsiniz:

• Color: Renk seçiciyi kullanın, hex değeri girin veya proje genelinde bir renk stili atayın. Kenarlığı yarı saydam yapmak için opacity değerini ayarlayın.
• Width: Piksel cinsinden kenarlık kalınlığı.

Köşeler

Corners bölümü, köşe yuvarlaklığını (yuvarlak köşeler) kontrol eder.

• Radius slider: Dört köşenin tamamı için aynı yarıçapı ayarlar
• Per-corner toggle Per Corner: Her köşe için ayrı ayrı yarıçap belirlemek üzere etkinleştirin

Efektler

Bir veya daha fazla görsel efekt eklemek için Effects yanındaki artı düğmesine Plus tıklayın:

• Drop shadow: Elementin arkasında bir gölge
• Inner shadow: Elementin sınırları içinde bir gölge
• Background blur: Arka planı bulanıklaştırır
• Layer blur: Elementi ve alt öğelerini bulanıklaştırır

Aynı element üzerine birden fazla efekt ekleyebilirsiniz. Bir efekti geçici olarak devre dışı bırakmak için görünürlüğünü Show açıp kapatın.

Animasyon

Animasyonlu bir efekt eklemek için Animation öğesinin yanındaki Plus düğmesine tıklayın. Şu an için yalnızca Pulse animasyonu mevcut — element dikkat çekmek amacıyla ritmik biçimde büyüyüp küçülür.

Pulse animasyonunu aşağıdaki parametrelerle yapılandırabilirsiniz:

Parametre	Açıklama
Ölçek miktarı (%)	Öğenin orijinal boyutuna göre ne kadar büyüdüğü
Süre (ms)	Tek bir animasyon döngüsünün uzunluğu
Döngüler arası gecikme (ms)	Tekrarlar arasındaki duraklama
Gölge rengi	Nabız atan gölge efektinin rengi
Gölge boyutu (px)	Nabız atan gölgenin boyutu

Animasyonu önizleme

Builder varsayılan olarak statik ekranlar gösterir — animasyonlar siz etkinleştirene kadar hareketsiz kalır. İki yöntem:

• Cihaz önizlemesinin üstündeki Toggle animations Toggle animations düğmesine tıklayın. Ekranın animasyonlarını açar veya kapatır — açıldıktan sonra siz tekrar tıklayana kadar sürekli çalışır. Düğme yalnızca aktif ekranda en az bir animasyon olduğunda görünür.
• Ekranın bağlam menüsünü açın (ekran katmanının yanındaki üç nokta simgesi) ve Play Animation seçeneğini belirleyin.

Görünüm

• Opacity: %0 (şeffaf) ile %100 (opak) arasında değer alır
• Rotation: Öğeyi döndürmek için derece cinsinden bir değer girin

Tipografi özellikleri (metin öğeleri)

Metin öğelerinde aşağıdaki denetimleri içeren bir Typography bölümü görüntülenir:

Font

Font açılır menüsüne Font select tıklayarak font seçiciyi açın. İki sekme içerir:

• Styles: Projenizde kayıtlı metin stillerini listeler. Tüm tipografi ayarlarını tek seferde uygulamak için bir stil seçin.
• Fonts: Kullanılabilir tüm font ailelerini listeler. İhtiyacınız olanı bulmak için arama yapın veya kaydırın.

Boyut ve kalınlık

• Weight: Açılır menüden bir yazı tipi kalınlığı seçin
• Size: Açılır menüden bir boyut seçin ya da özel bir değer girin

Renk

Renk seçiciyi açmak için renk kutucuğuna tıklayın. Hex değeri girin, paleti kullanın veya yeniden kullanılabilir stillerden birini seçin. Metni yarı saydam yapmak için opaklık kaydırıcısını ayarlayın.

Hizalama

İki grup hizalama kontrolü:

• Yatay: Sol Align left, Orta Align center veya Sağ Align right
• Dikey: Üst Align top, Orta Align middle veya Alt Align bottom

Dekorasyon

• None None: Dekorasyon yok (varsayılan)
• Underline Underline: Metne alt çizgi ekler
• Strikethrough Strikethrough: Metne üstü çizgi ekler

Kırpma

Metnin Maks. Satır ayarını aşması durumunda kırpma özelliğini etkinleştirerek metni belirli bir noktada kesin. Bu özellik özellikle birden fazla dili desteklerken işe yarar: çevrilen bir metin orijinalden uzunsa, kırpma düzenin bozulmasını önler.

Duruma özgü ayarlar (etkileşimli öğeler)

Etkileşimli öğeler birden fazla görsel durumu destekler. Böyle bir öğe seçtiğinizde, sağ panelde States bölümü belirir. Her durum için farklı görsel özellikler ayarlamak üzere durumlar arasında geçiş yapın.

Her durum, dolgu, kenarlık, tipografi rengi, opaklık ve daha fazlası gibi görsel özellikleri ayrı ayrı geçersiz kılabilir.

Seçilebilir durumlar

Seçilebilir bir gruba ait öğeler (quiz seçenekleri, ürünler, sekmeler, deneme süresi toggle’ları) varsayılan olarak iki durum sunar:

• Default: Öğenin normal görünümü
• Selected: Kullanıcı bu seçeneği seçtiğindeki görünüm. Aktif seçimi vurgulamak için fill, kenarlık rengi ve metin rengi gibi özellikleri özelleştirin Seçilebilir bir öğeyi etkileşimde bulunulamaz durumdayken stillemek için üçüncü bir durumu elle ekleyin. States settings Settings bölümünü açın ve Disabled state ekleyin.

Disabled durumu koşula bağlıdır. Bunu seçin ve çalışma zamanında öğenin ne zaman devre dışı kalacağını tanımlamak için Set conditions set conditions seçeneğine tıklayın; örneğin zorunlu bir alan boş olduğunda.

Giriş alanı durumları

Giriş alanları ek durumlar sunar:

• Default: Normal, odaklanmamış görünüm
• Active: Alan odaklanmış ve giriş yapmaya hazır
• Invalid: Girilen değer doğrulamayı geçemiyor
• Disabled: Alan etkileşime kapalı

Durum taşıyan diğer öğeler

Birkaç öğe, standart Varsayılan / Seçili / Devre Dışı düzeninin dışında duruma özgü stil sunar:

• İlerleme göstergesi adımları — her adım için üç durum: Completed, Current ve Upcoming.
• Carousel dots — iki renk varyantı: etkin olmayan noktalar için Color ve geçerli slaydın noktası için Active Color.

Yeniden kullanılabilir stiller

Sol kenar çubuğundaki Styles Styles paneli, flow’unuz genelinde geçerli olacak yeniden kullanılabilir stiller tanımlamanıza olanak tanır. İki tür stil mevcuttur: metin stilleri ve renk stilleri. Karanlık mod desteğini etkinleştirmek için renk stillerini kullanmanız gerekir.

Metin stilleri

Metin stilleri, tipografi ayarlarının tamamını barındırır — font ailesi, kalınlık, boyut, satır yüksekliği, hizalama ve dekorasyon. Her flow şablonu varsayılan ön ayarlarla gelir; dilediğiniz özel stiller de oluşturabilirsiniz.

Metin stili oluşturmak için:

1. Styles Styles panelini açın ve Text sekmesini seçin.
2. Plus Create style seçeneğine tıklayın.
3. Bir ad girin ve tipografi ayarlarını yapılandırın.
4. Create seçeneğine tıklayın.

Bir metin stili uygulamak için bir metin öğesi seçin ve Typography bölümündeki yazı tipi açılır menüsünden stili seçin.

Renk stilleri

Renk stilleri, flow’unuzun her yerinde başvurabileceğiniz adlandırılmış renklerdir. Her renk stilinin bir adı (örneğin “Primary text” veya “Brand”), bir hex değeri ve kaç öğenin bu stile başvurduğunu gösteren bir kullanım sayısı vardır.

Renk stili oluşturmak için:

1. Styles Styles panelini açın ve Colors sekmesini seçin.
2. Plus Create style seçeneğine tıklayın.
3. Bir ad girin ve renk seçin. Bir renk stilini güncellediğinizde, ona başvuran tüm öğeler otomatik olarak güncellenir.

Karanlık mod

Gerekirse, her renk stiline iki varyant ekleyebilirsiniz — biri açık mod Light mode için, diğeri karanlık mod Dark mode için. SDK, cihazın mevcut renk şemasına göre doğru varyantı otomatik olarak uygular. Oluşturucuda koyu modu önizlemek için alt araç çubuğundaki tema değiştirici düğmesini Dark mode kullanın.