Категории

Плагины для Figma

| Figma

🛠 Топ плагины для Figma под веб и портфолио

🔤 Текст и контент

  • Google Fonts — моментально вставляешь любые шрифты из Google Fonts.
  • Content Reel — вставка lorem ipsum, фейковых имен, адресов, аватарок.
  • Notion to Figma — подтягиваешь текст прямо из своего Notion/таблицы.

🎨 Цвета и стили

  • Color Palettes — генерация красивых палитр (вдохновляться можно прямо внутри Figma).
  • Image Palette — достает палитру из любой загруженной картинки.
  • Brandfetch — вставляешь логотип бренда → плагин тянет лого и брендовые цвета.

🖼️ Картинки и иллюстрации

  • Unsplash — вставка фоток из Unsplash прямо в макет.
  • Icons8 / Feather Icons / Phosphor Icons — библиотеки иконок в один клик.
  • Blush — генератор кастомных иллюстраций (похож на unDraw).

⚡ Верстка и генерация кода

  • Figma to Code (React, Vue, HTML) — показывает, как будет выглядеть код.
  • CSS Gen — выделяешь элемент → получаешь готовый CSS.
  • Anima — более мощная штука, умеет экспортировать адаптивные макеты в HTML/React.

📐 Для прототипов и портфолио

  • Mockup — вставляешь макет сразу в ноутбук/телефон/браузер фрейм.
  • Chart — генерирует графики/диаграммы из данных (полезно для лендингов).
  • Map Maker — быстрые карты (Google Maps или кастомные стили).

🤖 Ускорители

  • Autoflow — моментально рисует стрелки и связи между элементами (для схем).
  • Remove BG — убирает фон у картинок прямо в Figma.
  • Wireframe — быстро генерирует простые прототипы.

⚡ Лайфхак:
Собери себе свой стартовый workspace в Figma:

  • Готовые стили шрифтов,
  • Палитры (светлая + темная),
  • Компоненты кнопок, карточек, блоков.
    И дальше все проекты будут собираться в разы быстрее.

🔑 Базовые

  1. Google Fonts
    Чтобы сразу брать шрифты, которые потом легко подключишь в React/Astro/WordPress.
  2. Color Palettes / Image Palette
    Для палитр. Сразу на старте фиксируешь цвета → потом просто переносишь в Tailwind/SCSS.

🖼️ Медиа

  1. Unsplash
    Фотки-заглушки для лендингов, портфолио и блогов.
  2. Icons8 или Phosphor Icons
    Чтобы собирать UI-блоки и не искать иконки вручную.

⚡ Для разработки

  1. Figma to Code (React/HTML/CSS)
    Чтобы подсматривать готовый код. Ускоряет перенос дизайна в проект.
  2. Anima (по желанию)
    Если захочешь собирать реально рабочие прототипы и экспортировать их в HTML/React.

🔥 Бонус:

  • Mockup — вставить сайт в рамку ноутбука/телефона. Красиво смотрится в портфолио.
  • Remove BG — удаление фона прямо в Figma, когда нужен чистый объект.