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

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

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

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

1. Код React

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

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

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

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

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

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

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

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

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

sizze.io Design to code

0
62 комментария
Написать комментарий...
Vitaly

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

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

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

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

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

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

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

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

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

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

Отвечаю с точки зрения дизайнера. У вас есть 2 путя, чтобы этим пользовались: конкурировать с той же фигмой и скетчем, чтобы народ реально пересаживался на ваш продукт (изайнеры не такие закостенелые люди и мы частенько следим за новой разработкой, для того чтобы можно было упростить рутинные дела), либо сделать возможность интеграции фигмы. 
Пример protopie, прикольный продукт, но неудобный импорт из фигмы, в этого какие бы классные фичи там не были, мы там не интерактивом прототип и пользуемся костылями в фигме. 
Другой пример overflow. Интеграция с фигмой удобная, поэтому пользуемся, хотя те же userflow, можно и в фигме накидать, но в owerflow удобнее) 

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

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

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

Отличная идея сервиса. Успехов вам! 

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

Николай, да модель упрощения взаимодействия и снятия рутины с обоих сторон хорошая, чтобы UI изменения вносились проще и легко конвертились в код.
Тут возникает следующий вопрос с совместимостью работы разработчика и сгенерированного через sizze кода в частности (html, react). 
То есть после первой итерации мы отдали все разрабу, нужно добавить чуток интерактива и возможно анимаций, он это сделал внутри сгенерированного кода, так как в любом случае нужно к чему то привязываться.
Далее следующая итерация, в sizze  новый сгенериный код, а в редакторе у разработчика уже с его модификациями (клики, анимашки и т.д.).
Как быть в этом случае?

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

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

Ответить
Развернуть ветку
59 комментариев
Раскрывать всегда