Каталог бесплатных курсов по it-специальностям freetutorials.ru!

х
Наверх

Уроки по Figma для новичков

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

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

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

Целевая аудитория Фигмы – маркетологи, разработчики сайтов, менеджеры, а также дизайнеры. Основные возможности программы:

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

Как начать пользоваться Figma?

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

Тарифы программы ФигмаДля начала перейдите на официальный сайт программы figma.com. Пройдите регистрацию, указав адрес электронной почты, и вам будет доступна работа в онлайн версии. Что касается скачивания программы для Windows или MacOS, то необходимо перейти в раздел Figma Downloads, и выбрать версию для своего устройства.

загрузка программы Фигма на компьютер или мобильные устройства

Интерфейс Figma

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

профиль в программе ФигмаПоиск. При помощи строки поиска вы можете отыскивать свои проекты, а также необходимые файлы. Чтобы эти файлы впоследствии было легко найти, рекомендую переименовывать их.   

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

Последние файлы в проекте Фигма Плагины. В этом разделе содержится список расширений, которые способны упростить и ускорить работу в редакторе. Например, расширение Unsplash позволяет искать стоковые изображения в самой программе, не выходя за ее пределы, а плагин Iconify содержит более 40 000 векторных иконок.

Плагины в Фигма Новый файл. Эта вкладка предназначена для создания нового файла.

Новый файл в Фигма Команда. Разделе First Project представляет рабочее место вашей команды. В нем вы сможете приглашать новых участников для работы с проектом. Также в этом разделе будет представлен список ваших команд и проектов, например, команда «SMMgid».  

Команда в программе Фигма Чтобы создать новый проект внутри команды, нажмите на вкладку «Untitled».  

Создание нового проекта внутри команды в Фигме Таким образом, вы перейдете к редактору программы, где и производится работа.

Редактор Фигмы Все возможности редактора мы рассмотрим в цикле уроков. Что вы сможете узнать из этих уроков?

 

В этом уроке вы увидите с чего начинается работа в программе. В нем представлены основные инструменты для манипуляции с объектами – Move, Scale, а также Лупа и Рука. Также вы узнаете, как передвигать, вращать, менять размер объектов в Figma и освоите все варианты выделения элементов.     

 

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

 

Даже создание самого сложного дизайна состоит из стандартных фигур. В этом уроке вы сможете познакомиться с основными векторными объектами в Фигме, а именно прямоугольник, линия, линия со стрелкой, круг, треугольник, и звезда. Кроме того, в уроке рассказывается как задавать точные размеры этих элементов, менять их форму, обводку, и добавлять эффекты.  

 

Для создания привлекательного дизайна сайта не обойтись без инструмента «Перо». В этом уроке вы сможете научиться пользоваться этим инструментом, и увидите, в каких случаях он может быть полезен. Также вы научитесь рисовать кривые линии и редактировать векторные объекты.   

 

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

 

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

 

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

 

Тщательно созданная сетка, подходящая для вашего контента, позволит определить структуру, иерархию и ритм вашего дизайна. Если все рассчитано точно, «строительные леса» сеток избавят вас от необходимости угадывать многие аспекты рабочего процесса. Различные типы сеток также могут помочь вам установить рациональный подход к масштабированию, позиционированию, размеру и интервалу. В этом уроке вы научитесь использовать этот важный инструмент, и увидите, как он влияет на позиционирование объектов. Здесь рассмотрено как создавать сетки, а также выполнять разметку фрейма на столбцы и строчки. Кроме того, вы научитесь использовать инструмент «направляющие» для выставления определенных границ.    

 

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

 

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

 

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

 

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

 

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

 

Из этого завершающего урока вы узнаете, как интегрировать проект с другими программами, а также экспортировать макет в разные форматы. Это важно для выгрузки вашего дизайна и его дальнейшего использования в создании сайта. Кроме того, в уроке рассказывается как экспортировать CSS. 

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

Полезные ссылки:


Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке
Пройдите, пожалуйста, защиту от спама.