Привет друзья! Сегодня мы рады представить вам новую платформу Sizze. Здесь вы можете c легкостью создать прототипы экранов мобильных приложений с помощью готовых компонентов и мгновенно выгрузить результат в код React или HTML.
Мы являемся комплексным решением для разработки дизайна и его мгновенной интеграции в любой проект, тем самым облегчая работу и сохраняя время разработчикам и дизайнерам.
Основные преимущества Sizze:
1. Код React
Теперь можно сразу смотреть код элемента и быстро копировать его. Мы сделали так, чтобы код был идеальной структуры и его можно было с легкостью внедрять в любой проект.
В будущем мы планируем разработать экспорт и для других популярных UI фреймворков.
2. База компонентов
Для начинающих пользователей или для пользователей, ценящих время, мы разработали готовые шаблоны которые с легкостью кастомизируются. В нашей базе есть все доступные элементы iOS-приложений (в будущем Android и Desktop). Это существенно экономит время и дает возможность для быстрой сборки качественных прототипов.
На данный момент мы еженедельно обновляем список компонентов, следуя современным тенденциям мобильного дизайна.
3. Режим просмотра
Когда мы разрабатывали эту функцию, мы не хотели что бы это были просто статичные скриншоты, мы хотели добавить динамику проекту. Специально для этого теперь в режиме просмотра у вас есть возможность видеть ховеры и нажатия для созданных страниц, а также имеется возможность переключаться между светлой и темной версией.
4. Функциональность
Мы знаем как для юзеров важно, что бы редактор был удобным и быстрым, поэтому оптимизировали его под все браузеры и добавили основные функции современных графических редакторов.
sizze.io Design to code
Задумка интересная, но рановато конечно вынесен в публичную версию, так как в процессе тестирования напомнил скорее сломанную версию Figma.
1) Базовое приложение так и лежит на бесплатном домене Netlify
2) Скачать архив целиком так и не вышло (только посредством постраничного просмотра кода)
3) Согласитесь, что все-таки сборка рабочего проекта подразумевает гораздо более сложную структуру интерфейса, нежели ряд различных CSS-классов.
Или я что-то не так понимаю, но из React увидел только одну функцию и 1 return, остальное просто конструктор HTML на базе готовых элементов.
Вот, если бы, вы, скажем, сделали конструктор приложений в React на базе REST API от Laravel и шаблонов из Figma, то цены бы вам не было, но вы наверное о подобном уже думаете 😉
Думаю полноценный конструктор приложений ещё не скоро сделают, сейчас просто переводится дизайн в вёрстку (Под React подразумевается просто разбивка на компоненты той же самой вёрстки), в этом случае никакой логики относительно макета не добавляется, логично что такое возможно автоматизировать. Если их сайт сделан на их же конструкторе, то получилось довольно круто, ибо код практически как написанный человеком, даже если верстать самому, то это приложение экономит время тем, что css уже написан практически в готов виде (в отличие от фигмы).
А писать, что-то для написание логики без кода, мне кажется бред ибо сам код и является самым эффективным средством.
На счёт автоматизации написания CSS, многие, конечно, привыкли к препроцессорам или работе ручками :)
Я с 2012 года верстаю в текстовом редакторе и даже на ту же Фигму не могу пересесть (просто сотрудники любят ее, поэтому в пример привёл).
А на счёт конструктора логики: мечта переводить Use Case или подобие BPMN в базу данных и код. Относительно не сложных приложений кажется реальностью.
Возможно, я недостаточно разобрался, поэтому, поправьте, если можно.
Еще множество кнопок не кликается и при смене разрешения некорректно отображается проект. И не нашел возможности управлять шрифтами на странице и группами элементов.
Эх, близится время тотальных фуллстеков, когда человек в одиночку будет запускать продукт с нуля 👽
Если что 10-15 лет назад ровно так и делали, пока не появилась вся эта балалайка с AngularJS/React.
Простые сайты давно можно делать в одиночку, на WYSIWYG-платформах с подключаемыми модулями (причём для всех экранных разрешений).
Кстати да, вот только вспомнил про старый давно забытый мной Dreamweaver :)
На самом деле непонятная целевая аудитория, написано дизайнеры и разработчики, то есть для упрощения работы между ними.
Заставить дизайнера слезть с Figma или Sketch (связать руки и учить новое), чтобы чуток упростить жизнь разработчику и то не факт, выглядит туманно.
Со стороны разработчика, зачастую тоже есть свои практики и инструменты, которые не сильно хочется менять. Взять хотя бы работа со стилями в React. ( .less, .css, css-in-js и т.д.), быстрее самому накидать не все быстро адаптируются.
То есть тут упрощение кросс командной работы совсем не видно. Возникает новая задача настроить целую коммуникацию между командами чтобы использовать этот инструмент.
Больше похоже на инструмент для соло исполнителя, который знает чуток дизайн, чуток веб и ему что-то быстро накидать для концепции.
Затестил:
- в подтверждающем письме на почте Start Creating не работает
- нельзя изменить цвет в нескольких дублирующих элементах (приходится по одному кликать)
- слои с ваших готовых компонентов генерятся обфусцированный как layer-fed1e4, если это готовый компонент можно в слой написать и его имя например layer-buttonNav-fed1e4
- ...
Вам в любом случае удачи!
Отвечаю с точки зрения дизайнера. У вас есть 2 путя, чтобы этим пользовались: конкурировать с той же фигмой и скетчем, чтобы народ реально пересаживался на ваш продукт (изайнеры не такие закостенелые люди и мы частенько следим за новой разработкой, для того чтобы можно было упростить рутинные дела), либо сделать возможность интеграции фигмы.
Пример protopie, прикольный продукт, но неудобный импорт из фигмы, в этого какие бы классные фичи там не были, мы там не интерактивом прототип и пользуемся костылями в фигме.
Другой пример overflow. Интеграция с фигмой удобная, поэтому пользуемся, хотя те же userflow, можно и в фигме накидать, но в owerflow удобнее)
Николай, да модель упрощения взаимодействия и снятия рутины с обоих сторон хорошая, чтобы UI изменения вносились проще и легко конвертились в код.
Тут возникает следующий вопрос с совместимостью работы разработчика и сгенерированного через sizze кода в частности (html, react).
То есть после первой итерации мы отдали все разрабу, нужно добавить чуток интерактива и возможно анимаций, он это сделал внутри сгенерированного кода, так как в любом случае нужно к чему то привязываться.
Далее следующая итерация, в sizze новый сгенериный код, а в редакторе у разработчика уже с его модификациями (клики, анимашки и т.д.).
Как быть в этом случае?
Пушка. серьёзно. это очень круто.
Видение простоты и модульности на высоте, написать фронт теперь практически автоматизированно.
еще и наши сделали...
И решит примерно 1% поставленных задач.
И создаст 1000 проблем!
Фантастика)
о, а я уже было подумал, что тут только любители конструкторов собрались)
Вроде интересно, пару не поняток
1. как удалить элемент после размещения? del не работает, корзины невижу, в настройках элемента тоже кнопки не вижу
2. В письмо после регистрации летит кнопка "Start Creating", которая ведет на невалидный урл
Так а сейчас какие у вас проектируются? Вы же в описании говорили о выгрузке в React.
Разработчикам - смотрите в сторону Glide, Adalo и других NoCode платформ по созданию мобильных приложений. Выгрузка в реакт, хз. Предпочту тогда уж на Flutter забабахать приложение, чем связываться с кодингом на React Native, который теряет популярность.
Для Flutter есть xd плагин, сразу выгружается в dart.
Но, есть нюанс.....наверно я очень рукож*пый, и выгруженный код сложно оптимизировать и создать конструктор....а так идея хорошая
А чем это качественно отличается от фигмы ?
прости за дилетантство если что
Все круто, но есть большой риск. Если фигма сделает такой экспорт.
Не рекомендовал бы вам лезть в платформенные технологии типа swiftui или jetpack compose (он так то еще в альфе), качественного кода на экспорте не будет и вы зашьетесь на отладке экспортируемых проектов которые можно сразу собрать. Отточите react и добавите flutter. Вами всё равно будут пользоваться только для прототипирования.
Спасибо за проект!
Пока что очень сыро, рано для публичной беты.
1) Два выделенных элемента передвинуть не получается - только с клавиатуры.
2) Поиска по иконкам не увидел.
3) Очень не хватает хоткеев, например Cmd+D для дублирования эл-та.
4) При клике на новый элемент в списке - он добавляется в начало экрана. Что не очевидно, когда ты находишься внизу экрана и просто не видишь, что эл-т где-то добавился.
5) Через 5 мин работы вылетела ошибка "Cannot read property 'get' of undefined".
Удачи вам в развитии продукта!
Ребята, а ваш лендинг собран на вебфлоу? Ну это норм, просто забавно, что конструктор для реакта собран на конструкторе) Если что — мы и сами в нем иногда верстаем.
Надо аутентификацию через соцсети прикрутить — лень регистрироваться.
Наверное у вас большой список того, что надо сделать)
Как данные-то к вашим компонентам подключать? )) Или у вас чисто декоративные интерфейсы, без привязки к данным?
Но если проектируется интерфейс Android/iOS (на текущем этапе развития), какая логика делать выгрузку в React? Расчёт на использование разработчиком Cordova, так что ли?
Круто! Такая заинтересованность аудитории говорит о том, что в правильном направлении вы идете, ну и заодно фидбек по продукту собрали)))
Раздел 'Future' на сайте - так и задумано?
По смыслу это должно быть 'Features'.
Комментарии