Будни разработчика
14.7K subscribers
1.18K photos
334 videos
7 files
2.01K links
Блог Lead JS-разработчика из Хельсинки
Автор: @bekharsky

По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv

Чат: https://t.me/htmlshitchat

№5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978
Download Telegram
#такое дня

Если вам кажется, что прототипы в Figma зашли слишком далеко — вам не кажется.

Как вам прототип в виде имитации восьмибитной игры?

А вот держите: «Figland. Find the forbidden scroll».

Практического смысла не больше, чем у любого другого «игрового» портфолио. Впрочем, заглянуть в исходный файл чтобы посмотреть, как оно сделано и почерпнуть знаний — очень стоит.

Если же желаете знать моё мнение о прототипах: всё хорошо в меру. Показать заказчику — прекрасно. Дать же глубоко проработанный прототип разработчику — высока вероятность, что тот обязательно упустит какие-то состояния из виду, запутавшись в экранах.

Короче, карту компонентов и нормальное ТЗ прототип не заменит, но прекрасно дополнит.

А вот поработать с фокус-группой — это завсегда.

Ну как там, добрались до забытого свитка? :)

#figma #prototype
👍5😁1
This media is not supported in your browser
VIEW IN TELEGRAM
#шок дня

TL;DR: Идем на https://makereal.tldraw.com/, вставляем ключ GPT4, рисуем интерфейс с описанием и нажимаем кнопку Make Real.

Я не то чтобы старательно, но избегал темы ИИ в контексте кодогенерации. Хотя, естественно, использовал и использую для генерации конфигов, тестов, типов. Пару раз пробовал для создания и обработки структур данных.

Просто как-то скучно всё выглядело.

Но тут уже два дня интернет разрывает от работы Стива Руиза, автора офигенной совместной рисовалки диаграмм tldraw: https://tldraw.com/

И называется она Make Real: https://tldraw.substack.com/p/make-real-the-story-so-far?r=1vezzj

Если у вас есть ключ OpenAI GPT4 — вот ссылка на демо: https://makereal.tldraw.com/

Рисуем интерфейс и, например, схему состояний конечного автомата (state machine, проще говоря, схему состояний приложения и его реакцию на внешние действия). Дополняем описанием, группируем и нажимаем кнопку Make Real.

И у вас есть готовое приложение. Не нравится? Выделили результат, описали снова и снова нажали. И так пока не получится.

Это выглядит как волшебство. Работает на GPT-4V aka Vision Model. Особый кайф придает стиль взаимодействия с нейросетью — через холст. В три миллиона раз более наглядно, чем чат или любой конструктор. Повторю: результат работы возвращается на холст в виде рабочего приложения и превращается в часть диаграммы. Это пушка.

Если ключа нет — очень рекомендую хотя бы прочитать статью выше и посмотреть примеры.

Лень и это? Ну хотя бы на твиттер тогда зайдите: https://twitter.com/tldraw, примеров уже десятки!

Это потрясающее путешествие. Прототипы выйдут на новый уровень. Ждём подобное в Figma? :)

#ai #tldraw #future #prototype
👍151🤩1
This media is not supported in your browser
VIEW IN TELEGRAM
#видео дня

Я, конечно, не дизайнер, но Figma пользуюсь, естественно. И постоянно на связи с нашим штатным дизайнером команды.

Иногда мне кажется, что возможности Figma почти безграничны, а потом оказывается, что это и правда так.

Например, вы знали, что есть плагины, позволяющие синхронизировать ваши макеты с реальными данными? Например, из Google Sheets.

Вот и я не знал.

Пока не увидел это: https://www.youtube.com/watch?v=3nXbUH9YYgo

Ссылка на обучающий файл из презентации: https://www.figma.com/community/file/1207693268826001427

Сам плагин: https://www.figma.com/community/plugin/735770583268406934/google-sheets-sync

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

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

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

Пользуемся, котаны! И делитесь вашим мнением о расширенных прототипах.

#figma #design #prototype
👍8🤩4