Taşındık, yeni adresimiz Figma!
Akbank Tasarım Ofisi olarak, tasarım dünyasında rüzgarını hissetmeye başladığımız Figma uygulamasının cezbedici yanları bizleri de etkilemeye başlamıştı. Bizler de yaklaşık 2 yıl önce Sketch’te bulunan 25 projemiz ve 10 kütüphanemiz ile kulağa çılgınca gelse de Figma’ya migrasyon konusunu ciddi ciddi düşünmeye başlamıştık.
Çıkardığımız raporlar ve araştırmalarımız sonucunda Figma’nın bize sağlayacağı katkılar noktasında ikna olduğumuzda geçiş sürecini başlatmış olduk. Tabi bu karara varmak hiç kolay olmadı. Ne kadar toplantı, ne kadar görüşme gerçekleştirdiğimizi sayamadık 🙂
Kütüphane yapımızı Sketch’den Figma’ya taşırken her bileşeni sıfırdan çizmemiz gerektiğinin farkındaydık. Bu süreç ne kadar karışık görünse de düzenli ve kontrollü bir şekilde ilerlersek daha sistematik bir yaklaşımla üstesinden geleceğimizi biliyorduk.
Bu süreç içerisinde Sketch’te yer alan projelerimizdeki ekranları Figma’ya taşımadan önce var olan kütüphane yapılarımızı inceleyip daha kullanışlı hale nasıl getirebileceğimizi planladık. Bir çok açık kaynaklı şirketin yapılarını inceleyip, konferanslara katılıp globalde tasarım sistemi kullanan şirketlerle fikir alışverişi yaptık. Bu araştırmalar sonucunda da kütüphane içerik mimarimiz üzerine çalıştık.
Tasarım sistemi mimarimiz üzerine vereceğimiz kararlar migrasyon sürecini şekillendireceği için yaklaşık 2 ay boyunca her sistemi inceleyip bir çok not çıkarttık. Son olarak ihtiyacımızı üç kelime ile özetleyip kolları sıvadık.
Bir marka, çoklu proje, çoklu platform…
Aslında bu 3 kelime zaten bizim tasarım sistemimizin 2018’de de belirlenen mottosuydu. Artık doğru bildiğimiz yolda daha da emin adımlarla ama bu kez Figma ile yol alacaktık🙂
Akbank Tasarım sistemini Figma’ya nasıl taşıdık?
Akbank’ın tasarım prensibi olan holistik tasarım yaklaşımını merkeze alarak sistemimizi kurgulamaya başladık. Holistik yaklaşımın özü; Akbank Şubesi’nde çalışan arkadaşlarımızın kullandığı ana bankacılık uygulamasında da, müşterilerimize sunduğumuz Akbank mobil uygulamasında da benzer deneyimler yaşatılmasıydı.
Holistik bakış perspektifinden kütüphanelerimizi en iyi nasıl böleriz ve yönlendirebiliriz diye düşünerek bu işe koyulduk. Aldığımız bu büyük kararla karmaşık yapılı kütüphanelerden kontrol edilmesi daha kolay olan küçük boyutlu kütüphaneler oluşturarak ilk adımı atmış olduk.
Foundation
Öncelikle Foundation kütüphanemizde sade tasarımların patternlarını oluşturacağımız ve tüm projelerde ortak kullanılacak atom parçalarımızı oluşturduk. (ikon,font, renk,logo, divider…. gibi.)
Core
Foundation yapımızı oluşturduktan sonra desktop ve mobil olarak ikiye ayırdığımız Core kütüphane yapılarımızı hazırlamaya başladık.
İlk olarak Desktop Core kütüphane yapısı ile sürecimize başladık. Desktop Core kütüphanesinin patternlarını Foundation kütüphanesinden beslenerek oluşturduk.
Core kütüphanemizi hazırlamışken Figma’da responsive çalışılabiliyor olması fikri bize yeterli gelmemişti. Sadece desktop değil mobil projelerimiz de olduğu için Core kütüphanesinin mobil versiyonunu da çalışmaya karar vermiştik. Mobilde prensipleri değiştirmek zorunda olduğumuz için tüm kütüphaneyi aynı alandan yürütmek kalabalık bir kütüphane yapısında bizi kaosa sürükleyecekti.Böylece, günden güne artan mobil projelerimiz için de Mobil Core yapımızı doğru bir kararla oluşturmuş olduk.
Desktop ve Mobil Core yapılarımızı oluştururken amacımız ortak bileşenleri bir arada tutmak ve tek bir noktadan kullanmaktı. Peki ortak olmayan projelerdeki componentler ne olacaktı? Bunun için de her projenin kendine özel componentlerinin bulunduğu kütüphane yapılarını oluşturmaya karar verdik.
Kütüphane yapımızı oluştururken nelere dikkat ettik?
Component & variant
Componentlerimizi variant kullanarak; en küçük parçadan, en büyük parçaya doğru olacak şekilde atomik yapıda inşâ ettik. Bu sayede durum, boyut, renk gibi benzer özellikleri taşıyan componentleri
tasarladık ve kullanımda tüm kütüphane sistemini yönetmekte bize oldukça fayda sağladı.
Auto layout
Responsive tasarım yapıyoruz demiştik dimi :) Figmaya geçerken en sevdiğimiz özelliklerden biri de aslında auto layout oldu. Bileşenlerimizi birden fazla ekranda farklı boyutlarda ve kurallar koyarak çizmeye başladık. Auto layoutu ilk etapta kullanmakta zorlansak da tüm ekranlarımızda uyarlamayı başarmıştık. 💪
Properties
Figmaya geçiş sürecimizde properties özelliği henüz gündemde yoktu. Tasarım sistemimizi beslemek ve yenilikleri her zaman takip edebilmek adına güncel konuları sürekli takipte kaldık. Şu an ise bileşenlerimizi properties özelliğini kullanarak tasarlamaya başladık bile 🙂
Grid
Grid konusuna ayrı bir şekilde kafa yormamız gerekliydi. Gridler her ne kadar ekrana konulan kolonlardan ibaret gibi görünse de işin teknik tarafına daldığımızda, bizi çok daha karmaşık bir süreç karşıladı. 30 farklı tip ve 10.000 den fazla ekranın kullanıldığı bir dünyada, ürettiğimiz tasarımların her türlü ekranda desteklenmesi için tasarımlarımızda en iyi gridleri oluşturmamız gerekliydi.
Ekibin adaptasyonunu nasıl sağladık?
Figmaya geçiş süreci ekibimiz için çok önemliydi, ekipteki tüm rollerin söz ve bilgi sahibi olmasına özen gösterdik.
Bizim için yeni olan bu uygulamayı öğrenmeleri için ekibimiz içinde eğitimler vererek herkesin Figma öğrenmesini teşvik ettik :)
Oluşturduğumuz kütüphane yapılarını ekibimizle birlikte test ettik.
Tüm bu süreçler sonunda artık Figma platformuna fazlasıyla hakim olduk ve geçiş sürecindeki adaptasyonu sağlıklı bir sekilde hep birlikte sağlamış olduk.
Karşımıza çıkan problemleri nasıl çözdük ?
Bileşenlerimizi değiştirmemiz gerektiğinde yerini bulmak ve tüm projelerde düzenlemek hem zaman alıyor hem erişimi zorlaştırıyordu. Ulaşılabilirlik, güncelleme ve daha kolay kullanılabilirlik sorunlarını, Figma üzerinde kurmuş olduğumuz bu güçlü yapı ile aşmış olduk.
Kütüphanesini taşıyacaklara bizden tavsiyeler 🙂
Geçiş yapmadan önce kullanmış olduğunuz tool sizin için neleri karşılamıyor ve geçiş yapacağınız tooldan neler bekliyorsunuz konularını çok iyi analiz etmeniz gerekiyor.
Eğer kütüphanenizi taşıyacaksanız çizdiğiniz her bileşeni mutlaka not edin, neyi nerde çizdiğinizi listeler halinde planlayarak kontrol sağlayın.
Kütüphane taşımak ev taşımak kadar zor ama bir o kadar da eğlenceli bir iştir :) Eski yuvanızı bırakmak başlarda ne kadar zor olsa da yenisi emin olun ki daha çok mutlu edecektir 🙂 Yeniliklere açık olmak her zaman için iyidir. Akbank Tasarım Ofisi olarak yenilikleri ve zor olanı başarmayı her zaman severiz ❤️
Katkıda bulunanlar: Yiğit Kemal
Akbank Design Studio Medium blogunda okumak istediğin başka konu var mı? Bize bu formdan ulaşabilirsin.
