Figma ile duyarlı bir gösterge tablosu oluşturun

Sep 11, 2025

Nasıl Yapılır

FICMA, UI tasarımcıları için bir grafik aracıdır. Basit bir arayüze sahiptir ve takım arkadaşlarınızla işte işbirliği yapmanızı sağlar. Çevrimdışı çalışmak istiyorsanız, masaüstü uygulamasını kullanmayı seçebilirsiniz. Alternatif olarak, Figma herhangi bir işletim sisteminde çalışır (Merhaba, Windows), böylece hiçbir şey takmanız gerekmez. Ve başlamak kolaydır - önceki düzen tasarımlarınızı eskizden ithal edebilirsiniz.

Bir Web Sitesi Oluşturucu Seç: 16 En İyi Araçlar

Figma'da, arayüzünüz için ihtiyacınız olan her şeyi, resimli vektör simgelerinden özel düzenlere kadar oluşturabilirsiniz. Çok oyunculu düzenleme, tasarım ekipleri için fazla zaman kazandırabilir, çünkü tüm ekip üyelerinin aynı düzende aynı anda çalışabileceği anlamına gelir. Ve bunlar büyük özellikleri bile değil.

Bu eğitimde, size Figma ile nasıl kurulacağınızı göstereceğim, sonra adım adım bir mobil uygulama ekranı oluşturulur. Bu durumda, bir kurgusal istatistik uygulaması için gösterge panelini tasarlayacağız. İşiniz bittiğinde, Figma'da farklı arayüzler oluşturabileceksiniz ve ekibinizle gerçek zamanlı olarak çalışabilirsiniz.

01. Kaydolun

Her şeyden önce, kaydolmanız gerekir. www.figma.com . Aracınızı tarayıcınızda kullanmak veya masaüstü uygulamasını indirmek istediğinize karar verin. Masaüstü sürümünü indirmek için, sol üst köşedeki Hamburger menüsüne gidin ve 'Masaüstü Uygulamasını Al'ı tıklayın.

02. Bir manto ve ızgara oluşturun

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — Öğelerinin uyumlu bir şekilde konumlandırmanıza yardımcı olmak için bir taban çizgisi ızgarası ekleyin (büyütmek için resme tıklayın)

Çarpmak Bir Bir sanat kartı oluşturmak için. Ön ayarlardan birini seçebilir veya kendi özel boyutunuzu oluşturabilirsiniz. Bu proje için telefonu ve GT'yi kullanacağız; iPhone 7 (375x667px). Bir ızgarayı oluşturmak için önce mantarı seçin. Sonra sağ kenar çubuğunda 'Düzen ızgarası' bulun ve '+' tuşuna basın. KURULUM Sütun Sayısı: 6, Oluk: 16, Marjinler: 8 ve Tür: Streç.

03. Arka plan için bir dikdörtgen çizin

Arka planla başlayalım. Basın R Dikdörtgen aracını getirmek ve bir dikdörtgen çizmek için bir dikdörtgen # 5F98FA çizmek için. Boyutları sağ taraftaki Özellikler panelini kullanarak 375x363'e ayarlayın.

04. Bir durum çubuğu ekleyin

Set the gradient for the status bar using the properties panel on the right on the screen. Here you can adjust the colour options to create a linear gradient (click image to enlarge) — Ekrandaki özellik panelini kullanarak durum çubuğu için degradeyi ayarlayın. Burada doğrusal bir gradyan oluşturmak için renk seçeneklerini ayarlayabilirsiniz (büyütmek için resme tıklayın)

Sonra ekranın üstüne bir durum çubuğu yerleştirmek istiyoruz. Basın R Genişliği ayarlamak için: 375, Yükseklik: 64, Konum (X: 0; Y: 0). Navigasyon çubuğumuz için, sağdaki özellik denetçisi panelini kullanarak degrade dolguyu ayarlayalım. 'Doldur' seçeneğini bulun, renk önizlemesine basın ve açılır menüden 'Doğrusal'ı seçin. Üstteki renge # 77A6F7 olmalıdır ve altta 5A93f5 (her ikisi için yüzde 100).

05. iOS durum çubuğunu alın

Ne yazık ki, Figma varsayılan olarak iOS UI elemanlarını içermez. Bununla birlikte, bir iOS uygulaması tasarımı olan 'örnek dosya' adlı bir dosya var, böylece durum çubuğunu bundan ödünç alabiliriz. Işık durumu çubuğu seçeneğini kopyalayın, geçerli dosyaya yapıştırın ve (x: 0; y: 0) yerleştirin. Metin aracını kullanma ( T ), Gezinti çubuğuna bir başlık eklemek için sanat kartınıza tıklayın. Avenir ağır, 15px, #ffffff için gittim. Başlığını yatay merkez ile hizalayın, Y: 33.

06. Geri simgesi oluşturun

Gezinti çubuğunun solunda 'geri' simgesi olmalıdır. Bunu sıfırdan yaratacağım. Bir dikdörtgen oluşturun 14x14px, 45 derecelik rotasyon ekleyin, x: 14; Y: 43. Bu dikdörtgeni çoğaltın ve x: 18'e yerleştirin; Y: 43. Her iki dikdörtgen seçin ve üst menü altında Boole Grupları ve GT; Çıkarma seçimi. Bundan sonra, Boole Grupları ve GT'ye geri dönün; Düzleştirmek seçim veya basın cmd + e .

07. Ok simgesini bitirin

Ok simgemiz neredeyse bitti. Şimdi sadece genişlik ve yüksekliği sayısal değerlere ayarlamamız gerekiyor - vaka genişliği: 12px; Yükseklik: 20px. Son adım, doldurma rengini #FFFFFF'ye ayarlamaktır.

08. Bir grafik oluşturun

Şimdi bir grafik oluşturacağız. İlk olarak, bazı yönergelere koyacağız. Dikdörtgen aracını seçin ( R ) ve X: 24 Y: 147; Genişlik: 1; Yükseklik: 166; Renk # B3DCFF ve Opaklık% 20 doldurun.

80px marjları ile bu dikdörtgeni dört kez çoğaltın. Her bir kılavuzun alt kısmında, metin katmanlarını kullanarak bir tarih etiketi eklememiz gerekir ('Şub 2', 'Şubat 9', '1 Şubat', 'Şub 23', 'Mar 1'). Avenir ortamı, 11px, # c1d8ff kullandım.

09. Veri hattını yapın

Kalem aracını kullanma ( P ) Veri hattını temsil etmek için bir vektör oluşturmamız gerekiyor. Bir Bézier noktası oluşturmak için tıklayın ve sürükleyin. Bu şeklin 4px vuruşuna sahip olmalı ve dolgu yok, #ffffff.

Hatın öne çıkmasına yardımcı olmak için bir damla gölge ekleyelim: Etkileri bölümündeki '+' düğmesini tıklatın ve 'Gölgeyi bırak'ı seçin. Pürüzsüz ve zarif bir gölge yapmak için aşağıdaki ayarları kullanın: bulanıklık: 3px, y: 7px, # 2951FF, Opaklık:% 100.

10. Grafiğe ayrıntı ekleyin

Use the Text tool to add values to the places the guidelines intersect with the data line — Rehberlerin veri hattıyla kesiştiği yerlere değer eklemek için metin aracını kullanın.

Kılavuzların veri hattıyla kesiştiği noktalarda daireler ekleyeceğiz. Bu sefer elips aracını kullanacağız ( Ö ), dikdörtgen aletine eşlik eden açılır menüde bulacağınız. Her kavşakta 8x8px daireler çizin ve doldurma rengini # 5F98FA'ya ayarlayın. İnme eklememiz gerekir: Strok bölümünün yanındaki '+' düğmesine tıklayın, Ağırlık: 2PX ve Hizala: Merkezi.

11. Son dokunuşlar

Grafik bölümünü bitirmek için, sadece kesişme noktalarımıza değer katmamız gerekiyor. Metin aracı ile ( T ) Avenir Black, 11px, # 1F4991'i seçin.

12. Üç Bilgilendirici Kutu

Hat grafiğinin altında, daha fazla bilgi gösteren üç hücre oluşturacağız. Metin aracını kullanma ( T ) İlk başlığımızı oluşturalım: 'Hisselerinizin tahmini değeri': X: 16; Y: 391, Avenir Orta, 15px, # 5D7EB6. Hücre sağına '1,115 $' değerini, metin stili: Avenir ağır, 22px, # 5F98FA, Metin Hizalama: Sol, X: 287; Y: 387.

13. Ayırıcı yapmak

1px yüksekliğinde bir dikdörtgen çizin ve ekranın tam genişliğini (# F5F5F5; X: 0; Y: 435) - bu, hücreler arasındaki ayırıcı olarak hareket edecektir. Başlık, değer ve ayırıcıyı seçin ve bir grup oluşturun ( cmd + g ).

14. Başlıklar Ekleme

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — Grafiğin altına, anahtarın anahtar parçalarını gösteren üç hücre olacaktır (büyütmek için resme tıklayın)

Bu grubu çoğaltın, böylece aralarında 24 piksel dikey mesafeli üç grubunuz var. İkinci başlığın 'Toplam Üyelere' olarak değiştirin ve üçüncü grup 'Arkadaşlar kaydoldu "ve ilgili değerleri güncelleyin.

15. Başka bir dikdörtgeni çizin ve hizalayın

Şimdi eylem için bir arama ekleyeceğiz. Son hücrenin altına bir dikdörtgen çizin, genişlik: 195; Yükseklik: 44, Y ekseni son ayırıcı 21px'ten uzaklık.

Hizalama araçlarını kullanarak, dikdörtgeni yatay merkezle çizin. Ardından doldurma rengini # 5F98FA'ya ve yuvarlaklığa 22'ye ayarlayın (bu alanı Özellikler panelinde 'döndürmeden sonra bulacaksınız). Bundan sonra bir damla gölge efekti ekleyin (renk: #abdaff; opaklık:% 100; Y: 5; bulanıklık: 11).

16. düğmeye biraz metin koyun

Metin aracını kullanarak düğmeye metin ekleyin ( T ): 'Daha fazla hisse al!' Bunu Avenir Black, 15px, #FFFFFF olarak ayarlayın. Metni düğmenin ortasına göre hizalayın. Son olarak, tüm öğeleri bir araya getirin ve doğru şekilde adlandırın.

17. Duyarlı hale getirin

Şimdi düzenimizi ayarlayacağız, bu yüzden farklı iPhone'lara duyarlıdır (320x568, 375x667 ve 414x736). Bunu yapmak için sağdaki Özellikler menüsü altında bulacağınız kısıtlamalar kullanmak zorundayız.

18. Düzeni sağa almak

Yatay açılırken 'sola' veya 'sağ' seçeneğini belirlerseniz, grup ekranın seçtiğiniz tarafına pin verir ve germez. 'Merkezi' seçeneğini belirlerseniz, grup veya katman uzanır, böylece ekranın genişliğini doldurur. Durum çubuğunu yerine geçirmemiz gerekiyor, bu yüzden 'sağ ve amp; sol' seçeneğini (veya 'CMD'yi basılı tutup diyagramdaki sol ve sağ çubukları tıklatıyoruz).

19. Test et

Bunu deneyelim. Durum çubuğu seçiliyken, 'sağ ve amp; sola' seçeneğine basın. Bir sanat kartı seçin ve iPhone 7 yerine iPhone 7 Plus'ı seçin. İPhone SE boyutunu seçseniz bile düzgün çalışır.

20. Her katmanı kontrol edin

Katmanların geri kalanını düşünelim. Gezinti çubuğu arka planı için, 'sağ + sola' kullanmak istiyoruz. Navigasyon çubuğu için başlık: 'Merkezi'. Arka ok simgesi için, 'sol' seçeneğini kullanmak en iyisidir - bu şekilde ok ekranın sol tarafına sabitlenecektir.

21. Çizgi grafiğini ayarlayın

Şimdi çizgi grafiğini ayarlayalım. Kılavuzlar, tarihler ve kavşak daireler için, 'Merkezi' kullanmak istiyoruz. Veri hattı ve arka plan için, 'sağ ve amp; sola' kullanacağız. Ekstra veri bölümünde, her bir başlık için 'sola', 'her bir değer için' ve ayırıcı satırları için 'sağ ve amp; sola' kullanmak istiyoruz. CTA düğmesi grubu için 'Merkezi' ayarlayalım.

22. Dikey kısıtlamaları ayarlayın

Son adım, dikey kısıtlamaları ayarlamaktır. Durum çubuğu, navigasyon çubuğu, veri hattı ve kavşak daireleri ve ilgili başlıklar 'üst' olarak ayarlanmalıdır. Grafik, tarih ve kılavuzların arka planı 'merkez' olarak ayarlanmalıdır. Her ekstra veri grubu dikey 'merkez' olarak ayarlanmalıdır ve CTA düğmesi grubu 'alt' olarak ayarlanmalıdır.

23. Her ekran boyutu için çalışmasını sağlayın

Artasoyu iki kez kopyalayalım ve bir iPhone 7 Plus ve diğerinin bir iPhone SE'nin boyutuna getirelim. Artı sürümde, hücrelerin grubunu seçerek ve 195 ila 225 arasındaki yüksekliğini artırarak, ekstra bilgi ve CTA düğmesini arasındaki boşluğu azaltmanız gerekir. CTA düğmesi, bu nedenle hücreleri grubunu seçmeliyiz ve yüksekliğini 150'e düşürmeliyiz.

24. Hepsi bitti!

Hey, tebrikler! Tüm uygulama ekranını Figma'da bitirdik. Şimdilik sadece her şeyin yapıldığını kontrol edin ve arkanıza yaslanıp uzman gibi hissedin.

Bu makale başlangıçta bulundu net dergisi Sayı 288; Burada satın alın.

İlgili Makaleler:

Yeni Behance kavramı bir katil uygulaması gibi görünüyor
Sosyal etki için tasarlama
ACE Tech Jobs Röportajları için 8 İpuçları