Какие размеры фреймов лучше использовать под разработку дизайна под верстку?

ПК – 1920 px, контент под 1140 px
Планшет (горизонтально) 960 px
Планшет (вертикально) 720 px
Смартфоны (горизонтально) 540 px
Смартфоны (вертикально) 320 px

Отступы
Мобильные – 10-15 px
Планшет – 15-20 px
ПК – отступы зависят от сетки. ~20 px

Есть ли какие-то ограничения в размерах шрифтов?

На заре развития веб-дизайна, общепринятый минимальный размер шрифта (кегль) был 12px [этакий стандарт]. Многие и сейчас допускают эту ошибку. Со временем стало понятно, что читать такой текст просто не удобно. К тому же заинтересовать пользователя нужно практически сразу

Минимальный удобночитаемый, приятный для глаз пользователя размер шрифта в современном веб-дизайне сейчас – 14px. Для больших объемов текста даже – 18px.

PS. Распространяется только на ключевые текстовые блоки

Нужно ли соблюдать какие-то конкретные отступы по краям/между элементами?

Да, отступы между элементами это очень важная штука. На картинке ниже приведу пример хороших отступов и отвратительных. Если разница в отступах чем-то обоснована — то ок. Но как правило разнятся значения на пиксель-два. Что создает беспорядок в дизайне.

Про отступы от контейнера – ответил в первом вопросе

Какие ошибки чаще всего совершают дизайнеры при подготовке дизайн-макета под верстку?

– Использование режимов наложения
В фигме легко можно наложить красный круг на синий фон, применить подходящий режим наложения, и круг станет светло-синим. Но перенести такой элемент возможно только в png или jpg. Переносить такой элемент картинкой — плохое решение, так как придает лишний вес странице и увеличит время загрузки. Используйте только Pass Through или Normal.

– Скрытые слои
Очень частая ошибка — скрытые ненужные слои. Это наводит беспорядок и путает верстальщика

– Lorem ipsum

Конечный файл на верстку должен содержать реальные итоговые текста и изображения. Использование рыба-текста усложняет задачу и верстка превращается в мартышкин труд.

– Отсутсвие адаптива

– Мусорка из размеров кеглей и шрифтов
Выделите для себя основные размеры кеглей шрифта и используйте его на всем сайте. Если заголовок у вас Bebas, а наборный Montserrat. Не стоит использовать Roboto в следующем блоке.
А лучше задайте стили, так вы точно не пропустите неточность в кегле или левый шрифт.

– Отсутсвие нестандартных шрифтов
Прикрепляйте уникальные шрифты для верстальщика. Некоторые шрифты очень сложно найти в открытом доступе, особенно если этот шрифт платный.

– Отсутсвие лицензий на шрифт
Мы за соблюдение авторского и интеллектуального права. Если нет лицензии — платный шрифт использовать нельзя. Эта оплошность может привести к серьезным санкциям со стороны правообладателя по отношению к владельцу сайта, на котором используется данный шрифт.
Но есть также и ограничения на использование даже бесплатных шрифтов. Всегда проверяйте лицензию во избежание неприятностей.

– Не отрисованы активные состояния элементов
Такие эффекты как «on hover» или «on click» и другие

– Не отрисованы попапы

– Отсутствие стилей и как следствие — появляются 50 оттенков серого

– Чисто черный и чисто белый
#000000 и #ffffff — запретные цвета с точки зрения пользовательского опыта. Сочетание этих двух цветов дает очень сильный контраст и рябь. Глаза устают, сложно сосредоточиться на тексте — пользователь уходит с такого сайта.
Используйте вместо черного #333333 — он воспринимается намного лучше А вместо белого — #fafafa

– Использование текстовых блоков с разными настройками
Ну во-первых. Используйте равные отступы от краев экрана и между идентичными элементами
Во-вторых. Используйте только Grow Vertically для текстовых блоков

– Целочисленные значения пикселей
Никакого размера кегля — 16.34 Никакой межстрочки — 32.12

– Называйте группы и фреймы осмысленно

Какие материалы необходимо скидывать верстальщику вместе с дизайн-макетом?

– Сама ссылка на проект в Фигме + готовый прототип взаимодействия кнопок и страниц + анимация (можно прописать через комментарии прямо в Фигме)

– Если в макете используются нестандартные шрифты, то отправьте или zip или ссылку на диск для скачивания. Все шрифты должны быть в формате woff

– Вообще лучше созвониться дизайнеру и верстальщику, пройтись по макету. Обсудить анимацию и особенности проекта. (я всегда топлю за это)