How do you guy (think of) prototype UI?

I have used the pen and paper approach but when you add the interactions such as clicks and animation on the paper,it become messy.

I feel that coding up a full blown front end for prototyping is overkill. Because when you want to prototype the list , you also need to insert the dummy data in order for you see probably clicks and drag animation.

what's wrong with using prototyping tools like figma, Adobe XD,
https://www.framer.com/
Framer ?

@heyheni

It haven't found easy to use tool. I find most of the tool fighting the tool instead of prototyping it.

@mr-user

that's interesting, I found figma very intuitive to use myself even from the start.

Are there some specific cases that it doesn't do well that you can recall, or does it just not click with you in general?

I’ve found that whiteboards work best. As for event handlers, I usually throw together a basic ui with code before worrying about those

Example of UI prototype

@Hazarth

I have attach an example of my UI prototype.

For the tool case , I found most of them don't have the "hand icon" to scroll from left to right when prototyping it.

It doesn't feel "smooth" so you can just say it doesn't click with me in general. I cannot seem to reproduce the same experience I have with pen and paper.

@10Dev

Don't you want to include the event handler in the UI? For example if you type something in the search box , it will show you list. Or if you click those two checkbox together , the search box will disappear and so on.

I can work well with basic design on paper but if I include those subtle interaction and hover effect in paper , it become messy. Look at my attached image above for example.

Try HTML and position:absolute.

I draw a picture and start coding at most

I am a fan of visual editors as well

@YouAllSuck

what kind of visual editor do you used?

@mr-user amusingly visual studio for winforms development lol since wpf sucks ass

HTML and css nowadays you can mess around with in the browser console to test things like styling