Sketch figma что это

Sketch vs. Figma

We’re the original design alternative. Yes — we built the best native Mac app for designers. But we didn’t stop there. With web-based tools for sharing work, getting feedback, testing prototypes and handing off to developers in any browser, we’re a platform for the entire design process – and we’re still independent.

Try Sketch today, you’ll feel the difference.

How does Sketch compare with Figma?

Feature	Sketch	Figma
Real-time collaboration
Shareable prototype links
Developer handoff
View documents on iPhone and iPad app
Includes a powerful native Mac app
Full offline workflow
User control over who sees your work
Strict override control for Design Systems
Open file format
Advanced color management
Work with local documents
Artboard Templates
No document size limit (via RAM usage limit)
Billing with no surprises
The complete platform for only $12/month
No credit card required for full featured free trial
Independent

Can Sketch do real-time collaboration?

Yes! Figma says it’s not possible. We say that real-time design collaboration is for native apps, too.

Sketch subscriptions come with a shared Workspace, so your team can do everything from designing seamlessly side-by-side in the same space to sharing documents with version histories (with unique links for each and every version).

With Sketch, everyone’s on the same page

Work together, see everyone’s cursors, and break through the finish line with no conflicts along the way.

Behind the scenes: How we added real-time collaboration to a native Mac app

Native app or web app? How do I choose?

What’s better , a native app or a web app for design work? It’s 2023, so we say why choose? Don’t restrict yourself with a design tool that’s limited to only web tech. With Sketch, you get the best of both worlds.

Truly native

Our native app for designers offers great features that web-based electron apps, like Figma, simply can’t. That means super-fast performance on Apple silicon, native font rendering and P3 color profiles.

With the power of the browser

Share your designs with our powerful web app. Invite collaborators to your documents, then give and get feedback in any browser, on any operating system.

Developers, project managers and other team members get the tools they need. A focussed environment for every stakeholder means Sketch is easier to learn and easier to use, with less distractions. Keep your workflow simple.

On or offline? Either’s fine.

Sketch doesn’t force you to have an internet connection to do your design work.

The freedom to work online and offline in our Mac app is right here. Grab it!

You can create new documents, keep existing projects moving and even access Libraries.

You have the freedom to design at any time. Whether you’re going through a tunnel, a power surge, or a detox from the newsfeed, Sketch still works.

Why does the Sketch UI feel so good?

Our processes just make sense so you can do better work, and do it faster.

The fact is, you won’t find a UI this intuitive to Mac users anywhere else. Apple set the standard for what great creative software should be — and our goal with Sketch was to make a design app as easy to use as Keynote.

You can say goodbye to Figma’s unfamiliar UI and head scratching moments. Like this, this and this.

Our Mac app makes perfect sense, so you can spend more time on Bezier curves, and less time on learning curves.

Figma или Sketch: что лучше для веб-дизайна

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

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

Figma

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

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

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

Sketch

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

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

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

Сходства и отличия Figma и Sketch

При сравнении Figma и Sketch можно выделить несколько ключевых факторов:

Функциональность

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

Совместная работа

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

Совместимость

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

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

Figma VS Sketch

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

Вот некоторые различия и сходства между этими двумя редакторами:

Функция	Figma	Sketch
Онлайн-редактор	Да	Нет
Совместная работа	Да, в режиме реального времени	Нет
Поддерживаемые платформы	Любая платформа с браузером	Только macOS
Бесплатная версия	Да, с ограниченными возможностями	Да, с ограниченным временем использования
Платная версия	Да, с более продвинутыми функциями	Да, с полным набором функций
Набор функций	Векторная графика, прототипирование, редактирование макетов, анимации	Векторная графика, редактирование макетов, плагины
Интуитивный пользовательский интерфейс	Да	Да
Экспорт макетов в другие форматы	Да	Да

Заключение

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

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, которое мы нашли полезным:

2. Figma против Sketch: подробное сравнение

Mac-Only против веб-платформы

Самое первое и ощутимое различие между этими двумя инструментами дизайна, которое можно заметить невооруженным взглядом: Figma является веб-инструментом, работающим в браузере, а Sketch — это настольное приложение, доступное только пользователям Mac. Так как Sketch является локальным приложением на компьютерах Apple, только дизайнеры с Mac могут работать со Sketch, потому что не существует версий для Windows или Linux OS.

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

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

Опции плагина

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

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

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

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

Дизайн прототипа

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

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

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

Несмотря на их различия, справедливо сказать, что эти два инструмента проектирования равномерно сильны в этой категории.

Поддержка командной работы

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

Более того, 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 отлично подходит для создания:

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

Пользовательский интерфейс 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 ставит ее на первое место.

Противостояние Figma и Sketch глазами дизайнеров AIC

«Священная война» между Sketch и Figma продолжается уже не первый год, и остановить её, кажется, не сможет ничто. Какие бы аргументы ни приводили представители того или иного лагеря, у противников всегда найдётся, чем ответить.

И даже главный аргумент адептов Figma, апеллирующих к тому, что Sketch есть только под macOS, заставляет оппонентов только презрительно хмыкать. Ведь во-первых, если требуется выполнить определённые задачи, с которыми Sketch справляется успешней, всегда лучше обратиться к специалисту, который использует именно подходящую систему. А во-вторых, «macOS всегда лучше» (это уже отголоски другой «войны»).

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

Sketch

Векторный редактор Sketch был создан голландской компанией Bohemian Coding. Программа вышла 7 сентября 2010, и это был первый серьёзный удар по Photoshop и Illustrator, которые по большей части держали монополию на графическом рынке до этого. В качестве главной задачи Sketch было сразу обозначено проектирование интерфейсов мобильных приложений и веб-сайтов, а поддержка возможности создания интерактивных прототипов немало поспособствовала тёплым отзывам аудитории. В 2012 году Sketch даже получил награду Apple Design Awards!

Учитывая год появления первой версии (всё-таки, Figma на шесть лет младше), Sketch куда чаще сравнивали с Adobe Photoshop. И одним из ключевых отличий по сравнению с мастодонтом можно назвать то, что новый редактор не использовал собственных средств для отображения создаваемого контента. За это отвечают инструменты macOS — QuickTime, Quartz Extreme, Core Image, Core Animation, OpenGL и ColorSync.

Одним из главных плюсов Sketch можно назвать его идеальные по точности инструменты. Редактор строго заточен под дизайн интерфейсов и предназначен исключительно для того, чтобы выполнить поставленную задачу. И хотя некоторые могут назвать отсутствие множества инструментов, как, например, в Photoshop, «минусом», в этом и есть фишка Sketch — это очень аккуратный прибор.

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

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

Коля Иванов, арт-директор AIC

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

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

Лена Рамазанова, дизайнер AIC

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

Но как ни крути, без минусов не обходится ни единая программа. И главным недостатком Sketch на протяжении всех десяти лет существования этого редактора остаётся отсутствие совместимости! Большая часть дизайнеров относится к «макам» хорошо, а вот о разработчиках такого не скажешь. Так что при использовании Sketch придётся привыкнуть к тому, что обязательно потребуются посредники вроде Avocode или Zeplin, которые позволят открывать файлы Sketch в Windows и Linux.

Figma

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

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

Именно такой подход можно назвать главным минусом Figma. По сути, программа обогнала своё время: когда работа по принципу web app не будет ограничена настолько жёсткими рамками, это станет гораздо более удобным, чем банальная работа на лэптопе или десктопе.

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

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

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

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

Леша Елфимов, дизайнер AIC

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

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

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

Коля Иванов, арт-директор AIC

Вечный спор

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

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

Другой, ничуть не менее важный момент: в Figma можно работать на любых устройствах, а в Sketch — только пересадив всю команду на «маки». А кого-то, возможно, и переучивать! Да, в общем картина, может быть, выглядит далеко не так грустно, как кому-то может показаться, и по большей части дизайнеры не против «маков». Но всегда остаются частные случаи, а исключения нередко бывают важнее правил.

Ну и конечно, возможность одновременной работы над проектом. Пока дизайнер доделывает макет, разработчик уже может анализировать его в реальном времени, а тестировщик сверять макет с поставленной задачей. Может в любой момент подключиться к делу второй дизайнер, который внесёт изменения одновременно с первым. Работу видят сразу все, и это обязательно ускорит процесс работы! Да, приватностью придётся пожертвовать, и никакого творческого уединения работающему над проектом художнику не светит. Но при работе над крупными заказами это чаще всего неизбежно.

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

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

Леша Елфимов, дизайнер AIC

В чём сила?

Так в чём же сила, брат? Figma или Sketch удобней своего главного конкурента? Figma пригодится вам на случай, если работа идёт в команде — или, кстати, на удалёнке, когда контакт с другими участниками проекта ограничен. Ну и кроссплатформенность очень сильно помогает, что особенно заметно всё в тех же крупных проектах.

Если же вы делаете что-то соло, никаких постулатов нет. Но всё-таки задумайтесь о том, что всю жизнь работать в одиночку не выйдет. И чем дольше вы будете пытаться быть ближе к истокам, тем сложнее будет потом выбираться из родной норы.

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

Нелогичные на первый взгляд принципы, по которым работают компоненты, вложение фрейма во фрейм (я так до сих пор и не нашёл ему практического применения и пользуюсь классическим подходом с символами на отдельной странице)… Отсутствие стилей слоёв, из-за которого приходится либо хранить используемые стили в библиотеке как отдельные формы, или бегать в поисках нужного стиля слоя.

Леша Елфимов, дизайнер AIC

И это, между прочим, слова человека, который считает, что «плюсы от командной работы в Figma — это космос». Привычка и действия, доведённые до рефлексов — вещи настолько же удобные и полезные, насколько и страшные. Поэтому пересесть с одного редактора на другой без массы проклятий в адрес этого другого, скорей всего, не получится.

Основные плюсы Sketch — в разных мелочах, которые реализованы более удобно. Удобно настраивать символы, выбирать шрифт (потому что есть превью), иконки выбирать, маскировать изображения и так далее. То есть, вроде всё то же самое, но сделано чуть лучше. Лично мне ещё приятнее работать с нативным интерфейсом.

Лена Рамазанова, дизайнер AIC

И ещё: не считайте, что выбрав один из предлагаемых вариантов, вы получите идеал. По сравнению друг с другом в Sketch и Figma, может быть, и совсем незначительные минусы, если рассматривать их именно как редакторы. Но как раз в том, что это редакторы, и есть их главный минус.

Они всё ещё работают как графические редакторы, а не интерфейсы проектирования компонентов и лэйаутов. Хочется, чтобы в будущем мы не «рисовали» кнопку и ставили её на место в макете, а работали только с компонентами и иерархией лэйаутов, могли настраивать логику работы и подключать к проекту кодеров не чтобы они забирали твои макеты, а чтобы они прямо там дорабатывали механику интерфейса.

Коля Иванов, арт-директор AIC

Так кто кого?

Искренне надеемся, что в этой воде мы вас ещё не утопили. Подвести итог хочется кратко: кто, кого, как и в чём обходит. Итак, главные плюсы и минусы Figma и Sketch по нашему мнению:

Грубо говоря, если отбросить личные предпочтения и привычки, Figma сейчас является самым популярным редактором за счёт удобства работы над крупными проектами, в которых задействовано несколько человек.

И это подводит нас к ещё одному очень интересному моменту: около года назад команда авторов Sketch представила миру открытую бета-версию Sketch for Teams — нового редактора, который, если верить разработчикам, «выведет взаимодействие в командах на новый уровень».

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

Появление полной версии Sketch for Teams может стать существенным ударом по Figma — по сути, этот редактор потеряет свою незаменимость. Работа над программой пока ещё не закончена, но уверяем, мы за ней следим очень пристально. И будьте уверены, как только появятся новости, мы вам сообщим!

Сделай хорошее лучше

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

Rename It, который переименовывает слои пачками по заданным правилам — очень удобно для сортировки списков. Для Sketch — Symbol Organizer, который автоматически расставляет элементы на странице и приводит их в порядок.

И Nudged, который тоже потребуется вам только в Sketch. Это настройка перемещений и отступов. По умолчанию Sketch двигает по 10px, но всё чаще сейчас нужно настроить на 4- или 8-писксельный микромодуль. В Figma такие настройки есть по умолчанию.

Леша Елфимов, дизайнер AIC

Я использую всего несколько плагинов. Avatar — для быстрой установки индивидуального аватара. AEUX, когда нужно перенести интерфейсы в After Effects для анимации. И Vectary для вставки подготовленных 3D-имиджей в проект.

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

Коля Иванов, арт-директор AIC

Я, честно говоря, не фанат плагинов, мне проще всё сделать руками. В Figma у меня стоит Scale (просто потому, что такой функции в Figma нет), иногда использую Rename it.

В Sketch был удобный Automate — там очень много разных полезных функций, я все даже не знаю… Ну и Fix San Francisco Character Spacing удобен, чтобы вручную не настраивать шрифты.

Лена Рамазанова, дизайнер AIC