Tasarım sürecinde zaman kazanmak, kreatif kalmayı tetikliyor. Tasarım içinde kaybolduğumuz zaman yaratıcılık gittikçe azalıyor. Bu nedenle; tasarlarken kısayolları ve hızlı yöntemleri her zaman severim. Özellikle bir programda ustalaşmak istediğim zaman bu yönetmleri uygulamanın vakti gelmiş diye düşünürüm.
Daha önce bu serinin ilk yazısını yayınlamıştım. Orada basit bir kaç yöntem daha bulabilirsiniz. Fakat Figma’ya gelen güncellemelerle birlikte kısayollara da sürekli yenileri ekleniyor. Bu yüzden bu yazıları güncel tutmaya çalışacağım. Artık hızlıca kısayollara geçelim:
Not: Window’ta Cmd tuşu Ctrl, Option tuşu Alt yerine geçer.
1 — Görsel Kırparken Cmd: Cmd tuşuna tıklayarak görsel kırpabilirsiniz.(*yeni)
2 — Sayfa İçi Linkleme/Yönlendirme: Web sitelerindeki anchor bağlantıları gibi, sayfa içinde elemanlara link verebilirsiniz. Bunun için link vermek istediğiniz elemanı seçin ve şunu uygulayın: Sağ tıklama > Copy/Paste > Copy link.
3 — Control(^) + C veya I Tuşu: Renk paletini seçer.
4 — Cmd ardından “Sayı” (Opacity): Bir elemanı seçtikten sonra Cmd tuşuna basıp 1 ila 9 tuşları arasından birine basarsanız opacity değerin değiştirebilirsiniz (10%için 1 tuşu, 90% için 9 tuşu). Bunu muhtemelen biliyordunuz. Fakat buna ek olarak; iki kere hızlıca 0'a basarsanız opacity %0 olur. Ya da hızlıca iki tuşa basarsanız o tuşların sırasını alır (örneğin 8 ve 5 tuşlarına hızlıca art arda basarsanız %85 opacity sağlar.)
5–Cmd + Option + T: Düzenleme işlemi. Dağınık olarak seçilmiş elemanları belirli bir düzene göre hizalar.
6 — Düzenlemeyi Organize Etmek: Toplu seçimde elemanları düzenledikten sonra, sağa-sola ve yukarı aşağı boşlukları imleçle ayarlayabilirsiniz. Ayrıca düzeni/oranı bozmadan elemanların birbiriyle yer değişikliğini sağlayabilirsiniz.
7 — Sürekleme + Boşluk Tuşu: Bir alanı seçtikten sonra, seçili alanın yerini değiştirmek istersek Boşluk tuşunu kullanabiliriz.
8 — Cmd + ”Sayı” (Sekmelerde): Birden fazla dosya/sekme açıksa tarayıcılarda olduğu gibi cmd + “number” kombinasyonuyla sekmeler arası geçiş yapabilirsiniz. Tabii ki anasayfa da bir sekme.
9 — Cmd + Nokta Tuşu(.): sağ ve sol panelleri kapatır. Böylece daha minimal bir çalışma alanınız olur. Panelleri yeniden açmak için aynı tuş kombinasyonunu kullanabilirsiniz.
10 — Cmd+ |: Bu kombinasyon da yalnızca sol paneli gizler. Paneli tekrar açmak için aynı kombinasyonu kullanabilirsiniz.
Not: |(dikey bar), I harfi değil. Option ve Eksi(-) tuş kombinasyonu ile yapılıyor.
11 — Cmd + G: Seçili elemanları gruplar.
12 — Cmd + Option + G: Gruplamada olduğu gibi seçili elemanları frame içine alır. Bazen grup yerine frame kullanmak elemanları boyutlandırırken daha avantajlıdır.
13 — Option + Shift + ?: Tüm klavye kısayollarını gösterir. Böylece burada ye almayan basit kısayolları da görebilirsiniz.
14 — Shift + Cmd + K: Hızlıca fotoğraf seçer. Böylece toplu fotoğraf da seçilebilir. Ayrıca frame ve şekillere (görsel alabilecek her elemana) tek tek tıklayarak fotoğraf yerleştirebilirsiniz.
15 — Renk Seçimi: Renk verebileceğimiz bir eleman seçelim. Elemanda fill seçiliyken yukarı ve aşağı -yukarı(açık) ve aşağı(koyu)- ok tuşları kullanarak seçili rengin açık ve koyu renk tonlarını bulabilirsiniz. Bunun için Fill’in seçili olması önemli. Ayrıca, eğer shift tuşuna basarsanız, ton farklarını daha hızlı yakalayabilirsiniz.
16 — Text Auto Height & Auto Width: Bir yazı kutusunu (text box) yeniden boyutlandırmak istediğimizde sağ paneli kullanırız. Özellikle kopyala-yapıştır bir yazı seçtiğimizde, o yazı varsayılan stili ile birlikte kopyalanıyor. Bu noktada küçük bri ipucu uygulayabiliriz: Text kutusunun herhangi bir kenarlarına çift tıklayarak yazıyı auto height’tan auto width’e çevirebilirsiniz.
17 — Elemanı Göstermek: Büyük dosyalarda, sol panelde görünen bir elemanı kanvasta bulmak zor olabiliyor. Bu nedenle sol panelde, elemanın yanında beilren ikona çift tıklarsanız, o eleman kanvasta belirerek ortalanır.
18 — Cmd+Option + S : Versiyonlamaya yarar. Muhtemelen çoğumuz tasarımlarımızı versiyonlamıyoruz. Figma zaten otomatik olarak versiyonluyor. Ama bu tuş kombinasyonuyla daha detaylı ve açıklamalı versiyonlama yapabilirsiniz.
19 — Hizalama: Sağ panelden tüm hizalamaları yapabilirsiniz. Fakat klavye kısayollarını kullanmayı alışlanlık haline getirmek sizi kesinlikle rahatlatacaktır.
- Option + A: Sola Hizalama.
- Option + D: Sağa Hizalama.
- Option + V: Dikeyde Ortaya Hizalama.
- Option + H: Yatayda Ortaya Hizalama.
- Option + W: Yukarı Hizalama.
- Option + S: Aşağı Hizalama.
- Option + Control + T: Düzenleme (Tidy up)
- Option + Control + V: Dikey Boşluğu Düzenleme.
- Option + Control + H: Yatay Boşluğu Düzenleme.
20 — Shift + A: Seçili elemanları autolayout frame içine alır. Basit bir bilgi. Fakat çoğu kişinin bu özelliği sağ panelden kullandığını gördüm ve bu nedenle listede yer vermek istedim.
21 — Sürükleme + Boşluk Tuşu: Bir frame içindeki içi içe geçmiş elemanı (nested eleman) bazen framede görünmeyecek şekilde dışarı taşımamız gerekebiliyor (clip content olayı için). Fakat bu durumlarda, elemanı dışarı taşırken, taşımak istediğimiz eleman frame’in içinden de çıkıyor. Buna engel olmak için nested elemanı sürüklerken boşluk tuşuna basabilirsiniz.
Aynı şekilde dışarıdan bir elemanı frame üzerine getiriyorsanız ve frame’e dahil etmek, istemiyorsanız yine space tuşuna basmalısınız.
22 — Alt: Bir elemanla diğer eleman arasındaki uzaklığı bulmak için Alt tuşu kullanılır. Elemanı seçtikten sonra, Alt tuşuna basın ve imleci diğer elemanın üstüne sürükleyin. Böylece daha rahat pixel perfect çalışabilirsiniz.
23 — Shift + 2: Bir eleman seçin. Ardından Shift ve 2 tuş kombinasyonuyla seçtiğiniz elemana yakınlaşabilirsiniz. (Zoom to Selection)
24 — Shift + 1: Kanvastaki tüm elemanları kanvasa sığdıracak şekilde ekranı düzenler (Zoom to fit).
25 — Z+Alan Seçimi: Z tuşuna basarak kanvasta bir alan seçin. Bu tuş kombinasyonuyla seçili alana yakınlaşırsınız (Zoom in to area).
Ayrıca bu tuş kombinasyonuna Option tuşunu da ekleyerek; Option+Z+Alan Seçimi ile seçili alandan uzaklaşırsınız (Zoom out to area).
26 — Cmd + Y: Kanvasın görünümünü outlines’a çevirir. Framelerin içinde, göremediğimiz alanlardaki elemanları görebilmek için etkilidir.
27 — Cmd + Scrub: Mouse veya touchpad kullanarak yukarı ve aşağı hareket ederek kanvasta zoom in-zoom out yapabilirsiniz. (Mac için iki parmak kullanabilirsiniz)
28 — Option + Scrub: Input bulunan; sayı, renk vs. olan yerlerde üstteki şekilde kullanılabilir. Mouse ve Touchpad’i sağa ve sola hareket ettirerek input değerlerini değiştirebilirsiniz. (Mac için iki parmak kullanabilirsiniz)
29 — Border İpucu: Border örnekleri için farklı tasarımlar var. Mesela Rectangle şekil aracıyla bir ayırıcı şeklinde border kullanılabiliyor. Fakat Rectangle şekli ayrı bir eleman olduğundan autolayout özelliği kullanıldığında zahmetli olabiliyor.
İşte border için bir ipucu: Border uygulamak istediğiniz elemanı seçin. Sağ panelden efektler bölümünden Inner Shadow ekleyin. Blur: 0, Spread: 0, X:0 ve Y: -1 değerlerini verdikten sonra elemanın altında 1px border görünecektir. Border kalınlığını, Y değerini değiştirerek artırabilirsiniz. Son olarak renk ve opacity seçip border tasarımınızı sonlandırabilirsiniz. (Bu efekti “border” adıyla stil oluşturarak diğer elemanlarda da kullanabilirsiniz.)
30 — Frame Hiyerarşisi: Frame içindeki elemanı Cmd tuşu ile hızlıca seçebileceğimizden bahsetmiştim. Fakat frame içinde çokça iç içe geçmiş eleman varsa seçim yapmak zorlaşıyor. Bu nedenle Cmd tuşu ile frame’e tıkladıktan sonra sağ tık yaparsanız frame hiyerarşisini görebilirsiniz. Böylece elemanlar içinden istediğinizi seçebilirsiniz.
31 — Union Selection İpucu: Vektörel komponentlere sahip olabiliriz; mesela ikonlar. Figma’daki Swap Instance özeliğiyle ikonlarları değiştirirsek, önceki ikona uyguladığımız renk stili yeni ikona uygulanmayabilir. Bunun sebebi ikonların Union Selection olmamasıdır. Eğer Union Selection uygulanırsa bu sorun çözülecektir.,
32 — Cmd + E: Flatten Selection. Çoklu şekilleri tek bir vektöre çevirebilirsiniz. İkon, illüstrasyon vs. tasarlarken işinize yarayacak bir kısayol.
33 — Sol Panel Tableri: Sol panelde iki adet sekme bulunuyor; Layers ve Assets. Bu sekmeler arasında geçiş yapabilmek için Optinon+ 1 (Layers), Option + 2 (Assets) tuş kombinasyonlarını kullanabilirsiniz.
34 — Sağ Panel Tableri: Aynı şekilde sağ panel için de kısayollar mevcut. Option + 8 (Design), Option + 9 (Prototype), Option+0 (Inspect) sekmelerine yönlendirir.
35 — N Tuşu: Kanvasta N tuşuna basarsak, sıralı olarak frame seçiyor. N tuşuna basmaya devam ederseniz frameler arasında ilerlemeye devam ediyor. Eğer bu işlemi Shift + N tuş kombinasyonuyla yaparsanız, frameler arasındaki sıralamanın tersine ilerliyor.
36 — Tab: Tab tuşu bir çok işleve yarıyor. Bu örnekte de; eğer bir frame seçiliyken Tab tuşuna basarsanız, sırasıyla frame içindeki elemanları geziyor.
37 — Enter (Return): Tab tuşu gibi bir çok işleve yarayan diğer bir tuş Enter tuşudur. Bir frame seçiliyken Enter tuşuna basarsanız frame içindeki ilk nested elemanı seçer (child layer). Enter’a basmaya devam ederseniz elemanlarda iç içe gezmeye devam eder. Aynı şekilde Shift + Enter tuşu ile hiyerarşi içinde bir üst katmana geçersiniz.
38 — Cmd + Resize: Bir frame’i yeniden boyutlandırmak istediğinizde Constraints özellikleri neyse ona göre boyutlanır. Frameler varsayılan olarak sol üste hizalıdır. Ama bunu istemiyorsanız Cmd tuşuna basarak boyutlandırmayı deneyin.
39 — Görsel Kopyalama: Bir tarayıcıda bulduğunuz herhangi bir görseli kullanmak istiyorsunuz. Görseli indirmenize gerek kalmadan görsel bağlantısını kopyalarak direkt Figma’ya yapıştırabilirsiniz.
40 — Shift + X: Çok havalı bir özellik. Bir eleman seçtiğinizde Stroke ve Fill renklerini tam tersine çevirmenize yarayan bir kısayol.
41— Shift + Cmd + O: Outline stroke. Bu kısayolu kullanmak için frame içinde bir eleman olmalı. Ardından eleman seçiliyken bu tuş kombinasyonu uygulanmalı. Böylece sol panelde seçili elemanın üzerinde “(Stroke)” yazılı elemanı göreceksiniz. Ayrıca seçili elemana da outside stroke verebilirsiniz. Mesela bu örneği buton ve benzeri elemanlarda focus durumu için kullanabilirsiniz.
Not: Active, Hover ve Focus durumlarının farklarını tam olarak anlamak için bu yazıya bakmanızı tavsiye ederim.
42 — Komponent Açıklaması: Komponentlere sağ panelden anahtar kelime ekleyebiliriz. Böylece sol panelin Assets bölümünde anahtar kelimelerle arama yapabilir ve o komponenti bulabiliriz.
Okuduğunuz için teşekkür ederim.
