23 Figma-инструмента для создания фонов и паттернов
В подборку вошли библиотеки с фонами, генераторы фонов, паттернов и цветных плашек для текста. C их помощью вы сможете подбирать для проектов самые разнообразные фоны: акварельные, градиентные, трёхмерные, полосатые, текстурные, голографические, неоновые и моментально выделять текст, добавляя редактируемую плашку
Дарья Райт
Ведущий редактор в «Оди»
Hero Patterns — большая коллекция фоновых SVG-паттернов для использования в веб-дизайне
200+ Watercolor Mesh Backgrounds — коллекция из 200+ акварельных фонов
Fondos Abstractos — 20 абстрактных векторных фонов
Splaaashes — набор трёхмерных абстракций, каждая в пяти вариантах градиентной цветовой гаммы
Pattern Hero — коллекция бесшовных SVG-паттернов
Background Shapes — пак редактируемых фоновых фигур. Можно менять цвета, размеры, расположение фигур, угол наклона
SVG Abstract patterns & Illustrations — 11 абстрактных SVG-паттернов для фонов
Substrate for text — добавляет цветную плашку под выбранным текстом
02 organic gradient backgrounds — редактируемые градиентные фоны в нескольких цветах
Free Gradients Backgrounds — пак из 10 абстрактных градиентных фонов
3D Textured Backgrounds — 5 текстурированных 3D-фонов
Textures Kit — коллекция из 40 фонов / текстур в высоком разрешении
Abstract Backgrounds Pack — набор из 48 абстрактных фонов
100+ Marble Textures — 100+ мраморных текстур
Light Overlay Pack — пак из 72 фонов со звёздами и огоньками
3D Textured Backgrounds — три трёхмерных текстурных фона
abstract background — 15 неоновых фонов
12 Free Holographic Dark Gradients — пак из 12 голографических тёмных градиентов
12 Free Holographic Light Gradients — пак из 12 голографических светлых градиентов
Borealis Themed Editable Gradients — 26 редактируемых градиентов
Опыт создания паттернов в Figma и развитие креативности
Мы искали вдохновение для ежедневного челленджа по созданию дизайна интерфейса, когда нашли на Dribbble портфолио Намики Хамасаки. Дизайнерам нравятся подобные челленджи, потому что это творческое упражнение, не ограниченное ожиданиями клиента или руководства. Хотя подобные упражнения практикуются уже давно, они часто фокусируются на общих элементах интерфейса, таких как формы регистрации или мобильные приложения. Но ежедневные челленджи Намики были уникальными. Ее подход к созданию паттернов также был уникален. Для создания необычных паттернов она использует нетипичные цветовые палитры и геометрические фигуры. Мы обратились к ней, чтобы узнать больше о том, как она создает паттерны в Figma. Ниже она сама расскажет о своем подходе к работе, а вот видео ее рабочего процесса в действии:
Ищите ежедневное вдохновение
Я люблю делать паттерны. Настолько, что недавно бросила себе вызов – каждый день создавать новый паттерн. Хотя по определению паттерн – это «повторяющийся декоративный дизайн», мои дизайны не выглядят одинаково. Поэтому люди часто спрашивают меня, как я нахожу вдохновение, особенно когда каждый день создаю что-то новое. На самом деле это не так сложно. Я говорю им, осмотритесь вокруг. В каждом уголке жизни есть вдохновение. Если вы будете внимательны, вы скоро заметите уникальные детали в еде, архитектуре, мебели, природе, по дороге на работу – вдохновение повсюду. Когда вы начинаете замечать эти мелкие детали, их легко перевести в то, над чем вы работаете, для меня это паттерны. Я сталкиваюсь с таким количеством идей, что хочу быть уверена, что ничего не упущу. Всякий раз, когда что-то бросается в глаза, будь то форма, цвет или композиция, я делаю фотографию, чтобы потом, садясь за дизайн, обратиться к ней. Эта привычка также гарантирует наличие библиотеки начальных точек, благодаря чему я никогда не смотрю на пугающую пустую страницу.
Создайте свою цветовую палитру
Этот челлендж стал отличным поводом попробовать новые, интересующие меня, цветовые комбинации, которые не было возможности использовать в других проектах. На работе я часто ограничиваюсь цветовой палитрой бренда, поэтому в этом челлендже я решила выйти за рамки привычного выбора цветов. В поисках идей, я часто ищу фотографии. Как только найду изображение, которое меня вдохновляет, я использую плагин Figma Image Palette, чтобы извлечь из фотографии цвета и создать цветовую палитру.
Создайте сетку
Как только я определюсь с цветовой палитрой, я перехожу к следующему этапу, который заключается в настройке сетки. Это особенно важно, когда вы работаете с паттернами, потому что вы хотите быть уверенны, что паттерн повторяется правильно и вы можете легко организовать его элементы. С помощью Figma я могу быстро настроить нужную сетку, используя функцию Layout grid.
Поиграйтесь с фигурами
Теперь пришло время повеселиться! Когда я начинала ежедневные челленджи с паттернами, я рисовала их вручную. Я переключилась на цифровые рисунки, когда начала создавать паттерны из простых геометрических фигур. Некоторые паттерны выглядят довольно сложными, но в основе их лежат простые фигуры: круги, прямоугольники и треугольники, которые я стратегически разместила на сетке. Хотя я начинаю с основ, я экспериментирую с фигурами. Это позволяет мне увидеть, как разные подходы дают разные визуальные результаты. Например, я могу сделать круг, а затем повернуть его на 45 градусов, чтобы посмотреть, как это смотрится. Или я могу повернуть полукруг под другим углом. Именно в этом и заключается мой процесс создания паттернов, когда я экспериментирую и смотрю, какой результат кажется подходящим. Вот еще один эксперимент, я смещаю круг, чтобы посмотреть, что получится. Я также пробую редактировать цветовые комбинации паттерна, чтобы найти новые и интересные варианты.
Сделайте паттерны бесшовными
Как только я выбираю паттерн, который мне нравится, я превращаю его в компонент. Следующий очень важный шаг, который вы можете забыть сделать – отключите опцию Clip content. Сразу после этого, я копирую компонент и заполняю им весь фрейм. Перемещение элементов в мастер-компоненте является отличным способом изучения макетов и позволяет быстро понять, какой вариант вам больше нравится. Воспроизведите этот файл, чтобы посмотреть весь процесс создания ежедневного паттерна №28. Так вы лучше ознакомитесь с моим подходом к размещению исходного скопированного компонента в желаемом паттерне. Перевод статьи Namika Hamasaki
5 полезных плагинов для Figma: создание паттернов
Как быстро сгенерировать уникальный паттерн, изменить в нём цвета или выбрать готовый из бесплатной библиотеки.
Иллюстрация: Оля Ежак для Skillbox Media
Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
В Figma есть встроенный векторный редактор, который может помочь вам нарисовать свой паттерн. Обычно это занимает много времени, и если у вас его нет, придётся искать готовое решение в бесплатных библиотеках. Упростить эту работу вам помогут плагины, которые расширяют функционал графического редактора.
Рассказываем, какие плагины для Figma помогут вам сделать собственный паттерн.
Pattern Hero
Этот плагин генерирует последовательности из выбранных объектов — ими могут быть фигуры, картинки, группы или фреймы.
Как пользоваться
- Скачайте плагин по ссылке.
- Зайдите в Figma и выделите объекты, из которых хотите сделать паттерн.
- Нажмите правой кнопкой мыши на выделенные объекты, в выпадающем меню перейдите в пункт Plugins и выберите Pattern Hero.
- В появившемся окне выберите количество колонок, строк и отступы между элементами. Если вы хотите получить случайную последовательность элементов, нажмите на переключатель в пункте Shuffle Nodes.
- Нажмите кнопку Create Pattern.
Confetti
Генерирует узор, напоминающий конфетти. Работает только с геометрическими фигурами — треугольниками, кругами, квадратами.
Как пользоваться
- Скачайте плагин по ссылке.
- Зайдите в Figma, создайте фрейм и поместите в него несколько разноцветных фигур.
- Нажмите правой кнопкой мыши на фигуры внутри фрейма, в выпадающем меню перейдите в пункт Plugins и выберите Confetti.
- В появившемся окне выберите количество колонок и строк. По желанию разрешите плагину указывать случайные размер, прозрачность и угол наклона.
- Нажмите кнопку Run.
Fizzy
Этот плагин делает паттерны только из кругов, но зато предварительно их рисовать не нужно. Пользователь может задать их размер, количество и цвета.
Как пользоваться
- Скачайте плагин по ссылке.
- Зайдите в Figma и создайте любую фигуру — круг, квадрат, треугольник.
- Нажмите правой кнопкой мыши на фигуру, в выпадающем меню перейдите в пункт Plugins и выберите Fizzy.
- В появившемся окне выберите количество кругов, их размеры и цвета.
- Нажмите кнопку Fizzy it. Получившийся паттерн будет находиться внутри фигуры, которая превратится в маску.
CoShuffler
Если в получившемся паттерне вам не нравится выбор цветов, это можно быстро исправить с помощью плагина CoShuffler. Он автоматически перекрашивает все выделенные объекты из созданной пользователем палитры.
Как пользоваться
- Скачайте плагин по ссылке.
- Зайдите в Figma и создайте несколько фигур с нужными цветами — их плагин будет использовать как палитру.
- Нажмите правой кнопкой мыши на фигуру, в выпадающем меню перейдите в пункт Plugins и выберите CoShuffler.
- Выделите фигуры с нужными цветами и в появившемся окне нажмите Set colors.
- Выделите все объекты вашего паттерна и в окне плагина нажмите кнопку Go. Каждый раз, когда вы будете её нажимать, цвета объектов будут меняться.
Hero Patterns
Если у вас нет времени на создание собственного паттерна, попробуйте поискать подходящий в библиотеке Hero Patterns. Там собрано несколько десятков узоров, которые могут подойти в разных ситуациях.
Как пользоваться
- Скачайте плагин по ссылке.
- Зайдите в Figma и создайте фрейм, внутри которого появится будущий паттерн.
- Нажмите правой кнопкой мыши на фрейм, в выпадающем меню перейдите в пункт Plugins и выберите Hero Patterns.
- В появившемся окне выберите цвет и сам паттерн. Как только вы нажмёте на узор, он тут же появится на макете. По желанию цвет фона можно изменить в стандартных настройках заливки.
Больше о Figma
- Готовые решения в Figma: 10 полезных файлов для дизайнеров
- 5 лайфхаков в Figma, которые помогут работать быстрее
- 5 полезных плагинов для Figma: проектирование интерфейса
- Как делать варианты элементов интерфейса
- Тени в интерфейсах: зачем они нужны и как их рисовать
- Как создать тёмную тему
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.
Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!
Полезные Figma плагины
Figma плотно вошла в среду создания сайтов на Тильде как предварительный этап, где можно создавать дизайн, готовить графику и экспериментировать. Делимся подборкой наших любимых плагинов.
Как установить плагин: Зайдите во вкладку Plugins — Browse all plugins — В окне поиска введите название плагина
Blobs
Простой генератор каплеобразных форм
Iosmetric
Плагин трансформирует объекты в 45-градусную изометрию.
Arc
Сгибание текстовых блоков
Pattern Hero
Мощный генератор паттернов