Как создать паттерн в Figma

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

Создайте фрейм тайла

Начните с квадратного фрейма 240×240 или 320×320 пикселей. Включите Clip content и задайте фону отдельный цвет. Круглый размер упрощает расчёты, но тайл может быть прямоугольным — например, 320×240 для горизонтального ритма.

Синхронизируйте края

Элемент, выходящий за правую границу, продублируйте и сдвиньте влево ровно на ширину фрейма. Для верхней и нижней границы используйте высоту. Вводите смещение в полях X и Y, а не двигайте копию мышью. Угловой объект должен иметь четыре согласованные копии.

Используйте компоненты

Превратите основные мотивы в компоненты. Тогда изменение цвета, формы или обводки обновит все экземпляры, включая копии на краях. Для вариантов палитры удобно завести переменные цветов или несколько наборов styles.

Проверьте повтор

Экспортируйте фрейм как SVG или PNG. Создайте большой прямоугольник, добавьте изображение как Fill и выберите режим Tile. Меняйте Scale от 10% до 200%. На маленьком масштабе ищите полосы и пустые зоны, на крупном — разрывы контуров и неточные совпадения.

Частые ошибки

• Копии на краях изменяются независимо и перестают совпадать.
• Дробные координаты делают тонкие линии размытыми в PNG.
• Слишком сложные маски превращают SVG в тяжёлый файл.
• Проверка только одного тайла скрывает нежелательный общий ритм.

Экспорт для сайта

Для простой векторной графики выбирайте SVG и удаляйте лишние метаданные. Если есть растровая фактура, экспортируйте PNG или WebP в размере, достаточном для самого крупного использования. Перед публикацией проверьте результат в браузере с CSS-свойствами background-repeat: repeat и разными значениями background-size.