Sketch плюсы и минусы программы

О программе Sketch я узнал еще год назад. Скачал демо тогда еще 2-й версии. Признаться, она меня совершенно не впечатлила. Какой-то слишком простой показалась. Я привык к навороченным интерфейсам софта от Adobe, а расположение панелей в стиле Apple iWork (Pages, Numbers, Keynote) мне по какой-то причине не нравится.

К тому же мне оказалось комфортнее работать с темным интерфейсом, каковой нынче есть в Photoshop CC. Плюс Sketch 2 был достаточно кривоватый, содержал немало досадных багов, да и вообще впечатления не оказывал скоростью работы. В общем, поигрался с демкой и благополучно забыл. Впрочем, оказалось, что зря…

Но со временем стал все чаще и чаще встречать лестные отзывы в адрес программы (например, здесь и здесь). Особенно много их стало появляться весной 2014 года, когда Bohemian Coding выпустили 3-ю версию своего продукта. Создатели уверяли, что, будучи сами дизайнерами, они сосредоточились на изготовлении продукта, максимально заточенного под нужды именно дизайнеров. В первую очередь — дизайнеров интерфейсов и сайтов. Ну, то есть, вроде как для меня.

Что такое SketchUP. Краткий обзор что это такое и как в нем работать

Я снова скачал демо уже новой версии, потыкал, покрутил. Что-то понравилось, что-то нет. И снова у меня не сложилось впечатление, что программа эта мне подходит. Вернулся к привычному фотошопу.

И так случилось, что мне пришлось делать очень сложный и крайне интересный проект, где потребовалось рисовать интерфейсные элементы для iPad с разрешением Retina. Там было много тулбаров, панелей, всплывающих окон. Все это решено было сделать с эффектом матовой полупрозрачности как в iOS7 (transcluent frosted glass).

В фотошопе это сделать непросто, особенно, если требуются динамические объекты, при перемещении сохраняющие размытие расположенных ниже слоев. Такой метод, впрочем, имеется. Но он таит в себе ряд недостатков. Во-первых, нужно постоянно создавать новые смарт-объекты, если меняется структура фона.

Во-вторых, на каждую панель нужно выделять копию смарт-объекта с размывкой, чтобы сделать необходимую маску. В общем, из-за этого макет очень быстро раздулся.

Однажды я обнаружил, что он едва помещается в оперативной памяти, сильно замедляет все процессы, а на жестком диске занимает уже около 700 мегабайт! Я попробовал разделить макет на логические составляющие и разбил его на несколько меньших частей. И все равно, каждый PSD занимал как минимум 100-200 мегабайт.

К тому же временами приходилось одновременно открывать два-три этих макета, чтобы перенести какие-то слои из одного в другой. При этом фотошоп жутко тормозил, что дико нервировало, ведь у меня далеко не самый шустрый мак. Моему старичку уже пять лет, на его борту всего лишь двухъядерный Core2Duo и простенькая видеокарта с 256мб видеопамяти. На момент покупки он более-менее справлялся с возложенными задачами, тогда ведь фотошоп был версии CS5, а она была не настолько прожорливой, как нынешний CC. Увы, Adobe из года в год наращивает свои продукты всевозможными плюшками и функциями, которые в девяти случаях из десяти оказываются бесполезными и только ухудшают производительность пакета, раздувшегося до безобразного состояния.

Какой SketchUp выбрать в 2022

В общем, морока и головная боль.

И тогда я вспомнил про Sketch. Узнал, что там для слоев есть свойство Background Blur, позволяющее просто добиться необходимого эффекта матового стекла на полупрозрачных панелях без применения каких-либо хитростей.

Скачал актуальную на данный момент версию 3.0.3 (которая, кстати, по заверениям разработчиков и многочисленным отзывам пользователей, наконец-то, лишилась большинства багов и недоразумений). И стал пробовать. Ибо твердо решил свитчнуться из фотошопа во что-то более подходящее, несмотря на то, что продукту от Adobe я был верен целых 15 лет.

Вот как выглядит мой вариант расположения панелей в Photoshop CC (кликабельно):

А вот так выглядит окошко запущенного Sketch с небольшой доводкой верхнего тулбара под мои нужды:

Ну что ж, настала пора опробовать программу в работе.

Для начала я решил имплантировать в макет основу, которая у меня имелась в формате EPS. Это простенькая векторная иллюстрация мультяшного характера.

Фотошоп позволяет открыть EPS в виде смарт-объекта, который возможно редактировать лишь в Adobe Illustrator, дважды кликнув по имени слоя в фотошопе. Мне такой вариант совершенно не годился, поскольку была потребность в определенные моменты скрывать какие-то объекты с иллюстрации, переносить их в другом место, вращать и делать полупрозрачными.

Поэтом мне пришлось выбирать в иллюстраторе нужные объекты по отдельности, переносить их через Copy/Paste в фотошоп как смарт-объекты, пока я не получил нужный набор из 20 слоев необходимых мне компонентов. С одной стороны, это оказалось весьма утомительным занятием, а с другой стороны, макет только одной основы в формате PSD вырос до неприличных 40 мегабайт, хотя первоначальный EPS весил всего лишь 7 мегабайт. Вот такая «потрясающая» связка у продуктов одного пакета — Photoshop и Illustrator. Странно, что до сих пор Adobe не сделала адекватное и обоюдное понимание этими программами форматов PSD и AI.

Может возникнуть резонный вопрос, а почему я целиком и полностью не работаю в иллюстраторе? Ну вот как-то не сложилось у меня с ним. Что-то мне в нем сильно не нравится, никак не могу привыкнуть. Да и к тому же, он монстр не менее раздутый, чем фотошоп, и производительностью отнюдь не радует. Плюс там и вовсе невозможно сделать эффект матового стекла простыми методами.

Иными словами, Adobe Illustrator мне нужен лишь как некий промежуточный инструмент, а в качестве основной среды для дизайна лично мне не годится.

И поэтому я использовал Illustrator как перевалочную базу. Дело в том, что хотя Sketch и понимает формат EPS, но импортирует его как-то криво, нередко перевирая заливки и обводки. Зато очень хорошо дружит с форматом Scalable Vector Graphics (SVG). Поэтому в иллюстраторе имеющийся EPS перезаписал в SVG и открыл в Sketch.

Надо сказать, загрузка макета пролетела за считанные секунды, а все объекты сохранили свои характеристики. Скажу даже больше — все группировки векторных форм оказались верными, так что выбрать нужный объект и сделать что-либо с ним получилось проще просто. Собственно, то, что нужно. И файлик в формате .sketch в итоге оказался немногим больше исходного EPS — 7,5 мб. Против 40 с лишним мегабайт .psd!

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

Вот какие получились результаты:

Как видно, фотошоп с треском проигрывает по всем статьям. К тому же не позволяет полностью редактировать все перетянутые из иллюстратора объекты, как это умеет Sketch.

Большинство клавиатурных комбинаций оказались одинаковыми для обоих программ, но к некоторым пришлось привыкать в Sketch. что, в общем-то, не проблема. И даже по прошествии какого-то времени, возвращаясь в фотошоп, я уже по привычке несколько раз пытался использовать скетчевские шорткаты. Все они описаны на этом сайте: sketchshortcuts.com

Там же, кстати, описано, как добавить свои собственные шорткаты. Например, в Sketch не было клавиатурного сокращения для показа/сокрытия направляющих гайдов, так что я добавил привычную комбинацию Cmd-;

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

Следующим этапом стала необходимость создания того самого полупрозрачного окна с эффектом матового стекла в стиле iOS7. Как я уже писал выше, в фотошопе приходилось использовать хитрость с копией смарт-объекта, которая подвергалась гауссовой размывке (Gaussian Blur на 20 пикселей) с добавлением шума (Add Noise со значением 1%).

Вот как выглядела расстановка слоев в фотошопе. Для примера я взял простую фоновую фотографию и добавил белый прямоугольник со скругленными углами, который имитировал всплывающее окно с эффектом матового стекла:

Размер этого PSD — 5,5 Мб

То же самое я сделал в Sketch с помощью встроенных эффектов Background Blur и Noise. получилось вот что:

А размер этого файла .sketch — 643 Кб. Почти в десять раз меньше! При этом всего лишь три слоя (собственно, для основы попапа нужен всего один слой, а не три, как в фотошопе).

Надо ли говорить, что аргументов в защиту фотошопа, с которым я проработал долгих 15 лет начиная с версии 3.0, попросту не находится.

Дальше я взял изображение побольше, уже под iPad Retina и стал создавать полупрозрачные окошки, нашпиговывая их иконками и текстом. И обнаружилось, что моя слабенькая видеокарта не выдерживает такой нагрузки, и при попытке переместить все это добро с обилием блура начинаются весьма ощутимые тормоза.

Но, как оказалось, это легко решаемая проблема. Потому как в Sketch есть такая удивительная штука, как линкованные стили.

Достаточно выбрать один из объектов, на котором имеются все необходимые эффекты прозрачности, размытия, заливка и шум и добавить линкованный стиль:

Затем применить этот стиль ко всем нужным объектам.

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

Когда я создал 10 таких попапов в фотошопе, размер файла увеличился до 19,1 мб, тогда как аналогичный .sketch вырос лишь до 672 Кб.

В Sketch напрочь отсутствуют какие-либо кнопки для выравнивания объектов друг относительно друга, хотя есть такие пункты в меню Arrange (Align и Distribute). Поначалу это меня обескуражило, ведь я привык в фотошопе использовать такие кнопки на тулбаре. Но, как оказалось, они совершенно не нужны. Ведь в Sketch прекрасно реализованы смарт-гайды, и при перемещении объекта можно легко распознать, когда она прилипает к краям другого объекта или находится в центре:

В ходе экспериментов я обнаружил ряд любопытных особенностей Sketch, которые неимоверно улучшают и ускоряют рабочий процесс.

Например, в фотошопе всегда раздражала «прыгучесть» текста, если необходимо изменить тип выравнивания строк. Стоило к выровненному по центру текстовому блоку применить выравнивание влево, как весь текст сдвигался вправо. Наверное, в этом есть какая-то логика, но согласитесь, что всякий раз приходилось предугадывать такое поведение и занова корректировать положение слоя:

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

Кстати, еще немного о тексте. Разработчикам сайтов и интерфейсов будет приятно узнать, что Sketch использует системный антиалиасинг, причем можно как включить, так и отключить субпиксельный рендеринг, что позволяет получить максимальное соответствие тому, что будет отображаться на сайте или в программе. А что там у нас в Photoshop?

В версии CC в дополнение к уже имеющимся пяти типам сглаживания (None, Sharp, Crisp, Smooth и Strong) добавили еще два (Mac и Mac LCD). Но ни один из них не повторяет антиалиасинг, используемый, например, в браузерах. Что делает всю эту охапку методов сглаживания практически бесполезной (хотя None в крайне редких случаях может оказаться полезным).

Вот как для сравнения выглядят типы сглаживания в Photoshop, Sketch и в браузере Safari:

И если в фотошопе после создания текстового объекта необходимо в панели инструментов выбрать что-то другое, например, инструмент перемещения объектов, а для того, чтобы вернуться к редактированию текста, выбрать инструмент текста, то в Sketch никаких переключений между инструментами не требуется. Выбирайте созданный текстовый слой, дважды кликайте и редактируйте. После чего достаточно нажать на любой другой объект или пустую область канваса.

Очень удобным является подсвечивание объекта голубой обводкой при наведении мышки. Причем подсвечивается также рамка вокруг имени данного объекта в палитре слоев:

При работе в фотошопе я нередко сталкивался со странной и никак не прогнозируемой экстраполяцией размеров. Например, нужно вставить в макет с десяток изображений разного размера, превратить их в смарт-объекты и подогнать высоту всех этих объектов под заданную величину. Скажем, уменьшить их пропорционально до 100 пикселей по высоте.

И вот тут нередко начинались мучения. Поскольку каждый объект приходилось уменьшать вручную, постоянно контролируя точность экстраполяции. При этом нужно было обращаться к верхней панели, где размеры по умолчанию указывались в процентах, а для ввода точного значения в пикселах нужно было дописывать «px», и очень порой раздражало, если вовремя не переключил раскладку и ввел «зч», на что фотошоп ругался, ибо таких единиц измерения он не понимает. К тому же символ цепочки, отвечающий за пропорциональное изменение масштаба, как назло, по умолчанию всегда отключен, и приходилось всякий раз напоминать себе его включить. Конечно, и к таким мучениям можно привыкнуть, но надо ли оно?

В большинстве случаев фотоошоп справлялся с масштабированием корректно, но иногда попадались экземпляры, у которых высота была то 99, то 101 пиксель. В реальности там просто добвлялась едва заметная полупрозрачная полоска на одной из сторон.

В Sketch же если вы масштабируете объекты (особенно это важно в отношении растровых объектов), то они принимают исключительно целочисленные значение, такие, как вы указали в окне инспектора. И никаких «пушистых» краев.

И при этом никаких дополнительных символов вроде «px» вводить не требуется, поскольку Sketch изначально заточен под работу с пикселями. Впрочем, можно ввести и проценты, он нормально распознает и смасштабирует объект. Помимо этого, можно использовать арифметически операции вроде 300*2 или 256+128.

Очень полезной оказалась вариативность клавиатурной комбинации Cmd-D. Если слой не был перемещен с копированием, этот шорткап просто дублирует слой. А вот если производилось перемещение слоя с одновременным копированием (при зажатой клавише Alt), вызов Cmd-D продублирует объект с соответствующим смещением относительно оригинала. Так что можно быстро раскидать копии на одинаковое расстояние.

Есть и другой, более любопытный способ распределения объектов — создание сетки из объектов. Для начала нужно выделить требуемые объекты:

Затем необходимо выбрать команду меню Arrange > Make Grid…

И объекты распределятся с указанными отступами:

А если включить чекбокс Boxed, то будут учитываться не линейные размеры самих объектов, а одинакового размера боксы, внутри которых размещаются выбранные объекты:

При этом размер предполагаемого бокса автоматически вычисляется программой под наибольший размер одного из объектов, а сами объекты будут отцентрованы внутри бокса по горизонтали и вертикали. Это очень удобно для распределения неравнозначных объектов:

Имеется, кстати, любопытная опция для треугольников. Если вы отредактировали нарисованный треугольник так, что он стал с разными углами и сторонами, можно легко превратить его в равнобедренный, нажав на инспекторе чекбокс Equilateral:

Конечно, даже в самой свежей версии имеются небольшие досадные баги. Например, манипуляции с объектами временами оставляют экранные артефакты. Но разработчики активно работают над устранением этой проблемы. В бета-версии 3.0.4 я уже не наблюдал таких нюансов. Очевидно, что программа от версии к версии будет становиться все лучше и стабильнее.

Кроме того, отрадно, что разработчики внемлют пожеланиям дизайнеров. Я тоже предложил парочку идей, и мне ответили на следующий день, включив мои пожелания в wishlist на будущие версии.

На этом пока все. В следующих частях я расскажу о своих дальнейших открытиях в замечательной программе Sketch.

Удачного фотошопинга скетчинга!

Источник: habr.com

Sketch против Figma: Сравнение топовых инструментов

Узнайте, кто победит в данной борьбе и какие сильные стороны позволили победителю вырваться вперед.

Еще совсем недавно Sketch, общепризнанно, был инструментом №1 в сфере веб-дизайна, не имеющим аналогов. А затем появилась Figma — первый в своем роде кроссплатформенный (возможность работать на Windows, Mac, Linux) графический редактор, имеющий следующие отличительные особенности:

• возможность работать в браузере;
• работа с векторными изображениями;
• возможность совместной работы над файлами в режиме реального времени.

Ее появление изменило ситуацию на рынке.

Исследование, проведенное UXtools, показало, что около 66% дизайнеров использовали Figma для проектирования UI в 2020 году, что является огромным скачком по сравнению с 37% в 2019 году. В 2019 году Sketch был ведущим инструментом для управления системами проектирования и создания прототипов, но в 2020 году он был обогнан компанией Figma.

Возможно, пандемия COVID-19 и рост популярности дистанционной работы способствовали массовому переходу дизайнеров на Figma, поскольку она упрощает работу команд удаленно и позволяет им сотрудничать в режиме реального времени? Или же просто Figma — лучший инструмент для проектирования пользовательского интерфейса?

1. Быстрый ответ: какой инструмент для дизайна пользовательского интерфейса лучше?

С момента своего официального запуска в сентябре 2016 года, компания Figma по сей день продолжает прогрессировать в своем развитии, чтобы не только соответствовать, но и превосходить своих конкурентов, и достигла в этом значительных успехов.

Веб-платформа Figma идентична Sketch по функциональности, возможностям проектирования и производительности, а также осуществляет более 80% того, на что способен Sketch. Для расширения своих возможностей Sketch в основном полагается на плагины сторонних производителей, в то время как Figma, чтобы повысить производительность и обеспечить бесперебойность рабочего процесса, имеет встроенные плагины.

Вот ссылка на видео на YouTube, которое мы нашли полезным:

Более того, Figma позволяет дизайнерам делиться своими макетами с разработчиками для проверки и получения быстрой обратной связи. Любой дизайнер может управлять настройками общего доступа, который предоставляется в зависимости от роли сотрудника в проекте, например, разрешая «только просмотр» или «редактирование”. Это очень похоже на Google Docs для дизайнеров.

Sketch, напротив, не имеет поддержки функции совместной работы, поэтому дизайнеры вынуждены работать отдельно друг от друга и обмениваться своими файлами только тогда, когда они готовы. Чтобы обменяться файлами с другим дизайнером, необходимо сначала загрузить файл в облако Sketch, а затем обменяться ссылками. Sketch не предлагает никаких альтернативных вариантов совместной работы в режиме реального времени или командной работы, что очень опрометчиво с их стороны.

Помимо всего вышеперечисленного, Figma имеет встроенную функцию комментирования, благодаря которой, сотрудники команды, работающие над одним проектом, могут общаться для достижения общей цели. В Sketch тоже можно воспользоваться такой формой командной работы, однако для этого необходимо использовать сторонний плагин, чтобы можно было интегрировать Zeplin или InVision для добавления комментариев к вашему дизайну.

Работа с векторными изображениями

Работа с векторными изображениями — одна из основных функций, отличающих Figma от Sketch. Теперь, с помощью данной функции дизайнеры могут лучше управлять векторными объектами. Раньше векторные объекты представляли собой последовательность соединенных точек и узлов, но с появлением Figma все изменилось — теперь дизайнеры могут легко добавлять новые линии или кривые к любой точке или узлу.

Эта функция позволяет легко соединять различные точки и играть с геометрией объектов. В отличие от этого, Sketch позволяет дизайнерам управлять векторными объектами, но это становится несколько сложным при работе со сложными векторными объектами после применения булевой операции. Figma полностью устраняет эту проблему.

В Sketch дизайнеры могут связывать точки только между собой. В Figma можно разветвлять линии или кривые из любой точки, а с помощью инструмента Bend можно даже изгибать или перемещать определенный сегмент, что особенно удобно при создании иконок.

3. Sketch против Figma: есть ли сходства?

Функции и особенности

Если пользователь Sketch в первый раз откроет Figma, у него не возникнет проблем с тем, как ее использовать — пользовательские интерфейсы Sketch и Figma очень похожи. Говорят, что Figma похожа на веб-версию Sketch, что является ее преимуществом, поскольку дизайнеры, которые захотят перейти со Sketch на Figma, смогут быстро ее изучить.

Сходства в интерфейсе Sketch и Figma:

• похожие функции;
• схожие горячие клавиши (сочетания клавиш для выполнения определенных действий);
• одинаковое расположение элементов: слои — слева, инструменты — вверху, холст— в центре.

Первое очевидное отличие интерфейса этих инструментов заключается в различной терминологии элементов, выполняющих одну и ту же функцию:

• То, что в Sketch называют “символы”, в Figma — компоненты;
• То, что в Sketch называют “артборды”, в Figma — фрэймы;
• То, что в Sketch называют “свойства правой панели”, в Figma — инспектор.

Символы или компоненты

Sketch и Figma имеют стандартные элементы, которые можно дублировать по страницам и редактировать одновременно. В Sketch эти элементы дизайна называются символами, а в Figma — компонентами. Хотя символы Sketch и компоненты Figma практически одинаковы и функционируют очень похожим образом, они имеют несколько различную реализацию.

В Sketch существует отдельная страница символов, на которой сохраняется экземпляр каждого создаваемого дизайнером символа, а редактирование исходного символа применяется ко всем экземплярам этого символа. Когда вы создаете компонент в Figma, он обозначается главным компонентом, а когда вы копируете этот компонент в любое другое место — создается экземпляр

Каждый экземпляр может быть отредактирован на месте, но положение элементов не может быть изменено. В то время как компоненты Figma более гибкие и универсальные, символы Sketch создают организованный и упорядоченный рабочий процесс для дизайнеров.

Артборды или фреймы

С помощью Figma или Sketch дизайнеры могут создавать несколько артбордов (которые в Figma называются фреймами) и страниц с макетами колонок и сетками. Также дизайнеры могут устанавливать ограничения на то, как элементы масштабируются при изменении размеров их контейнеров. Оба инструмента имеют очень похожий пользовательский интерфейс для управления этими функциями.

Однако разница все же существует:

• Sketch допускает размещение только одного артборда на странице;
• Figma разрешает размещать несколько фреймов на странице, которые могут быть вложены друг в друга, а каждый фрейм может иметь отдельные настраиваемые пользовательские сетки.

Можно было бы сказать, что фреймы Figma эффективнее, но так как группы ограничений не разрешены, это выводит два инструмента проектирования на один уровень.

4. Sketch: для чего лучше подходит, какие есть недостатки?

Sketch — основной инструмент для создания векторного дизайна, пользующийся популярностью у большинства профессиональных дизайнеров уже более десяти лет. С момента своего первого релиза в 2010 году он вырос в геометрической прогрессии и оказался очень полезным инструментом при создании веб-сайтов. Хотя основная область применения данного инструмента — создание веб-дизайна, помимо этого он может быть использован для разработки:

• мобильного дизайна;
• дизайна пользовательского интерфейса;
• графического рендеринга;
• дизайна иконок.

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

Многие дизайнеры поклоняются Sketch, потому что с его помощью можно справиться практически с любым дизайнерским проектом. И все это благодаря его обширной коллекции полезных плагинов сторонних разработчиков. Однако даже не смотря на это, Sketch не является универсальным и идеальным инструментом для создания дизайна по ряду следующих причин:

Доступен только пользователям Mac

Sketch — это локальное приложение для настольных компьютеров Apple, которое доступно только дизайнерам, использующим Mac. Это самый главный недостаток Sketch, отталкивающий дизайнеров, которые используют ПК с другими операционными системами. Если бы Sketch имел версию для Windows и Linux, вероятнее всего, большинство дизайнеров оценили бы ее по достоинству и у него был бы шанс на звание самого идеального инструмента для проектирования.

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

Отсутствие встроенной системы совместной работы

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

Сотрудничество в режиме реального времени между членами команды повышает производительность, что дает преимущество Figma. Sketch имеет несколько плагинов для преодоления этого пробела.

5. Figma: для чего лучше подходит, какие есть недостатки?

Figma — инструмент проектирования, который был создан специально для того, чтобы облегчить процесс командной работы с быстрым взаимодействием между дизайнерами, работающими удаленно, в режиме реального времени. Но, конечно, ее также можно использовать и дизайнерам-одиночкам.

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

• дизайна сайтов;
• мобильного пользовательского интерфейса приложений;
• UX-дизайна;
• интерактивного прототипирования и многого другого.

Пользовательский интерфейс Figma очень напоминает Sketch, поэтому, как начинающие, так и профессиональные дизайнеры могут легко освоить его в кратчайшие сроки. Кроме онлайн-сотрудничества, в Figma также есть система, которая способствует организации файлов, позволяющая дизайнерам обмениваться файлами и макетами с разработчиками.

И все это осуществляется посредством встроенных функций Figma, без использования сторонних плагинов, что значительно повышает эффективность и улучшает рабочий процесс. Даже несмотря на то, что Figma, по сравнению со Sketch, является относительно новым инструментом в сфере дизайна, она быстро обрела популярность благодаря своим возможностям проектирования, которые в настоящее время находятся на одном уровне со Sketch.

Однако за счет функции командной работы Figma опережает Sketch на несколько шагов. Но делает ли это Figma идеальным инструментом для проектирования? Не совсем.

Не работает в автономном режиме

Figma не работает в оффлайн-режиме, что может доставить пользователям следующие неудобства:

• Зависимость от интернет-соединения может вызвать задержку и замедлить загрузку файла, особенно если ваше соединение недостаточно устойчивое;
• Это очень неудобно для дизайнеров, которые работают на ходу: во время перелетов и в поездах. Полнофункциональная офлайн-версия Figma позволила бы им выполнять свою работу и оставаться продуктивными вне «традиционных» рабочих часов.

Тем не менее, дизайнеры все еще могут выполнять определенные задачи в автономном режиме с помощью настольного приложения Figma. К ним относится создание:

• новых слоев;
• рамок;
• векторных объектов;
• базовых фигур;
• булевых операций;
• редактирование слоев;
• сохранение файлов на компьютере в формате .fig;
• также запуск определенных плагинов.

5. Часто задаваемые вопросы

Может ли Figma открывать файлы Sketch?

Да, Figma позволяет дизайнерам плавно перейти от Sketch, не теряя при этом своих старых дизайн-макетов. Для этого необходимо использовать функцию импорта, с помощью которой можно переместить файлы Sketch на свой аккаунт Figma. Кнопка импорта находится в браузере файлов, с помощью которой можно перетащить файл Sketch.

Импортированные в Figma файлы эскизов в основном остаются прежними, страницы, слои, тексты и фигуры — нетронутыми, а символы преобразуются в компоненты. Это также работает и в обратную сторону — вы можете переключиться на Sketch, перетащив SVG-файлы, экспортированные из Figma непосредственно в Sketch.

Работает ли Figma со Sketch?

Несмотря на сходство этих двух платформ, Figma и Sketch имеют значительные различия в том, как компоненты и символы реализуются и переопределяются. Компоненты в Figma гораздо более гибкие, поэтому их можно легко настраивать и редактировать, но Sketch допускает только заранее заданные переопределения.

Figma позволяет дизайнерам изменять или модифицировать свойства слоев в компоненте без отсоединения от основных компонентов, это также работает и для вложенных компонентов. Однако, Sketch допускает только несколько правок для символа, и если вы хотите изменить такие свойства, как размер текста, цвет или вес границы, вам придется отсоединиться от символа и создать другую версию того же самого элемента.

Другим решением для получения гибкости и полного контроля над стилем является вложение каждой версии в один символ, но это создает сложную систему, которая плохо импортируется в Figma.

Что лучше изучать: Figma или Sketch?

Sketch и Figma являются отличными инструментами веб-дизайна, и если вы уже освоили один из них, скажем Sketch, научиться использовать другой будет очень легко. Любой дизайнер, который использует Sketch будет интуитивно знать, как использовать Figma. Оба инструмента интуитивно понятны и имеют очень похожие пользовательские интерфейсы и функции.

Adobe XD лучше, чем Figma?

Оба имеют базовые возможности большинства инструментов проектирования, но у Figma больше функциональных возможностей, чем у Adobe XD.

Заключение

Любой из этих двух инструментов проектирования прекрасно подходит для дизайна пользовательского интерфейса. Как UI-дизайнеру, вам предстоит сделать выбор в пользу одного из этих инструментов проектирования, который будет во многом зависеть от следующих факторов:

• ваши личные предпочтения;
• что удобнее именно вам;
• самое главное — что лучше всего работает для вашей команды.

Тот факт, что Figma имеет более гибкие компоненты со встроенными функциями, которые балансируют между производительностью и продуктивностью, делает ее лучшим инструментом проектирования для нас. Да, у нее нет такой огромной библиотеки плагинов, как у Sketch, но нельзя отрицать, что возможность командной работы и гибкость платформы Figma ставит ее на первое место.

Источник: www.uprock.ru

7 причин почему Sketch — идеальный инструмент для дизайна интерфейсов

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

Цена — еще одно преимущество Sketch. Единоразовая плата за приложение составляет $99. В сравнении с подпиской Adobe за $40/месяц это очень выгодное предложение. Не удивительно, что Sketch быстро стал лучшим другом дизайнеров.

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

Sketch весит очень мало (~38MB) в сравнении с Photoshop (~2GB). Он на 100% векторный, что гораздо упрощает все манипуляции с элементами дизайна. Вы также можете не беспокоиться по поводу размеров, разных для веба, iOS и Android.

Векторная графика весит меньше, что само по себе улучшает быстродействие и устойчивость к зависанию. Если вы не используете много больших картинок, вы врядли получите файл больше 50MB.

Инспектор

Инспектор справа (см. рис. 1) разделен на несколько секций. Вы можете настроить параметры для текущего слоя, такие как положение, размер, заливка, границы и прочее.

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

Артборды и шаблоны

Артборды — это фиксированные фреймы, которые можно располагать в любом месте бесконечного канваса Sketch.

Есть множество различных пресетов размеров на выбор для iOS-устройств, адаптивного веб-дизайна и т.д.

Что действительно удобно использовать, так это разные шаблоны, доступные в Sketch. От компонентов iOS и Material Design до иконок приложений и артбордов веб-дизайна.

Символы и общие стили

Если вы — дизайнер интерфейсов, то наверняка знаете, как часто надо использовать повторяющиеся элементы. Дублирование таких элементов — довольно простая задача, проблемы начинаются, когда нужно внести изменение во все копии.

И вот тут на помощь приходят символы Sketch. Символы — это повторно используемые группы, которые связаны между собой. Изменение разных атрибутов слоев в символе автоматически обновит все его сущности. Символы локальны, и их нельзя использовать в разных документах.

Общие текстовые стили очень похожи на символы. Они помогут организовать документ, чтобы никогда не пришлось переживать по поводу соответствия текстовых стилей по всему документу.

Макетная сетка

В Sketch интегрирован мощный инструмент под названием Layout Grid, который удобен при дизайне структурированного интерфейса pixel perfect. Ширина колонок и разделителей настраивается и легко меняется на ходу.

Превью на устройстве

Для дизайнеров интерфейсов очень важно тестировать дизайны на родных устройствах, под которые они создаются. Часто бывает так, что на большом мониторе всве смотрится отлично, но совсем плохо подходит для небольших экранов, как на iPhone 4.

Вы можете легко тестировать свои дизайны с помощью Mirror. Нужно просто скачать iOS-приложение “Sketch Mirror” из App Store и открыть его на устройстве. Убедитесь, что ваше мобильное устройство и компьютер подключены к одной беспроводной сети. Если нужно работать оффлайн, подключите мобильный к компьютеру с помощью кабеля.

Экспорт

Экспорт — одна из множества идеально продуманных опций в Sketch. Если вы пересели на него с Photoshop, вы знаете, как этот инструмент может сэкономить массу времени и избавить от головной боли. Экспорт исходников — очень простой процесс, нужно просто сделать слои экспортируемыми и все (см. рис. 4). Также полезная вещь — слайсы.

Часто мы создаем иконки для интерфеса, и они нуждаются в фиксированных полях вокруг. Вот для чего нужны слайсы.

Плагины и сообщество

Последнее, но не менее важное преимущество Sketch, — его сообщество. Я не видел нигде такого же мощного сообщества. Сообщество Sketch потрясающее из-за людей, которые совершенствуют Sketch посредством разработки полезных плагинов, уроков и помогая друг другу статьями и бесплатными вкусняшками.

Источник: infogra.ru