My intention with this video was initially to talk about my first experience using invision. I logged onto Medium to do a bit of research on prototyping tools, and this was one of the first things that popped up.

IMAGE ALT TEXT

I was quickly sold on the usefulness of this tool and wanted to learn it, so I spent some time installing and playing around with these plugins. I found them to be far more useful than anything I had to say about invision, so hopefully you won’t mind that I decided to hijack my own editorial calendar and teach something, instead.

(It’s also probably worth mentioning that I’m recording all my GIFS with a super neat tool called recordit highly recommend for bloggers who do demos!)

Tip #1: Dynamic Pictures

here

If you’re just in a proof of concept phase of designing and don’t have content in mind, dynamically populating photos from Unsplash is a great option.

You can also pull in photos from a local folder, dropbox, or even a live website

Tip #2: Dynamic Text

here

We’ll continue to build upon the sample tile with some dynamic text. Similar to pictures, you can also pull this in from the web. I attempted to use my portfolio as dynamic text and it worked great - excited to start experimenting with my designs with my real content.

Tip #3: Duplicate

here

I added a 30% opacity grey overlay to make the white text stand out more, then created a grouped layer. Once you click on the duplicate panel, edit your gutters and hit ‘duplicate content’, it auto populates the rest of your screen.

Now you have a layer called ‘duplicate content’ selected. You can change the size of that based on the area you want to populate.

Tip #4: Save UI Components

here

I saved the base page template and the sample tile, and was able to scale my design to a desktop size in less than two minutes.

I was also able to save out colors and text styles to a shared library, so that if I’m working form another computer I can still access these presets.

Okay but what if I don’t care about saving time?

Then you’re doing it wrong! But nevertheless, one thing I like about this tool is that it lets you know how your design will with with varied content. How do my brand colors with with bright photos, dark photos, ugly photos. How do my text margin and padding defaults work with really long country names?

In whatever case, hope you took something away from this!

You can download the craft plugin here!