Circle Progress – Figma Community

SCSS ve Figma Tasarımı

Projelerimde kullandığım CSS tabanlı bir grafikten bahsedeceğim. Harita üzerinde puanlama yapmak için ihtiyaçlar doğrultusunda tasarladım.

See the Pen SCSS Circle Progress Light Theme & Animation by Aytaç Özdalgıç (@ozdalgic) on CodePen.

HTML tarafında boyut, içerik ve sayısal değerleri kişiselleştirilebiliyor.

Bu bileşeni hem tasarım hemde yazılım tarafında hızlıca projelerinize ekleyebilirsiniz. Github üzerinden yayınladığım kaynak kodlarına buraya tıklayarak hızlıca ulaşabilirsiniz.

Figma Community

Figma Topluluğunda da hazır tasarım dokümanı bulunmaktadır. Tasarımcı, acaba bunu yazılım ekibi kodlayabilir mi? sorusunu düşünmeden gönül rahatlığıyla tasarımlarında kullanabilir. Böyle şahane bir şey.

Figma topluluk sayfasında, sağ üst köşede yer alan content_copy Duplicatebutonuna basarak projeyi hızlıca kopyalayabilirsiniz.

grade Özellikleri
  • SCSS ile projelere eklenebilir.
  • HTML üzerinden kolayca özelleştirilebilir.
preview Figma Animasyonu
integration_instructions HTML Demo

See the Pen SCSS Circle Progress Light Theme & No Animation by Aytaç Özdalgıç (@ozdalgic) on CodePen.