Needless to say that there is a wide range of prototyping tools out there and I won't say which one are the best ones because there isn't one. I liked to say it all depends on your workflow and what's your purpose of this tool. That being said, I've been using this prototyping tool called Atomic and what I enjoyed the most about this tool is how fast it is and the fact you can customize with CSS is a must (for me). Here's a few tips that will make your experience with Atomic more accurate and fluid.
In Atomic's Words
Type
To quickly and conveniently select a color within the color picker, just type the name of the color or paste the HEX code into the color selector. You can even type different shades of popular colors. Just be sure to exclude the spaces between words when you type them. For example “darkgreen” or “lightblue”.
Gradients
• Open a Custom CSS Gradient Generator such as this. Choose your preferred colors, angle and opacity. In the CSSmatic example, there’s quite a few settings you can play around with. Just tweak it until it feels right.
• Once you’ve chosen your settings, select ‘Copy Text’ and navigate back to Atomic. With your element selected, paste the CSS into the Custom CSS field in the Atomic.
Convert
• Import your image into Atomic
• With the image selected, navigate to the Custom CSS window and paste in the following:
border-radius:50%;
Mask
• Import your image and full size
• Convert your image to a Container.
• Resize the boundary of the Container to mask the image
About Atomic
Atomic is a prototyping tool and collaboration web app for designers. Originally from New Zealand, this team has been making buzz on the Web with their fast and efficient tool with awesome weekly content.
For more information and get your hands on Atomic: https://atomic.io.
Originally from: http://blog.atomic.io.