Как правильно подгонять SVG иконки в Figma?

Question

[andrey2528]

Перешёл на Figma и возник вопрос: при подгрузке svg иконок есть фрейм и сам вектор(иногда в группе). Для того чтобы подогнать иконки под один размер ставим размер фрейма допустим 40х40. Но они визуально могут отличаться по размеру друг от друга (сам вектор). Как в таком случае поступать: делать визуально одинаковыми, но тогда фрейм будет разным, или? Как правильно поступать в таких ситуация, чтобы не было проблем в дизайне, а потом вёрстке?

Comments

[Anton Golovin]

Привет, сам только что решил эту проблему, пол дня просидел, а все оказалось довольно просто:

Answer 1

[Tony]

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

Так что меняйте содержимое внутри фрейма. Я в таких случаях расставляю линейки и растягиваю иконки уже по ним.

Comments

[andrey2528]

А если на примере. Вот есть 2 иконки. По фрейму одинаковы, но конверт меньше по высоте визуально. Как в таких ситуациях быть? или это допустимо?

[Tony]

andrey2528, это уже вопрос вкусовщины, как мне видится. Я как-то пришел к тому, что иконки должны занимать визуально равную площадь - то есть одна иконка не должна быть жирным пятном рядом с другой. При этом ничего не поделать с тем, что одна иконка горизонтальная, а другая - вертикальная. Я бы так и оставил :)

[andrey2528]

Figma-designer, спасибо за ответ)

Answer 2

[Роман Дворянов]

Хорошей практикой считается делать контейнеры(фреймы) для иконок, т.к. иконка может быть размером со значением в не целый пиксел, а в вебе полупикселей нет. Просто центрируйте иконки внутри фрейма и чуть подгоняйте по высоте, ширине, если они не квадратные, ну чтоб четко было)

Answer 3

[Степан Воеводин]

Вообще присоединюсь к предыдущим комментариям, контейнер (viewbox) должен быть у всех одинаковый, иконки в отрисованы в pixelperfect. А между собой ровнять уже визуально, но не вылезая за рамки контейнера.
Google на тему визуальной отрисовки написал дизайн принципы.