Мир программного обеспечения для графического дизайна огромен и имеет большую конкуренцию. Figma — это один из инструментов дизайна, который претендует на первое место среди дизайнеров UX/UI по всему миру. Но что вы знаете об этом интуитивном инструменте?
Хотя это просто, есть кривая обучения, если вы привыкли к другим инструментам дизайна. Давайте посмотрим на Figma и как ее использовать. Добро пожаловать в Фигму 101.
Что такое Фигма?
Если вы работали графическим дизайнером или веб-дизайнером в последние несколько лет, вы, вероятно, слышали о Figma. Возможно, вы даже использовали его.
Figma — это инструмент дизайна, и он неуклонно становится фаворитом среди цифровых дизайнеров, опережая такие варианты, как Adobe XD, Adobe Photoshop и Sketch, для веб-дизайна и многого другого. Однако, поскольку Adobe приобрела Figma в 2022 году., могут быть некоторые изменения, которые перетасуют таблицу лидеров.
Есть много применений для Figma. Он в основном используется для цифрового дизайна, и вы не можете создавать дизайн в CMYK для печати. Некоторые из основных применений Figma включают в себя:
- Прототипирование
- UX/UI-дизайн
- Дизайн приложения
- веб-дизайн
- Дизайн презентации
Ты можешь использовать плагины макетов Figma чтобы помочь продемонстрировать свои проекты, конвертировать реальные веб-страницы в проекты Figma с помощью плагинов и даже создавать основные шаблоны для проектов Figma чтобы сэкономить ваше время в повторяющихся типах дизайна.
Сколько стоит Фигма?
Вы можете бесплатно создать учетную запись Figma на Фигма сайт или загрузив Приложение Фигма. Бесплатная учетная запись обеспечивает функциональность для всех аспектов дизайна приложения. Вы можете проектировать с Figma и FigJam — инструмент совместной работы Figma.
Если вы используете Figma как любитель или как фрилансер, версия Free Forever почти идеальна. У вас по-прежнему есть доступ ко всем плагинам, вы можете приглашать неограниченное количество соавторов, использовать неограниченное количество личных файлов и использовать Figma на всех платформах.
В то время как бесплатная версия Figma предлагает более чем достаточно для любого стандартного дизайнера, подписка Figma Professional позволяет вам приглашать товарищей по команде, работать с командными библиотеками, иметь доступ к неограниченным файлам Figma и истории версий и многому другому за 12 долларов в месяц за редактор. Если вы студент или преподаватель, вы можете получить Figma Professional бесплатно.
Как использовать Figma: основы
Независимо от того, используете ли вы приложение Figma или версию для браузера, вы можете легко следовать инструкциям.
Когда вы откроете Figma, вам будут предложены варианты запуска нового файла Figma, нового файла FigJam или импорта файла, созданного в другой программе, такой как Sketch или Adobe XD. Если вы использовали Figma раньше, вы также увидите свои предыдущие проекты Figma, которые вы можете открыть и над которыми можно работать.
Навигация по рабочему пространству Figma
Открытие нового файла поначалу выглядит скучно. В отличие от многих других дизайнерских программ, вы начинаете не с монтажной области или холста, а с абсолютно пустой страницы дизайна. Но с разумом, полным вдохновения, он не будет долго оставаться пустым.
Верхнее левое горизонтальное меню начинается с Главное меню значок — логотип Figma. Выбор Главное меню, вы можете переходить к другим файлам, быстрым действиям Figma, типичным параметрам файла и доступу к плагинам, виджетам и библиотекам.
Далее вы найдете Двигаться инструмент (В), с Шкала инструмент (К) спрятался под ним. Эти инструменты предназначены для перемещения элементов или масштабирования частей вашего дизайна вверх или вниз. И справа от этих инструментов вы увидите инструменты региона, Рамка (Ф), Раздел, и Кусочек, сложенные вместе.
В Figma фрейм — это то, что другие программы могут называть артбордом или холстом. Выбирать Рамка чтобы нарисовать холст нестандартного размера. При выборе в правом меню будут представлены готовые варианты рамок для распространенных размеров устройств: смартфонов, планшетов, настольных компьютеров, смарт-часов, презентаций и параметров социальных сетей. Вы также можете щелкнуть и перетащить рамку напрямую, чтобы сделать ее любого размера.
Вернитесь в верхнее левое меню, справа от инструментов «Регион» находятся Форма инструменты, Ручка инструменты, и Текст инструмент. Затем следуют Ресурсы —Компоненты, Плагины, и Виджеты— и Рука инструмент для перемещения по вашему файлу. И, наконец, Комментарии инструмент, который отлично подходит для создания заметок и совместной работы с товарищами по команде.
Меню дизайна Figma
Когда рамка нарисована, выбор ее заголовка активирует рамку, готовую для дизайна. В правом меню отображаются заголовки для Дизайн, Опытный образец, и Осмотреть. Как следует из названия, опция «Дизайн» — это меню, которое вы будете использовать для проектирования элементов на вашем фрейме.
Хотя первоначальное меню «Дизайн» несколько упрощено, по мере того, как вы добавляете в свой дизайн больше элементов, параметры меню развиваются. Сначала меню работает сверху вниз с инструментами выравнивания, инструментами изменения размера, Автоматическая компоновка, Сетка макета, Слой, Наполнять, Гладить, Последствия, и Экспорт. Некоторые из них свернуты по умолчанию, но если щелкнуть значок + знак, вы можете открыть любое меню или нажать – чтобы свести его к минимуму.
После того, как вы нарисовали свой основной кадр для проекта, вы можете использовать инструменты «Фигура» или «Перо», чтобы рисовать фигуры или добавить заполнители изображений, и вы можете добавить текст с помощью инструмента «Текст» способами, которые вы, вероятно, делали в других программное обеспечение.
Если у вас есть фигуры или текст во фрейме, используйте различные параметры правого меню для редактирования и создания этих элементов. Слой меню предлагает режимы непрозрачности и наложения; с Наполнять вы можете добавить цвет или вставить изображения с некоторыми функциями редактирования, такими как Контакт, Контраст, Температура, и более.
По мере того, как вы создаете больше элементов в своем проекте, слои будут формироваться слева. Слои меню рядом с Ресурсы вкладка Вы можете дважды щелкнуть заголовок слоя, чтобы найти элемент, и наоборот; Вы можете дважды щелкнуть элемент дизайна, чтобы найти выделенный слой. Двойной щелчок по заголовкам позволяет переименовывать их для оптимальной организации.
Меню прототипа Figma
Справа от Дизайн пункт меню это Опытный образец меню. После того, как вы завершили визуальные аспекты своего дизайна и установили поля изображений и текст там, где они должны быть, вы можете использовать инструменты прототипа, чтобы добавить анимацию и переходы в свои проекты.
Опытный образец меню позволяет вам соединять кадры или компоненты вместе как переходы. Вы можете выбрать, в каком порядке и как каждый кадр переходит в другой.
Это отлично работает, если вы сделать презентацию Figma который анимирует от одного слайда к другому, но этот инструмент также позволяет мастерски визуализировать анимацию для кнопок или меню для приложений и веб-дизайна. Вы можете добавить несколько переходов на страницу для разных вещей, чтобы увидеть, как пользователи будут взаимодействовать с вашим сайтом, когда он будет работать.
Хотя использование Figma для разработки веб-сайта — это не то же самое, что создание живого веб-сайта, вы можете передать свой Figma дизайн для вашей команды разработчиков, которые могут воссоздать ваши прототипы взаимодействий в виде реальных анимационных дизайнов для вашего Веб-сайт. Это означает, что вы можете переходить со страницы на страницу с помощью кликов, времени или других взаимодействий.
Начать работу с Figma легко
Теперь вы знаете, как ориентироваться в макете Figma и как работают основные инструменты дизайна и создания прототипов. Поскольку Figma так легко доступна, пришло время поработать с этим инструментом дизайна и посмотреть, что вы можете создать.
