Figma, Sketch и Adobe XD прикидываются тупыми

Что не так

Инструменты для дизайнеров интерфейсов устроены так, будто в них рисуют бессмысленные прямоугольники и текст.

Но в них рисуют экраны которые содержат:

• заголовки и подзаголовки
• текстовые блоки
• кнопки
• поля ввода, чекбоксы, селектбоксы
• списки
• карточки
• таблицы
• графики
• изображения
• модальные окна

Как должно быть

Должна быть панель добавления компонентов

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

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

• primary или secondary
• размер: large, big, normal, small
• с иконкой или без
• состояние: normal, hover, active, disable, loading

Все элементы в интерфейсе должны подчиняться базовым настройкам проекта:

• цветовая палитра генерируемая из основного цвета и следящая за приемлемым контрастом
• выбор шрифта, базовых размеров
• выбор коэффициента скруглений
• выбор коэффициента отступов

Пример настройки коэффициента размеров отступов:

Но ведь есть UI Kit-ы и библиотеки, Framer, UXPin

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

Зачем все это

• Начинающие дизайнеры перестанут рисовать непристойности, т. к. минимальные настройки размеров, отступов и контроллер контраста решат существенную часть проблем
• Профессиональные дизайнеры сконцентрируются на сути продукта, а не на отрисовке
• Продукт — менеджеры смогут обходится без дизайнеров
• Обновление стилистики всего проекта будут происходить с одного места
• Возможна будет более внятная генерация кода компонентов для React
• Все это позволит создать инструмент для работы на айпад

Figma, Sketch и Adobe XD прикидываются тупыми was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.