Графический редактор — второй по важности инструмент верстальщика после редактора кода. Мы собрали подборку полезных плагинов, которые пригодятся всем.
Iconify
Более 100 наборов значков, например Material Design, FontAwesome, значки Jam, EmojiOne, Twitter Emoji. Просто откройте окно и выберите нужную иконку из наборов. Если не хотите долго искать — используйте поиск, он тоже работает:
Vectary 3D Elements
Добавит третье измерение в ваши 2D проекты. Интеграция работает в обе стороны: можно импортировать изображения из Figma в 3D сцены Vectary, так и наоборот — сделать какой-нибудь объемный объект в Vectary и закинуть его в Figma.
В плагине есть большая библиотека готовых 3D-элементов (например, смартфоны) или вы можете загрузить туда любую 3D-модель по ссылке — например, если у вас в компании есть 3D-моделлеры.
Anima — Export Figma to HTML, React, Vue code
Возможность получить код, основанный на вашем дизайне. Для работы с плагином нужно создать аккаунт в Anima и синхронизировать проект.
👉 — Экспорт Figma в код HTML, CSS, React или Vue.
— Создание прототипа на основе кода.
— Возможность поделиться URL-адресом с вашей командой и пользователями.
Unsplash
Красивые картинку сразу в Figma. Теперь не нужно лезть в фотосток в браузере, искать картинки, скачивать, а только потом добавлять в пространство.
Lorem Ipsum
Заполняет текстовые блоки фиктивным текстом. Если вам нужно быстро сделать проект, а основного текста от заказчика ещё нет, то воспользуйтесь плагином для заполнения пустого пространства. Вы можете указать количество слов, предложений или параграфов в зависимости от того, что требуется.
Blobs
Создаёт уникальные фигуры. Вы можете выбрать количество точек и сложность элемента в генераторе.
Mockup
Возможность перенести дизайн на экран. Плагин также предлагает готовые варианты дизайна.
Arc
Возможность изогнуть текст вверх, вниз или в круг. Регулируйте, как вам нужно.
Better Font Picker
Помогает выбирать шрифты с помощью предварительного просмотра. Удобнее, чем стандартная выпадашка со шрифтами.
Charts
Создаёт диаграммы: линейную, площадную, круговую, кольцевую, точечную и гистограмму. У каждой есть собственные значения, которые вы выставляете, как нужно. Также не забывайте выделять область, где необходима диаграмма.
Noise
Создаёт новый слой в виде сгенерированного шума. Вы сами регулируете плотность, контраст и масштаб. А если нажать In__ve__rt, то будет сгенерирован светлый шум на темном фоне_. П__рофилактика_ теперь у вас в Figma.
Mapsicle
Позволяет найти на карте мира любую точку, даже по координатам. Есть возможность настроить отображение объектов, как с названием улиц, так и без них. Показать вид со спутника, сделать карту в темных тонах, также можно настроить угол показа самой карты.
SkewDat
Исказит любой объект. Можно искажать несколько объектов одновременно и есть возможность вернуться к исходному значению.
Get Waves
Генератор волн создаёт вектор с заливкой. В генераторе есть настройка типа волны, размера и направления.
Illustrations
Бесплатные популярные библиотеки иллюстраций.
Avatars
Генерирует аватарки рандомными людьми в выбранную область. Есть возможность сгенерировать сразу несколько объектов.
Contrast
Проверяет контрастность цветов во время работы. Выберите слой, и функция Контрастность найдет цвет непосредственно за выбранным цветом и покажет коэффициент контрастности.
Humaaans for Figma
Готовые иллюстрации людей. Вы можете использовать их отдельно или составлять уникальные иллюстрации.
Autoflow
Рисует линию между выбранными объектами. Есть выбор цвета, толщины, наклон линий. Удобно для рисования блок-схем или для замены Miro.
Blush
Ещё одни готовые иллюстрации. Просто выберите коллекцию, композицию и поместите ее к себе.
Прочие материалы