AI in development
Скоро появится бесплатный ИИ на базе Chat Gpt 4
Мокапы
- Mockup World – большая коллекция бесплатных мокапов.
- Smartmockups – генерация мокапов в браузере.
- Figma Mockups Plugin – мокапы прямо в Figma.
- Shotsnapp – удобный сервис для создания мокапов.
Шрифты и подборки
- Google Fonts – библиотека бесплатных шрифтов.
- Font Squirrel – лицензированные бесплатные шрифты.
- WhatFont (Chrome Extension) – определяет шрифт на любом сайте.
- Fontpair – подбор идеальных пар шрифтов.
UI Kits & Дизайн-компоненты
- Figma Community – бесплатные UI-компоненты.
- Material Design 3 – UI-компоненты по гайдлайнам Google.
- Tailwind UI – премиум-компоненты для Tailwind CSS.
- UI8 – UI-киты для сайтов и мобильных приложений.
Генерация цветовых схем
- Coolors – генератор цветовых палитр.
- Khroma – ИИ-генератор цветов на основе предпочтений.
- Adobe Color – подбор палитр по правилам цветовых сочетаний.
- Happy Hues – примеры цветовых схем в реальном дизайне.
Иконки и иллюстрации
- Icons8 – огромная библиотека иконок и иллюстраций.
- Flaticon – SVG-иконки для сайтов.
- Phosphor Icons – минималистичные иконки.
- Undraw – бесплатные векторные иллюстрации.
Бесплатные ИИ-инструменты для веб-дизайна
Генерация изображений
Генерация UI-дизайнов
Генерация цветов
ИИ для текстов
ИИ для работы с изображениями
- Leonardo AI – бесплатная альтернатива Midjourney.
- DALL·E – создание иллюстраций по описанию.
- Runway ML – ИИ-генератор анимаций и артов.
- Stable Diffusion (Online) – генерация изображений.
Генерация UI-дизайнов
- Uizard – UI-дизайн по текстовому описанию.
- Relume – ИИ-ассистент для прототипов сайтов.
- Magician (Figma Plugin) – генерация элементов дизайна прямо в Figma.
Генерация цветов
- Coolors – ИИ-палитры.
- Khroma – подбор цвета на основе предпочтений.
- Hue.tools – градиенты и палитры.
ИИ для текстов
- ChatGPT – генерация UX-копирайтинга.
- Grammarly – проверка текстов.
- Copy.ai – генерация маркетинговых текстов.
ИИ для работы с изображениями
- Remove.bg – удаление фона.
- Let's Enhance – улучшение качества фото.
- Clipdrop – расширенный ИИ-редактор изображений.
Полезные плагины для Figma
Новичкам
Продвинутым
1. Автоматизация и оптимизация работы
2. Иконки и UI-компоненты
3. Работа с текстом и контентом
4. Генерация изображений и работа с фото
5. Цвет и градиенты
6. Анимация и взаимодействие
7. Дополнительные утилиты
- Wireframe – позволяет быстро создавать каркасы и прототипы с помощью библиотеки из более чем 350 элементов. Полезен для быстрого создания структуры дизайна.
- Illustration Libraries – предоставляет доступ к высококачественным иллюстрациям, которые можно использовать в проектах. Ускоряет процесс добавления визуальных элементов.
- Figmotion – встроенный инструмент анимации, позволяющий создавать сложные анимации непосредственно в Figma без необходимости использования стороннего ПО.
- Iconify – предоставляет огромный выбор иконок из различных категорий, упрощая поиск и вставку иконок в дизайн.
- Content Reel – позволяет быстро добавлять текстовые строки, аватары и иконки в шаблоны, что ускоряет процесс заполнения макета реальным контентом.
- Autoflow – помогает быстро создавать пользовательские флоу и диаграммы.
- Lorem Ipsum – генератор текста Lorem Ipsum для заполнения макетов текстом.
- Blobs – создание случайных органических форм, полезных для дизайна и иллюстраций.
- Anima – инструмент для создания анимаций и прототипов, которые можно экспортировать в код для реализации на сайте.
- Unsplash – позволяет вставлять фотографии с Unsplash прямо в ваш проект.
Продвинутым
1. Автоматизация и оптимизация работы
- Master (Auto Style) – автоматическое применение стилей к элементам.
- Figma Tokens – управление дизайн-токенами (цвета, типографика, отступы).
- Rename It – пакетное переименование слоев и компонентов.
- Clean Document – очищает макет от ненужных слоев, делает его аккуратнее.
- Autoflow – помогает быстро создавать пользовательские флоу и диаграммы.
- Figma to Webflow – конвертирует дизайн в Webflow-совместимый код.
- Design Lint – проверяет макет на ошибки в дизайне.
2. Иконки и UI-компоненты
- Коллекции иконок, UI-китов и удобных компонентов.
- Material Symbols – библиотека Google Material Icons.
- Feather Icons – минималистичные иконки.
- Heroicons – набор UI-иконок в разных стилях.
- Illustration Libraries – коллекция иллюстраций.
- UI Faces – генерация аватаров для макетов.
- Iconify – огромная база иконок из разных стилей.
3. Работа с текстом и контентом
- Инструменты для улучшения текстов в макетах.
- Auto Lorem Ipsum – автоматическое заполнение макета текстом.
- Google Fonts – интеграция Google Fonts прямо в Figma.
- Text Splitter – разбивает длинные тексты на строки для удобной верстки.
- Ditto – продвинутый инструмент работы с UX-копирайтингом.
- Content Reel – генерация случайных имен, текстов, иконок и аватаров.
4. Генерация изображений и работа с фото
- Упрощают работу с графикой и изображениями.
- Remove BG – удаление фона у картинок (интеграция с Remove.bg).
- Pexels – доступ к бесплатным стоковым изображениям.
- Unsplash – стоковые фото из Unsplash прямо в Figma.
- Mockup – быстрое создание мокапов.
- Let's Enhance – увеличение и улучшение качества изображений.
5. Цвет и градиенты
- Плагины для подбора и генерации цветовых палитр.
- Color Palettes – набор готовых цветовых схем.
- Blush – генерация иллюстраций с разными стилями.
- Image Palette – извлекает цвета из изображений и создает палитры.
- Gradient Maker – генерация сложных градиентов.
- Coolors – генератор цветовых палитр.
6. Анимация и взаимодействие
- Плагины для создания интерактивных элементов.
- Figmotion – создание анимации прямо в Figma.
- Anima – конвертация дизайна в интерактивные веб-страницы.
- Protopie – интеграция с Protopie для сложных анимаций.
- LottieFiles – экспорт анимаций в формате Lottie.
7. Дополнительные утилиты
- Полезные плагины для специфических задач.
- Charts – генерация диаграмм и графиков.
- Mapsicle – вставка карт прямо в макет.
- Breakpoints – тестирование адаптивного дизайна.
- Wireframe – быстрые прототипы и каркасы.
- Blobs – генерация случайных органических форм.
- Tidy Up – автоматическое выравнивание элементов.