We use two tools which are Sketch and Invision.

This site died as soon as it moved to open registration. That combined with poor moderation and spam control make this place uninteresting to visit. The only thing that keeps me looking at articles here is the Panda browser dashboard.

You're current approach may be too verbose. Try thinking of modals as having three parts; header, body, footer. In the body section of the modal you can have any combination of form or other page elements. While in the header you have the main title, and in the footer you have your CTA buttons. Don't account for every use case, just build a flexible template that allows you to dump any kind of information into the modal.

Jira, Confluence, Google Apps (prefer Office 365), Slack, InVision, Sketch and Balsamiq Mockups.

I've been almost exclusively working with lo-fi wireframes for the past two years. Lo-fidelity wireframes, in a program such as Balsamiq, are ideal for, say, legacy applications. It allows you to get started quickly and create layouts/flows in an abstract manner that developers understand. I only do hi-fidelity designs for new products without a lot of baggage and for marketing.

I don't think this is much of an issue, debut shots always have high engagement.

Great vid, is it considered a best practice to use classes for the L and XL as opposed to the nth-child selector?

I would add that it might be a good idea to make them 'hollow' tags so it is an outline with the text inside.

https://www.uplabs.com/

IIRC The art board names need to be the same in both InVision and Sketch for the automatic name change to work.