This media is not supported in your browser
VIEW IN TELEGRAM
Основной упор новой версии (которая скоро выйдет) - плагин для Adobe XD.
Также в обновлении добавят поддержку ориентации телефона (по факту просто в параметре Device можно будет указать ориентацию) туда же добавят шаблончики для iPhone 12 и Google Pixel 5.
Нуу.... и добавят хоткей Ctrl(CMD)+X для вырезания слоя! 😂
Также в обновлении добавят поддержку ориентации телефона (по факту просто в параметре 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 возможно даже лучше плагина к фигме)
а плагин к Xd возможно даже лучше плагина к фигме)
Medium
Adobe XD + ProtoPie: The Perfect Duo in Your Design Stack
Design like you always imagined with Adobe XD. Add a touch of magic with conditional and dynamic interactions in ProtoPie.
Внезапное обновление ProtoPie Cloud:
1. Добавили возможность делать публичные рецепты взаимодействий.
Вот так это выглядит
2. Теперь можно добавить пароль на облачный прототип.
Например так (пароль 123456)
Кстати, если пирог запаролен, то ссылка на его рецепт тоже требует пароль. Пример (пароль 123456)
Ну и подробнее можно почитать в блоге
1. Добавили возможность делать публичные рецепты взаимодействий.
Вот так это выглядит
2. Теперь можно добавить пароль на облачный прототип.
Например так (пароль 123456)
Кстати, если пирог запаролен, то ссылка на его рецепт тоже требует пароль. Пример (пароль 123456)
Ну и подробнее можно почитать в блоге
👍1
Даж интересно стало. Чо там у кого по юиксу.
Вот вам загадки Жеки Фреско:
1. В чем отличие флинга от свайпа?
2. А чем они отличаются от драга?
3. Почему в протопае есть драг, флинг, но нету свайпа?
Пишите ваши идеи в чат, а я скажу кто молодец)
Вот вам загадки Жеки Фреско:
1. В чем отличие флинга от свайпа?
2. А чем они отличаются от драга?
3. Почему в протопае есть драг, флинг, но нету свайпа?
Пишите ваши идеи в чат, а я скажу кто молодец)
This media is not supported in your browser
VIEW IN TELEGRAM
Вчера было обсуждение идей сообщества с командой разработчиков.
Вкратце такие дела:
1. Export to html - Очень много запросов на эту функцию. Мы никогда не ставили цель делать конечный продукт в среде Protopie, поэтому не очень понимаем этот запрос. Насчёт функции экспорта в html для оффлайн демонстрации прототипа - у нас ведутся работы.
2. In-built User Testing Platform - Мы рассматриваем возможность сотрудничества с некоторыми инструментами пользовательского тестирования вместо того, чтобы встраивать его в ProtoPie.
Сейчас обсуждаем и смотрим что лучше подойдет из этих сервисов: Maze, UXArmy, UserTesting, Lookback.
3. Hide Cursor in Preview - Вы хотите, чтобы значок курсора был скрыт в записанном файле или во время записи в режиме предварительного просмотра? Если и то, и другое, по каким причинам вам нужна возможность скрыть его во время записи? Разве это не затруднит испытание прототипа? Возможность смены типа курсора (на руку или стрелочку) находится в разработке.
Вкратце такие дела:
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.
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 Cloud
hitting a point in a circle | ProtoPie Cloud
This prototype was made with ProtoPie, the interactive prototyping tool for all digital products.
This media is not supported in your browser
VIEW IN TELEGRAM
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. на этот раз работы поинтересней начали заливать
Собственно в честь этого события на дрибле запустили новый конкурс.
Правила такие же "офигенские", как и в прошлый раз "сделайте чо-ньть интерактивное"
Призы:
🥇 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 (хотя наверно индусы уже давно такое изобрели)
Выкатил работу на конкурс)
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
🥇 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
Dribbble
The Adventures of Proto
The Adventures of Proto designed by Richard Oldfield. Connect with them on Dribbble; the global community for designers and creative professionals.
Сегодня вышла версия 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 - но говорят что работает оч хорошо.
Кратко опишу новые функции которые удалось потестировать:
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
What's New in ProtoPie? Individual Corner Radius | ProtoPie Blog
ProtoPie 5.4 comes with new and long awaited features! Individual corner radius and Apple Silicon (M1) compatibility. See here for details.
This media is not supported in your browser
VIEW IN TELEGRAM
Отличный подарок сегодня мне на день рождения приготовили Протопаевцы.
Небольшой слив функционала ProtoPie 5.5:
Использование формул в свойстве Seek to для воспроизведения медиафайлов. (Вот этот тикет)
Небольшой слив функционала ProtoPie 5.5:
Использование формул в свойстве Seek to для воспроизведения медиафайлов. (Вот этот тикет)
Пока мы ждём интересных обновлений, продуктологи протопая заянты очень важным исследованием. Они считают, что название Scene для холста - не очень удобное и хотят переименовать его в Screen.
Я накинул еще вариантов, го голосовать.
Я накинул еще вариантов, го голосовать.
Anonymous Poll
12%
Scene
39%
Screen
26%
Artboard
49%
Frame
4%
Flow
Меня тут на стрим позвали к @uxlive, планируем лампово посидеть, обсудить инструменты, немного о дизайне и в целом о прототипировании.. Но куда эта затея нас утянет - вопрос хороший. Ссылочку кину в коменты, как настроим всё
P.S. И сегодня кстати 5.5 релизнулась. Видимо на стриме и посмотрим новый функционал, если не сильно душным окажется.
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. Поддержка формул для переменных
Очень удобное нововведение, которое позволяет сразу в переменную вписать, например координату мыши
6. Новые функции формул
Наконец-то дают обратиться к другим слоям и их свойствам. Описания добавлены в документацию
Из документации не очень понятно для чего нужны эти функции, но они крутые) я попозже постараюсь придумать наглядные примеры применения этих функций.
7. Небольшие улучшения интерфейса
Улучшили рендеринг слоев и интерактивных панелей (и поправили некоторые баги с мерцаниями)
Убраны лаги в колорпикере (я что-то не замечал их)
Длина аудио, видео и файлов Lottie, отображаемых на панели свойств
Немного переработали облачный режим, опять перепрятав все кнопки в новые места
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, отображаемых на панели свойств
Немного переработали облачный режим, опять перепрятав все кнопки в новые места
ProtoPie
How to Prototype a Video Player in ProtoPie
Learn how to create a fully functioning video player prototype with play/pause, volume control, and more.
О нет. Я теперь в тиктоке.
Прототип этот кстати переделал и запилил даже пару уровней. Вдохновлено корейским сериалом Squid Game.
Игра пока ещё в разработке. Вот вам эксклюзив альфа версия. https://cloud.protopie.io/p/94e8bb1209
P.S. тестируя такие большие прототипы (много медиа, и одновременных расчетов) на андроид телефонах, понял, что если на телефоне свободного места меньше 2 Гб - прототип неистово тормозит. Возможно это наблюдение кому-то будет полезно.
Прототип этот кстати переделал и запилил даже пару уровней. Вдохновлено корейским сериалом Squid Game.
Игра пока ещё в разработке. Вот вам эксклюзив альфа версия. https://cloud.protopie.io/p/94e8bb1209
P.S. тестируя такие большие прототипы (много медиа, и одновременных расчетов) на андроид телефонах, понял, что если на телефоне свободного места меньше 2 Гб - прототип неистово тормозит. Возможно это наблюдение кому-то будет полезно.
TikTok
protopie on TikTok
#Prototype inspired in the famous series #squidgame #protopie #prototyping #design #productdesign #appdesign #Figma #adobexd #ux #ui #uxdesign #uidesign #interaction #animation #오징어게임
This media is not supported in your browser
VIEW IN TELEGRAM
Кароч ща попробую запустить тестовый стримчик тут, в телеграме, посмотрим на новую версию Протопая.
Интересные статейки, как проводить юзабилити тестирования с протопаем, однако всегда есть нюансы:
ProtoPie with UserTesting
ProtoPie with Lookback
ProtoPie with UserZoom Go
ProtoPie with UserTesting
ProtoPie with Lookback
ProtoPie with UserZoom Go
ProtoPie
How to Do Remote Usability Testing with ProtoPie & UserTesting
Make your usability testing a success when using ProtoPie and UserTesting
This media is not supported in your browser
VIEW IN TELEGRAM
Достал из проекта реализацию выделения нескольких объектов. Самих объектов может быть сколько угодно - копии компонента. Так же можно им менять позицию.
Помню, что долго мучался с прямоугольником самого выделения, а именно чтобы он рисовался в любом направлении. Протопай не умеет делать отрицательный размер объектов. Пробовал вращать прямоугольник, однако это всё еще сильнее путало. В итоге сделал 4 прямоугольника - для каждой четверти и синхронизировал их.
https://cloud.protopie.io/p/4b84d92e4b
Помню, что долго мучался с прямоугольником самого выделения, а именно чтобы он рисовался в любом направлении. Протопай не умеет делать отрицательный размер объектов. Пробовал вращать прямоугольник, однако это всё еще сильнее путало. В итоге сделал 4 прямоугольника - для каждой четверти и синхронизировал их.
https://cloud.protopie.io/p/4b84d92e4b
Наконец-то появились нормальные способы проводить тестирование на пользователях и собирать данные.
Ребята из UseBerry запилили альфаверсию интеграции с Protopie!
Подробнее тут: https://www.useberry.com/integrations/protopie/
Ребята из UseBerry запилили альфаверсию интеграции с Protopie!
Подробнее тут: https://www.useberry.com/integrations/protopie/
Useberry
User testing for ProtoPie prototypes | Useberry
User Testing for ProtoPie Prototypes. Test your Pies on Useberry, gain rich user insights in minutes, with a variety of testing methods. Start for free now
This media is not supported in your browser
VIEW IN TELEGRAM
Довольно популярная тема - завязать проигрывание видео на скролл.
И извечный вопрос - "Как сделать как на сайте у эпол?"
Если делать напрямую - то такой интерактив выглядит не плавным и лагучим. Я вот тестил, когда дали возможность писать формулу и управлять временем проигрывания - https://cloud.protopie.io/p/205816fa4e
Надо потестить вариант с видосом в 120фпс и формулой которая чётко переводит миллисекунды в кадры, но мне пока лениво.
Кстати наш подписчик Патрик запилил свой вариант реализации: https://youtu.be/-zl2oqktOCU работает плавнее чем напрямую, но всё еще не идеально.
Ну и ладно там протопай. Тут многие знакомые разрабы - убили не один десяток часов в прошлом году, чтобы сделать скролл плавненьким. И тут мне внезапно говорят что в редимаге уже 3 года есть элемент "Shots" который справляется с такой задачей на изи, пока весь мир страдает..
Может быть вы знаете еще какие решения и реализации этой темы? В протопае и не только.
И извечный вопрос - "Как сделать как на сайте у эпол?"
Если делать напрямую - то такой интерактив выглядит не плавным и лагучим. Я вот тестил, когда дали возможность писать формулу и управлять временем проигрывания - https://cloud.protopie.io/p/205816fa4e
Надо потестить вариант с видосом в 120фпс и формулой которая чётко переводит миллисекунды в кадры, но мне пока лениво.
Кстати наш подписчик Патрик запилил свой вариант реализации: https://youtu.be/-zl2oqktOCU работает плавнее чем напрямую, но всё еще не идеально.
Ну и ладно там протопай. Тут многие знакомые разрабы - убили не один десяток часов в прошлом году, чтобы сделать скролл плавненьким. И тут мне внезапно говорят что в редимаге уже 3 года есть элемент "Shots" который справляется с такой задачей на изи, пока весь мир страдает..
Может быть вы знаете еще какие решения и реализации этой темы? В протопае и не только.