Блог

Как подготовить иконки для разработки: размеры, stroke, export, naming, sprite/SVG

Чистая подготовка иконок для фронтенда: единые размеры, корректный SVG-export, нейминг и правила для спрайтов.

UISVGHandoff
Как подготовить иконки для разработки: размеры, stroke, export, naming, sprite/SVG

Почему иконки часто ломаются в разработке

Основные причины: разнобой в размерах, необработанные stroke-иконки, лишние группы в SVG и несогласованный нейминг файлов.

  • Фиксируйте базовые размеры (например, 16/24/32).
  • Перед export переводите stroke в outline/path при необходимости.
  • Экспортируйте SVG без лишней вложенности слоев.
  • Синхронизируйте нейминг в Figma и кодовой базе.
  • Определите формат внедрения: inline SVG, sprite, img.

Практика

Чистые SVG-файлы и единая система имен резко снижают число ошибок при подключении и обновлении иконок.

Topic Cluster

Хаб по теме: UI

Главный материал кластера: Как провести UX-аудит сайта самому: чек-лист из 60 пунктов + примеры ошибок.

Как сделать “pixel perfect” без токсичности: допуски, критерии, что важно на самом деле

Как сделать “pixel perfect” без токсичности: допуски, критерии, что важно на самом деле

Баланс между точностью и скоростью: как согласовать допуски, не скатиться в перфекционизм и сохранить качество без конфликтов.

Как выбирать шрифты для интерфейса: читаемость, кириллица, лицензии, пары и размеры

Как выбирать шрифты для интерфейса: читаемость, кириллица, лицензии, пары и размеры

Выбор шрифтов для UI без ошибок: проверка читаемости и кириллицы, лицензии, сочетание гарнитур и типографическая шкала.

Как делать адаптивные макеты: брейкпоинты, сетки, контейнеры, правила для разработчика

Как делать адаптивные макеты: брейкпоинты, сетки, контейнеры, правила для разработчика

Практическая схема адаптива: ключевые брейкпоинты, сетки под разные экраны и правила передачи в разработку.

Как передавать макеты разработчику: спецификация, состояния, токены, redlines, checklist

Как передавать макеты разработчику: спецификация, состояния, токены, redlines, checklist

Практичный handoff без потерь: какие состояния и спецификацию передавать, как оформить redlines и финальный checklist перед разработкой.

Как сопоставить дизайн с CSS: spacing scale, rem/px, line-height, grid — практический перевод

Как сопоставить дизайн с CSS: spacing scale, rem/px, line-height, grid — практический перевод

Перевод макета в код без потерь: шкала отступов, rem и px, line-height и сетка CSS Grid/Flex в реальном handoff-процессе.

Related

Похожие статьи

Как сделать “pixel perfect” без токсичности: допуски, критерии, что важно на самом деле

Как сделать “pixel perfect” без токсичности: допуски, критерии, что важно на самом деле

Баланс между точностью и скоростью: как согласовать допуски, не скатиться в перфекционизм и сохранить качество без конфликтов.

Как передавать макеты разработчику: спецификация, состояния, токены, redlines, checklist

Как передавать макеты разработчику: спецификация, состояния, токены, redlines, checklist

Практичный handoff без потерь: какие состояния и спецификацию передавать, как оформить redlines и финальный checklist перед разработкой.

Как сопоставить дизайн с CSS: spacing scale, rem/px, line-height, grid — практический перевод

Как сопоставить дизайн с CSS: spacing scale, rem/px, line-height, grid — практический перевод

Перевод макета в код без потерь: шкала отступов, rem и px, line-height и сетка CSS Grid/Flex в реальном handoff-процессе.

Как выбирать шрифты для интерфейса: читаемость, кириллица, лицензии, пары и размеры

Как выбирать шрифты для интерфейса: читаемость, кириллица, лицензии, пары и размеры

Выбор шрифтов для UI без ошибок: проверка читаемости и кириллицы, лицензии, сочетание гарнитур и типографическая шкала.

Как делать адаптивные макеты: брейкпоинты, сетки, контейнеры, правила для разработчика

Как делать адаптивные макеты: брейкпоинты, сетки, контейнеры, правила для разработчика

Практическая схема адаптива: ключевые брейкпоинты, сетки под разные экраны и правила передачи в разработку.

Figma Dev Mode: как разработчику снимать размеры и стили и что дизайнер должен подготовить

Figma Dev Mode: как разработчику снимать размеры и стили и что дизайнер должен подготовить

Как использовать Dev Mode в Figma для точного handoff: inspect, code, assets/export и подготовка файла дизайнером.