Which prototyping tool you are using for your UI/UX project?

[shabbir]

UXPIN i know but 1st version.. now totally changes.. but i like to know about ProtoPie. now adobexd and principle also good for micro interaction.

UXPIN changed a lot in terms of features and interface.
I used Principlae too. Its good for micro interaction but they still have some "Layer" issues. Most of the time you need to modify your layer names after importing design files from Sketch or Figma. So that is very annoying to be honest but other than that Principal is awesome!

[pagol]

But it there has any tools which can output as svg animation? Because implanting a micro interaction specially on the icon take much time and sometimes even not possible via css/js

[shabbir]

But it there has any tools which can output as svg animation? Because implanting a micro interaction specially on the icon take much time and sometimes even not possible via css/js

Haven't found any yet. Maybe we can build a tool for that

[asifshahid]

Thank you all for your valuable feedback and thanks for sharing your experience. Really, appreciate your time.
Have you tried UXPin or ProtoPie yet? Seems like these two tools are the best for micro interaction. Though both are pretty complex but still super useful.

I used UXPin long ago when UXpin, Figma, Framer and Just In Mind were baby in the market and competing each other. Over time, it seems UXPin has lost the game. I used to read their free ebooks.

For microanimation I used Principle. It was quite popular among UX professionals back then. Later I used Tumult Hype . It's cheaper and one off payment. Hype is a powerful program, alternative of Flash, as it supports responsiveness and can export html5, unlike Flash. Hype is also capable of doing more complex animation than just microanimation. Again Adobe After Effects is always boss and has became very popular for microanimation these days.

I just checked ProtoPie now. Seems very promising. I want to try this

Thanks Shabbir bhai

[farukbd]

I mostly used Adobe XD and was super fan of it because of it's necessary features with pretty easy and simple steps that save a lot of time (such as - Repeat grid system is a killer). In fact we did rapid prototyping in XD.

Later trying to shift to Figma because of some amazing and essential micro interactions that no other Apps can provide. Especially I like the Responsive tool here that can be used to make both desktop and mobile screen prototypes at a single work!

Faruk
Head of Design
Social Innovation Lab
BRAC, Bangladesh

[shabbir]

Later trying to shift to Figma because of some amazing and essential micro interactions that no other Apps can provide.

Hi Faruk, Thanks for your reply. Could you please elaborate a bit about the Figma prototype feature that you mentioned. I am not a Figma user. So curious to know about that feature.

[pagol]

micro interaction নিয়া আমার কিছু কথা আছে । রেয়াল লাইফ প্রোজেক্ট আসলে micro interaction কতো টুকু অ্যাপ্লাই করা হয় । micro interaction করতে অনেক টাইম লাগে এবং ওই গুলা অ্যাপ্লাই করতে খবর হইয়া যাই। বেশি ভাগ টাইম অ্যাপ্লাই করা হয় নাহ । আমরা যদি কিছু pro ওয়েব অ্যাপ / মোবাইল অ্যাপ দেকি তাহলে দেকব আসলে কতো টুক micro interaction আছে । dribbble কোটি কোটি micro interaction concept দেখা যাই যার ৯৯% কোন রেয়াল লাইফ প্রোডাক্ট নাই ...

এই micro interaction নিয়া online অনেক কথা হই কিন্তু result কই ?

যে পরিমাণ টাইম দিতে হই তা কি আসলে value able ।। নাকি অনেক টা শো উপ । ... এভেন একটু বায়সী micro interaction dile উলটা effect হই

[shabbir]

micro interaction নিয়া আমার কিছু কথা আছে । রেয়াল লাইফ প্রোজেক্ট আসলে micro interaction কতো টুকু অ্যাপ্লাই করা হয় । micro interaction করতে অনেক টাইম লাগে এবং ওই গুলা অ্যাপ্লাই করতে খবর হইয়া যাই। বেশি ভাগ টাইম অ্যাপ্লাই করা হয় নাহ । আমরা যদি কিছু pro ওয়েব অ্যাপ / মোবাইল অ্যাপ দেকি তাহলে দেকব আসলে কতো টুক micro interaction আছে । dribbble কোটি কোটি micro interaction concept দেখা যাই যার ৯৯% কোন রেয়াল লাইফ প্রোডাক্ট নাই ...

এই micro interaction নিয়া online অনেক কথা হই কিন্তু result কই ?

যে পরিমাণ টাইম দিতে হই তা কি আসলে value able ।। নাকি অনেক টা শো উপ । ... এভেন একটু বায়সী micro interaction dile উলটা effect হই

রিয়েল প্রজেক্টে কতটুকু মাইক্রো ইন্টারঅ্যাকশন ইউস করবেন এটা আমার মতে পুরোটাই নির্ভর করে কি ধরণের প্রজেক্ট নিয়ে আপনি কাজ করছেন। আমি আগে কখনো এতো মাইক্রো ইন্টারঅ্যাকশন নিয়ে এতো পরীক্ষা করি নাই । কিন্তু রিসেন্টলি আমি একটা ফীচার এ কাজ করতেসি যেখানে ৬০ জন ডেভেলপার কাজ করছে আমার সাথে এবং বেটার আন্ডারস্ট্যান্ডিং এর জন্য মাইক্রো ইন্টারঅ্যাকশন প্রোটোটাইপের কোনো বিকল্প আমরা পাই নাই।
আমার মোতে মাইক্রো ইন্টারঅ্যাকশন করবেন কি করবেন না এটা পুরোটাই আপনার উপর । আমি এটাকে শোঅফ কোনো ভাবেই বলবো না। নতুন কিছু শিখতে পারাটাও একটা ভালো দিক আমি মনে করি।

[asifshahid]

Microinetaction is important in product/digital design. It's not fancy anymore (unless you overdo it). It is a "science" now.

It not only delights the user while interacting with the product/system, but also helps establish a better understanding with the developer.

As Shabbir bhai mentioned, he is dealing with 60 developers now. He just can't explain the interaction by his gesture to them. It needs to be well presented and documented. That is important.

In Biju bhai's case, you probably don't need those as you guys deploy products in short time and more often.

Here is a guideline -



Helpful article - https://www.nngroup.com/articles/microinteractions/

[zahidur59]

For prototyping? Proto.io
For wireframing - Balsamiq and PowerPoint ( I am a dinosaur but I have my reasons to prefer them over news tools.)