Sketch , Adobe XD,UXPin or InVision Studioဘယ် Tools အ ကောင်းဆုံး လဲ?

<unicode>

အ ရင် တုံး က Design Software ဆို ရင် Adobe Software ကို သတိရကြ မှာ ပါ .Standard အသစ် တခုဖြစ် တဲ့ Sketch ဟာ လဲ နာမည် ကြီး တဲ့ UI Design Tools တခု ပါ ပဲ။ UI Designers တွေ Design ဖန် တီး ရာ မှာ တော့ လို အပ် ချက် အရ Design Tools အမျိုး မျိုး သုံးကြ ပါ တယ်။ ဒါပေ မဲ့ Design Tool တွေ မှာ ကွဲ ပြား ချက် အနည်း ငယ် ရှိ ပါ တယ်။ Design Tools. တွေ မှာ ဘယ် Tools က အကောင်း ဆုံး လဲ compare လုပ်ကြည့် ရ အောင် Sketch , Figma, Adobe XD, UXPin နဲ့ In Vision Studio. အခု Tools တွေ က Free သုံး လို့ အဆင်ပြေပါဘူး။ ဒါပေမဲ့ အကန့် သတ် နဲ့ ပေး ထား တာ ပါ။အလုပ် ထဲ မှာ ဆို ရင် တော့ ဝယ် သုံး တာ အ ကောင်း ဆုံး ပါပဲ။ Tools တွေ ကို compare လုပ် လိုက် ရင် ဘယ် Tools တွေက အသုံး ဝင် ဆုံး လဲ ။ Sketch, Sigma, Adobe XD, UXPin and InVision Studion တွေ အဓိ က basically ပါ ဝင် တာ က တော့
Static user interface Screen Designs
Responsive Layouts တွေ ပါဝင်ပါမယ်။
3. Page တွေ Layer တွေ ပါဝင်ပါမယ်။
4. Nested Components တွေ ပါဝင်ပါမယ်။
5. Designer က Layer တွေကို အဆင့် ဆင့် ထည့် တာ ပါဝင်ပါမယ်။

InVision Studio
Studioကို မြင် တာ နဲ့ စိတ် လှုပ် ရှား မှု ကDesign ဆွဲ ချင် မှု ကို တွန်းအားဖြစ် စေ ပါတယ် ။ ဒါပေ မဲ့ limited တော့ ရှိ ပါ တယ်။
Collaboration
Commenting
Version Control
Design specifications for developers
Windows version
Marketplace for extensions (‘apps’)
အခု လက် ရှိ သုံးနေ တာတော့ limited တွေ ရှိနေ ပါသေး တယ် ။Layers တွေ ကို limited နဲ့လုပ် ရ ပါ တယ် ။ Dashed borders လဲ မပါ ပါဘူး ။ Text Layers တွေ ကို shadows နဲ့ blurs တို့ လုပ် လို့ မရပါ ဘူး ။ Text Layer တွေ ကို လဲ Heightပေးလို့ မရ ပါ ဘူး ။ Vertical Text alignment လဲ လုပ် လို့ မရပါ ဘူး ။ Components တွေကိုမြင် သာအောင် မထား ထား ပါဘူး ။ အဲ့ဒါ က Alphabetical list ထား ချင် ရင် မ တွေ့ တာဖြစ် တက် ပါ တယ်။ Objects တွေကို Groups နဲ့ထား ချင် ရင် position ချပေးလို့ မရ ပါ ဘူး
Zooming and panningလုပ် ရင် Performance ကလေး သွား ပါ တယ်။
InVision Studio မှာကောင်း ကွက်လေး တော့ ပါ ပါ တယ်။ Layers တွေ ရဲ့ Size ကို ပြောင်း နိုင်ပြီး position တွေကို စိတ်ကြိုက် ထား နိုင် ပါ တယ်။Design တွေကို Time Dimension နဲ့ control လုပ် နိုင် ပါ တယ်။ အဲ့ ဒါ က တ ခြား tools တွေ ထ က် ပိုကောင်း ပါ တယ်။
UXPin
UXPin ကDesign process တခု လုံး ရဲ့ project management features တွေပါ ဝင် ပါ တယ် ။ Screen prototypes ပါ ထုတ် လို့ ရ ပါ တယ်။ အခြား tool များ ထက် သာ လွန်ပါ တယ် ။ UXPin နဲ့ project တခု ဆ မယ် ဆို ရင် သူ့ မှာ Libraries တွေ က အဆင် သင့် ပါ ပဲ။ Web Desing , IOS and Material Design တွေ အရန် သင့် ပါ ပဲ ။ UXPin မှာ ပါ ဝင် တဲ့ Toolsတွေ မှာ Zooming ကို Mouse cursor နဲ့ လို တဲ့ position သုံး လို့ မရ ပါ ဘူး ။ ဖိ ပြီး အကြိမ် ကြိမ် zooming နဲ့ scroolling ကို လုပ်လို့ ရ ပါ တယ်။ အသုံး ပြု သူ ကို ရှုပ်ထွေးစေ တာ က တော့ Components ရဲ့ Linked တွေ ပါ ။ Component တွေကို ကို ယ်တိုင် ထက် ထည့် နိုင် ပါ တယ် ။ ရှိပြီး သား တွေကို လဲ ဖျက် နိုင် ပါ တယ်။ UI screen နဲ့ page များ ကို တနေ ရာ တည်း မှာ စုပြီး မမြင် နိုင် ပါ ဘူး ။
Custom Css element တွေ ကို ထည့် နိုင် ပါ တယ် ။ properties တွေတော့ limit ရှိ ပါ တယ် ။ Animation ထည့်လို့ မရပါ ဘူး ။ Components တွေ တော့ နေရာ ချ နိုင် ပါ တယ် ။Html prototypes တွေ ကို real text fields လုပ် လို့ ရပါ တယ်။
Keyframe animation ထည့် နိုင် ပါ တယ်။ Trail သုံး တာ က တော့ 7 ရက် သုံးကြည့် လို့ ရ ပါ တယ် ။ ကျန် တော် က တော့ မ ကြိုက် ပါ ဘူး ။ စာ ဖတ်သူ က ရော ?
Adobe XD
ထူးခြား တာ က Adobe က CS5 versionနောက် ပိုင်း ကို developing fireworks တွေ ထက် မထွက် လာ တော့ ပါ ဘူး ။သေ ချာ တာ က တော့ UI designers တွေ ကို ပဲ Adobe XDကို ထုတ်ပေးလိုက် ပါ တယ် ။ Creative Cloud tools နဲ့ ပို သုံး ရ တာ အဆင်ပြေ လာ ပါ တယ် ။ scrolling နဲ့ zooming ကတော့ မြန် ပါ တယ် ။ ထစ် မသွား ပါဘူး Smooth တော် တော်လေးဖြစ် ပါ တယ် ။ Bunchတွေ ကို copy ကူး ရာ မှာ Unmaintainable ရှုပ်ထွေးစေ ပါ တယ်။
ထပ်ခါထပ်ခါအစိတ်အပိုင်းတစ်ခုကော်ပီကူး ရာ မှာ အချိန်ကြာမြင့် နည်း နည်းကြာ ပါ တယ် ။ Adobe XD မှာ “repeat grid ” လုပ် ရာ မှာ မြန် ပါ တယ် ။ Layout တွေ ကို Copy ကူး ပြီး အား လုံး ကို instances လုပ် ချိန် မြန် ဆန် ပါ တယ် ။
Adobe XD က
MAC နဲ့ windows တွေ မှာ အသုံး ပြု နိုင် ပါ တယ် ။
Prototyping တွေ ကို transition နဲ့ overlays တွေ ထားလို့ ရ ပါ တယ် ။
Design changes ချင် ပါ က realtime မြင် နိုင် ပါ တယ် ။
Prototypeတွေ ကို Video recording လုပ် နိုင် ပါ တယ် ။
Link အဖြစ် ထား နှိင် ပါ တယ် Photoshop files နဲ့ Texts file တွေ ကို ။
Serious ဖြစ် တဲ့ Limitations တွေ ရှိ ပါ တယ်။
Components တွေ ကို resized မလုပ် နိုင် ပါ ဘူး ။
Sketch
Sketch မှာ အကြီး မှား ဆုံးသော user တွေ အတွက်ဖြစ် ပါ တယ် နောက် ဆုံး API တွေသုံး တဲ့ Third party applicationတွေ ကို တောင် Sketch file ထဲ မှာ create လုပ် နှိင် ပါ တယ် ။ Sketch နဲ့ တွဲ သုံးလို့ ကောင်း တဲ့ Framer နဲ့ principleတို့ဖြစ် ပါတယ် ။ Plugins , extensions နဲ့ libraries တွေ အများ အပြား ရ နိုင် ပါ တယ်။ အား နည်း ချက် က တော့ version update လုပ် လိုက် ရင် stack တွေ မမြင် နိုင် တော့ ပါ ဘူး ။ Sketch ကို အကောင်း ဆုံးလို့ မြင် မိ တာ က တော့
Ecosystem: Plugin တွေ များ ပါ တယ် ။
Templates, symbols နဲ့ Realtimeboard တို့ ပါ ဝင် ပါ တယ်။
Version control လဲလုပ်လို့ ရပါ တယ်။
Performance ပိုင်း မှာ လဲ responsiveဖြစ် ပါ တယ် ။
Sketch ရဲ့ အဓိ ကစိတ် ပျက် စရာ က တော့ third party tools တွေ Limitedဖြစ် ပါ တယ် ။ Mac အတွက် ပဲ သုံး နှိင် ပါ တယ်။
Screen Design Tools တွေ အများ အပြား ရှိ ပါ တယ်။ မိ မိ တို့ ကိုယ် ပိုင် အား သာသော Tools သာ အ ကောင်း ဆုံး ပါ ပဲ။ Perfect ဖြစ် ဆုံး Tools တော့ မတွေ့သေး ပါ ဘူး ။
Thank you, everyone who pointed out mistakes and omissions.

 

 

 

 

(zawgyi)

အ ရင္ တုံး က Design Software ဆို ရင္ Adobe Software ကို သတိရၾက မွာ ပါ .Standard အသစ္ တခုျဖစ္ တဲ့ Sketch ဟာ လဲ နာမည္ ႀကီး တဲ့ UI Design Tools တခု ပါ ပဲ။ UI Designers ေတြ Design ဖန္ တီး ရာ မွာ ေတာ့ လို အပ္ ခ်က္ အရ Design Tools အမ်ိဳး မ်ိဳး သုံးၾက ပါ တယ္။ ဒါေပ မဲ့ Design Tool ေတြ မွာ ကြဲ ျပား ခ်က္ အနည္း ငယ္ ရွိ ပါ တယ္။ Design Tools. ေတြ မွာ ဘယ္ Tools က အေကာင္း ဆုံး လဲ compare လုပ္ၾကည့္ ရ ေအာင္ Sketch , Figma, Adobe XD, UXPin နဲ႔ In Vision Studio. အခု Tools ေတြ က Free သုံး လို႔ အဆင္ေျပပါဘူး။ ဒါေပမဲ့ အကန႔္ သတ္ နဲ႔ ေပး ထား တာ ပါ။အလုပ္ ထဲ မွာ ဆို ရင္ ေတာ့ ဝယ္ သုံး တာ အ ေကာင္း ဆုံး ပါပဲ။ Tools ေတြ ကို compare လုပ္ လိုက္ ရင္ ဘယ္ Tools ေတြက အသုံး ဝင္ ဆုံး လဲ ။ Sketch, Sigma, Adobe XD, UXPin and InVision Studion ေတြ အဓိ က basically ပါ ဝင္ တာ က ေတာ့
Static user interface Screen Designs
Responsive Layouts ေတြ ပါဝင္ပါမယ္။
3. Page ေတြ Layer ေတြ ပါဝင္ပါမယ္။
4. Nested Components ေတြ ပါဝင္ပါမယ္။
5. Designer က Layer ေတြကို အဆင့္ ဆင့္ ထည့္ တာ ပါဝင္ပါမယ္။
InVision Studio
Studioကို ျမင္ တာ နဲ႔ စိတ္ လႈပ္ ရွား မႈ ကDesign ဆြဲ ခ်င္ မႈ ကို တြန္းအားျဖစ္ ေစ ပါတယ္ ။ ဒါေပ မဲ့ limited ေတာ့ ရွိ ပါ တယ္။
Collaboration
Commenting
Version Control
Design specifications for developers
Windows version
Marketplace for extensions (‘apps’)
အခု လက္ ရွိ သုံးေန တာေတာ့ limited ေတြ ရွိေန ပါေသး တယ္ ။Layers ေတြ ကို limited နဲ႔လုပ္ ရ ပါ တယ္ ။ Dashed borders လဲ မပါ ပါဘူး ။ Text Layers ေတြ ကို shadows နဲ႔ blurs တို႔ လုပ္ လို႔ မရပါ ဘူး ။ Text Layer ေတြ ကို လဲ Heightေပးလို႔ မရ ပါ ဘူး ။ Vertical Text alignment လဲ လုပ္ လို႔ မရပါ ဘူး ။ Components ေတြကိုျမင္ သာေအာင္ မထား ထား ပါဘူး ။ အဲ့ဒါ က Alphabetical list ထား ခ်င္ ရင္ မ ေတြ႕ တာျဖစ္ တက္ ပါ တယ္။ Objects ေတြကို Groups နဲ႔ထား ခ်င္ ရင္ position ခ်ေပးလို႔ မရ ပါ ဘူး
Zooming and panningလုပ္ ရင္ Performance ကေလး သြား ပါ တယ္။
InVision Studio မွာေကာင္း ကြက္ေလး ေတာ့ ပါ ပါ တယ္။ Layers ေတြ ရဲ႕ Size ကို ေျပာင္း ႏိုင္ၿပီး position ေတြကို စိတ္ႀကိဳက္ ထား ႏိုင္ ပါ တယ္။Design ေတြကို Time Dimension နဲ႔ control လုပ္ ႏိုင္ ပါ တယ္။ အဲ့ ဒါ က တ ျခား tools ေတြ ထ က္ ပိုေကာင္း ပါ တယ္။
UXPin
UXPin ကDesign process တခု လုံး ရဲ႕ project management features ေတြပါ ဝင္ ပါ တယ္ ။ Screen prototypes ပါ ထုတ္ လို႔ ရ ပါ တယ္။ အျခား tool မ်ား ထက္ သာ လြန္ပါ တယ္ ။ UXPin နဲ႔ project တခု ဆ မယ္ ဆို ရင္ သူ႔ မွာ Libraries ေတြ က အဆင္ သင့္ ပါ ပဲ။ Web Desing , IOS and Material Design ေတြ အရန္ သင့္ ပါ ပဲ ။ UXPin မွာ ပါ ဝင္ တဲ့ Toolsေတြ မွာ Zooming ကို Mouse cursor နဲ႔ လို တဲ့ position သုံး လို႔ မရ ပါ ဘူး ။ ဖိ ၿပီး အႀကိမ္ ႀကိမ္ zooming နဲ႔ scroolling ကို လုပ္လို႔ ရ ပါ တယ္။ အသုံး ျပဳ သူ ကို ရႈပ္ေထြးေစ တာ က ေတာ့ Components ရဲ႕ Linked ေတြ ပါ ။ Component ေတြကို ကို ယ္တိုင္ ထက္ ထည့္ ႏိုင္ ပါ တယ္ ။ ရွိၿပီး သား ေတြကို လဲ ဖ်က္ ႏိုင္ ပါ တယ္။ UI screen နဲ႔ page မ်ား ကို တေန ရာ တည္း မွာ စုၿပီး မျမင္ ႏိုင္ ပါ ဘူး ။
Custom Css element ေတြ ကို ထည့္ ႏိုင္ ပါ တယ္ ။ properties ေတြေတာ့ limit ရွိ ပါ တယ္ ။ Animation ထည့္လို႔ မရပါ ဘူး ။ Components ေတြ ေတာ့ ေနရာ ခ် ႏိုင္ ပါ တယ္ ။Html prototypes ေတြ ကို real text fields လုပ္ လို႔ ရပါ တယ္။
Keyframe animation ထည့္ ႏိုင္ ပါ တယ္။ Trail သုံး တာ က ေတာ့ 7 ရက္ သုံးၾကည့္ လို႔ ရ ပါ တယ္ ။ က်န္ ေတာ္ က ေတာ့ မ ႀကိဳက္ ပါ ဘူး ။ စာ ဖတ္သူ က ေရာ ?
Adobe XD
ထူးျခား တာ က Adobe က CS5 versionေနာက္ ပိုင္း ကို developing fireworks ေတြ ထက္ မထြက္ လာ ေတာ့ ပါ ဘူး ။ေသ ခ်ာ တာ က ေတာ့ UI designers ေတြ ကို ပဲ Adobe XDကို ထုတ္ေပးလိုက္ ပါ တယ္ ။ Creative Cloud tools နဲ႔ ပို သုံး ရ တာ အဆင္ေျပ လာ ပါ တယ္ ။ scrolling နဲ႔ zooming ကေတာ့ ျမန္ ပါ တယ္ ။ ထစ္ မသြား ပါဘူး Smooth ေတာ္ ေတာ္ေလးျဖစ္ ပါ တယ္ ။ Bunchေတြ ကို copy ကူး ရာ မွာ Unmaintainable ရႈပ္ေထြးေစ ပါ တယ္။
ထပ္ခါထပ္ခါအစိတ္အပိုင္းတစ္ခုေကာ္ပီကူး ရာ မွာ အခ်ိန္ၾကာျမင့္ နည္း နည္းၾကာ ပါ တယ္ ။ Adobe XD မွာ “repeat grid “ လုပ္ ရာ မွာ ျမန္ ပါ တယ္ ။ Layout ေတြ ကို Copy ကူး ၿပီး အား လုံး ကို instances လုပ္ ခ်ိန္ ျမန္ ဆန္ ပါ တယ္ ။
Adobe XD က
MAC နဲ႔ windows ေတြ မွာ အသုံး ျပဳ ႏိုင္ ပါ တယ္ ။
Prototyping ေတြ ကို transition နဲ႔ overlays ေတြ ထားလို႔ ရ ပါ တယ္ ။
Design changes ခ်င္ ပါ က realtime ျမင္ ႏိုင္ ပါ တယ္ ။
Prototypeေတြ ကို Video recording လုပ္ ႏိုင္ ပါ တယ္ ။
Link အျဖစ္ ထား ႏွိင္ ပါ တယ္ Photoshop files နဲ႔ Texts file ေတြ ကို ။
Serious ျဖစ္ တဲ့ Limitations ေတြ ရွိ ပါ တယ္။
Components ေတြ ကို resized မလုပ္ ႏိုင္ ပါ ဘူး ။
Sketch
Sketch မွာ အႀကီး မွား ဆုံးေသာ user ေတြ အတြက္ျဖစ္ ပါ တယ္ ေနာက္ ဆုံး API ေတြသုံး တဲ့ Third party applicationေတြ ကို ေတာင္ Sketch file ထဲ မွာ create လုပ္ ႏွိင္ ပါ တယ္ ။ Sketch နဲ႔ တြဲ သုံးလို႔ ေကာင္း တဲ့ Framer နဲ႔ principleတို႔ျဖစ္ ပါတယ္ ။ Plugins , extensions နဲ႔ libraries ေတြ အမ်ား အျပား ရ ႏိုင္ ပါ တယ္။ အား နည္း ခ်က္ က ေတာ့ version update လုပ္ လိုက္ ရင္ stack ေတြ မျမင္ ႏိုင္ ေတာ့ ပါ ဘူး ။ Sketch ကို အေကာင္း ဆုံးလို႔ ျမင္ မိ တာ က ေတာ့
Ecosystem: Plugin ေတြ မ်ား ပါ တယ္ ။
Templates, symbols နဲ႔ Realtimeboard တို႔ ပါ ဝင္ ပါ တယ္။
Version control လဲလုပ္လို႔ ရပါ တယ္။
Performance ပိုင္း မွာ လဲ responsiveျဖစ္ ပါ တယ္ ။
Sketch ရဲ႕ အဓိ ကစိတ္ ပ်က္ စရာ က ေတာ့ third party tools ေတြ Limitedျဖစ္ ပါ တယ္ ။ Mac အတြက္ ပဲ သုံး ႏွိင္ ပါ တယ္။
Screen Design Tools ေတြ အမ်ား အျပား ရွိ ပါ တယ္။ မိ မိ တို႔ ကိုယ္ ပိုင္ အား သာေသာ Tools သာ အ ေကာင္း ဆုံး ပါ ပဲ။ Perfect ျဖစ္ ဆုံး Tools ေတာ့ မေတြ႕ေသး ပါ ဘူး ။
Thank you, everyone who pointed out mistakes and omissions.

Leave a Reply