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

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

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

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

вот сейчас мы дружно собираем пазл на 390 деталей
вот сейчас мы дружно собираем пазл на 390 деталей

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

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

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

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

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

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

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

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

5.8K5.8K показов
860860 открытий
11 репост
2 комментария

Классная идея

Ответить

Чем-то напомнило игры в экселе, автор молодец

Ответить