Собираем пазлы в фигме

Привет! Я тут на днях написал плагин для фигмы, который нарезает любое изображение на пазлы. Таким образом можно сделать пазл буквально за 5 минут из вашей фотки или скриншота из любимой игрушки. И самое интересное: этот же пазл потом можно собирать в фигме, да еще и с друзьями.

Так получилось, что фигма идеально подходит как площадка для онлайн пазлов. Ее функциональность позволяет перемещать и сдвигать друг с другом детали, в свободном режиме, а возможность шарить файл с друзьями и одновременно редактировать решает всё.

Меня эта идея посетила, когда мы в гостях на большом столе собирали пазл с плохим качеством изображения (видимо, принтер у производителя с каким-то мелким разрешением был) и я осознавал, что вернусь домой, а там просто негде разложить пазл даже на 500 деталей. По итогу я разработал плагин, с помощью него сгенерировал пазл, а потом собрал. И мне понравилось.

Сам плагин: https://www.figma.com/community/plugin/1208535579493513112/Puzzle-cutter
Тут еще есть несколько уже готовых к решению пазлов: https://www.figma.com/@kakvam Я там подписал easy/medium/hard, так что можете попробовать собрать easy, где меньше всего деталей, у меня заняло минут 15 его собрать.

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

Тем, кто не умеет пользоваться фигмой, но хочет собирать пазлы онлайн, это может послужить хорошим толчком освоиться в фигме, особенно если и так подумывали. Фигма же сейчас дико популярна, среди дизайнеров веба это уже внегласно основной инструмент. Я в свое время баловался с фотошопом, когда первый раз увидел фигму, всё в ней было прям интуитивно понятно, никаких курсов и т.д. я не проходил, чтобы начать пользоваться.

Ниже рекомендации по моему опыту о процессе сбора и генерации пазлов с помощью плагина

Перемещение элементов в фигме делается мышью, для выделения нескольких элементов нужно зажать Shift и прокликать всё, что вы хотите выделить. Для зума зажимаем Ctrl и крутим колесиком, для передвижения холста можно зажать колесико и двигать мышью. В фигме есть примагничивание ближайших элементов, но иногда придется очень сильно приблизиться, чтобы сдвинуть элемент ровно на один пиксель. Если уже удерживаете элемент, то вместе с зажатым курсором можно использовать скролл для перемещения холста вверх/вниз (в моей мыши еще и горизонтально можно), а также можно параллельно зажать Ctrl и зумиться с помощью скролла. Чем больше деталей собрано, тем лучше фигма будет примагничивать следующие. Начинайте собирать пазл с краев =)

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