Как правильно выполнить и экспортировать SVG sprite из UI kit в Figma?
Интересуют правила проектирования спрайта для элементов интерфейса дашборда аналитики на основе дизайна и UI kit, подготовленных в Figma.
Насколько я понимаю, если выгружать по единичному изображению - это дает 3 серии SVG-элементов: по состояниям до события (наведения/клика) - default, при наведении на элемент (hover), при клике (target). Но по сумме они будут весить больше, чем один совокупный спрайт.
Цель задачи: сделать правильный оптимизированный спрайт с SVG-графикой для интерфейса дашборда.
Ответы (1 шт):
Это достаточно просто. Условное деление на 3 строки:
- default элемент№1 элемент№2 ... элемент№N
- hover элемент№1 элемент№2 ... элемент№N
- target элемент№1 элемент№2 ... элемент№N
Каждый элемент представляет собой box (квадрат по форме), куда вписано векторное изображение (надеюсь ясно что SVG лучше PNG для масштабирования).
Отступы между квадратами элементов в размер квадрата или в половину его стороны. Там даже где-то формула есть, читал в самоучителе - про SVG спрайты (посмотрите в книге поиском найдете).