Metin ayarlarını veya bir dolguyu (renk, gradyan ya da arka plan görseli gibi) depolamak için bir stil oluşturun ve birden fazla ekrandaki öğelerde yeniden kullanın. Bir stili düzenlediğinizde, değişiklik o stili kullanan tüm öğeleri ve ekranları etkiler.

Her flow’un kendine ait bir stiller seti vardır.

Styles panelini açarak flow stillerinizi oluşturun, görüntüleyin ve düzenleyin:

• Metin stilleri: Tipografi ayarları (yazı tipi, kalınlık, boyut).
• Renk stilleri: Renkler, degradeler ve görseller gibi dolgular. Tek bir renk stili, açık mod ve koyu mod için ayrı sürümler içerebilir.

Metin stilleri

Metin stilleri; font ailesi, ağırlık, boyut, satır yüksekliği ve harf aralığı gibi tipografi ayarlarını bir arada saklar. Her flow şablonu varsayılan ön ayarlarla birlikte gelir ve özel stiller oluşturabilirsiniz.

Metin stili oluşturmak için:

1. Styles panelini açın.
2. Panel başlığında Create style seçeneğine tıklayın.
3. Type alanını Text olarak ayarlayın, bir ad girin ve tipografi ayarlarını yapılandırın.
4. Create seçeneğine tıklayın.

Bir metin öğesinin mevcut tipografi ayarlarını yeni bir metin stili olarak kaydetmek için font seçicinin sekmeleri yanındaki simgesine tıklayın. Öğe bundan sonra yeni stili kullanır.

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

Bir metin stilini düzenlemek için Styles panelindeki ilgili stile tıklayın, ayarlarını değiştirin ve Save düğmesine tıklayın.

Renk stilleri

Bir renk stili, kaydedilmiş bir dolgu öğesidir: bir renk, bir gradyan, bir görsel, bir video ya da bunların kombinasyonu olabilir. Koyu tema kullanıyorsanız, temaya özgü sürümlere sahip olabilir. Stil girişindeki sayı, o stili kullanan öğe ve ekran sayısını gösterir.

Bir renk stili oluşturma

Bir renk stili oluşturmak için:

1. Styles panelini açın.
2. Panel başlığında Create style seçeneğine tıklayın.
3. Type alanını Color olarak ayarlayın ve bir ad girin.
4. Stili yapılandırın. Katmanın rengini veya dolgu türünü değiştirebilir ve üstüne daha fazla katman ekleyebilirsiniz.
5. Save seçeneğine tıklayın.

Bir dolgu katmanının veya rengin mevcut değerini bir stile dönüştürmek için swatch’ına tıklayın, ardından Custom ve Styles sekmelerin yanındaki simgesine tıklayın ve Save’e tıklayın. Dolgu katmanı veya renk artık bu stili kullanır.

Renk stili düzenleme

Bir renk stilini düzenlemek için:

1. Styles panelini açın.
2. Colors sekmesini seçin.
3. Bir stil girişine tıklayın.
4. Her versiyon birden fazla katman içerebilir. Dolgu türüne göre katmanı ayarlamak için renk kutusuna tıklayın:
   • Düz renk
   • Gradyan
   • Görsel veya video

Düz renkler

1. Rengi ayarlayın: bir hex değeri girin veya renk kutusuna tıklayıp seçin.
2. Opaklığı kaydırıcıyla ayarlayın.
3. Save düğmesine tıklayın.

Gradyanlar

1. Gradient dolgu türünü seçin.
2. Durakları, durma renklerini ve Direction değerini ayarlayın.
3. Save düğmesine tıklayın.

Görseller ve videolar

Bir Image veya Video öğesi, karanlık tema için farklı bir dosyaya sahip olamaz. Bunun yerine, bir kapsayıcı oluşturun ve arka planını bir renk stiline ayarlayın. Stilin her sürümünde bir görsel veya video katmanı oluşturun:

1. Image veya Video dolgu türünü seçin.
2. Alt araç çubuğunda seçili yerel ayar için kaynak dosyayı yükleyin. Zaten yüklenmiş bir dosya varsa Replace seçeneğine tıklayabilirsiniz.
3. Save seçeneğine tıklayın.

Çok katmanlı stiller

Bir renk stilinin her versiyonu birden fazla katman içerebilir. Çok katmanlı stilleri kullanarak, renklendirilmiş görseller gibi daha karmaşık görsel efektler oluşturabilirsiniz.

Bir katman eklemek için stil girişine tıklayın. Ardından Properties, Light veya Dark bölümünde düğmesine tıklayın. Mevcut katmanların üstüne yeni bir katman eklenir. Katmanların sırasını değiştirmek için satırlarını sürükleyin. Yeni katmanı ayarlayın ve Save düğmesine tıklayın.

Her katman, stili uyguladığınız her yerde görünmez. Bazı katmanlar yalnızca stili belirli özelliklere veya öğelere uyguladığınızda görünür:

• Dolgu (girişler ve seçiciler): Yalnızca alt katman. Diğer katmanlar yok sayılır.
• Dolgu (diğer tüm öğeler): Her katman.
• Kenarlık (girişler ve seçiciler): Yalnızca tek bir düz renk veya gradyan. Resim ve video katmanları yok sayılır.
• Kenarlık (diğer tüm öğeler): Düz renkler ve gradyanlar. Resim ve video katmanları yok sayılır.
• Metin rengi: Yalnızca düz renk katmanları. Gradyan, resim ve video katmanları yok sayılır. Bir sürümde düz renk katmanı yoksa, o modda metnin rengi olmaz ve görünmez.
• Simge, gölge ve diğer renkler: Çok katmanlı stilleri desteklemez. Yalnızca tek bir katman stili ve düz renk uygulayabilirsiniz.

Renk stili uygulama

Bir öğeye renk stili uygulamak için dolgu katmanının, metin renginin, kenarlık renginin veya simge renginin renk kutucuğuna tıklayın. Statik değeri bir stille değiştirmek için Styles sekmesine tıklayıp istediğiniz stili seçin. İhtiyacınız olan değere sahip bir stil yoksa mevcut değeri stil olarak kaydedin.

Bir stili ekrandaki birçok öğeye aynı anda uygulamak için AI Editor’a şöyle bir istek gönderin: Apply the Card background style to all cards. Stilleri ayarlamak ve tüm flow genelinde uygulamak için flow-generator skill’ini kullanın.

Bir Image veya Video öğesine renk stili uygulayamazsınız, çünkü bu öğelerin dolgusu yoktur. Bunun yerine, bir container oluşturun ve arka planını ayarlayın.

Stilleri yönet

Styles panelinde:

• Bir stili yeniden adlandırmak için girdisine tıklayın, Name alanını değiştirin ve Save’e tıklayın.
• Bir stili kopyalamak için girdisine sağ tıklayın ve Duplicate seçeneğini belirleyin.
• Bir stili silmek için girdisine tıklayın ve Delete style’a tıklayın. Öğeler tarafından kullanılan bir stili sildiğinizde, yerine geçecek stili seçin.
• Stillerin sırasını değiştirmek için girdilerini listede yukarı veya aşağı sürükleyin.
• Stilleri başka bir flow’a kopyalamak için girdilerini seçin (birden fazla seçmek için Shift tuşuna basarak tıklayın) ve ⌘C / Ctrl+C tuşlarına basın. Diğer flow’da aynı sekmeyi (Text veya Colors) açın ve ⌘V / Ctrl+V tuşlarına basın.

Karanlık mod

Bir renk stilinin karanlık mod için ayrı bir değeri olabilir. Kullanıcının cihazı karanlık moda ayarlandığında, flow bu değeri kullanır.

Karanlık değerleri kullanmak için flow’a karanlık tema ekleyin. Ardından karanlık modda farklı görünmesi gereken her stilin karanlık değerini değiştirin.