Очень короткий список, но очень полезный:

1. Axure - основной инструмент для разработки прототипов, иногда заменяет драгоценный блокнот.
2. Figma - для полноценной реализации того, что сделал в Axure, грубо говоря делать дизайны - там.
3. Adobe Photoshop - каждый раз когда нужно поработать с растровой графикой - иду туда, и импортирую позже в Фигму.
4. Adobe Illustrator - когда не хватает стандартных инструментов Figma для векторной графикой (а такое бывает не часто), открываю Иллюстратора.
5. Ну и конечно же, для вдохновения Behance, Дрибл и Themeforest.

Есть аналоги Figma, это Adobe XD и Скетч, но тут на вкус и цвет.

Давайте разберемся коротко, но подробно:

1. Сетка может настраиваться так, как удобно вам и верстальщику. Смотрите на свои задумки, если вы хотите чтобы на FullHD мониторах (1080р) сайт отображался одним образом, а на ноутбуках другим - учитывайте сетку так, чтобы при адаптиве можно было сократить количество колонок и при этом элементы имели адаптивную логику.

2. Параметр Stretch в сетке говорит о том, что все элементы всегда будут адаптивные в ширину, и каким бы не был размер макета, элементы будут подстраиваться под размер, а параметр margin отвечает за отступ по бокам, который также оперяется по усмотрению дизайнера. Пример:

Такой подход используют всегда в мобильных приложениях, потому что стандарта по размеру экрана телефона - нет, каждая модель отличается масштабом, и зачастую из-за этого, приложения выглядят красиво только на одном экране, под который делался макет. Параметр Stretch исключает эту ошибку.

3. Если вы используете параметр Center, вам легче опередить контентную область, которая всегда будет фиксирована. Так пример, для сетки бустрап используется размер контентной области 1170px, и на ноутбуках, и на компьютерах сайт выглядит одинаково, единственное что меняется - это отступ по бокам.

Нашел для вас хорошую статью по сеткам: https://medium.com/@FigmaTips/%D1%81%D0%B5%D1%82%D...

У Figma есть очень хороший и простой инструмент для разработчиков, оттуда они могут экспортировать картинки, работать с вектором, смотреть стили CSS и вполне комфортно делать верстку. Изучать ему ничего не надо, нужно просто скинуть ему ссылку на макет.

Также объясните ему, что специальный инструмент для создание стилей (Шрифтов, цветов), избавит его от бессмысленной рутины, где в каждом блоке разные размеры шрифтов (эту ошибку часто допускают пользователи фотошопа.)

UPD:
Ответ для тех, кто не понимает, почему Фигма лучше фотошопа:

1. Командная работа
2. Работа со стилями, можно сразу разработать стили заголовков и цветов.
3. Удобная работа с компонентами (в фотошопе ее вовсе нет).
4. Позиционирование объектов, за счет этого, удобная адаптация под разные экраны (не путать с адаптацией под мобильники).
5. Облачное хранилище, удобная библиотека файлов.
6. Возможно продемонстрировать макет заказчику без сохранения PNG, JPG файлов (кидаешь просто ссылку на прототип)
7. Интерактивные прототипы, с базовой анимацией, с возможностью привязать ссылки к кнопкам.
8. История действий, которая сохраняется на 30 дней.
9. Удобнейшая работа с вектором, в отличие от фотошопа.
10. Возможность импорта и экспорта SVG вектора, с возможностью его редактировать.
11. Система Фреймов, позволяющая на одном листе создать несколько рабочих областей, что позволяет выводить всякие UI элементы в отдельный Frame, точно также с адаптацией.
12. Система страниц, позволяющая не разделять каждую отдельную страницу, в отдельный файл. Разработка нормального портала на фотошоп, занимает порядка 40 - 50 PSD файлов.
13. Общая система компонентов для всего проекта, возможность превратить дизай-систему в конструктор.
14. Возможность зайти в библиотеку с любого компьютера, и продолжить работу.
15. Отзывчивость разработчиков, баг-репорт каждую среду.