На сегодняшний момент инструментов для прототипирования более, чем достаточно. Веб-дизайнеры выбирают для себя тот инструментарий, с которым им будет комфортно работать. Кто-то оставил в фаворитах фотошоп, кому-то запал в душу скетч. Мы же планомерно перешли на добротного новобранца — фигму, и в этой статье рассмотрим ряд особенностей, за которые она нам так полюбилась.
«Мы помним те времена, когда дизайн разрабатывался исключительно в фотошопе. Но вместе с тем, мы помним и боль, с которой сталкивались в процессе разработки интерфейсов. Фотошоп в какой-то степени ограничивал нас, но как-никак был достаточно гибким, чтобы быстро к нему привыкнуть и воплощать в нем гениальные идеи. С 2016 года часть нашей команды использует скетч, другая — не так давно, плотно подсела на фигму. У обеих программ есть ряд преимуществ, во многом они схожи, но одно можно сказать точно — они обе предназначены для прототипирования, это прописано в их ДНК :)», - делится впечатлениями наш тим-лид дизайнеров.
Интерфейс
1 Экосистема
Создавая веб-сайт или мобильное приложение, дизайнерам часто приходится подгружать файлы на облачные хранилища, пересылать их по почте и тому подобное, что отнимает много времени, кроме того, файлы занимают место в памяти компьютера.
Figma решает эту проблему, поскольку рабочие файлы находятся на собственном облаке, дизайнер может просто отправить ссылку на файл клиенту или верстальщику. Кроме того, если на проекте меняется специалист, не возникнет проблем с тем, где находятся исходники.
.png "Все файлы находятся в одном пространстве")
2 Совместное редактирование
Google Docs отлично показали, что групповая работа над документами облегчает коммуникацию и ускоряет результат. С помощью Figm’ы дизайнеры, проектные менеджеры и клиенты могут одновременно комментировать, задавать вопросы и править макеты. Кроме того, вы можете ограничить статус для каждого участника, например read-only, не переживая, что кто-то нарушит гармонию в дизайне. Для совместной работы нужен только интернет и браузер.
В Sketch же можно комментировать только с помощью специального плагина.
3 Актуальность версий
Все версии и изменения хранятся в Figma и вы можете в любой момент «откатиться» до нужной. Вам больше не нужно хранить десятки файлов на компьютере и помнить, в каком файле дизайн был с тем элементом, который заказчик попросил убрать, а теперь хочет вернуть.
4 Удобные инструменты
Как мы уже упоминали, Photoshop задумывался, как редактор фотографий, поэтому инструменты для рисования крайне неудобны для дизайнеров. А в сфере разработки сайтов и мобильных приложений очень важную роль играет отрисовка иконок в векторе.
Первым тенденцию революции задал Illustrator, в котором появился удобный Pen Tool. Figma же подхватила и улучшила такую практику:
- удобное соединение точек и работа с шейпами;
- создание эффектов, например, тени, занимает считанные секунды
- настройки сетки всегда находятся на главном экране
- удобный pen tool
- направляющие, которые упрощают работу дизайнера
5 Шрифты
В Photoshop и Sketch при редактировании файлов шрифты «слетают», если на компьютере не установлены необходимые гарнитуры. Figma решила и эту проблему - шрифты тянутся из Google Fonts либо автоматически подгружаются в проект.
6 Многозадачность
Если вам нужно работать одновременно с несколькими рабочими областями, вы наверняка жаловались на производительность Sketch или Photoshop. Figma же позволяет работать с более, чем десятью файлами и прекрасно себя чувствовать, поскольку производительность продукта на высоте.
7 Прототипирование мобайл-проектов
Лучше всего преимущества этого продукта раскрываются при разработке дизайна мобильных приложений. Когда проект состоит из более, чем 30 экранов становится достаточно сложно переключаться с одного на другой - Figma дает возможность собрать все экраны в одном месте и эффективно управлять ими.
Figma полезна и для программистов - прямо в программе можно посмотреть информацию об объектах, которая нужна для кода:
Отличная функция - play button. С ее помощью дизайнеры могут “проиграть” приложение, тестируя последовательность и логику переходов так, будто приложение готово и загружено на смартфон.
8 Интеграция
Вы можете перенести свои проекты из Sketch без потерь шрифтов, кривых и изображений, а также интегрировать с Zeplin.
Один из немногих минусов - Figma работает только при подключении к интернету. Однако Figma обладает прекрасными преимуществами, которые выгодно выделяют ее среди других программ, а в современных офисах проблем с выходом в сеть нет.
В свое время Sketch стал революционным продуктом, что послужило отличной почвой для создания еще более высококлассных программ.
Впечатления команды Artjoker
«Мы понимаем, что полностью отказываться от использования фотошопа будет ошибочно. В скетче и фигме все еще нет тех возможностей для обработки фотографий, к которым мы так привыкли. Порой, мы скучаем по использованию масок с плавным градиентом, возможности вырезания объектов из изображений и даже детализированной цветокоррекции. Но важно так же понимать, что инструментарий веб-дизайнера не должен ограничиваться только одной программой. Их должно быть несколько и каждая с первоклассным набором преимуществ, которые открывают новые возможности и позволяют работать быстрее», - делится тим-лид дизайнером Artjoker.
