@Alexander9229

Figma — почему меняется изображение после того как его вырезаю?

Есть изображение в дизайне - 5fe14f06bdf59187392996.png
После того как изображение вырезаю, оно меняется в вот такое - 5fe14edf5d10e737835962.png

Почему это происходит и как можно этого избежать?
Дизайн находится в формате figma - смотреть пример
  • Вопрос задан
  • 71 просмотр
Пригласить эксперта
Ответы на вопрос 3
iamd503
@iamd503
Верстальщик
Это косяк фигмы, как вариант через люстру прогнать иконку. Постоянно с таким сталкиваюсь
Ответ написан
RAX7
@RAX7
У этой иконки белая обводка выровнена наружу (Outside), а svg умеет только выравнивание обводки по центру контура. При экспорте фигма пытается расширить контур иконки, чтобы обводка была по центру, а визуально это выглядело также как в макете, но видимо этот алгоритм работает криво и на выходе получается вот такая бяка.
Это можно исправить если преобразовать обводку в кривые (Outline stroke) и экспортировать получившиеся два контура.
Ответ написан
melomanpenza
@melomanpenza
UX/UI дизайнер
однозначно - дизайнеру было пофиг)
В общем вся проблема в лишних точках
5fe1a93808bdc145785497.jpeg

Как вариант решения, это перевести всю обводку в кривые и почистить в Фигме. Чтоб перевести кривые нажмите Ctrl+Shift+O. Он тогда разделит на 2 path и нужно будет уже руками доработать. На выходе получится всё норм:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.8 56.2">
  <path fill="#299c32" d="M28.3 4C15.3 4 4.8 14.5 4.8 27.5c0 5.1 1.7 9.9 4.5 13.8l-3 8.7 9-2.9C19 49.6 23.4 51 28.2 51c13 0 23.5-10.5 23.5-23.5S41.2 4 28.3 4z"/>
  <g fill="#fff">
  <path d="M41.4 33.3c-.1-.1-.3-.1-.4-.2-.7-.3-4-2-4.7-2.2-.6-.2-1.2-.2-1.7.5-.1.1-.2.3-.3.4-.6.8-1.1 1.6-1.6 2.1-.4.4-1.1.5-1.7.3.1-.1 0-.2 0-.2-.9-.4-2.9-1.2-5.3-3.3-2-1.8-3.4-4.1-3.8-4.7-.4-.7-.1-1.1.3-1.4.2-.2.4-.5.6-.7.1-.2.3-.3.4-.5l.1-.1c.3-.4.5-.6.7-1 .2-.5.1-.9-.1-1.3-.1-.2-.8-2-1.4-3.5-.3-.6-.5-1.2-.7-1.6-.5-1.1-.8-1.1-1.5-1.2H19.5c-.9 0-1.8.3-2.4.8l-.1.1c-.7.7-2.3 2.4-2.3 5.7 0 3.3 2.3 6.5 2.8 7 0 0 .1.1.1.2.9 1.3 5.2 7.5 11.6 10.1 5.4 2.2 7 2 8.2 1.8 1.8-.4 4-1.7 4.6-3.3.6-1.6.6-3 .4-3.3-.2-.1-.5-.3-1-.5z"/>
  <path d="M28.3 0C13.1 0 .8 12.3.8 27.5c0 5.3 1.5 10.2 4.1 14.4L0 56.2l14.8-4.7c4 2.2 8.6 3.5 13.5 3.5 15.2 0 27.5-12.3 27.5-27.5S43.4 0 28.3 0zm0 51c-4.8 0-9.2-1.4-12.9-3.9l-9 2.9 2.9-8.7c-2.8-3.9-4.5-8.6-4.5-13.8C4.8 14.5 15.3 4 28.3 4s23.5 10.5 23.5 23.5S41.2 51 28.3 51z"/>
  </g>
</svg>


Только вот viewBox желательно делать, чтоб было целое число
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы