Как вставить svg в figma
Как мы делаем анимированные иконки SVG с помощью Figma
Начнем с того, что иконка в SVG — это отдельная страница, которую мы встраиваем в другую страницу. Следствием этого является то, что для элементов иконки мы можем использовать самую обычную анимацию CSS с некоторыми небольшими особенностями.
В итоге наш процесс создания анимированной иконки состоит из трех этапов:
Создание иконки в Figma
Несколько правил при создании иконки:
Итак, на примере у нас есть вектор стакан, есть вектор крышка и отдельные векторы — пар.
Иконка стаканчик кофе в Figma
Экспортируем фрейм (не забыв убрать фон) в SVG и открываем файл в блокноте.
Файл открывается и закрывается тегом SVG, в рамках него мы и будем работать.
Иконка SVG в блокноте
Для элементов, которые мы планируем анимировать, проставляем id или class.
Далее прописываем для нужных нам id и классов стили с указанием имени анимации, например:
И там же пишем скрипт анимации:
Теперь можно вставить наш SVG в любое место как объект:
Figma — делаем дизайн компонентов, пригодный для экспорта в код
В этой статье я расскажу, о том, как сделать в Фигме компонент, который будет пригоден для экспорта в код. В Фигме можно будет выбрать наш компонент и при помощи плагина сгенерировать готовый код.
Figma — это приложение, которое специализируется на предоставлении целого пакета сервисных услуг и функций для разработки интерфейсов различной сложности. Само приложение кроссплатформенное и может использоваться как десктопное приложение, так и браузерное. По своей сути представляет из себя векторный графический редактор, поддерживает большую базу плагинов. С самого начала поддерживал генерацию CSS стилей и кода для мобильных устройств. Большим плюсом является хранение макетов в облаке, и возможность работы одновременно над одним проектом целой командой дизайнеров. Для разработчиков есть удобный экспорт ресурсов (например векторных иконок) в форматы PNG/SVG/JPG, а так же экспорта страниц в PDF файл.
Нарисуем лист вью с иконкой, и сгенерируем вёрстку.
Так, со структурой разобрались, поняли что нам примерно нужно сделать, теперь приступаем непосредственно к дизайну. Для этого мы возьмём один элемент, и сделаем его на основе компонентов Фигмы и применим к нему Auto layout. Сначала объединим текст и иконку, добавим отступы, сделаем выравнивание по высоте в середине, и по левому краю. Получится так…
Далее нам нужно создать два элемента, расположить их друг под другом по высоте, и объединить их Auto layout. В целом всё кажется готовым, но на самом деле, если вы поменяете длину текста, то элементы не будут гибко подстраиваться друг под друга.
Завершающим штрихом станет выставление автоматического растягивания элемента по ширине самого длинного элемента. Применяем это ко всем элементам списка, чтобы они могли адаптироваться к любой длине текста. Это делается при помощи вот этого инструмента.
В результате у нас должен получиться такой вот список.
Запускаем генератор кода.
Открывается плагин с генерацией кода. где мы можем выбрать необходимую нам технологию. Я буду использовать Tailwind 2. Далее выберем нужный нам элемент дизайна, и плагин выдаст нам готовую вёрстку.
Копируем в буфер и запускаем песочницу, для того чтобы проверить сгенерированный код и подправить пару нюансов.
Так, всё работает, кроме иконок, которые нам нужно копировать как SVG и вставить в наш код. Делается это вот так…
Получаем результат, который идентичен нашему в Фигме.
Подробнее про Auto layout тут.
Рисуем карточку товара.
Я нарисовал макет, как в прошлом примере, сделал дизайн, распределил блоки, и при помощи Auto layout выровнял всё так, как мне нужно. Сгенерировал код, подправил некоторые нюансы с картинками и иконками, в результате получил готовую карточку товара. Подробнее про Flexbox тут.
Как работать с изображениями в Figma
Простая инструкция: как добавить изображение на макет и отредактировать его без «Фотошопа».
Meery Mary для Skillbox
В Figma очень удобно работать с изображениями: быстро обрезать, удалить фон или скорректировать цвет. А ускорить работу над ними помогут встроенные функции и плагин.
Как добавить изображение на макет
Перетащите изображение на макет с рабочего стола или из папки:
Скопируйте изображение сочетанием клавиш Ctrl (⌘) + C и вставьте его в макет, нажав Ctrl (⌘) + V:
Также можно копировать изображения из интернета: нажмите правой кнопкой мыши на любую иллюстрацию в браузере, выберите «Копировать изображение», затем перейдите в Figma и нажмите Ctrl (⌘) + V:
Функцией Place Image можно автоматически поставить изображение сразу туда, где оно должно находиться:
С помощью заливки можно использовать изображение в качестве фона фрейма или фигуры:
Аналогично можно использовать изображение как заливку обводки. Только вместо блока Fill нужно заходить в блок Stroke.
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Настройки изображения
В Figma у любого изображения можно изменить свойства заливки и сделать минимальную коррекцию цвета. Чтобы открыть эти настройки, выделите любую иллюстрацию на макете, затем в блоке Fill нажмите на её миниатюру.
Fill — изображение полностью заполняет собой доступное пространство, в котором находится.
Fit — изображение заполняет пространство так, чтобы его было видно целиком.
Crop — обрезает изображение и фиксирует его видимую часть. При изменении размера оно может растянуться.
Tile — всё свободное пространство заполняется копиями изображения. Это свойство очень удобно использовать с паттернами.
Хотя в Figma можно сделать минимальную цветокоррекцию, качественно отредактировать фотографию не получится — для этого лучше идти в Photoshop.
Настройки цветокоррекции в Figma:
Маска слоя
С помощью маски слоя можно придать изображению нестандартную для Figma форму:
Таким же образом изображением можно заполнить что угодно: от нескольких фигур до текста.
Полезные приёмы
Отразить изображение по вертикали можно с помощью горячих клавиш Shift + H. По горизонтали — Shift + V.
Скопировать SVG-иконку с любого сайта в Figma можно через браузер:
Быстро вырезать объект поможет плагин Remove BG, который автоматически удаляет фон.
Как установить плагин Remove BG:
Учтите, что этот способ не подойдёт для финального удаления фона, так как плагин работает не идеально. Но если вам нужно просто показать идею, то Remove BG поможет сэкономить кучу времени.
Как экспортировать в Фигме
Фигма предусматривает по умолчанию экспорт в несколько форматов: PNG, SVG, JPG, PDF
Как экспортировать
Чтобы экспортировать элементы, выделите их в списке слоев и нажмите на «+» в разделе Export в правом окне инструментов. После этого появится окно с настройками экспорта, в котором вы можете выбрать размер, дополнение к названию (Suffix) и формат файла.
Панель экспорта
Выбор параметров экспорта
Видео: экспорт в Figma
Тег video не поддерживается вашим браузером 
Как экспортировать элементы в один слой
За один слой Figma считает группу или фрейм. Если у вас есть несколько элементов и вы хотите, чтобы они экспортировались как одно изображение (например PNG), объедините их в одну группу (cmnd + G).
Если вы выделите несколько отдельных элементов, они экспортируются как разные файлы
Вы можете экспортировать элементы сразу в нескольких расширениях — для этого в разделе Export нажмите еще раз «+» и укажите дополнительные форматы. То есть вы можете выгрузить изображения сразу как svg и png, и в любых других комбинациях.
Как указать разрешение
В окне разрешения вы можете либо указать кратность — 1X, 2X и т.п. Это значение, на которое будет умножено фактическое разрешение сторон экспортируемой группы/фрейма/элемента.
Либо вы можете указать ширину стороны — высоты или длины. 512w — означает ширину 512 пикселей, 512h — высоту. Вы можете указывать свои значения, либо выбрать из предустановленных вариантов.
Презентация
Вы можете демонстрировать результаты своей работы, используя режим презентации. Подробнее об этом читайте в этой статье.
Экспорт области экрана
Если вам требуется экспортировать только часть вашего проекта (по действию похоже на «Ножницы» в Windows и скриншот части экрана в Mac), воспользуйтесь инструментом Slice. Подробнее читайте здесь.
Сохранение файла проекта
Вы также можете сохранить весь файл на локальный диск, об этом читайте здесь.
With Figma’s new SVG Exports, less = more
Here’s one big lesson we’ve learned since launching collaborative design tool Figma: when it comes to SVG Export, less is more. For a long time, we stuck as much information as possible into our SVG files, hoping it would help other tools render and import designs accurately.
Fueled by feedback from our community, we’ve had a change of heart and have been gradually tweaking the Export format over the past few months. As our release note junkies have noticed, our SVGs are now simpler, more compact and compatible with more tools (like Android Studio). Read on for a quick primer on SVG and details about what we changed.
Why tools render the same SVGs so differently
SVG — which stands for Scalable Vector Graphics — is an increasingly popular image format for 2D vector graphics. It emerged in 2001 as an open specification aimed primarily for use in web browsers. Unlike traditional bitmap image formats like JPG and PNG that become blurry when resized, SVG is designed to always remain crystal clear.
That’s because SVGs are effectively instructions describing how to paint an image from scratch while bitmap images are static snapshots of the final result. SVG is perfect for assets like logos and icons on the web, where they might show up anywhere from a huge monitor to a high resolution retina screen on a phone.
Here’s the rub though: there’s no standardized way of converting the SVG markup to pixels on the screen.
Here’s the rub though: there’s no standardized way of converting the SVG markup to pixels on the screen. Most tools have their own custom SVG importers or renderers and the quality of these implementations varies widely. The SVG specification is also sufficiently complex that most tools only understand a subset and have bugs even when dealing with the subset that they claim to support.
For example, SVG has a nifty feature that allows you to define instructions in a defs block and reference them repeatedly with the use element. As we learned the hard way, Android Studio does not support this in most cases.
In addition to choking many importers, our complicated and extraneous markup also bloated the file size and made the output difficult to digest for humans. Many of our users had resort to post-processing with tools such as SVGO and svgito or, even worse, by manually cleaning up the file by hand. 😬😬😬
From Figma’s SVG naïveté… to our new pragmatic approach
People have been asking for smaller, simpler SVGs from Figma for a long time. We resisted making the change because we were hoping that SVG would become the de facto data transfer format between design tools. In this utopia, you could easily spread your design workflow across different design tools depending on what was the best fit for each stage.
We now accept that was a bit of pie-in-the-sky naïveté, and our new SVG Exporter takes a more pragmatic approach.
To understand the improvements, let’s start with a seemingly innocent example: a frame containing a single black rectangle with a grey inside stroke.
With our old SVG Exporter, we generated this embarrassing novel:
After a lot of hard work, we’ve managed to squeeze all of that down to a tweet:
Let’s go through the larger changes one by one:
Primitives
For simple shapes such as rectangles and circles, we now use the easily understandable SVG shape primitives instead of cryptic paths.
Inside/Outside Strokes
Because SVG only supports center strokes, design tools have had to devise various workarounds to simulate inside and outside strokes. Previously, we did this by using center strokes with a doubled stroke width. That is visually equivalent to having both an inside and outside stroke so we used a mask to hide the unnecessary half. This approach greatly inflated the file size and complicated the markup.
We now try to adjust the points in the path such that the visual result will resemble an inside or outside stroke while using center strokes with the original stroke width. For example, a rectangle with an inner stroke can be represented as smaller rectangle with a center stroke.
Minimal Markup
We no longer output purely informational elements like title and g or attributes like id and version.
We also added some smarts to avoid markup when they have no effect. For example, we used to always output a clipPath for clipped frames, but now we do so only when clipping is actually necessary.
Finally, we now inline SVG elements where we previously had a use reference to a deduplicated element defined within the defs block. Even though we lost deduplication, it turns out that the simplified structure actually reduces the overall file size in most cases. This is especially true when the SVGs are compressed with something like gzip.
Export Options
The new SVG Export defaults are optimized for the most common usecases. For example, most of our users will not miss the id attributes, but for those of you that do, we went ahead and added an option. We also have an option to control the markup for strokes and text objects.
We hope Figma’s new short ‘n’ sweet SVGs have been treating you well. If you have feedback, please let us know in our community on Spectrum!