အကောင်းဆုံးနဲ့ အသုံး၀င်တဲ့ Sketch Plugins များ (2020)
The best Sketch plugins 2020
Sketchအကြောင်းကိုပြောရမယ်ဆိုရင် Sketchက ၀ယ်သုံးရပါတယ်။ ပြီးတော့ Mac အတွက်ပဲရှိတာပါ။ windowအတွက် မထွက်သေးပါဘူး (အခုထိ)။ သူက Mac user တွေအတွက်သီးသန့်ပေါ့။ sketchက UI/UX Design Toolsအေနနဲ့ နာမည်ကြီးပါတယ် ။ ဒါပေမယ့် Sketch မှာလည်းအားနည်းချက် တွေရှိပါတယ်။ စပေါ်ခါစတုန်းကတော့ သူ့အားနည်းချက်က အဆင်ပြေပေမယ့် နောက်ပိုင် တဖြည်းဖြည်း အားနည်းချက်ေတွများပြီး အဆင်မပြေတော့ပါဘူး။
ဘယ်လိုအားနည်းချက်တွေလဲ? (ကျနော့အသုံးပြုခဲ့တဲ့ အတွေ့အကြုံအရ)
- Mac OS version မြင့်တိုင်း OSအသစ်နဲ့ compatible မဖြစ်တာ ။ နောက် compatible ြဖစ်မယ့် Plugin update ကိုမျော်ရပြန်ပြီ။ (photoshop လည်းအတူတူပါပဲ။)
- Pluginsတွေကိုထပ်သွင်းရတာ.. sketchရဲ့ အသက်က pluginsလို့ပြောလို့ရတယ်။ plugins တွေနဲ့ထည့်သုံးမှ ၊ pluginsနဲ့တွဲသုံးမှ အဆင်ေပြတယ်။ sketch versionမြှင့်လိုက်တဲ့အခါ pluginsတေွနဲ ့ compatible မဖြစ်တော့ရင်လည်း အဆင်မေပြတော့ပြန်ဘူး။ ဘာလို့လည်းဆိုတော့ pluginsတွေကိုပဲအများဆုံးသုံးပြီး designဆွဲရတာကိုး။
- Screens(artboards)များလာရင် အတော်လေးလာတယ်။ Photoshopအတိုင်းပဲ။ အရင်တုန်းက မလေးဘူး အခုနောက်ပိုင်း ထွက်တဲ့ versionေတွက သိပ်အဆင်မပြေဘူး။ (ဒါေကြာင့် sketchကို ပြောင်းသုံးဖြစ်ခဲ့တာလို့ပြောရမယ်)
- sketchမှာပါတဲ့ preview ..သူကလည်း အမြဲ လိုလိုကြည့်လိုမရဘူး။
- ပြီးတော့ Sketch mirror ဆိုတာ ရှိတယ် ။ သူက ကိုယ့်ဖုန်းမှာ ကိုယ်ဆွဲနေတဲ့ app design ကိုကြည့်လို့ရတဲ့ (wifiတူစရာမလို) appကလေးတစ်ခု။ ခက်တာက သူလည်း iOS phone ပေါမှာပဲရတယ်။ ကျနော်က ကျန်တဲ့ Apple product တော်တော်များများကိုသုံးပေမယ့် ဖုန်းကိုတော့ Android ပဲသုံးတာ …ဆိုတော့ ကိုယ်app designကို ကိုယ်ပြန်ကြည့်လို့မရတော့ တခြား Third Party app ကိုသုံးရပြန်ရော။ sketchတခုတည်းနဲ့ပြီးတာ မရှိဘူး။ အများကြီးလိုက်သုံးနေရတယ်။ ဒါကိုလည်းမကြိုက်ဘူး။
- Sketchထဲမှာ prototype လုပ်တာလည်းအဆင်မပြေဘူး။ တခြား Third partyကိုသုံးရတယ်။
- sketchတခုတည်းနဲ့ UI design ဆွဲရုံအပြင် ဘာမှ သိပ်လုပ်လို့မရဘူး သူ့မှာ dependency(Plugins)တွေ အရမ်းများတယ်။
အဲ့ဒါကို ကျနော် သိပ်မကြိုက်တော့ဘူး။ တခြား softwareကိုပြောင်းသုံးဖို့ စဉ်းစားနေတာ အတော်ကြာပြီ။ (ပြောင်းသုံးမယ် သုံးမယ် နဲ့ ကြာနေတယ်။ လူဆိုတာကလည်း ကိုယ်အသားကျနေတဲ့ နေရာမှာပဲနေချင်တာ ထုံးစံပါပဲ။ )
ကျနော် UI Designer အဖြစ်စလုပ်တုန်းက UI design ကို Photoshopနဲ့ပဲစဆွဲခဲ့တာ..ဘာလို့လည်းဆိုတော့ အဲ့တုန်းက figma,Adobe XD Sketchတို့ ဆိုတာမရှိသေးလို့... Software တခုစီတိုင်းမှာတော့ အားသာချက်၊ အားနည်းချက်ဆိုတာ ကိုယ်စီရှိပြီးသားပါ။ ဒါကိုမှ softwareတခုရဲ့အားနည်းချက်က ဘာမှမပြောပလောက်တာ သူများနဲ့ယှည်ရင် အဆင်ပြေသေး,လက်ခံနိုင်သေးတဲ့ softwareတွေက လူသုံးများတာပါပဲ။ တနည်းအားဖြင့်တော့ နာမည်ကြီးလာတယ်ပေါ့။ နောက်ပြီး ကျနော် sketchကို ဘာလို့သုံးခဲ့တာလဲဆိုတော့ sketch တို့ ပေါလာတဲ့အချိန်မှာ ကျနော်ကလည်း Mac OSကိုစကိုင်တဲ့အချိန်နဲ့တိုက်နေတော့.. ပြီးတော့ အဲ့အချိန်က Sketchနဲ့ XD စပေါ်တဲ့အချိန် Photoshop ကေန ပြောင်းချင်တာလည်းပါေတာ့ သုံးကြည့်မယ်ဆိုပြီးသုံးြဖစ်ခဲ့တာ..
Photoshopကနေ ဘာလို့ပြောင်းတာလဲ…?
UI designကို Photoshopကနေဆွဲလို့ရပါတယ် အရင်တုန်းကလည်းဆွဲခဲ့တာပါ ဒါပေမယ့် UI designက designဆွဲရမယ့် screenတွေ အရမ်းများတယ် ။ ဥပမာ..App အသေးလေးတခုဆွဲရင်တောင် 8 screens ဆိုတာအနည်းဆံုးပါ ။ ဒါကိုသာ screenတခုကို တစ်ဖိုင်(ဒါဆို ဖိုင်တွေအများကြီး) (သို့ ) group တွေဖွဲပြီး app တခုတည်းကို တစ်ဖိုင်တည်းဆွဲရင် Photoshopလေးလာပါတယ် file size ကကြီးတဲ့အတွက်ကြောင့်ပါ။ ဘယ်လိုလေးလဲဆိုတော့ billboard ၊size ကြီးကို ကို i3 စက်မှာ ဆွဲနေရသလိုပါပဲ .. changes တခုခုလုပ်လိုက်ရင် နောက်ထပ် 1မိနစ်လောက်ကို တရားထိုင်ပြီး စောင့်နေရသလိုပါပဲ ။ တနေ့လုံးကိုတရာထိုင်ခိုင်းနေသလိုပါပဲ။ ဒါက Photoshopမှာ artboard options မရှိသေးတဲ့အခြေအနေပေါ့ ။ နောက်ပိုင်း artboard options ပါလာပေမယ့်လည်းထင်သလောက် အသုံးမ၀င်ပါဘူး (ကျနော့အမြင်ပါ)။
အခုတော့ ကျနော့် MacBookလေးဆိုင်က ပြန်ဆင်းလာတော့ လိုအပ်တာတွေသွင်းရင်နဲ့ sketchလည်းသွင်းဖြစ်တယ်။ ဖြစ်ချင်တော့ အမြဲသုံးနေကျ pluginsတွေဆိုပေမယ့် အဲ့ဒီ pluginsနာမည်တွေကို မမှတ်မိဘူး။ internetကနေရှာလည်း plugins listတွေကျေတာ့ကျလာတယ် ဒါပေမယ့် ကျနော့အတွက် သိပ်အသုံးမတည့်တာတွေများတယ်လို့ ကျနော်ထင်တယ်။ ဒါကြောင့် pluginsေတွကို မှတ်မှတ်သားသားဖြစ်အောင် ၊ တခြားသူတွေနဲ့လည်းမျှဝေလို့ရအောင်၊ (အထူးသဖြင့် ကျနော် sketchစသုံးတုံးကလို တွေ့သမျှကောင်းမယ်လို့ထင်တဲ့ pluginsတွေလိုက်ထည်း့ထားပြီး pluginsတွေ အရမ်းများနေတဲ့ ပြသနာတွေကင်းဝေးစေချင်တာရယ်) ပြီးတော့ကျနော် တခြား softwareကိုပြောင်းသုံးပြီး နောက်ပိုင်း sketchဖက်ကို ပြန်လှည့်လာရင်လည်း အသုံး၀င်တဲ့ pluginsလေးတွေမမေ့ရအောင် ရေးဖြစ်တာပါ။
အောက်က plugins listလေးတွေကတော့ ကျနော့အတွက်အတော်အသုံး၀င်ပြီး designဆွဲတဲ့နေရာမှာလည်း speedတတ်အောင် အထောက်အကူပြုတဲ့ listလေးဖြစ်ပါတယ်။ အခြား ကျနော့ listထဲမပါတဲ့ အသုံး၀င်တဲ့ pluginsဘေးတွေရှိရင်လည်း ကျနော်ကို shareေပးခဲ့လို့ရပါတယ်။
01. User flow
https://abynim.github.io/UserFlows/
ကျနော်တို့ app or website တွေကို developerတွေဆီကိုပဲဖြစ်ဖြစ် stakeholdersတွေကိုပဲပြပြ screen flow ပြပေးရပါတယ်။ ဒီ pluginsလေးကတော့ sketchထဲမှာပဲ screen flowလေးဆွဲပြီး generate ထုတ်ပေးပါတယ်။ အတော်အဆင်ပြေပါတယ်။
02. Craft
https://www.invisionapp.com/craft
အကောင်းဆုံး အချိန်ကုန်သက်သာစေပြီး speed တတ်စေတဲ့ Sketch pluginsလို့ပြောလို့ရပါတယ်။ Photoshop, XD အတွက်လည်းရှိပါတယ် ပုံတွေမျိုးစုံနဲ့ စာသာတွေ၊ နာမည်တွေမျိုးစုံ ကို clickတခုတည်းနဲ့ အကုန်ပြောင်းပေးပါတယ်။ contentတွေ ပုံတွေ generateလုပ်ပေးတဲ့ pluginလို့ပြောလို့ရပါတယ်။ သူ့ထဲမှာပဲ prototype လုပ်ပြီး Invisionပေါ်ကို တခါတည်း syn လုပ်လို့ရပါတယ်(ကျနော်တို့လို prototype နဲ့ project sharingအတွက် Invisionသံုးတဲ့ သူတွေကတော့အတော်ကြီးအဆင်ပြေတဲ့အချက်ပါ ) ။ သူမှာ အများကြီးအသုံး၀င်တဲ့ featuresတွေရှိပါတယ်။ (အခုကတော့ကျနော်အသုံးများတဲ့ အရာတွေကို ပဲပြောထားတာမို့လို့ သူ့ရဲ့ websiteမှာ ပိုလေ့လာနိုင်ပါတယ်) သူတစ်ခုရှိတာနဲ့တင် အတော်ပြည့်စုံသလောက်ရှိပြီလို့ ပြောလို့ရပါတယ်။
03. PDF xport
UI Screenတွေကို တခါတရံ Jpg/Png နဲ့မဟုတ်ဘဲ PDF နဲ့ပေးရတဲ့အခါမျိုးတွေမှာ artboardsတွေအများကြီးကို ကိုယ်ကြိုက်သလိုအစဉ်လိုက်ထားပြီး file တခုတည်း ထုတ်ပေးပါတယ်။ (sketchရဲ့ exportမှာ PDF exportပါပေမယ့် artboards တစ်ခုကို တစ်ဖိုင်ထွက်ပါတယ်။ သူရဲ့ defaultကတော့ အဆင်မပြေပါဘူး။ )
04. Rename it
https://renameit.design/sketch/
Artboards and layer တွေကို မှတ်ပြီး နာမည်ပြောင်းပေးပါတယ်။ projectအသေးလေးတွေမှာသုံးရင်မသိသာပေမယ့် artboardsတွေအများကြီးနဲ့ လုပ်ရတဲ့ အခါဆိုသိသာပါတယ်။ layer name copy တွေကို တစ်ခါတည်းနဲ့ ရှင်းနိုင်ပါတယ်။
05. Symbol name autocomplete
https://github.com/griffin-stewie/SymbolNameAutocomplete
ဒီplugin ကတော့ symbol နာမည်၊ လမ်းကြောင်းတွေကို အစလေးရိုက်လိုက်ရင် Autoကျလာတဲ့ ဟာလေးပါ။
ကျနော်တို့ sketchသုံးရင် symbolတွေလုပ်ပြီးထားေလ့ရှိပါတယ်။ ပြီးတော့ အဲ့ဒီ symbol နာမည်၊ လမ်းကြောင်းတွေကို မမှတ်မိပါဘူး။ ဒီကောင်လေးကတော့ အဲ့လို ပြသနာလေးတွေက်ုပြေရှင်ပေးပါတယ် ။ သူလည်း projectအသေးလေးတွေမှာ မသိသာပေမယ့် projectကြီးတစ်ခုဆိုရင် symbolတေွလည်းများတဲ့အတွက် မမှတ်မိတော့တာတွေကို ေြဖရှင်းပေးပါတယ်။
06. Minimap
https://github.com/abynim/sketch-minimap
Artboardsတွေများလာတဲ့အခါ ဟိုနားတစ်စုဒီနားတစ်စုဆီရှိနေတဲ့ artboardsတွေဆီကို အလယ်တကူသွားလို့ရတဲ့ plugins လေးပါ။ Sketchမှာ တခါတလေ artboardsပျောက်နေတာတွေအတွက်လည်း ဒီကောင်လေးက အသုံး၀င်ပါတယ်။
နောက်ထပ်ကြိုက်တဲ့ ၊ အသုံး၀င်နဲ့ Pluginsတွေထပ်ပြီးရှာတွေ့ရင်လည်း ယခု articleမှာ ထပ်ပြီးပေါင်းထည့်ပေးသွားပါမယ်။
Article လေးကတော့ ဒီမှာပြီးပါပြီ။
မရှင်းတာရှိရင်လည်း comment ပေးခဲ့လို့ရပြီး နောက်တောင်းဆိုချင်တဲ့ Articleအကြောင်းအရာများရှိရင်လည်း ဒီ form လေးမှာမေးခဲ့လို့ရပါတယ်။ ကျနော်လည်းလေ့လာသင်ယူဆဲမို့ ကျန်ခဲ့တာ၊ အမှားပါရင်ရှိရင် ထောက်ပြပေးပါ။
ဒါဆို နောက်တပါတ် ကျနော့ Medium က Article လေးမှာ ပြန်တွေ့ကြပါမယ်။ အားလုံးပဲ ကျန်းမာပျော်ရွင်ကြပါစေ။
My previous articles
