Кстати, версия 4.3 вышла.
Мой обзор на английском можно почитать тут
А на русском - постом выше =)

#pie #fun
Недавно я наткнулся на библиотечку Cuberto с реализацией Liquid Swipe, и подумал, что было бы неплохо реализовать подобный переход в ProtoPie.
Подумал-подумал и сделал)
Можно лайк на дрибл воткнуть
А можно не втыкать

Продолжу публиковать решения на вопросы, возникающие у комьюнити)

#faq #pie #tips #hack

Q: Как изменить скорость или анимацию перелистывания у Page Container?
A: У стандартного Page Container такой возможности нет, однако никто не мешает сделать аналогичный кастомный пейджинг из обычного горизонтального Scroll Container.

1. Создаем контейнер, устанавливаем тип скролла Scroll, направление - горизонтальное, параметр Overscroll ставьте на своё усмотрение (его кстати тоже можно сделать кастомным, но об этом в другой раз)
2. Запихиваем странички, которые должны скроллится внутрь контейнера, расставляем с нужными отступами, наводим красоту (у последнего блока необходимо увеличить ширину контейнера на расстояние равное ширине между блоков, чтобы при скролле всё было ровно)
3. Теперь нам нужно определить ширину блока - т.е. на сколько будет автоматически проскралливаться контент. Считается она так - берем ширину блока контента (в моем примере 311) и прибавляем отступ, который будет между блоками (у меня это 16, итого - 327)
4. Создадим переменную, которая будет отвечать за номер страницы (в примере current)
5. Настраиваем сам скролл. Триггером для перелистывания будет служить Touch Up по скролл-контейнеру.
6. Нужно определить в какую сторону мы делаем скролл. Для этого проверяем предустановленную переменную $touchVelocityX. Эта переменная имеет положительное значение, когда тач курсор двигается вправо, и отрицательное значение при движении влево.
7. Также в условиях добавим ограничения листания, проверяя переменную current. Листаем вправо только когда current > 0, а влево, когда current < кол-ва слайдов (в примере 4, но т.к. счёт с 0, то < 3)
8. Внутрь условия листания мы добавляем изменение номера страницы делая Assign current = current+1, а затем сам скролл. Скролл делается на ширину блока умноженную на номер страницы. Для первой страницы 0*327=0, для второй страницы 1*327=327 итд
9. Аналогичные действия для листания вправо, только номер страницы уменьшается Assign current = current-1
10. Ну и настроить эффект и скорость скролла можно изменяя параметр изинг у скролла в обоих условиях.

#hardware #pie #article
Тони Ким в очередной раз показывает, как подружить Arduino и ProtoPie.
Если вдруг, так оказалось, что у вас нет под рукой Ардуино, то можно прост поиграть в игру, используя клавиатуру (стрелочки и пробел).

Кстати, если интересна тема, то можете еще почитать его статью 3-х летней давности.

Чо делать на карантине, как не собирать своих роботов?)

#pie #fun #experiment
Retro Protopie =)
Вспомнил школьные годы и свои первые интерфейсы для консольных программ. Раньше экран мерили не пикселями и дюймами, а количеством строк и столбцов, что и навело меня на мысль из текстового слоя сделать поле для рисования)
Потребовалась 1 формула, чтобы сопоставить координаты мыши с нужным символом и поменять его с пустого на полный.
Ну а с помощью компонентов, можно и цвета добавлять)
Пригодится ли это? А какая разница, если по фану)

​​#challenge #fun

Окей) Тогда попробуем расширить аудиторию для привлечения новичков.
Хееей, репостните в свои крутые каналы? =)

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

Собственно любой дизайнер может начать знакомство с этой замечательной программой, скачав триалку на 7 дней и сделать такой переход получить ключ на 4 месяца, потом, по моему опыту, с одного проекта лицензия на год легко окупается)

Ну а если вы уже пользуетесь паем, можете ради фана поучаствовать и прислать мне свою реализацию) и заходите в наш чатик, там есть много интересного

P.S. Это не какая-то реклама от протопая, они даж, скорее всего, не в курсе... Но если эксперимент будет удачный - можно будет попробовать организовать подобные конкурсы-челленджи на постоянной основе, хз).

​​#challenge #pie #fun
Эксперимент получился вполне интересным.
Пришел к выводу, что те, кто может запилить подобный переход уже и так имеют лицензию) Ну и охват был небольшим) Однако в итоге вместо планируемого одного победителя - три человека получило ключи на 4 месяца лицензии.

Всего мне прислали около 12 реализаций. ("около", потому что пара примеров были как раз "около" того что надо было прислать), Большинство участвовало по фану и 7 человек отказались от подарка.

Топ-2 первых приславших реализацию:
@sunnyexe https://cloud.protopie.io/p/4076e8737a
@GearFX https://cloud.protopie.io/p/8f1f1b22c9
В них я, собственно, и не сомневался) Эти ребята часто помогают новичкам в нашем чате, за что им большой респект. Ключ от пая им ни к чему, они и так являются обладателями лицензии.

А теперь топ-3 приславших свой пример и получивших приз:
1. @eugenerifan https://cloud.protopie.io/p/06a5ba0a28
2. @bs_ace https://cloud.protopie.io/p/bde08102c7
3. @UXzavr https://cloud.protopie.io/p/5cee8049f5
Поздравляю ребят и надеюсь, что 120 дней лицензионного протопая им во многом помогут =)

P.S. И, мне хотелось бы отметить работу Маргариты @Ikkizento, которая тоже участвовала ради фана и имеет лицензию. Реализация получилась очень аккуратная и удобная для использования.

Ну и заодно покажу своё решение, которое можно переиспользовать на любое количество страниц с любым контентом.
+ ниже закину видео, как добавлять новую сцену в этот слайдер

#pie #meetup
В связи со всякими там карантинами, митап, планируемый в Лондоне решили провести онлайн. Поэтому к нему могут присоединиться все желающие)
Митап будет на следующей неделе, во вторник, 28го апреля, в 19:00 по Московскому времени.
Подробности тут: https://www.meetup.com/ru-RU/ProtoPie-London/events/269949552/

P.S. На митапе будет моя любимая тема "Бессмысленный прототип" примерно вот с такими прототипами: https://cloud.protopie.io/p/20893284cf

Пойдёте?

#meetup
Видео с Лондонского онлайн-митапа
https://www.youtube.com/watch?v=_DGLh1r-jKA&

#pie #fun #experiment
Градиентов пока нет, но кто меня остановит? =) https://cloud.protopie.io/p/2075794b79

#news
Новый сайт выкатили https://www.protopie.io/

#news
Ну и внезапный релиз 5.0 раньше обещанных сроков удивляет

#news #challenge
Конкурсы подъехали. Макбук я наверно себе заберу), но там ещё есть наушники и годовые подписки..
Шутка, конечно же. На самом деле критериев оценки нет, поэтому победить может каждый. Вот тут то точно сработает корейский рандом)
https://dribbble.com/shots/12485507-ProtoPie-5-0-Playoff-Interactions-Speak-Louder-Than-Words

#news #challenge #pie
Итак конкурс таки завершился. https://blog.protopie.io/14-interactive-prototypes-reimagining-everyday-interfaces-688699f94695
1 место: Khonok Lee и его календарь

2 места:
Ahmed Amr
Edmund Boey
Briandito Priambodo

3 места:
Arpit Agrawal
Vikram Singh
Junhyuk Jang
Migue Nodos
Kalpesh Prithyani
Kang Changmo
Ariunbold Ankhaa
Я тут тоже в призёрах
Max A. Acres
Jiaxin Z

Поигрался с войс-прототипированием в бетке 5.1.
Вот примерное описание функционала. Вроде круто.
https://telegra.ph/Protopie-51-09-17
Какие-ньть прикольные прототипчики тоже покажу, как доделаю)

а вот и релиз 5.1 https://blog.protopie.io/protopie-5-1-give-your-interactions-a-voice-444e54b721c9

​​Редко такое бывает)

Нахожусь в поиске специалиста для решения дизайнерской задачи – на основе эскизных макетов, раскадровок и текстовых описаний нужно сделать интерактивный прототип будущего продукта (сервис в сфере nocode-разработки), и на его основе сделать небольшие анимированные иллюстрации, которые бы объяснили как будут работать ключевые интерфейсные механики (примерно, как это сделано на сайтах
retool.com или airtable.com)

Кому было бы интересно взяться за такую работу? Пишите в личку @gordeev – обсудим.

Релизнули 5.2
Основной упор был сделан на новом плагине для импорта из фигмы.
https://blog.protopie.io/protopie-plugin-for-figma-a-revamped-import-experience-to-boost-productivity-5758892c4c58?gi=c62b4ee4ba2b