Tasarım belirteçleri, tasarım sisteminin görsel tasarım atomlarıdır – özellikle görsel tasarım niteliklerini depolayan adlandırılmış varlıklardır. Kullanıcı arabirimi geliştirme için ölçeklenebilir ve tutarlı bir görsel sistem sağlamak amacıyla bunları sabit kodlanmış değerler (renk için onaltılık değerler veya boşluk için piksel değerleri gibi) yerine kullanırız.
İki tür tasarım belirteci vardır:
- Platform belirteçleri bir platforma (web, iOS, Android vb. ) özgüdür ve doğrudan CSS özelliklerine eşlenir.
Örneğin, web’de $color-primary adlı bir tasarım jetonunuz olabilir ve bu, CSS color özelliğine eşlenir.
- Bileşen belirteçleriÖte yandan, doğrudan CSS ile eşleme yapmayın. Daha çok sistemin farklı parçaları tarafından çeşitli şekillerde kullanılabilen “kavramsal” atomlar gibidirler. Örneğin, $font-size-heading adlı bir jetonunuz olabilir. Bu, hem web hem de yerel platformlar tarafından kullanılabilir, ancak mutlaka bir CSS özelliğine eşlenmesi gerekmez – bunun yerine, her platform onu mantıklı olan şekilde kullanır.
Figma Tasarım Jetonlarını nasıl kullanırım?
Figma Tasarım Jetonlarını iki şekilde kullanabilirsiniz:
- Referans olarak: Bu yöntemde, ihtiyaç duyduğunuz her yerde tasarım belirtecine başvurmanız yeterlidir. Örneğin, $color-primary tasarım belirtecini bir öğenin color özelliğine uygulamanız gerekirse, color yazmanız yeterlidir: $color-primary; CSS kodunuzda.
- Çizgide: Bu yöntemde, aslında tasarım belirtecinin değerini CSS kodunuza dahil edersiniz. Örneğin, $color-primary tasarım belirtecini bir öğenin color özelliğine uygulamanız gerekirse color: #ff0000; CSS kodunuzda (#ff0000 değerinin $color-primary değeri olduğu varsayılarak).
Figma Tasarım Belirteçlerini kullanmanın en iyi yolu, kodunuzu temiz ve okunması kolay tuttuğu için referans kullanmaktır. Daha sonra bir tasarım belirtecinin değerini değiştirmeniz gerekirse, kodunuzu güncellemenizi de kolaylaştırır.
PROFESYONEL İPUCU: Lütfen Figma tasarım belirteçlerinin tüm tasarım yazılımlarıyla uyumlu olmayabileceğini unutmayın. Yazılımınızın uyumlu olup olmadığından emin değilseniz, lütfen Figma tasarım belirteçlerini kullanmadan önce üreticiye danışın.