Новая платформа Sizze: создавайте дизайн интерфейсов и экспортируйте его в код React
Привет друзья! Сегодня мы рады представить вам новую платформу 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 уже написан практически в готов виде (в отличие от фигмы).
А писать, что-то для написание логики без кода, мне кажется бред ибо сам код и является самым эффективным средством.
Дмитрий, спасибо за Ваш комментарий.
1) Это было тестовая развертка приложения для оценки его работоспособности, в течении нескольких недель, планируется переезд на родной домен.
2) На данном этапе алгоритм подразумевает выгрузку лишь отдельных компонентов или страниц. В будущем данный функционал будет дорабатываться и улучшаться.
3) Мы с вами абсолютно согласны, но сейчас мы закрываем потребность только для автоматизации фронтенд разработки.
Дело в том что Figma собрана на другом стеке и ее фрейм достаточно сложно конвертировать в то, что мы хотим. К тому же у нас присутствуют дополнительные фичи, которых нет figma, например изменение и сохранение тем (темная, светлая) проекта, добавление стилей ховеров, нажатий элементов и тд., которые будут доступны в следующем билде.
Мы понимаем, что продукт еще требует множество доработок, поэтому будем очень стараться их исправить и сделать sizze еще лучше.
Возможно, я недостаточно разобрался, поэтому, поправьте, если можно.
Еще множество кнопок не кликается и при смене разрешения некорректно отображается проект. И не нашел возможности управлять шрифтами на странице и группами элементов.
Эх, близится время тотальных фуллстеков, когда человек в одиночку будет запускать продукт с нуля 👽