Sketch — векторный графический редактор для macOS, разработанный голландской компанией Bohemian Coding.
Используется для проектирования интерфейсов мобильных приложений и веб-сайтов. Поддерживает возможность создания интерактивных прототипов.
Впервые был выпущен 7 сентября 2010 года и получил награду Apple Design Awards в 2012 году.
С 2016 года Sketch перешел на ежегодное продление лицензии. В течение года с момента покупки пользователи получают обновления программы, после чего они могут продолжить использовать последнюю версию, опубликованную до истечения срока действия лицензии или продлить свою лицензию, чтобы продолжить получать обновления в течение еще одного года.
В отличие от Adobe Photoshop, Sketch не использует собственных средств для отображения создаваемого контента — эти функции возложены на встроенные инструменты macOS: QuickTime, Quartz Extreme, Core Image, Core Animation, OpenGL и ColorSync.
В своей работе и создании продуктов Sketch активно используют такие компании как Apple, Facebook, Google. Sketch имеет большие возможности интеграции с другим ПО и веб-сервисами InVision, Marvel, Jira, Zeplin и Avocode. Команда Bohemian Coding старается продвигать Sketch, поддерживая развитие одного из самых больших сообществ графических дизайнеров, возникших вокруг продукта.
Возможности Sketch Up. Обзор программы sketchup 2020
Источник: wiki2.org
Figma vs Sketch: битва популярных редакторов для проектирования интерфейсов
В 2020 году дизайнеров, работающих в Photoshop и Illustrator, становится всё меньше. Специалисты активно изучают новые инструменты и пользуются их преимуществами.
В этом материале мы сравним кроссплатформенный редактор Figma и приложение для работы с векторной графикой Sketch.
История развития
Дизайнеры часто выбирают между двумя платформами и хотят понять, какая им подойдёт больше. Главная цель перехода — автоматизация рутинных задач и ускорение рабочего процесса.
«Скетч» — векторный редактор, который работает на платформе macOS и развивается с 2010 года. Версий для Windows или проектирования в браузере нет. Существует программа Lunacy от сторонних разработчиков, которая умеет открывать и вносить изменения в файлы .sketch.
Figma — онлайн-сервис с приложениями для компьютеров и мобильных устройств. Стал популярен благодаря кроссплатформенности и фишкам совместной работы. Разработчики начали создавать проект в 2016 году. За 3 года он не только смог догнать «Скетч» по возможностям, но и увёл значительную долю аудитории. «Фигма» привлекает пользователей удобством.
Создал макет, создал ссылку на публичный просмотр и отправил клиенту. Много пространства для работы в команде. В истории показывается, кто внёс изменения и версию всегда можно вернуть к предыдущему состоянию.
Стремительная популярность Figma стала возможной благодаря активной разработке и продвижению в социальных сетях. Популярные блогеры рекламируют инструмент, в интернете тысячи обзоров, в репозитории много плагинов для расширения функционала. Есть Adobe XD, InVision, Zeplin и другие аналоги, но «Фигма» оставляет конкурентов позади.
Что выбрать? Photoshop, Sketch, XD или Figma?
До сих пор кажется, что облачный редактор с комфортной работой в браузере — выдумка. Figma доказал реальность идеи. Дизайнеры со всего мира создают миллионы UI, делятся фишками с комьюнити и активно создают новые плагины. Развитие уже не остановить, и конкуренты отлично это понимают. Через 3-5 лет продвижения в аналогичном темпе в нише появится лидер и затмить его достижения будет нереально.
Давайте посмотрим, чем отличаются два инструмента, и для каких целей подойдет каждый из них.
Возможности сервисов
Figma и Sketch из разных вселенных, но работают они по схожим принципам. «Фигма» доступен на macOS и Windows, а «Скетч» только на Mac.
Проектирование интерфейса
Базовые инструменты двух редакторов и процесс создания UI практически идентичны. Пользователь создаёт чистый холст, открывает панель и добавляет слои. Постепенно он наполняет страницу фигурами, кнопками, текстом, изображениями и прототип «оживает».
Одна из крутых фишек кроссплатформенного приложения в том, что дизайнер пересылает заказчику live-версию макета и создаёт эффект погружения. В Фотошопе заказчик видит статическую картинку или документ по слоям, а в Figma он может взаимодействовать с интерфейсом. По клику на кнопку осуществляется переход в другой фрейм, а наблюдатель с той стороны экрана воспринимает это как демо-сайт. Для него это не прототип, а полноценный UI, который работает без верстки.
Панель инструментов, «дерево» слоёв и встроенный инспектор — главные модули двух редакторов, с которыми дизайнер проводит большую часть времени. Они помогают создать интерфейс, обеспечивают навигацию и дают подробную информацию о свойствах элемента.
Ключевое отличие — принцип работы. Отредактировать макет в «Фигме» можно в любом браузере или на компьютере. «Скетч» работает только на операционной системе Apple и фирменных компьютерах Mac.
Инструменты редактирования и прототипирования
У дизайнера часто возникает задача отрисовать векторную иллюстрацию с нуля. Для этих целей Figma не подойдёт. В редактор можно импортировать файлы SVG и минимально влиять на их свойства, но создать детализированную картинку с нуля не получится. В Sketch эта задача легко решается благодаря мощным инструментам работы с вектором.
Элементы в Sketch и Figma привязываются к определённым артбордам, а интерактивное взаимодействие обеспечивается при наведении или клику. Фреймы в «Фигме» более гибкие.
Работа со стилями в Figma более удобная. Цвет можно конвертировать в стиль и применять к любому элементу: заливке, обводке, текстовому фрагменту. В Sketch этот механизм реализован неудобно.
История версий
Главное преимущество облачного решения в том, что данные хранятся в удалённом хранилище. Пользователю не надо выделять пространство на компьютере и жертвовать другими файлами.
«Фигма» учитывает историю редактирования. На бесплатном аккаунте она доступна в течение 30 дней. То есть, дизайнер может просмотреть изменения за месяц. Если перейти на платный тариф, разблокируется полный журнал.
В Sketch функционал тоже реализован, но разработчики часто отключают его, так как файлы сохраняются на компьютере и могут занимать много места. Это выглядит как бесконечное количество клонов одного макета.
Управлять версиями в Figma удобно. Для каждого элемента списка можно задать имя и подробное описание. Сделайте процедуру частью творческого процесса, чтобы легко ориентироваться в version history. Это актуально для всех дизайнеров, так как заказчики часто просят вернуть блок из предыдущего макета и хорошо, если у специалиста есть копия. Для «Фигмы» такой проблемы не существует.
Разве что активен бесплатный тариф, и с момента внесения правок прошло больше месяца.
Импорт и экспорт
Разработчики Figma сделали всё, чтобы «надавить» на недостатки «Скетча» и привлечь аудиторию крутыми фишками. Команда понимала, что векторный редактор для macOS занимает лидирующую позицию и надо заинтересовать потенциальных клиентов.
Целевая аудитория Sketch — дизайнеры с компьютерами Apple. В десктопном приложении «Фигмы» есть функция сохранения проекта в файл. Если внезапно отключится интернет и синхронизация с сервером будет недоступна, выгрузка в локальный документ спасёт от потери данных.
Аналогичным образом работает импорт макетов из Sketch. Выбрали файл на компьютере и через несколько секунд доступно редактирование прототипа. «Фигма» совершила технологический прорыв и сделала переход из конкурирующего редактора максимально безболезненным. Конечно встроенные библиотеки компонентов из «Скетча» перетащить не получится, но это уже что-то.
Шаринг файлов
Сотрудничество с клиентами предполагает обмен файлами и версиями для предпросмотра UI. В Sketch есть нативная интеграция с облачными хранилищами. Сначала документ загружается в сервис и только потом ссылкой можно поделиться.
Команда Figma и здесь нашла гибкое решение. Пользователи могут не только распространять ссылки на live версию макета, но и отправлять готовые библиотеки компоненты. Создал новую команду, сделал общее пространство и открыл доступ. Логотипы, исходники и другие файлы собраны в одном месте.
Возможности:
- Личное приглашение.
- Публичная ссылка с разными правами.
- Встраивание фрейма на сайт.
Совместная работа
Sketch 3 от А до Я
Большинство из вас, наверняка, слышали про новый Sketch 3. Его позиционируют как отличный аналог Фотошопа для UI-дизайнеров, но это не совсем верно. На самом деле, Скетч проще чем Фотошоп, быстрее чем Фотошоп и в целом, гораздо лучше подходит для проектирования и отрисовки интерфейсов.
Чтобы мигрировать в Sketch и разобраться во всех тонкостях его работы, у вас уйдет не больше 2-3 дней. Давайте я расскажу вам основы.
Краткая информация
Начнем мы, пожалуй, с того, что Скетч очень легкий и занимает всего 46 МБ дискового пространства, против 1,6 Гб Фотошопа. В основе его работы лежит безразмерное рабочее пространство, поэтому все макеты находятся не в отдельных, разбросанных тут и там PSD-шках, а в едином документе. И даже если случится так, что безразмерного пространства вам вдруг не хватит :), просто создайте новую страницу в том же самом документе и безразмерных пространств у вас станет два.
Чтобы отделить макеты друг от друга Скетч использует технику артбордов. Каждый артборд может иметь абсолютно любой размер и перемещаться по странице в любых направлениях. Артборды можно копировать, дублировать, именовать, а так же экспортировать по отдельности или все вместе.
Первый запуск
Интерфейс программы состоит из 4 основных областей.
- Панель инструментов и действий
- Панель слоев
- Рабочее пространство
- Панель форматирования
Для начала нам необходимо произвести кое-какие настройки панели инструментов и добавить дополнительные горячие клавиши. Кликаем правой кнопкой по панели инструментов и выбираем пункт Customize Toolbar.
Открывается окно со всеми доступными нам инструментами, которые можно перенести на панель. В принципе, достаточно перенести только примитивы, перо и текст.
Так же стоит добавить дополнительные горячие клавиши, которые почему то отсутствуют по умолчанию. Например показать/скрыть направляющие.
Это делается не в самой программе, а в системных настройках. Переходим в Системные настройки — Клавиатура — Сочетание клавиш. Внизу списка выбираем Сочетание клавиш программ, нажимаем +, выставляем следующие параметры и жмем кнопку Добавить.
- Программа: Sketch
- Название меню: Show Smart Guides
- Сочетание клавиш: Cmd+;
Затем нажимаем еще раз кнопку + и выставляем другие параметры:
- Программа: Sketch
- Название меню: Hide Smart Guides
- Сочетание клавиш: Cmd+;
Отлично, теперь при помощи Cmd+; мы можем показать/скрыть направляющие, как это сделано в Фотошопе.
Вернемся к нашим инструментам. Описывать работу каждого — смысла особого нет. Они просты и интуитивно понятны. Скажу лишь про некоторые из них.
Символы
Символ — это что-то среднее между папкой и смарт-объектом. Символы можно именовать и дублировать бесконечное количество раз, а так же редактировать любые элементы входящие в символ, в режиме реального времени. При редактировании символа редактируются все его дубликаты. Будьте внимательны, к этому привыкнуть по началу очень сложно. Чтобы превратить символ в простую папку, нужно в панели форматирования в выпадающем списке доступных символов выбрать No Symbol.
Модульная сетка
Не требует загрузки из вне, в отличие от Фотошопа. Её можно создать и настроить абсолютно для любого артборда.
Со всеми остальными инструментами вы познакомитесь сами. Пора двигаться дальше.
Панель слоев
Всегда располагается в левой части программы и не может быть перенесена в другое место. Содержит слои, папки и символы. Папки обозначаются голубым цветом, символы — розовым. Принцип работы панели очень схож с фотошопным.
Контекстное меню позволяет производить некоторые операции с объектами, например: копировать CSS стили, дублировать, конвертировать, удалять, крутить и вертеть их.
У разных типов объектов отображаются разные настройки в панели форматирования.
Панель форматирования
Всегда располагается в правой части программы и не может быть перенесена в другое место. Отображает большинство настроек, которые можно производить с выбранным объектом. Добавить тень, прозрачность, выбрать цвет, или изменить размеры — все это возможно сделать на панели форматирования.
Возможности во многом схожи с фотошопными, поэтому особых трудностей с ней не возникает.
Кстати, панель форматирования имеет очень интересную особенность. Вы можете добавить к объекту одно и тоже свойство бесконечное количество раз. Например тень:
В Фотошопе приходилось имитировать одни свойства другими.
Рабочее пространство
Как я уже говорил, оно безразмерное. Для разделения макетов используются артборды. Создать артборд можно при помощи панели инструментов или нажав горячую клавишу А.
Не думаю, что с этим пунктом могут возникнуть какие-либо сложности, поэтому подробно останавливаться на нем не будем.
Однако, стоит упомянуть, что объект входящий в артборд — будет оставаться таковым, даже если часть объекта находится за его пределами. Чтобы понять о чем идет речь, предлагаю посмотреть на скриншот ниже.
Другие полезные функции о которых стоит знать
Экспорт
Экспорт объектов в Скетче очень прост и может происходить разными способами. Например, можно выделить артборд и из панели форматирования перенести его миниатюру на рабочий стол, или любое другое место на диске — файл будет сохранен в формате PNG.
Или можно выбрать слой на панели слоев и перенести его на рабочий стол.
Учитывая особенности программы при экспорте объектов, вы можете задать для них размер 2x и Скетч автоматически увеличит разрешение экспортируемых файлов в 2 раза.
Автосохранение и контроль версий
Вам больше не нужно заботиться о сохранности файлов. Скетч автоматически сохраняет все производимые изменения. Более того, вы легко можете загрузить любую версию выбранного файла, начиная от времени его создания и заканчивая текущим моментом. Для этого перейдите в File — Revert to — Browse all version.
Шаблоны
Для упрощения и ускорения разработки мобильных приложений вы можете воспользоваться шаблонами. Все доступные на данный момент шаблоны находятся в меню File.
Копирование текста без атрибутов
По умолчанию, Sketch копирует текст со всеми добавленными к нему атрибутами. Чтобы этого избежать, нужно скопировать текст, а затем вставить его в нужное место при помощи Edit — Paste and Match Style.
Создание маски
Маска в Скетче работает не совсем так, как она работает в Фотошопе. Принцип её работы скорее похож на Illustrator. Если мы хотим создать маску — поступаем следующим образом. Создаем два объекта и объединяем их в папку. На панели слоев кликаем по нижнему объекту правой кнопкой мыши и выбираем Use as Mask.
Любой из объектов находящихся в папке можно заставить игнорировать маску. Для этого кликаем по нему правой кнопкой мыши и выбираем Ignore Underlying Mask.
CSS свойства
Скетч позволяет скопировать CSS свойства любых созданных вами объектов и вставить код прямо в HTML редактор.
Многостраничность
Страниц можно создать сколь угодно много. Чтобы посмотреть список уже созданных страниц, или добавить новые — перейдите в панель слоев и в правом верхнем углу нажмите на треугольник.
Редактирование векторных объектов
Работа с вектором в Скетче немного отличается от фотошопной. Потребуется время чтобы к ней привыкнуть. Чтобы перейти в раздел редактирования вектора нужно выделить векторный объект и нажать Enter.
Настроек не много. Вы можете выбрать методы работы с точками, а так же задать их радиус скругления.
В заключение
Скетч стал незаменимым помощником для UI-дизайнера. Он не требует специальной подготовки и утомительного изучения миллиона свойств и настроек.
Создавать интерфейсы в нем большое удовольствие. Вы концентрируетесь не на том, как вы делаете, а на том, что вы делаете. Результат превосходит все ожидания.
Буду благодарен за ретвит этой записи.
Источник: onjee.ru