Захожу я в слак протопая, а там армяне в нарды играют https://cloud.protopie.io/p/93c27347a8

А вот и псевдо 3д игры подвезли)) https://cloud.protopie.io/p/7800901f65

Основной упор новой версии (которая скоро выйдет) - плагин для Adobe XD.
Также в обновлении добавят поддержку ориентации телефона (по факту просто в параметре Device можно будет указать ориентацию) туда же добавят шаблончики для iPhone 12 и Google Pixel 5.
Нуу.... и добавят хоткей Ctrl(CMD)+X для вырезания слоя! 😂

Вот и 5.3 подъехала https://blog.protopie.io/adobe-xd-protopie-the-perfect-duo-in-your-design-stack-e0024262e080
а плагин к Xd возможно даже лучше плагина к фигме)

Внезапное обновление ProtoPie Cloud:

1. Добавили возможность делать публичные рецепты взаимодействий.
Вот так это выглядит

2. Теперь можно добавить пароль на облачный прототип.
Например так (пароль 123456)

Кстати, если пирог запаролен, то ссылка на его рецепт тоже требует пароль. Пример (пароль 123456)

Ну и подробнее можно почитать в блоге

Даж интересно стало. Чо там у кого по юиксу.

Вот вам загадки Жеки Фреско:
1. В чем отличие флинга от свайпа?
2. А чем они отличаются от драга?
3. Почему в протопае есть драг, флинг, но нету свайпа?
Пишите ваши идеи в чат, а я скажу кто молодец)

Вчера было обсуждение идей сообщества с командой разработчиков.

Вкратце такие дела:

1. Export to html - Очень много запросов на эту функцию. Мы никогда не ставили цель делать конечный продукт в среде Protopie, поэтому не очень понимаем этот запрос. Насчёт функции экспорта в html для оффлайн демонстрации прототипа - у нас ведутся работы.

2. In-built User Testing Platform - Мы рассматриваем возможность сотрудничества с некоторыми инструментами пользовательского тестирования вместо того, чтобы встраивать его в ProtoPie.
Сейчас обсуждаем и смотрим что лучше подойдет из этих сервисов: Maze, UXArmy, UserTesting, Lookback.

3. Hide Cursor in Preview - Вы хотите, чтобы значок курсора был скрыт в записанном файле или во время записи в режиме предварительного просмотра? Если и то, и другое, по каким причинам вам нужна возможность скрыть его во время записи? Разве это не затруднит испытание прототипа? Возможность смены типа курсора (на руку или стрелочку) находится в разработке.

Q: Как определить пересечение двух объектов при перетаскивании?
A: Для веб прототипов можно использовать переменную, которая будет различать движется мышь пустая или с объектом.

Touch Down (Rectangle 1): Assign (z = 1)
Touch Up (Rectangle 1): Assign (z = 0)

• Затем просто используем функции Mouse Over и Out:

Mouse Over (Oval 1): Cond (z = 1): Scale (Oval 1 = 200%)
Mouse Out (Oval 1): Cond (z = 1): Scale (Oval 1 = 100%)

• P.S. И квадрату и кругу я поставил Origin point в центр. Так удобнее делать проверки)

• P.P.S. в этой реализации, необходимо не забыть поставить галочку в параметрах квадратика Make lower layers Touchable.

• Реализация в прикрепленном пироге на первой сцене с названием Web.


Q: А как сделать подобное на мобилках? ведь в смартфонах нет мыши, чтобы детектить Mouse Over?
A: Самым очевидным и простым способом будет проверка попадания координат квадрата в координаты квадрата в котором находится окружность.

• Для того чтобы триггер Detect определял движение квадратика я использую трюк с суммированием координат:

Detect (Rectangle 1: X): Assign (z = Rectangle 1.x + Rectangle 1.y)
Detect (Rectangle 1: Y): Assign (z = Rectangle 1.x + Rectangle 1.y)

• Таким образом при любом движении квадратика переменная z будет изменяться.

Detect (z):

• Отслеживая её изменения делаем 4 проверки:
1. Больше ли X квадрата, чем в X круга минус радиус круга
2. Меньше ли X квадрата, чем в X круга плюс радиус круга
3. Больше ли Y квадрата, чем в Y круга минус радиус круга
4. Меньше ли Y квадрата, чем в Y круга плюс радиус круга

Condition:
Rectangle 1 (X) > 138 and
Rectangle 1 (X) < 238 and
Rectangle 1 (Y) > 351 and
Rectangle 1 (Y) < 451

• Только при соблюдении всех 4-х условий можно считать что объекты пересекаются.

(Oval 1): Factor 200%

• Однако надо добавить еще 4 условия при которых надо возвращать овал в исходное положение:

Сondition: Rectangle 1 (X) <= 138
Scale (Oval 1): Factor 100%
Сondition: Rectangle 1 (X) >= 238
Scale (Oval 1): Factor 100%
Condition: Rectangle 1 (Y) <= 351
Scale (Oval 1): Factor 100%
Condition: Rectangle 1 (Y) >= 451
Scale (Oval 1): Factor 100%

• Реализация в прикрепленном пироге на второй сцене с названием Easy.


Q: А что если овал перемещается?
A: Делаем всё тоже самое, только вместо точных значений ставим координаты овала и его радиус.

• Реализация в прикрепленном пироге на третьей сцене с названием Medium.


A: Ну и бонусом элегантная реализация используя знания геометрии средней школы 😂

• Суть в том, что в предыдущих вариантах проверка срабатывала при попадании в квадрат, в который вписан круг, тем самым, по углам этого квадрата, где нет круга - проверка тоже срабатывала.
• Чтобы это избежать я делаю проверку попадания точки в круг:

(x - x0)^2 + (y - y0)^2 <= R^2

где x и y - координаты вашей точки, x0 и y0 - координаты центра окружности, R - радиус окружности, ^2 - возведение в квадрат. Если условие выполняется, то точка находится внутри (или на окружности, в случае равенства левой и правой частей). Если не выполняется, то точка вне окружности. В Protopie это делается 2мя условиями:

Detect (z):
Condition 1:
pow((Rectangle 1.x - Oval 1.x),2) + pow((Rectangle 1.y - Oval 1.y),2) <= pow((Oval 1.width/2),2)
(Oval 1): Factor 200%
Condition 2:
pow((Rectangle 1.x - Oval 1.x),2) + pow((Rectangle 1.y - Oval 1.y),2) <= pow((Oval 1.width/2),2)
(Oval 1): Factor 100%

• pow (a,b) - функция возведения числа a в степень b

• Реализация в прикрепленном пироге на четвертой сцене с названием Hardcore.

ProtoPie решили отжать праздник числа Пи (Pi = π = 3.14 = 3/14 = March 14 = #PieDay! - марта четырнадцатого, по американской записи) и теперь это праздник не только Пи но и Пие (((пирога)))
Собственно в честь этого события на дрибле запустили новый конкурс.
Правила такие же "офигенские", как и в прошлый раз "сделайте чо-ньть интерактивное"

Призы:
🥇 1-й (1 человек): iPad Pro 12,9 дюйма + Apple Pencil (Зачем протопаевцу планшет с пенсилом?)
🥈 2-й (3 человека): AirPods Max (а они к андроиду кста цепляются? или на авито продавать?)
🥉 3-й (10 человек): индивидуальная подписка на ProtoPie на 1 год (спасибо за еще один год с подпиской)

Работы заканчивают принимать 15 марта.

Если интересно посмотреть на победителей прошлого конкурса - то это вот тут

P.S. на этот раз работы поинтересней начали заливать

Вот и мой флекстайм..
Выкатил работу на конкурс)
https://dribbble.com/shots/15289513-ProtoPie-Minesweeper-1-0

Кста) Записывал весь процесс создания - получилось больше 70 гигов духоты. Попробую из этого что-то смонтировать, если получится говно - подберу какую-ньть бесящую всех музычку и изобрету новый вид видосов - Speed prototyping (хотя наверно индусы уже давно такое изобрели)

Вот и закончился очередной конкурс дриблшотов. Как всегда в основном побеждают не очень удобные, но красивые анимации)

🥇 1st place:
Richard Oldfield - норм на самом деле, но можно было без багов сделать) И даже не дал скачать пирог.

🥈 2nd place:
Simone Menegaldo
Lautaro Ferreyro
Ronnel Ocampo

🥉 3rd place:
Nathaniel Abrea
Mateusz Jurkiewicz
Patryk Nawrocki
Abhas Sinha
Nilay Shukla
Simon Vinther Nielsen
Jakub Nagiet
Irfan Aziz
Nestor - ха. победил дак хант, который чувак взял и переделал, лол
Ömer Fatih Ceviz

Ща потестирую функцию просмотра нескольких сцен) Дали дев билд но он постоянно вылетает) С производительностью, кстати, всё не так плохо, как я предполагал. Какая-то оптимизация всё же есть.

Сегодня вышла версия 5.4. Почитать можно тут

Кратко опишу новые функции которые удалось потестировать:
1. Добавили плагин для Sketch (он лучше и быстрее старого импорта, но баги всё же есть)
2. Добавили возможность скруглять углы у прямоугольников индивидуально. (мы ведь именно это и ждали)
3. Добавили горячих клавиш. (кстати список хоткеев тут)
• Заблокировать / Разблокировать слой: ⌘ + ⇧ + L или Ctrl + ⇧ + L
• Скрыть / Показать слой: ⌘ + ⇧ + H или Ctrl + ⇧ + H
• Добавить Text Layer: T (а раньше создавался триггер тап)
• Конвертировать в компонент: ⌘ + K или Ctrl + K (в винде не работает кста)
• Показать оригинальное название триггера или действия: H (имеется ввиду, когда ты Tap переименовал в Трогни - то по хоткею увидишь что за триггер был)
4. Редизайнули окно предпросмотра. (ничо, привыкнем)
5. На временной шкале теперь отображаются значения. (ну удобно, да)
6. Добавили Избранные библиотеки и функционал добавления библиотеки в избранное
7. Улучшили поиск по компонентам (да вроде и старый работал)
8. Добавили в поля ввода значений плейсхолдер с текущими значениями (Удобно, но раньше они были вверху с превью элемента. а щас выпилили)

Не потестил ток поддержку Apple Silicon M1 - но говорят что работает оч хорошо.

Отличный подарок сегодня мне на день рождения приготовили Протопаевцы.

Небольшой слив функционала ProtoPie 5.5:
Использование формул в свойстве Seek to для воспроизведения медиафайлов. (Вот этот тикет)

Меня тут на стрим позвали к @uxlive, планируем лампово посидеть, обсудить инструменты, немного о дизайне и в целом о прототипировании.. Но куда эта затея нас утянет - вопрос хороший. Ссылочку кину в коменты, как настроим всё

P.S. И сегодня кстати 5.5 релизнулась. Видимо на стриме и посмотрим новый функционал, если не сильно душным окажется.

Не дошли мы вчера до обзора функций нового обновления, поэтому вкратце опишу что там как.

1. Поддержка формул в Playback.
Есть официальный урок, который научит вас делать видеоплеер..
Но мне кажется киллерфичей добавления этого функционала должна была стать возможность делать сайты-лендосы "как у эпл", а именно завязать проигрывание видео файла на скролл сайта, но пока, это работает не оч плавно.

2. Fill для изображений и шейпов.
Сейчас это сделано, чтобы решить проблему при импорте дизайнов из Figma, Sketch или Adobe XD и искажением изображений, у которых стоит Fit или Stretch. Я надеюсь, что в будущем можно будет через формулу подсовывать другие ресурсы в эти "контейнеры" для изображения.

3. Изменение UX создания слоев.
Щелкните и перетащите, чтобы создать слой. Многие дизайнеры привыкли к такому поведению: создание слоя-фигуры путем щелчка и перетаскивания. Теперь ProtoPie работает также.

4. Горячие клавиши.
Появилось окно показывающее все горячие клавиши ⌃ + ⇧ + / (macOS) или Ctrl + ⇧ + / (Windows).
Свои назначать и менять пока нельзя, но я думаю к этому всё и идет. К сожалению совсем нет хоткеев для создания триггеров, зато добавили хоткей для выбора цвета с помощью пипетки, не переходя на панель свойств. Выберите слой и используйте хоткей: i (macOS и Windows) или ⌃ + C (macOS).

5. Поддержка формул для переменных
Очень удобное нововведение, которое позволяет сразу в переменную вписать, например координату мыши $mouseX. Раньше приходилось делать триггер старт, в нем присваивать переменной значение мыши и еще и бесконечный репит делать.. Астрологи объявили неделю формул в переменных - количество триггеров сократилось вдвое.

6. Новые функции формул parent(layerName:LAYER).property и initial(source:TEXT)
Наконец-то дают обратиться к другим слоям и их свойствам. Описания добавлены в документацию
Из документации не очень понятно для чего нужны эти функции, но они крутые) я попозже постараюсь придумать наглядные примеры применения этих функций.

7. Небольшие улучшения интерфейса
Улучшили рендеринг слоев и интерактивных панелей (и поправили некоторые баги с мерцаниями)
Убраны лаги в колорпикере (я что-то не замечал их)
Длина аудио, видео и файлов Lottie, отображаемых на панели свойств
Немного переработали облачный режим, опять перепрятав все кнопки в новые места

О нет. Я теперь в тиктоке.
Прототип этот кстати переделал и запилил даже пару уровней. Вдохновлено корейским сериалом Squid Game.
Игра пока ещё в разработке. Вот вам эксклюзив альфа версия. https://cloud.protopie.io/p/94e8bb1209

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

Кароч ща попробую запустить тестовый стримчик тут, в телеграме, посмотрим на новую версию Протопая.

Интересные статейки, как проводить юзабилити тестирования с протопаем, однако всегда есть нюансы:
ProtoPie with UserTesting
ProtoPie with Lookback
ProtoPie with UserZoom Go