Статьи

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

Дизайнеры UX и UI могут выбирать из множества различных программ и приложений, самыми популярными из которых были Adobe XD и Sketch. Первый - отличный выбор для более опытных дизайнеров, которые, помимо разработки самого интерфейса, также отвечают за графическую часть. С другой стороны, Sketch доступен только пользователям Mac - если вы не работаете с оборудованием Apple, вам придется искать альтернативы. Еще один инструмент для прототипирования и проектирования интерфейсов, Figma, в настоящее время набирает популярность. 
Figma – это инструмент для создания интерфейса для совместной работы. Сосредоточьтесь на одной странице благодаря общению и совместной работе в реальном времени с помощью векторных и растровых инструментов коммерческого качества. 
Figma – это революционное приложение для создания интерфейса и редактирования графики, которое вы можете использовать через браузер. Он отличается от других инструментов тем, что предлагает оригинальную систему сотрудничества, которая упрощает работу, когда мы создаем проект в группе и хотим получать обратную связь в режиме реального времени. Таким образом, вы можете приглашать клиентов или других людей из вашей команды для работы над вашим проектом. Если вы работаете в группе с графическим дизайнером, копирайтером и программистом, никому не нужно загружать свой компьютер дополнительной программой: все, что вам нужно, - это совместимый с Figma браузер и доступ к сети. 



Преимущества Figma для начинающего веб-дизайнера

  • Векторные сети упрощают редактирование, позволяя перетаскивать линии вместо отдельных векторных точек.
  • Визуальная версия для быстрого сравнения версий.
  • Импорт проектов из Sketch (гениально☺)
  • Легко просматривайте проекты на устройствах iOS с Figma Mirror.
  • Полнофункциональная векторная графика.
  • Работает в браузере и на рабочем столе с загружаемыми приложениями.
  • Сотрудничество в режиме реального времени для общения команды и клиентов.

Как начать?

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



Figma: базовые функции создания UX и UI

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

Figma и другие инструменты прототипирования: чего ожидать?

Если вы до сих пор использовали Sketch, но хотите попробовать Figma и боитесь потерять всю «среду», создатели Figma оправдали ваши ожидания. Отчасти огромная популярность Sketch связана с его плагинами и дополнениями, но Figma ни в чем не уступает своему собрату.
  • Прежде всего, интерфейс и инструменты рисования очень похожи на те, что вы знаете по Sketch, и если вы до сих пор использовали Craft и InVision для прототипирования, Figma не будет для вас слишком сложной задачей.
  • Тем из вас, кто работает в группе, будет проще добавлять комментарии к проектам, включая интеграцию со Slack. Изменения сохраняются в режиме реального времени - как и в случае с Freehand, вы можете буквально видеть курсор сотрудника на своем проекте.
  • Если ваши сотрудники - программисты, все необходимые детали проекта, включая размеры и графику, могут быть «извлечены» из проекта, отправленного им в виде URL-адреса, без необходимости синхронизации, как в Zeplin .
Что, если вы до сих пор работали со Sketch и теперь хотите перенести свои проекты в Figma? Вы можете экспортировать файл в формате PSD и открыть его в Figma (некоторые элементы могут «сгладиться») или импортировать файл из Sketch, однако помните, что каждая страница Sketch будет импортирована как отдельный документ.



Развиваются веб-дизайнеры – развивается Figma

Figma начиналась как стартап, и с самого начала ее создатели предполагали, что она станет глобальным инструментом для графической работы. Фигма постоянно развивается и может вас удивить. К счастью, это не обновления, а плагины, которые стали настоящим спасением для индустрии. Таким образом, за последний год разработчики посвятили много работы добавлению некоторых замечательных функций, о которых было объявлено несколько дней назад.
Например, можно задать адрес в плагине, и Figma автоматически генерирует карту в проекте, над которым я сейчас работаю. Еще один фантастический плагин позволит вам интегрировать Figma с программным обеспечением Google Sheets, и это позволит вам комбинировать графику и изменять контент на лету. Другие плагины позволяют добавлять анимацию (Figmotion), изменять темы (Themer), переименовывать слои, организовывать их (Rename) и многое другое. Кроме того, многообещающим является, например, использование Time Machine, или Анализа версий разработанных элементов, добавление графики из Unsplash или использование Viewporsts, где проще разрабатывать дизайн, в первую очередь думая о мобильных устройствах.

Фигма: для кого?

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