Почему я два года делаю свой редактор уровня Figma

Два года назад я начал делать свой векторный редактор. Сегодня Edgework Studio это полноценный аналог Figma для macOS: холст, компоненты, автолэйаут, переменные, прототипы, библиотеки, плагины и совместная работа. Расскажу, зачем дизайнеру с 14 годами практики понадобился собственный инструмент и что в нём получилось

01С чего всё началось

В каждом проекте я видел одно и то же. Макет живёт в Figma, код в репозитории, версии в названиях файлов вроде «финал_финал_2», а обсуждение в мессенджере. На каждом переходе что-то теряется: разработчик угадывает отступы, заказчик смотрит не ту версию, правки теряются между копиями

Я много раз обходил это дисциплиной и договорённостями. В какой-то момент стало ясно, что проблема в самих инструментах: они разделяют то, что должно быть одним целым. Так появилась идея редактора, где дизайн, код и версии живут в одном файле

02Что уже умеет Edgework

База, без которой редактор не редактор:

• работает быстро: даже в макете из 5 000 объектов всё двигается плавно, 60 кадров в секунду;
• компоненты и их варианты, автоматическая раскладка блоков;
• светлая и тёмная тема переключаются одной настройкой;
• кликабельные прототипы, которые можно показать как готовое приложение;
• общие библиотеки компонентов для всей команды;
• поддержка плагинов Figma, которые не могут навредить вашему файлу;
• совместная работа с курсорами коллег и доступом по ссылке;
• открытие и сохранение файлов Figma, чтобы переход не начинался с нуля

03Чем он отличается от Figma

Моё правило при разработке простое: делаем как в Figma, а если можно лучше без плохих последствий, делаем лучше. Вот где получилось лучше:

• История версий как у программистов. Можно вести несколько вариантов макета параллельно, а при сравнении видно, что именно изменилось: «отступ 12 → 16, отвязано 3 копии кнопки», а не две картинки рядом
• Правки не конфликтуют. Если один человек поменял цвет кнопки, а другой отступ, редактор сам объединит обе правки
• Комментарии, привязанные к объекту. В Figma комментарий стоит в точке экрана и съезжает, когда макет меняется. В Edgework он двигается вместе с объектом
• Проверка макета на ошибки. Редактор подсказывает, где слои названы хаотично, где сломана раскладка и где текст плохо читается из-за низкого контраста. Подробнее о контрасте в статье про доступность сайта
• Готовый код из макета. Разработчик получает код и точные значения цветов и размеров, а не угадывает их по картинке
• Помощник на ИИ, который умеет работать в редакторе. Описываете задачу словами, и помощник сам создаёт и правит элементы теми же инструментами, что и человек. Подключить к макету можно и внешних ИИ-помощников программистов. Как это ускоряет переход от макета к коду, я писал в статье от макета к коду без потерь
• 3D прямо в макете. Простые объёмные объекты можно сделать в том же файле, без отдельной программы

04Как я его делаю

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

Главное правило продукта: функция, которая молча не работает, считается браком. Кнопка без поведения хуже, чем её отсутствие: человек нажимает, ничего не происходит, и он перестаёт доверять инструменту. Поэтому за надёжностью Edgework следят больше 320 автоматических проверок. Они ловят ошибки раньше пользователя, проверяют, что каждый пункт меню действительно что-то делает, подсказки не обещают несуществующего, а цвета точно совпадают с дизайн-системой

05Что дальше

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

Если вам интересно посмотреть редактор или вы хотите обсудить, как такой подход может работать в вашей команде, напишите мне. Кейс с картинками интерфейса лежит в разделе Мои кейсы