Скетч: символ боли

Vlad Zely
Дизайн-кабак
3 min readJul 29, 2015

--

О разрыве между дизайном и разработкой пишут все. Нарисовать интерфейс — не равно его сделать.

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

Для сайтов и приложений дизайнеры создают наборы элементов управления. Унифицируют вид кнопок, форм и полей, чтобы ускорить разработку. Затем программисты прописывают тег, стилизуют, применяют в разных местах. Поменял дизайнер обводку у кнопочки с красной на синюю — говорит разработчику. Тот меняет свойство бордер-калор. 120 кнопок на сайте меняются.

В статичных макетах так не происходит. Если дизайнер придумал новый вид элемента, то идёт и обновляет его на каждом экране. Адепты фотошопа используют смарт-объекты, танцы с бубном и ещё что-то для снижения уровня рутины и повышения качества жизни. Как делают это в иллюстраторе — не знаю. Последний год разговоры про Скетч. Третий месяц веду в нём проект: чему-то радуюсь, над чем-то грущу.

Разработчики из Бохеминкодин старались решить проблемы, с которыми сталкивались. Поэтому в Скече есть некоторые фишки, задуманные упростить жизнь. Иногда происходит наоборот.

Магия за кадром для быстрого обзывания: cmd+c & cmd+v

Символ — это несколько элементов, которые сцепились между собой и синхронно обновляются:

Символ — это группа

Хотим перекрасить фон радиокнопки. Если кликнуть по символу — выберем группу: круг и точку. Не подходит. Панель настройки не активируется. Зажимаем cmd и проваливаемся ниже. Решено.

Теперь мы на 24 экране, благополучно забыли про когда-то созданный набор элементов. У нас была группа с радиокнопками. Вместо неё потребовался список. Нажали cmd выделили в группе лишнее, бэкспейс и готово! Мы потеряли все радиокнопки на 24 (40/80/100?) экранах. Идти восстанавливать вручную — это для слабых. Я делал так. Сегодня, потеряв N чекбоксах в N макетах, пришлось придумать решение элегантее.

Фишка в том, что удалили не символ, а элементы в нём. На других экранах осталась пустая группа. Если в неё добавить элементы, они вновь появятся на других экранах.

В идеальном мире мы где-то не досмотрели, и есть нужный набор элементов вне символа: копируем его и вставляем. Ни в примере, ни в работе мне сегодня не повезло соприкоснуться с этим миром. Рисовал заново. Но рисовать 1 элемент приятнее, чем 24.

Меня троллили интернет и скриншотилка. Я не сдался. Если статья сохранит чьё-то время и нервы, буду рад.

--

--