С чего начать создавать ui-kit ?

Ui kit это система. В первую очередь надо собрать все что в проде. Если возникает такой вопрос значит скорее всего дизайнер просто делает макеты , допустим в фигме, без какой либо системности. Цель кита - собрать элементы дизайна для последующего переиспользования. Так при создании новых макетов не придется городить огород, а можно просто брать готовые элементы и вставлять в макеты. Например, кнопки. Так они будут в едином стиле во всем продукте.

И это кстати ускорит дальнейшую разработку дизайна, уберкт все вопросы типа “почему так а не вот так”.

В ТЗ не прописывается что работник должен знать как что делается )))

Если Вы не указали чёткие требования к конкретному продукту, то какие претензии могут быть к исполнителю. Требовать угадать что Вам нужно, это зашквар.

это не про требования, это про лучшие практики дизайна

Пять дизайнеров будут давать пять разных иконок с разными размерами

Решений на самом деле множество, от точного указания размеров в ТЗ и не принимать работу, до лечения кривых svg с помощью маленького скриптика, который будет делать svg ровненькими, даже если иконку будет рисовать не дизайнер, а загружать пользователь (вьюбокс и размеры внутри самого тега svg)

Если речь об одной компании/проекте, над которым работает несколько дизайнеров, то почему бы не сделать в той же Фигме компонент, который будет отвечать за Icon kit? Запихать в него все используемые иконки – и станет во первых проще их спользовать в макете (можно просто выбирать нужную иконку в пропсах). А во-вторых сразу станут видны нюансы, вроде толщины линий иконок, размеров и визуального веса

Звучик как мое спасение, есть ссылка чтобы поделиться с дизайнером? 😅

Ссылку кинуть не могу, но принцип работы объясню:

1. Создаёте компонент для иконок и создаёте properties с типом variant. Один – с именем иконки, он будет выступать как идентификатор, и несколько по желанию – для разделения на категории, вариативности и удобного поиска

Прикрепил скрин, как это будет выглядеть

2. Ну а после можете вставлять компонент иконки в другие компоненты – и просто переключая properties выбирать нужную

3. Если вы работаете с исходинками outlined иконок, в них можно ещё настроить толщину для визуального баланса с текстом. Это можно сделать как через properties, так и переопределяя свойства иконок в родительских компонентах

А вообще, вот непрошенный совет: отправьте ваших дизайнеров учиться или наймите нормальных. Они сэкономят много времени и нервов верстальщикам и фронтендерам))

На разных языках для ясности, но он «крепкий орешек»

А пробовали наилучшие пожелания стать лучшим дворником на своем районе если он не установит единую сетку размеров?

Не вариант)