Figma как инструмент для генерации и сбора пазлов

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

Прежде чем я расскажу подробнее про пазлы и плагин, стоит рассказать небольшую предысторию. Пару месяцев назад у нас с девушкой было мини-соревнование, кто быстрее подготовит детальку пазла в фигме. Девушке тогда это нужно было, чтобы состряпать иконку из нескольких деталей, а я просто мимо проходил и влез со своим азартом. Соревнование я проиграл, но как итог сделал компонент с булевым свойством, выложил в сообщество и написал инструкцию. Спустя вот эти пару месяцев мы вместе с друзьями собирали пазл из 1000 деталей на большом столе. По ходу дела я осознал, что вернусь домой, а там просто нет свободного пространства для пазлов, поэтому думал над тем, как сделать онлайн. Одну детальку я уже делать научился, значит, и целый пазл получится.

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

Плагин я выложил в сообщество, он полностью бесплатный: Puzzle cutter

Позволяет нарезать любое изображение на, в принципе, любое количество деталей. Необходимо задать, сколько деталей будет по горизонтали, и вертикальное количество посчитается в зависимости от размера изображения, после чего плагин нарежет изображение на отдельные элементы (общее количество деталей будет выведено в названии фрейма). Если ничего в настройках не менять, а просто выбрать изображение на холсте и нажать в окне плагина кнопку "Make puzzle", то получится уже собранный пазл:

Если поставить галочку "Shuffle", то детали раскидаются на случайные позиции:

Дальше, используя возможности фигмы, детали необходимо вернуть на свои места поверх изображения в центре. Если хочется посложнее, можно либо воспользоваться галочкой "Rotate", которая еще и покрутит детали, либо удалить образец, либо и то, и другое. Файл ваш, поэтому можно самостоятельно убрать Stroke у всех деталей или поменять цвет/прозрачность/ширину; избавиться от фрейма, в котором всё находится и раскидать детали по холсту; а также дать доступ на редактирование друзьям и/или коллегам, чтобы позвать собирать пазл вместе.

Если стало интересно попробовать, но еще недостаточно мотивации скачать плагин, а потом еще и выбрать подходящее изображение для пазлов, то у меня в Community есть несколько готовых для решения пазлов: https://www.figma.com/@kakvam

Чем лучше вы владеете фигмой и вашими девайсами (клавиатура, мышь), тем интереснее для вас будет процесс сбора. Для начинающих (или желающих начать) в фигме это может послужить способом освоиться с базовыми возможностями: выделение, перемещение, зум, можно еще группировать элементы, понять, как работает примагничивание, на что опирается и т.д. Кстати, в фигме есть внутренний чат, что тоже может быть удобно при совместном решении пазла.

На основе моего опыта и опыта друзей ниже описаны полезные рекомендации по использованию фигмы именно в контексте решения пазлов.

- тачпад лучше не надо - как бы не нахваливали тачпад у маков, но с мышкой процесс будет приятнее;
- выбор элемента делается кликом левой кнопки (далее л. к.) мыши, для перемещения необходимо зажать кнопку;
- если выбрали не то, например, фрейм, в котором находятся элементы, то с помощью двойного клика л. к. мыши можно сделать более точный выбор элемента, аналогично можно зажать Ctrl и кликнуть мышкой в элемент;
- Ctrl + колесико делает приближение/отдаление, при этом важно, где находится курсор мыши;
- для перемещения холста необходимо зажать колесико и двигать мышь;
- еще колесико позволяет сместить холст вверх/вниз, у одной моей мыши колесико вообще позволяет скроллиться горизонтально (влево/вправо);
- в процессе перемещения можно одновременно зажать Ctrl и колесиком приближаться/отдаляться, либо просто колесиком двигаться по холсту (вместе с элементом);
- Shift + клик л. к. мыши позволяет выбрать несколько элементов;
- Ctrl + g позволяет сгруппировать выбранные элементы, но это актуально скорее для больших пазлов и если убрали центральное изображение-подсказку;
- ну и само собой Ctrl + z для отмены последнего действия, если, например, случайно растянули детальку.

Собирать пазлы лучше с краев. Поначалу автоматическое примагничивание в фигме будет даже мешать, поэтому придется с помощью Ctrl + колесико приближаться до отображения пиксельной сетки и сдвигать детали по пикселям. По ходу сбора всего пазла примагничивание будет больше помогать.

Для генерации своего пазла стоит выбирать изображения без монотонных фонов и в принципе без повторяющихся элементов - чем разнообразнее во всех смыслах изображение, тем интереснее из него получится пазл.