{"id":13465,"url":"\/distributions\/13465\/click?bit=1&hash=1e6228dc4e5e22730d5108e1c30ee96b3462205737e7a3fe7ce4c965aaacfe57","title":"\u041a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044f Ozon \u2014 \u043a\u043e\u043c\u0443, \u0447\u0442\u043e \u0438 \u043a\u0430\u043a \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043a\u0440\u0438\u0437\u0438\u0441","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"6b1e0c55-41d3-56c2-84e2-fe6f447e3825","isPaidAndBannersEnabled":false}

Новая платформа Sizze: создавайте дизайн интерфейсов и экспортируйте его в код React

Привет друзья! Сегодня мы рады представить вам новую платформу Sizze. Здесь вы можете c легкостью создать прототипы экранов мобильных приложений с помощью готовых компонентов и мгновенно выгрузить результат в код React или HTML.

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

Основные преимущества Sizze:

1. Код React

Теперь можно сразу смотреть код элемента и быстро копировать его. Мы сделали так, чтобы код был идеальной структуры и его можно было с легкостью внедрять в любой проект.

В будущем мы планируем разработать экспорт и для других популярных UI фреймворков.

2. База компонентов

Для начинающих пользователей или для пользователей, ценящих время, мы разработали готовые шаблоны которые с легкостью кастомизируются. В нашей базе есть все доступные элементы iOS-приложений (в будущем Android и Desktop). Это существенно экономит время и дает возможность для быстрой сборки качественных прототипов.

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

3. Режим просмотра

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

4. Функциональность

Мы знаем как для юзеров важно, что бы редактор был удобным и быстрым, поэтому оптимизировали его под все браузеры и добавили основные функции современных графических редакторов.

sizze.io Design to code

0
63 комментария
Написать комментарий...
Антон Посельский

Вот уже полезный инструмент

Ответить
Развернуть ветку
Николай Иванов
Автор

Антон, спасибо большое за Ваш комментарий. Рады быть полезными для Вас. 

Ответить
Развернуть ветку
Дмитрий Башкиров

Задумка интересная, но рановато конечно вынесен в публичную версию, так как в процессе тестирования напомнил скорее сломанную версию Figma. 
1) Базовое приложение так и лежит на бесплатном домене Netlify
2) Скачать архив целиком так и не вышло (только посредством постраничного просмотра кода)
3) Согласитесь, что все-таки сборка рабочего проекта подразумевает гораздо более сложную структуру интерфейса, нежели ряд различных CSS-классов.
Или я что-то не так понимаю, но из React увидел только одну функцию и 1 return, остальное просто конструктор HTML на базе готовых элементов.

Вот, если бы, вы, скажем, сделали конструктор приложений в React на базе REST API от Laravel и шаблонов из Figma, то цены бы вам не было, но вы наверное о подобном уже думаете 😉

Ответить
Развернуть ветку
Никита Крайнев

Думаю  полноценный конструктор приложений ещё не скоро сделают, сейчас просто переводится дизайн в вёрстку (Под React подразумевается просто разбивка на компоненты той же самой вёрстки), в этом случае никакой логики относительно макета не добавляется, логично что такое возможно автоматизировать. Если их сайт сделан на их же конструкторе, то получилось довольно круто, ибо код практически как написанный человеком, даже если верстать самому, то это приложение экономит время тем, что css уже написан практически в готов виде (в отличие от фигмы). 
А писать, что-то для написание логики без кода, мне кажется бред ибо сам код и является самым эффективным средством. 

Ответить
Развернуть ветку
2 комментария
Николай Иванов
Автор

Дмитрий, спасибо за Ваш комментарий.
1) Это было тестовая развертка приложения для оценки его работоспособности, в течении нескольких недель, планируется переезд на родной домен.
2) На данном этапе алгоритм подразумевает выгрузку лишь отдельных компонентов или страниц. В будущем данный функционал будет дорабатываться и улучшаться.
3) Мы с вами абсолютно согласны, но сейчас мы закрываем потребность только для автоматизации фронтенд разработки.

Дело в том что Figma собрана на другом стеке и ее фрейм достаточно сложно конвертировать в то, что мы хотим. К тому же у нас присутствуют дополнительные фичи, которых нет figma, например изменение и сохранение тем (темная, светлая) проекта, добавление стилей ховеров, нажатий элементов и тд., которые будут доступны в следующем билде.

Мы понимаем, что продукт еще требует множество доработок, поэтому будем очень стараться их исправить и сделать sizze еще лучше.

Ответить
Развернуть ветку
Дмитрий Башкиров

Возможно, я недостаточно разобрался, поэтому, поправьте, если можно.
Еще множество кнопок не кликается и при смене разрешения некорректно отображается проект. И не нашел возможности управлять шрифтами на странице и группами элементов.

Ответить
Развернуть ветку
Michael Wylsakom

Эх, близится время тотальных фуллстеков, когда человек в одиночку будет запускать продукт с нуля 👽

Ответить
Развернуть ветку
Гала Перидоловна

Если что 10-15 лет назад ровно так и делали, пока не появилась вся эта балалайка с AngularJS/React.

Ответить
Развернуть ветку
Daniil Shvedov

А потом и это оптимизируют

Ответить
Развернуть ветку
Alek Plotnikov

Простые сайты давно можно делать в одиночку, на WYSIWYG-платформах с подключаемыми модулями (причём для всех экранных разрешений).

Ответить
Развернуть ветку
1 комментарий
Vitaly Yastremsky

На самом деле непонятная целевая аудитория, написано дизайнеры и разработчики, то есть для упрощения работы между ними.
 
Заставить дизайнера слезть с Figma или Sketch (связать руки и учить новое), чтобы чуток упростить жизнь разработчику и то не факт, выглядит туманно.

Со стороны разработчика, зачастую тоже есть свои практики и инструменты, которые не сильно хочется менять. Взять хотя бы работа со стилями в React. ( .less, .css, css-in-js и т.д.), быстрее самому накидать не все быстро адаптируются.

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

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

Затестил: 
- в подтверждающем письме на почте Start Creating не работает
- нельзя изменить цвет в нескольких дублирующих элементах (приходится по одному кликать) 
- слои с ваших готовых компонентов генерятся обфусцированный как layer-fed1e4, если это готовый компонент можно в слой написать и его имя например layer-buttonNav-fed1e4
- ...

Вам в любом случае удачи!

Ответить
Развернуть ветку
Николай Иванов
Автор

Виталий, спасибо Ваше пожелания и комментарий. Возможно вы правы, что заставить дизайнера слезть с Figma или Sketch, довольно сложно, но мы это и не хотим. Мы хотим помочь дизайнерам интерфейсов автоматизировать рутинную работу, вслед за которой идут бесконечные интеграции, которые требуют кропотливой доработки.

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

Ответить
Развернуть ветку
5 комментариев
Artemida Svet

Пушка. серьёзно. это очень круто.
Видение простоты и модульности на высоте, написать фронт теперь практически автоматизированно.
еще и наши сделали...

Ответить
Развернуть ветку
Konstantin Antonov

И решит примерно 1% поставленных задач.
И создаст 1000 проблем!
Фантастика)

Ответить
Развернуть ветку
Николай Иванов
Автор

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

Ответить
Развернуть ветку
Здешний ящик
Мы знаем как для юзеров важно, что бы редактор был удобным и быстрым

А ещё многим важна конфиденциальность и ваша забота о безопасности их данных, но в статье об этом — ни слова 🤭

Ответить
Развернуть ветку
Денис Капитанов

Прикольно, помню ваш кейс на хакатоне, огорчает что только мобила

Ответить
Развернуть ветку
Николай Иванов
Автор

Денис, спасибо за Ваш комментарий. Сейчас разрабатывается база компонентов для Desktop. В начале следующего года мы планируем сделать доступным данный функционал для пользователей.

Ответить
Развернуть ветку
max smirnoff

Как же заебали эти конструкторы сайтов. Остановитесь уже ))

Ответить
Развернуть ветку
Mihael Isaev

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

Ответить
Развернуть ветку
Timur Alekseenko

Вроде интересно, пару не поняток

1. как удалить элемент после размещения? del не работает, корзины невижу, в настройках элемента тоже кнопки не вижу

2. В письмо после регистрации летит кнопка "Start Creating", которая ведет на невалидный урл

Ответить
Развернуть ветку
Anton Reut

1. Backspace?

Ответить
Развернуть ветку
2 комментария
Николай Иванов
Автор

Тимур, спасибо за Ваш замечание. Это ошибка, связана с логикой горячих клавиш на разных ОС. Мы обязательно в скором времени это исправим.

Ответить
Развернуть ветку
Sergey Khrushch

А веб интерфейсы можно проектировать?

Ответить
Развернуть ветку
Николай Иванов
Автор

Сергей, спасибо за Ваш комментарий. Да, планируется в начале следующего года.

Ответить
Развернуть ветку
1 комментарий
Евгений Кондрашов

Sizze: мы сделали свой супер пупер конструктор с React!
Также Sizze: 

Ответить
Развернуть ветку
Николай Иванов
Автор

Евгений, мы не видим ничего зазорного в том, чтобы сделать лендинг на платформе webflow, ведь для этой задачи он и существует. Мы не считаем, что webflow прямой конкурент нашей платформе, так мы закрываем разные задачи пользователей.

Ответить
Развернуть ветку
Alexander

Поддерживается ли экспорт в React Native?

Ответить
Развернуть ветку
Николай Иванов
Автор

Александр, спасибо за Ваш комментарий. Конвертирование кода в React Native планируется в начале следующего года.

Ответить
Развернуть ветку
Дмитрий Кудрявцев

Разработчикам - смотрите в сторону Glide, Adalo и других NoCode платформ по созданию мобильных приложений. Выгрузка в реакт, хз. Предпочту тогда уж на Flutter забабахать приложение, чем связываться с кодингом на React Native, который теряет популярность.

Ответить
Развернуть ветку
Ярослав Шенцов

Для Flutter есть xd плагин,  сразу выгружается в  dart.
Но, есть нюанс.....наверно я очень рукож*пый, и выгруженный код сложно оптимизировать и создать конструктор....а так идея хорошая

Ответить
Развернуть ветку
мне самому не нравится

А чем это качественно отличается от фигмы ?
прости за дилетантство если что 

Ответить
Развернуть ветку
Николай Иванов
Автор

Добрый день.
Основное отличие от Figma, это то, что наши компоненты конвертируются в код, который легко можно внедрять в Ваш проект. На данном этапе реализована выгрузка в HTML, React, CSS, В ближайшее время будет дорабатываться алгоритм для экспорта в другие фреймворки, Swift UI, Jetpack и другие.

Ответить
Развернуть ветку
3 комментария
Ivan Tyumenyev

Спасибо за проект!

Пока что очень сыро, рано для публичной беты.

1) Два выделенных элемента передвинуть не получается - только с клавиатуры.
2) Поиска по иконкам не увидел.
3) Очень не хватает хоткеев, например Cmd+D для дублирования эл-та.
4) При клике на новый элемент в списке - он добавляется в начало экрана. Что не очевидно, когда ты находишься внизу экрана и просто не видишь, что эл-т где-то добавился.
5) Через 5 мин работы вылетела ошибка "Cannot read property 'get' of undefined".

Удачи вам в развитии продукта!

Ответить
Развернуть ветку
Николай Иванов
Автор

Иван, спасибо за Ваши замечания и пожелания.
Все написано очень точно и в тему, в ближайшее время мы исправим данные недочеты.

Ответить
Развернуть ветку
Арсений Петрович

Ребята,  а ваш лендинг собран на вебфлоу? Ну это норм, просто забавно, что конструктор для реакта собран на конструкторе) Если что — мы и сами в нем иногда верстаем.
Надо аутентификацию через соцсети прикрутить — лень регистрироваться. 
Наверное у вас большой список того, что надо сделать)

Ответить
Развернуть ветку
Николай Иванов
Автор

Арсений, спасибо за Ваш комментарий.
На webflow собран только лендинг и несколько страниц сайта. Сам редактор и дашборд собран на React.

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

Про замечания с аутентификацией через соц сети учтём, спасибо!

Ответить
Развернуть ветку
Artem Petrenkov

Чем это лучше FrontPage / Dreamweaver / Muse?

Ответить
Развернуть ветку
Николай Иванов
Автор

Артем, спасибо за вопрос!
То, что вы описали является редакторами сайтов и служат для упрощения его выгрузки.
Мы же предлагаем создать фронтенд приложения с помощью уже базы готовых компонент которые спроектированы и адаптированы для требований iOS и Android платформ. При этом результат можно выгрузить не только в HTML и CSS, но и в React, а в будущем и на других фреймворках.
Выходит, что это совершенно разные области применения.

Ответить
Развернуть ветку
2 комментария
Павел Столяров

Название и внешний вид похожи на https://sizzy.co/ :)

Успехов в развитии!

Ответить
Развернуть ветку
Кира Вишневская

Внешний вид сейчас не самое главное

Ответить
Развернуть ветку
Evgeniy Nikolaev

В чем отличие от Webflow?

Ответить
Развернуть ветку
Николай Иванов
Автор

Евгений, спасибо за Ваш комментарий.

Webflow это сервис для быстрого создания веб страниц, в основном лендингов, которое позволяет выгружать только в html разметке, которая достаточно тяжело интегрируется в готовый проект (или на конкретные страницы), так как у них своя логика разметки. Те компоненты, что предлагаются у них не являются полноценным решением в частности для приложений.

Ответить
Развернуть ветку
Эльвира Ярмакова

Круто! Такая заинтересованность аудитории говорит о том, что в правильном направлении вы идете, ну и заодно фидбек по продукту собрали)))

Ответить
Развернуть ветку
Николай Иванов
Автор

Эльвира, спасибо за поддержку нашего проекта!
Команда БИ очень нас выручает, придаёт силы для новых идей и помогает в поиске решений для развития нашего сервиса.

Ответить
Развернуть ветку
Mikhail Malyshev

В чем от Framer (FramerX) отличие?

Ответить
Развернуть ветку
Sergey Kulakov

Раздел 'Future' на сайте - так и задумано?
По смыслу это должно быть 'Features'. 

Ответить
Развернуть ветку
Читать все 63 комментария
null