Идеальное оформление: советы для работы с элементами в Figma Figma — это мощный инструмент для дизайна, который позволяет создавать превосходные макеты и прототипы. Однако, чтобы ваш дизайн действительно выглядел профессионально, не менее важно уделить внимание оформлению элементов. Расскажем вам несколько советов о том, как достичь идеального оформления элементов в Figma. Проблема Возможно, немногие обращали внимание, но если вы входите в Figma с правами "can view" и наводите курсор на элемент без заливки цвета, то Figma не покажет границы этого элемента. Даже если вы примените обводку к элементу или установите цвет, но установите прозрачность на 0%, граница все равно не будет видна. Такое поведение Figma доставляет много неудобств фронтендерам, QA и другим участникам команды с такими правами. К чему это приводит Фронтендеры не могут точно определить размер элемента или отступ между элементами, и, в лучшем случае, они просят у дизайнера подтверждение размеров, но чаще всего верстают на своё усмотрение, что в итоге приводит к несоответствиям дизайну. Вторая проблема заключается в экспорте иконок без их рамки, что приводит к неправильному позиционированию иконок в элементах или неправильному размеру. Всё это усложняет процесс разработки и добавляет лишнюю работу, так как приходится описывать проблемы и исправлять их. Решение проблемы Для решения этой проблемы существует небольшой хак: 1. Создайте стиль цвета. 2. Откройте окно редактирования стиля. 3. Нажмите на квадратное превью цвета и выберите "Image" вместо "Solid" в верхнем левом углу. Затем выберите "Choose image" и загрузите полностью прозрачное PNG-изображение с минимальным размером, например, 1x1 пиксель (изображение можно скачать по ссылке ниже). 4. Готово! Стиль создан. Теперь примените этот стиль ко всем элементам, где вам нужно, чтобы границы фрейма отображались при наведении курсора. Где применять? Можно применить этот стиль к прозрачным элементам, таким как базовые кнопки, обводочные кнопки, вкладки, элементы списка, компоненты иконок, ячейки таблицы и т. д., а также использовать этот стиль для разметки структуры страницы. Не применяйте этот стиль ко всем прозрачным фреймам, а только к тем, где считаете, что важно видеть границы блока или элемента. Иногда в Figma приходится оборачивать элемент в множество фреймов, чтобы добиться нужного поведения. Если применяете этот стиль к компоненту иконки, не забудьте убрать флажок "Show in exports", чтобы при экспорте иконки в SVG не было лишнего кода.