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

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

Так откуда же появилась Figma?

Figma была соучредителем в 2013 году Диланом Филдом, который хотел «сделать для дизайна интерфейса то же, что Google Docs сделал для редактирования текста».

В интервью Techcrunch еще в 2015 году, Филд объяснил: «Дизайн претерпевает грандиозный сдвиг — от того момента, когда дизайн находился в самом конце производственного цикла, когда люди просто делали вещи красивее, до настоящего момента, когда он проходит через весь процесс».

Он намеревался произвести революцию в способах сотрудничества дизайнерских команд — но разве этот новичок может соревноваться за давний любимый Sketch?

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

  1. Платформа и производительность
  2. Цены
  3. Начало работы
  4. Возможности и функциональность
  5. Вердикт
  6. Мастерская эскизов
  7. Мастерская Фигмы

1. Figma против Sketch: платформа и производительность

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

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

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

2. Figma против Sketch: цены

Прежде чем мы перейдем к конкретным функциям и возможностям, давайте сравним цены.

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

На момент написания ценовой план Figma все еще находится в разработке. прогресс. В настоящее время этот инструмент можно использовать бесплатно для частных лиц. План Professional Team стоит 12 долларов за редактора в месяц при ежегодной оплате или 15 долларов за редактора в месяц при ежемесячной оплате. Figma также работает над планом Enterprise, который должен выйти в 2018 году..

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

3. Figma против Sketch: начало работы

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

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

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

4. Figma против Sketch: особенности и функциональность

Теперь давайте углубимся в некоторые конкретные функции и особенности.

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

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

Figma также взяла традиционный инструмент рисования и улучшила его, используя векторные сети вместо контуров. Как объясняет соучредитель Figma Эван Уоллес: «Векторная сеть улучшает модель пути, позволяя использовать линии и кривые между любыми двумя точками вместо того, чтобы требовать, чтобы все они соединялись в единую цепочку». На практике это означает большую гибкость при рисовании.

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

5. Figma против Sketch: вердикт

Итак, Sketch нашел свое соответствие в форме Figma?

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

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

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

Теперь пришло время принять собственное мнение. На онлайн-семинарах ниже Якуб и Ольга, эксперты по Sketch и Figma, познакомят вас с инструментами.

6. Sketch Workshop

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

7. Мастерская Figma

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



Дилемма Sketch vs Figma

 Изображение для сообщения

Ами Балло

23 июля 2020 г. · чтение 9 мин.

Я отчетливо помню, сколько ненависти было в моем сердце, когда я пережил свое первое обновление пользовательского интерфейса. Шел 2009 год; Я только что снял брекеты и был готов нажать кнопку «Нравится» на статусе моей школьной любви, когда впервые за неделю зашел в Facebook.. Я был опустошен, обнаружив, что что-то не так. Текстовая навигация была заменена иконографией, напоминания о событиях располагались ниже по странице, и это в целом вызывало беспокойство. Кто это сделал? Я только что освоил навигацию по сайту, как профессионал, культивировал успех Farmville, как вы не поверите, возвращая бессмысленные «тычки» с молниеносной скоростью. Я знал, что функционально сайт такой же, но мне казалось, что моя мебель была полностью переставлена, пока меня не было дома.

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

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

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

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

Изображение для сообщения

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

  • Оба инструмента являются первоклассными. Если вы новичок в блоке и впервые пользуетесь одним из этих инструментов, знайте, что вы уже сделали хороший выбор. Любой из этих инструментов представляет собой абсолютно современное программное обеспечение для создания прототипов, и никто не станет спорить иначе. Скорее всего, вам понравится то, что больше всего похоже на те инструменты, которые у вас есть!
  • Sketch работает только в Mac OS. Figma — это приложение на основе браузера, в котором также есть настольные приложения для Mac и Windows.. Звучит неплохо, что в Figma есть 3+ варианта, но вам, вероятно, действительно нужен только один. А если вы дизайнер, скорее всего, вы живете и умираете из-за своего Macbook, поэтому оба варианта подходят. Не позволяйте этому быть решающим фактором, если вы не планируете совместную работу на нескольких платформах. (Однако учтите, что будучи веб-платформой, Figma хранит все ваши файлы дизайна в облаке, освобождая место на жестком диске и обеспечивая доступ к самым последним файлам. с любого компьютера с интернет-браузером.)
  • Figma предлагает совместную работу в реальном времени. В Sketch есть обходные пути. С самого начала в Figma была возможность позволить нескольким дизайнерам, разработчикам и/или группам контента одновременно работать над одним файлом. Подобно редактированию Google Doc с несколькими людьми или совместной работе в Miro. Эта возможность чрезвычайно полезна, если ваша команда разработчиков работает в тандеме над общим файлом. Контроль версий никогда не является проблемой в Figma.
  • В Sketch совместная работа над файлом с другими дизайнерами может быть сложной задачей. Например, представьте, что ваша команда дизайнеров управляет комплексной системой дизайна или руководством по стилю структуры. Ваш товарищ по команде разрабатывает набор новых компонентов, пока вы управляете типографикой. Изменения, которые вы вносите в стили текста, повлияют на все компоненты, которые включают текст, поэтому вы должны постоянно общаться о том, кто и когда нажимает кнопку сохранения. Ваш товарищ по команде может даже заблокировать вас из-за страха, что вы переопределите его работу, если начнете раньше, чем он закончит. Помимо командного взаимодействия, Sketch предлагает несколько обходных путей, которые могут помочь в управлении версиями. Плагины, такие как Abstract и недавно запущенные Sketch Teams, созданы для обхода этой проблемы, хотя они и небезопасны.
  • Figma имеет более сложные встроенные возможности передачи обслуживания разработчикам . Чтобы подчеркнуть суть тесного сотрудничества с Figma, он был создан с учетом кросс-функциональных команд, в частности команд дизайнеров и разработчиков. В Figma есть встроенная панель для разработчиков, получающих доступ к файлу. Это позволяет им мгновенно просматривать спецификации CSS, iOS и Android по мере обновления дизайна. Встроенные возможности Sketch ограничиваются возможностью пользователя щелкнуть элемент правой кнопкой мыши и «Копировать CSS». Однако у Sketch есть множество плагинов и интеграций, чтобы обслуживать команды разработчиков так же, как и Figma.
  • Когда дело доходит до ресурсов, Sketch берет верх. Sketch существует дольше и имеет гораздо большее сообщество, чем Figma. Только для Sketch существует почти бесконечное количество библиотек значков, файлов систем дизайна, плагинов для приложений, векторных иллюстраций и т. Д. Быть ветераном Sketch лучше всего, потому что вам становится удобнее работать с инструментом и вы хотите автоматизировать утомительные задачи. Все, что вам нужно, — это спросить! Найдите решение и вы получите.
    В отличие от этого, Figma наконец выпустила функциональность плагина осенью 2019 года, начав со скромных 40 общедоступных плагинов. При этом я уверен, что Figma быстро наверстает упущенное, поскольку ее популярность продолжает расти. Один из моих коллег на самом деле создал плагин Figma под названием Conditioner в свободное время, так что сделайте это 41+ плагинов!

Изображение для сообщения

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

Изображение для сообщения

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

Изображение для сообщения

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

Изображение для сообщения

  • Figma . Эквивалент символов в Figma называется Компонентами. В отличие от Sketch, Figma не перемещает и не копирует ваш главный компонент на свою страницу. Ваш главный компонент живет там, где он был создан, и может перемещаться на любую страницу, на которой вы хотите. Это может быть небольшой корректировкой, если вы привыкли видеть, что все ваши символы красиво отображаются при просмотре страницы.. Но не бойтесь, вы можете переходить к ним и редактировать их так же быстро, как и в Sketch, находя каждый главный компонент на панели Assets, аналогично панели компонентов Sketch. Панель Assets Panel покажет вам все ваши локально созданные компоненты, а также любые включенные компоненты библиотеки.

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

Изображение для сообщения

 Изображение для сообщения

Изображение для сообщения

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

Изображение для сообщения

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

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

Примите период корректировки

Если вы пришли из Sketch и наконец-то готовы попробовать Figma в старом колледже, приготовьтесь к небольшой турбулентности в период адаптации. Инструменты работают почти одинаково, но я просто предупреждаю вас, чтобы вы не вырывали волосы, когда вы все еще ищете фантомную кнопку «Создать символ» через 3 часа после использования Figma. Мышечная память будет там.

TL; DR: Figma — это будущее, но Sketch обладает непревзойденным богатством Ресурсы. Следуй за своим сердцем!

Оцените статью
clickpad.ru
Добавить комментарий