Figma, öncelikle web ve mobil uygulamalar için kullanıcı arayüzleri tasarlamak için kullanılan bir vektör grafik tasarım aracıdır. Ancak Figma, web sitelerinin prototipini oluşturmak için de harika bir araçtır. Bu yazıda, bir web sitesinin prototipini oluşturmak için Figma’yı nasıl kullanacağınızı göstereceğiz.
Figma’yı ilk açtığınızda size boş bir tuval sunulacak. Yeni bir çerçeve oluşturabilir veya mevcut bir çerçeveyi içe aktarabilirsiniz. Bu örnek için yeni bir çerçeve oluşturacağız.
Başlamak için, çerçevenize bazı öğeler eklemeniz gerekecek. Bunu, araç çubuğundaki “+” simgesine tıklayarak ve menüden istediğiniz öğeyi seçerek yapabilirsiniz. Örneğimiz için bir dikdörtgen, bir oval ve bir metin kutusu ekleyeceğiz.
İstediğiniz tüm öğeleri çerçevenize ekledikten sonra, web sitenizin prototipini oluşturmaya başlayabilirsiniz. Bunu yapmak için “Katmanlar” panelini ve “Prototip” sekmesini kullanmanız gerekecek.
“Katmanlar” panelinde, çerçevenize eklediğiniz tüm öğeleri göreceksiniz. Öğelerinizin sırasını yeniden düzenlemek veya artık ihtiyacınız olmayan öğeleri silmek için bu paneli kullanabilirsiniz.
PROFESYONEL İPUCU: Figma, web sitelerinin prototipini oluşturmak için güçlü bir araçtır, ancak yazılıma aşina değilseniz kullanımı zor olabilir. Bu yazıda, bir web sitesinin prototipini oluşturmak için Figma’yı kullanmanın temellerini anlatacağız. Ayrıca prototiplerinizin harika görünmesini sağlamak için bazı ipuçları da sağlayacağız.
“Prototip” sekmesinde, öğelerinizin birbirleriyle nasıl etkileşim kurması gerektiğini belirleyebilirsiniz. Bunu yapmak için iki öğe seçmeniz ve ardından araç çubuğundaki “Bağlantı” simgesini tıklamanız gerekir. Oluşturmak istediğiniz etkileşim türünü belirtebileceğiniz bir açılır pencere görünecektir.
Örneğimiz için dikdörtgenimiz ile ovalimiz arasında bir bağlantı oluşturacağız. Dikdörtgenimizin üzerine geldiğimizde ovalimizin görünmesini istiyoruz. Bunun için “Trigger” açılır menüsünden “Hover” ve “Action” açılır menüsünden “Show” seçeneğini seçeceğiz.
Artık etkileşimimizi oluşturduğumuza göre, araç çubuğundaki “Oynat” düğmesine tıklayarak test edebiliriz. Bu, prototipimizle etkileşim kurabileceğimiz yeni bir pencere açacaktır.
Hepsi bu kadar! Web sitelerinin prototipini oluşturmak için Figma’yı kullanmak hızlı ve kolaydır. Bugün bir deneyin!