Comments 42
Действительно – контраст слишком сильным получился.
Мы сейчас активно работаем над тем, чтобы сделать интерфейс редактора не только удобным и функциональным, но еще и комфортным для глаз пользователя. В списке задач есть, в том числе, и настройка темы всего приложения (темная/светлая) и цвета отдельных частей интерфейса – например, фона холста или подсветки сетки.
Еще раз спасибо, что попробовали наш редактор и даже помогли его улучшить :)
Довольно удобная штука, спасибо. Можно быстро накидать макет и разработчику будет понятнее, чем с фигмой, где flex, где марджин, а где паддинг.
При экспорте html получается очень многословный: просто добавил текст на чистую страницу - уже 15 дивов. Чтобы потом допиливать, придется долго вычищать. Это вариант обфускации или какие-то есть технические ограничения по генерации простой верстки?
Да, вы совершенно правы, некоторая избыточность в финальном коде сейчас присутствует, в основном как раз в виджете Текст. Обусловлено это тем, что данный код (в силу no-code специфики Графита) сейчас рассчитан в первую очередь не на прочтение людьми, а на улучшение его привлекательности в глазах поисковых роботов, ботов и прочих бездушных машин. Безусловно они тоже смотрят на размер и количество, но не ставят это в приоритет. Хочу сразу заверить, что руками править созданные в Графите странички не требуется: рендеру такая избыточность не мешает, и на качестве/производительности не сказывается.
Тем не менее, мы прекрасно понимаем, как важно дизайнерам и разработчикам иметь лаконичный и легко читаемый код на выходе – даже если они не собираются лезть туда руками. Поэтому над оптимизацией кода созданных в Графите страничек мы тоже работаем.
UPD: промазал ответом к комментарию ниже)
Какие тарифные планы планируются?
Я о том, что не зная планируемых прайсов, я не вижу смысла переезжать, с фигмы, чтобы потом оказалось что я не имею возможности больше править свои проекты.
Если отвечать коротко, то сейчас весь функционал доступен бесплатно и без ограничений. Каких-то немедленных планов по переходу на исключительно платные «рельсы» у нас пока нет. Когда/если появятся платные тарифы, мы обязательно проинформируем об этом всех пользователей сильно заранее. Сценарий, в котором человек внезапно теряет доступ к уже созданным в нашем редакторе проектам, мы считаем преступно недопустимым, и всячески постараемся его избежать.
А если отвечать еще более полно и честно, то мы ведь делаем Графит по принципу «дизайнерам от дизайнеров», и комфорт пользователя в работе был одной из базовых концепций продукта. И что может быть для дизайнера большим кошмаром, чем безысходная утрата своих проектов за внезапно возникшим «пейволом»? Поэтому при всей разумности ваших опасений, мы просто на идеологическом уровне не способны будем насильно перевести бесплатных пользователей на платные тарифы под угрозой немедленной потери созданных проектов. Как минимум, в случае изменения тарифных планов, мы заблаговременно всех об этом предупредим и постараемся оставить возможность не потерять свои проекты даже для тех, кто это предупреждение по какой-то причине проигнорировал.
Что касается «планируемых прайсов» – тут честно признаюсь, что на данном этапе мы так далеко стараемся не загадывать. Это не значит, что мы вовсе не имеем никаких долгосрочных планов, но на данном этапе развития продукта каких-то конкретных чисел я назвать, увы, не смогу. Сейчас для нас фидбек от реальных пользователей ценнее всего. Но повторюсь: если мы будем вводить платные тарифы, это не будет внезапной историей для наших пользователей.
Я не прошу верить мне на слово – позвольте нам завоевать ваше доверие постепенно :) Возможно, вам будет удобно перенести в Графит всего один своей проект, и со временем уже решить, стоит ли переезжать из Фигмы целиком. Вполне вероятно, что к тому моменту вопрос с платными тарифами уже станет для пользователей более прогнозируемым, и все опасения развеются.
Но одной из важных идей при создании Графит было – “а что если создавать сайты в конструкторе будет так же просто как в графическом редакторе?”. Мы хотели дать дизайнерам похожие инструменты для творчества, для быстрого создания и проверки итераций дизайна, и чтобы при этом не нужно было глубоко знать HTML/CSS.
Поэтому наше основное отличие в фокусе на визуальном редактировании и творчестве, а Webflow больше про верстку и код (на наш скромный взгляд):
– У нас невысокий порог входа и можно создавать сайты почти не зная HTML/CSS.
– Размеры элементов, их отступы, создание базовой структуры сетки доступны в Графит как визуальные инструменты, прямо на холсте.
– В Графит более простой и понятный интерфейс: у нас меньше настроек, чем в Webflow, но при этом можно создавать макеты похожей сложности. Мы постарались вынести на первый уровень интерфейса самые важные для дизайнера настройки.
– Графит предлагает более привычный для графических редакторов подход к дизайн-системе и визуализации в целом, а также позволяет использовать в работе уже знакомые инструменты и методики из популярных графических редакторов.
В целом, если вы дизайнер или вам больше нравится визуальное редактирование, чем работа с кодом, то вы точно найдете для себя интересные функции. По крайней мере, мы на это рассчитываем :)
А чем это лучше редактора тильды? :)
(что мне сказать нашим дизайнерам по этому поводу)
Из того на что стоит обратить внимание у нас:
– Весь сайт редактируется на одном холсте, целиком. Не нужно переходить в отдельный интерфейс, чтобы отредактировать конкретный блок.
– Помимо абсолютного позиционирования по координатам, у нас есть позиционирование в сетке, которе напоминает Auto-layout в Figma, только с большими возможностями. Изменение размеров элементов, их позиции или контента влияет на все нижележащие элементы – их не нужно двигать руками, макет подстроится сам. Делать адаптивные макеты, использую сетку, получается проще и быстрее.
– Как продолжение функций сетки, есть виджет Container (похож на микс Frame из Figma и CSS модели flexbox). В контейнер можно добавить несколько элементов, и одной кнопкой менять направление их расположения (колонка/строка), горизонтальное и вертикальное выравнивание. Контейнеры можно вкладывать друг в друга, что позволяет создавать сложные адаптивные конструкции.
– Инструменты управления дизайн-системой. Можно создавать и редактировать в одном месте переменные цветов, темы, шрифтовые стили, скругления и бордеры.
– Функция Variants позволяет менять внешний вид кнопок (и любых других элементов) сразу и одновременно на всем сайте.
А что можно сделать с результатом работы? (еще не регался, еще не смотрел, да я и не дизайнер...)
То есть практически то же самое, что и позволяет делать тильда?
API для скачивания файлов есть? :)
Процесс будет отличаться, потому что инструмент проектировался в первую очередь для дизайнеров и дает им более комфортную среду.
API для скачивания пока что не предусмотрено.
p.s. а Хабр чисто для технических статей, Дима?)
Но под капотом у нас тоже много хипстерского, модного и жутко интресного, о чём, конечно, хочется рассказать. Ряд постов на эту тему уже готовим!
Тут в последние годы такие вещи в топе бывают с >100 плюсов. А вы удивляетесь рекламной статье размещённой в блоге компании. В статье хотя бы намёк есть на техническую часть.
Здравствуйте! Как раз ищу что-то подобное, но этап знакомства закончился на регистрации, после логина через гугл, на страничке ответов на вопросы «кто я», не скроллится вниз, до кнопки «продолжить». iPhone 8, актуальная ОС.
Главная проблема начинается, когда в команде есть «смешение жанров». Сейчас как — в классике дизайнер передает верстальщику макет, и хорошо если эти 2 человека знают свое дело и понимают что нужно, чтобы коллеге не было мучительно больно. Но как правило жизнь далека от идеала и между этими друмя чаще всего известные и набивщие всем искомину проблемы.
С внедрением в нашу жизнь визуальных редакторов их кажущаяся легкость и простота использования добавляет верстальщику или человеку, отвечающему за чистый код мегатонны проблем, выражающихся в многократном увеличении малопродуктивного рабочего времени. Того времени, которое он мог бы с гораздо большей пользой потратить как для себя, так и для компании.
Когда мне впервые передали лендинг, сделанный в редакторе, со словами «там все готово, только чуть подправить вот те 3 блока прыгают под планшетом», я был в ужасе от сгенерированного кода. Я понял, что сделать этот лендинг с нуля будет быстрее чем вычистить его.
Но я также понимал, что людей, которым дали такую игрушку, уже не остановить. И что есть только 3 варианта решения проблемы: чистить все самому, переписывать все самому, либо же распрощаться с чистым кодом.
А теперь представьте себя, что у нас сейчас несколько сотен сделанных конструктором лендингов, баннеров и прочих страниц и блоков. И они продолжают их лепить. А что бы вы предпочли, какой из этих 3 вариантов? Вот и я о том же…
Всегда говорил, тот кто создаст визуальный редактор, генерируемый чистый код, сможет стать не просто монополистом, а диктатором. Такому редактору даже реклама будет не особо нужна — его будут передавать из рук в руки и лицензии на него будут разлетаться как горячие пирожки.
Разработчику — мои самые искренние пожелания, чтобы у вас все получилось. И если где-то в to-do, приоритетах, в планах записано «работать над частотой кода» — то небольшая ремарка в конце: попробуйте сделать лайт-версию, ну то есть что то вроде такого, чтобы можно было по быстрому накидать только основные элементы макета, но при этом чистый код на выходе.
Более близкий фреймеру наш же Quarkly, с возможностью своих реакт компонентов и т.п.
Можете тут же на Хабр почитать детали
– мы предоставляем комплекс инструментов, которые упрощают жизнь веб-дизайнеру и позволяют делать быстрее рутинные вещи
– на выходе мы отдаем статические страницы, которые сразу готовы к загрузке на хостинг и индексации поисковиками, не нужно тратить время на их дополнительную подготовку
– наши nocode инструменты ближе к динамической и адаптивной природе веба, и дают дизайнерам воспользоваться возможностями CSS во всей полноте
Framer себя позиционирует как инструмент прототипирования, то есть на выходе вы получаете прототип, пусть и близкий к production версии за счет использования реакт компонентов. У нас же вы сразу получаете production версию.
Но если говорить про сложные и крупные веб-приложения или мобильные приложения, над которыми работают кросс-функциональные команды, то здесь Framer будет полезнее.
Главный вопрос - выход только веб или планируется под мобильную разработку, например под flutter?
Ну и мелкий вопрос - под Vue.js экспорт планируете?
Потыкал чуть-чуть, пока ощущение альфа-версии. Возможно, когда-нибудь отладите и будет всё круто, но пока на самых простых вещах вылезают сложности или непонятки.
Добавил текст, нарисовал прямоугольник. Прямоугольник рисовался не по сетке изначально, потом его нельзя было выделить (еле нашёл, как). Хватаешься за границу одного блока, тянешь — а тянется совсем другая граница.
Извините, дальше закрыл, проще тут спросить:
Что с адаптивностью у этого всего? у Тильды сделано убого — рисуй макеты отдельно для нескольких видов устройств, причём всё имеет тенденцию съезжать и расплываться. Как у вас?
Что с шаблонами, когда надо одну страницу прикрутить ко всем?
Что с библиотекой готовых элементов UI? что с библиотекой своих элементов, есть возможность?
Что со стилями текста, можно определить стили и их применять?
Проблема на видео возникла из-за отрицательного правого отступа (margin) у прямоугольника. Когда у маленького элемента большой отрицательный отступ, то браузер считает его ширину слишком маленькой, и не получается его выделить. Во второй части вашего видео пунктирной линией показана зона, которую создают отступы.
А корень проблемы действительно растет в UX. Если элемент в сетке выбран, то при наведении на его стороны появляется полоска, которая позволяет редактировать отступ. Если элемент выровнян влево (по умолчанию прямоугольник и кнопка имеют такое выравнивание), то направление ресайза именно правого отступа инвертируется, и можно незаметно для себя сделать отступ отрицательным. В наших дальнейших планах – улучшения опыта ресайза, которые позволят избежать таких ситуаций.
И ответы на вопросы:
– Адаптивность в сетке настраивать просто – элементы сами подстроятся под брейкпоинты, остается донастроить отступы и размеры. Абсолютно спозиционированные элементы нужно подвигать руками, но благодаря привязкам к разным сторонам (аналог Constratints из Фигмы) можно упростить себе жизнь. Здесь можно увидеть настройку мобильной версии, с 2:53. Осторожно, видео ускорено, макет в начале.
– Не совсем понял кейс со страницей. В будущем планируем добавить создание шаблонов из сайта, страницы или блока, а также функцию компонентов, которые позволят одновременно редактировать элементы сразу на нескольких сайтах.
– Пока доступны базовые элементы UI. Конечно, в дальнейшем будем расширять их набор. Свой элемент сейчас можно добавить с помощью виджета Код. Также рассматриваем возможность создания библиотек своих элементов, после введения функции компонентов.
– Текстовые стили можно создавать и применять.
Псс, дизайнер, хочешь ещё один конструктор для создания сайтов?