Что такое плагины в фигме

Топ-20 лучших плагинов для Figma в 2023

Графический редактор — второй по важности инструмент верстальщика после редактора кода. Мы собрали подборку полезных плагинов, которые пригодятся всем.

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

Ещё одни готовые иллюстрации. Просто выберите коллекцию, композицию и поместите ее к себе.

Прочие материалы

• 8 полезных плагинов VS Code для вёрстки
• 34 инструмента для веб-разработчика на каждый день
• Фигма или Фотошоп. Что выбрать новичку

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Dev Mode в Figma. Быстрый обзор бета-версии

Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.

Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.

Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.

• 10 августа 2023

Горячие клавиши Figma для быстрой работы

Figma — это инструмент для создания дизайна, который очень любят веб-разработчики. Одна из причин, почему Figma так популярна — это горячие клавиши. Они помогают работать быстрее и проще. Давайте рассмотрим самые важные из них.

Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)

Эта комбинация клавиш позволяет вам быстро убрать все лишнее с экрана, чтобы вы могли сосредоточиться на своем дизайне. Или, наоборот, показать все элементы интерфейса, если вам нужно что-то найти или изменить.

Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)

Эта комбинация клавиш открывает поиск по меню. Это очень удобно, когда вы знаете, что вам нужно, но не помните, где это находится. Просто начните вводить то, что вы ищете, и Figma покажет вам нужный пункт меню. Если пользуетесь Spotlight или PowerToys, вам будет очень удобно.

А если не пользуетесь — попробуйте.

• 7 августа 2023

Старт в Figma для верстальщика

Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.

Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

• 2 августа 2023

Инструменты для работы со шрифтами

Работа со шрифтами и типографикой — важная часть вёрстки текста. Новые шрифты появляются очень часто, за этим сложно уследить. Существует множество инструментов, которые помогают находить нужные шрифты, управлять ими и улучшать внешний вид текста.

Рассмотрим несколько инструментов для работы со шрифтами, которые будут полезны при создании сайта.

• 29 июня 2023

10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.

• 13 июня 2023

10 лучших тем для VS Code

VS Code — популярный редактор кода со множеством полезных инструментов. Сегодня мы поделимся с вами 10 темами, чтобы работать стало ещё приятнее. Выбирайте на свой вкус и цвет.

• 11 июня 2023

10 полезных плагинов VS Code для вёрстки

Visual Studio Code — один из самых популярных редакторов кода. Его удобно использовать, и у него есть множество полезных расширений, с помощью которых легко оптимизировать работу. Такие плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы.

Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.

• 9 июня 2023

17 полезных плагинов JavaScript в VS Code

Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.

Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.

• 6 июня 2023

Подборка микроанимаций для фронтенда с CodePen в 2023

⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.

Например, нажатие на кнопку лайка в социальных сетях или изменение фона, индикатор загрузки, и многое другое. Микроанимация используется везде, где есть интерфейс пользователя, а именно, веб-сайтах, мобильных приложениях, играх. На примерах с CodePen покажем, какими они бывают.

• 12 апреля 2023

Как собрать проект на Webpack

Webpack — это сборщик модулей для JavaScript-приложений. Он позволяет разделять код на модули, которые затем могут быть импортированы и использованы в других частях приложения. Это полезно для структурирования кода, оптимизации производительности и поддержки сторонних библиотек.

Подробнее о Webpack мы писали в другой статье, а пока давайте создадим простой проект, который складывает два числа, а заодно научимся пользоваться Webpack.

• 7 апреля 2023

Плагины для Figma

В обновленном материале будет рассказано про 6 основных плагинов, которые ускорят вашу разработку дизайн-макетов. А также в конце статьи я дам инструкцию по установке плагинов в Фигма.

Сегодня я расскажу вам, какие плагины использую я. Эти расширения стали действительно полезными не только для решения единичной задачи, но и для использования на регулярной основе.

Unsplash

Первое и, по моему мнению, самое полезное приложение с точки зрения экономии времени. Это расширение позволяет заполнить выделенный прямоугольник изображением из сервиса бесплатных изображений Unsplash. Во-первых, вы сможете сразу протестировать как будет выглядеть изображение в вашем дизайн-макете. Во-вторых, используемое изображение можно использовать в итоговом дизайне, так как все изображения на сайте Unsplash распространяются бесплатно.

Lorem

Одно из самых ожидаемых расширений. Оно позволяет заполнить текстовый фрейм текстом-рыбой. Функционал данного плагина очень широкий: заполнение по размеру фрейма, заполнение по количеству слов, заполнение шаблонным текстом по количеству абзацев.

Content Reel

И последний на сегодня полезный плагин — Content Reel. Данный плагин позволяет вставлять шаблонные тексты (имя, телефон, адрес и т.д.), вставлять иконки с помощью иконочного шрифта. Также на момент написания статьи (сентябрь 2019) доступна функция вставки некоторых «шаблонных» изображений. Очень полезное расширение на этапе прототипирования, когда у вас нет готового текста на сайт, но вам нужно придумать потенциальные адреса, телефоны и т.д.

На сентябрь 2019 года, в работе на регулярной основе я использую именно эти плагины. Возможно в будущем, при появлении новых расширений, я напишу еще одну статью по плагинам.

Плагины в Figma (обновление 2021)

На май 2021 года хочется отметить новые плагины, которые появились с момента написания статьи:

1. Avatars. Плагин для вставки случайной фотографии человека в прямоугольник. Подойдет тем, кто не хочет искать в интернете картинки людей.
2. Chart. Плагин для упрощенного создания графиков. Он работает с Excel, Google таблицами, и помогает делать классную графику.
3. Font Awesome Icons. Легендарный иконочный шрифт теперь в Figma. Красивые иконки теперь доступны без установки шрифта. Используйте!

Установка плагинов в Figma

1. Находясь внутри проекта, кликаем по иконке добавления «ресурсов» в проект
2. В появившемся окне, сверху, вам будут доступны плагины, которые вы использовали недавно; а внизу будут доступны плагины из сообщества Figma
3. Также вам будут доступны 3 вкладки сверху окна:
   • Последние использованные плагины
   • Сохраненные плагины
   • Раздел «Для разработчиков» (этот раздел нужен тем, кто разрабатывает плагины)

   

4. Вводим название плагина, который хотим найти, и кликаем по нужному плагину
5. В окне плагина мы можем его сразу запустить (Кнопка «Run»), а можем сохранить к себе, чтобы в будущем не потерять. Я рекомендую сразу сохранить плагин, потестировать его некоторое время, а затем удалить, если это потребуется

Этот способ подходит тем, кто знает, какой плагин ему нужен. Поэтому мы просто используем поиск, добавляем и запускаем все плагины.

Для того чтобы добавить плагин в Figma через Figma Community:

1. Переходим в раздел Community (см. пункты выше)
2. Переходим в любой раздел
3. В правой панели нажимаем на кнопку Plugins
4. Выбираем нужный плагин и нажимаем кнопку «Try it out»
5. Автоматически откроется окно и в некоторых случаях плагин также запустится автоматически
6. Переходим во вкладку «Resources» -> «Plugins» и в разделе «Recent» будут показаны плагины, которые вы выбрали
7. Далее все как описано выше — выбираем «Run», если хотим запустить плагин сразу
8. Если хотим сначала прочитать описание или сохранить плагин к себе, то кликаем по названию и далее «. » и выбираем Save

Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на вводный курс по UX/UI дизайну. Вы изучите начальный дизайн-процесс: работа в Figma, анализ информации, визуальная концепция, прототипирование и т.д. Ссылка на сайт курса.

10 плагинов Figma, которые должны быть у каждого дизайнера

Мои любимые 10 плагинов, которые необходимы каждому дизайнеру.

1. Unsplash

Unsplash предлагает фотографии из разных категорий, таких как животные, архитектура, природа, портреты, техника и т. д. Многие дизайнеры любят этот плагин, поэтому он является одним из наиболее часто устанавливаемых плагинов на Figma.

2. Iconify

Iconify предлагает дизайнеру огромный выбор дизайнерских иконок из большого количества категорий. Лично я использую Iconify во всех своих проектах и могу сказать, что это мой любимый плагин Figma.

3. Content Reel

Content Reel позволяет быстро перетаскивать текстовые строки, аватары и иконки в шаблоны. Сначала выберите один или несколько слоев в файле шаблона, а затем выберите фотографии аватаров, логотипы, имена, названия предприятий, телефоны, номера, информацию о дате и времени и многое другое для замены обычного содержимого по умолчанию.

‍4. Image Palette

Палитры очень важны для дизайнеров, палитра помогает создать свой дизайн с помощью определенных цветов, а также поддерживает ценность и последовательность бренда.

5. Remove BG

Если вы используете какие-либо изображения и хотите удалить их фон, то Remove BG — это лучший плагин для удаления фона одним щелчком мыши.

‍6. Figmotion

Figmotion — это инструмент анимации, который встроен прямо в Figma. Этот плагин делает создание анимации более простым и удобным, так как нет необходимости обращаться к стороннему ПО для разработки моушн-графики, как, например, Principle, Haiku или After Effects. Figmotion делает анимацию более управляемой для разработчиков, так как она создана с учетом мобильных технологий.

‍7. CHART

Создавайте полезные диаграммы, используя реальные или случайные данные, копируя и вставляя файлы из таких редакторов, как Excel, Numbers и живых Google Таблиц. Диаграмма поддерживает удаленные файлы JSON (REST API), локальные файлы CSV и JSON.

8. Vectary 3D

Вставляйте свои 2D-проекты непосредственно в Figma в качестве 3D-макетов или других 3D-проектов одним щелчком мыши.

‍9. CODA

Проектируйте с использованием данных из документов и приложений, таких как Spotify, Wikipedia, Intercom и т.д. Создайте таблицу в Coda, подключите свой дизайн к таблице и наблюдайте, как она наполняется реальными данными.

‍10. Wireframe

Wireframe помог дизайнерам упростить создание дизайна с нуля. С помощью этого плагина вы можете создавать готовые экраны, с которыми проще работать. И пусть эти прототипы являются базовыми, и дизайнерам будет необходимо настраивать их в соответствии со своими потребностями, все экраны при этом выглядят одинаково. Лично я бы предложил вам не тратить время на разработку базового проекта, а использовать этот плагин для настройки основных элементов для более плавного взаимодействия с пользователем.

‍Заключение

Как я уже сказал, я использовал много плагинов Figma. И эти всего лишь 10 из моих самых любимых. Спасибо за чтение.

10 плагинов Figma, которые ускорят вашу ежедневную работу

Ускорьте свой рабочий процесс с помощью этого набора плагинов Figma — отличный инструмент сам по себе. Однако, благодаря плагинам вы можете быстро добавить в него новые функции. Позвольте мне показать некоторых из них, о которых вы, возможно, еще не слышали. Берите кружку любимого кофе и вперед!

Icon Scaling

Выберите иконки, которые хотите создать. Рядом на панели у вас есть настройки размера (те, которые сгенерирует плагин). Кроме того, вы можете выбрать вес. Вы также можете экспортировать выбранные иконки с помощью плагина. Он генерирует PDF и SVG файлы Скачать палагин Icon Scaling

A11y — Color Contrast Checker

Существует множество инструментов для проверки соответствия вашего дизайна рекомендациям WCAG, но, безусловно, стоит попробовать этот плагин. Скачать A11y — Color Contrast Checker

UI Faces

Мы тратим много времени на поиск плейсхолдеров для аватаров в наших проектах. С помощью этого небольшого плагина вы можете вставить нужное изображение за считанные секунды. Реальная экономия времени! Скачать UI Faces

SPELLL

Я люблю использовать Grammarly для проверки правописания. Этот плагин дает похожие возможности непосредственно в Figma и Figjam. Вы больше не допустите опечаток в своих проектах! Скачать Spelll

Tailwind Color Generator

Проблемы с поиском правильных цветов? Создавайте монохроматические палитры за считанные секунды. Благодаря этому плагину вы можете моментально создать палитру для своей дизайн-системы. Скачать плагин Tailwind Color Generator

Color Name

Итак, вы уже сгенерировали несколько тонов в дизайн-системе, но не знаете, как их назвать? Попробуйте этот плагин. Выберите объект со сплошной заливкой и проверьте название цвета или список предлагаемых похожих названий цветов. Плагин выполняет поиск по названиям HTML-цветов и «Name that Color», чтобы помочь вам найти наиболее близкие к выбранному названия тонов. Скачать плагин Color Name

Better Font Picker

Итак, вы выбрали цвет. Теперь пришло время для стилей текста. Если у вас возникли проблемы с выбором шрифта, основываясь только на его имени, этот плагин отображает имя с примером шрифта. Этот плагин показывает только список шрифтов, установленных в вашей системе. Скачать плагин Better Font Picker

Typeout

Не тратьте время на написание UX-микротекста. Плагин предоставляет доступ к обширной библиотеке UX-текстов, чтобы сделать ваши макеты более значимыми. Скачать плагин Typeout

3D Transformer

Хотели бы добавить 3D-эффекты к вашим мокапам? Вы должны поэкспериментировать с этим плагином. Просто выберите фрейм или изображение в Figma, запустите плагин и настройте 3D-эффект с помощью ползунков. Вуаля! Скачать плагин 3D Transformer

Easometric

Все любят изометрические фигуры. Создавайте их быстрее с помощью плагина Easometric с использованием SSR3⁰⁰ — самого популярного и гибкого метода создания изометрических иллюстраций. Никогда не создавайте изометрические фигуры вручную! Скачать плагин Easometric

Посмотрите работу плагинов Figma вживую

Смотрите все представленные плагины в видео-презентации ниже:

Вывод

Сообщество Figma имеет обширную коллекцию плагинов и полезных ресурсов. Не забудьте поставить лайк тому, которым пользуетесь, и оставить комментарий, чтобы поддержать создателей. Ведь благодаря им, вам стало удобнее работать! Спасибо за прочтение!