Figma bileşenlerini ve varyantlarını kullanmayı öğrenin

Aşağıdaki makale size yardımcı olacaktır:Figma bileşenlerini ve varyantlarını kullanmayı öğrenin

1. Bileşenler, değişkenler ve örnekler nedir?

1.1 Bileşenler

ONLAR bileşenler Figma’da yeniden kullanılabilir tasarım öğeleridir. oluşturmak için kullanılabilirler. Kullanıcı arayüzleri (UI) tutarlı ve tekdüze. Örneğin, kullanıcı arabiriminizde birden çok düğme oluşturmanız gerekirse, bir düğme bileşeni oluşturabilir ve projenizde birden çok yerde yeniden kullanabilirsiniz. Bu, UI tutarlılığını korumanıza olanak tanır ve tüm kullanıcı arabirimine uygulanması için bileşeni yalnızca bir kez güncellemeniz gerektiğinden gelecekteki değişiklikleri kolaylaştırır.

1.2 Varyasyonlar

Değişkenler, bir bileşenin değiştirilmiş sürümleridir. Duruma veya koşula bağlı olarak UI öğelerini farklı şekilde görüntülemek için kullanılabilirler. Örneğin, etkin durum için bir düğmenin ve etkin olmayan durum için başka bir düğme varyasyonu oluşturabilirsiniz.

1.3 İşlemler

ONLAR örnekler bir bileşenin kopyalarıdır, tasarımınızın üzerine yayın. Doğrudan ana bileşene bağlıdırlar ve ana bileşende yapılan herhangi bir değişiklik doğrudan her bir örnek için geçerli olacaktır. Farklı varyant özelliklerini kullanarak örnekleri özelleştirebilirsiniz.

Figma’nın Bileşenlerini, Varyantlarını ve Örneklerini kullanarak daha verimli ve esnek UI’ler oluşturabilirsiniz çünkü UI öğelerini her seferinde yeniden oluşturmak zorunda kalmadan kolayca güncelleyebilir ve yeniden kullanabilirsiniz. seni yapabilir karmaşık kullanıcı arayüzleri oluştururken zamandan ve emekten tasarruf edin.

2. Bir bileşen oluşturun

1. Bileşene dönüştürmek istediğiniz tasarım öğesini seçin. Bu öğe, Figma’da tasarladığınız dikdörtgen, daire, metin, UI öğesi vb. herhangi bir tasarım öğesi olabilir.
2. İçinde araç çubuğunda, “Bileşen oluştur” düğmesine tıklayın.
3. Artık bileşeninizi katmanlar panelinden alabilir ve kullanıcı arabiriminize sürükleyip bırakarak kullanabilirsiniz. Ayrıca Figma kitaplığınızda paylaşarak diğer Figma projelerinde tekrar kullanabilirsiniz.

Bir bileşende yapılan herhangi bir değişikliğin, o bileşenin kullanıcı arayüzündeki tüm örneklerine uygulanacağını unutmamak önemlidir. Bu, ana bileşeni değiştirirseniz, bileşenin kullanıcı arabirimindeki tüm örneklerinin buna göre güncelleneceği anlamına gelir. Bu, kullanıcı arayüzünde hızlı ve tutarlı değişiklikler yapmak istediğinizde yararlı olabilir, ancak örneklerinizi özelleştirmek istiyorsanız o zaman “özellikler” oluşturmanız gerekir: Metin, Örnek Değiştirme, Boolean

3. Değişkenler oluşturun

3.1 Bileşeninize varyant ekleme

1. bileşen seçin bir değişken oluşturmak istediğiniz Bunu, kullanıcı arayüzündeki bileşen örneğine tıklayarak veya Katmanlar panelinden yapabilirsiniz.
2. Araç çubuğunda “Varyant ekle“.
3. Bir isim ver ” içindeki sağ çubuktan bu değişkeneMevcut değişken“. Bu, varyantları birbirinden ayırmayı mümkün kılar.

Değişkeniniz oluşturulduktan sonra, Figma projenizde grubu çözmek ve özelleştirmek için birkaç özellik türü ekleyebileceksiniz.

Bileşenlerin aksine, bir değişkende yapılan değişiklikler yalnızca bileşenin o değişkenine uygulanacaktır. Bu, kullanıcı arabirimindeki bileşenin diğer örneklerini etkilemeden, kullanıcı arabirimi öğelerini duruma veya koşula göre özel bir şekilde görüntülemek için varyantları kullanabileceğiniz anlamına gelir.

3.2 Bir “Metin” özelliği ekleyin

“Metin” özelliği, bir bileşen değişkenindeki bir metin öğesini özelleştirmek için kullanılır. Duruma bağlı olarak tüm örneklerinizin (kullanıcı arayüzünüze dağıtılan değişkenler) metnini değiştirebileceksiniz.

1. bileşeninizi seçin
2. Sağ panelden, “Özellikler” bölümü tıklamak “Yeni mülk oluştur”
3. Tıklamak “Metin“
4. Bir isim ver yeni mülkünüze ve varsayılanı ayarla
5. metin kutusunu seçin bir varyantın
6. Sağ panele gidin, “Mutlu” bölümü, “Metin özelliğini uygula” simgesine tıklayın Daha sonra mülkü bağla az önce oluşturduğunuz

Artık bu yeni özellikten örneklerinizin her birinin metnini özelleştirebilirsiniz.

3.3 Bir “Örnek Değiştirme” özelliği ekleyin

“Örnek Değiştirme” özelliği, diğer bileşen türlerini varyantlarınıza entegre etmenize olanak tanır. Örneğin, bileşeninizin bir simgesini bir “Simgeler” bileşen veritabanına bağlayabilirsiniz. Bu, varyantlarınızın simgesini simge veritabanından kolayca alarak özelleştirmenize olanak tanır.

1. bileşeninizi seçin
2. Sağ panelden, “Özellikler” bölümü tıklamak “Yeni mülk oluştur”
3. Tıklamak “Örnek Değiştirme“
4. Bir isim ver yeni mülkünüze ve bağlamak istediğiniz bileşeni seçin
5. bileşen seçin varyantlarınıza bağladığınız
6. Sağ panele gidin ve mülkü bağla az önce oluşturduğunuz

Artık başka bir bileşen bankasından öğeler alarak örneklerinizin her birini özelleştirebileceksiniz.

3.4 Bir “Boolean” özelliği ekleyin

“Boolean” özelliği, bileşenin bir öğesini görüntüleme veya gizleme olasılığı eklemek için kullanılır. Örneğin, bazı durumlarda bir düğme üzerinde bir simge olmasını istiyorsanız ve diğer durumlarda onu gizlemek istiyorsanız.

1. bileşeninizi seçin
2. Sağ panelden, “Özellikler” bölümü tıklamak “Yeni mülk oluştur”
3. Tıklamak “Boole”“
4. Bir isim ver yeni mülkünüze ve bir varsayılan seçin (başlangıçta tüm varyantlara atanacaktır): Doğru veya Yanlış
5. Öğeyi seçin göstermek veya gizlemek istiyorsun
6. Sağ panele gidin ve mülkü bağla az önce oluşturduğunuz

Artık öğeyi göstermek veya gizlemek için bileşenlerinizin her birinde Açık/Kapalı anahtarını kullanabileceksiniz.

4. Bir Örnek Ekleyin

“Örnek” olarak da adlandırılan ana bileşeninizin kopyalarını kolayca ekleyebilirsiniz. Katmanlar panelinden (Sola). Bileşeni seçin ve Figma’nıza sürükleyip bırakın.