ОБУЧЕНИЕ
Figma для начинающих
Для чего нужна Figma?
Figma (Фигма) — это онлайн-редактор, с которым можно работать вместе с командой. В нём легко создавать прототипы сайтов, приложения и даже презентации. Главное удобство — вы можете сразу обсуждать правки с коллегами, прямо во время работы.
Чтобы пользоваться Figma, нужен только браузер и интернет. Если у вас небольшие личные проекты, бесплатной версии будет достаточно. Но если вам нужно работать в команде и использовать больше возможностей, лучше рассмотреть платные версии.
Вот три примера того, чем Figma может быть полезна:
1. Вы можете делать слайды прямо в Figma. Используйте отдельные фреймы для каждого слайда, добавляйте текст, картинки и другие элементы. Слайды можно связать между собой для создания плавных переходов.
2. С помощью инструментов для прототипов можно добавить анимации между слайдами. Это поможет сделать презентацию интереснее, как в PowerPoint.
3. В Figma вся команда может работать над проектом одновременно. Все могут вносить правки в реальном времени, оставлять комментарии и предлагать изменения, что ускоряет процесс создания и улучшения презентации.
Как зарегистрироваться и установить?
Вы можете работать в Figma прямо через браузер или скачать приложение на компьютер.
Браузер лучше подходит, если вы часто меняете устройства. Просто зайдите на сайт figma.com и зарегистрируйтесь.
Браузер лучше подходит, если вы часто меняете устройства. Просто зайдите на сайт figma.com и зарегистрируйтесь.
Figma можно бесплатно скачать на компьютер, чтобы не отвлекаться на кучу вкладок в браузере. Для этого зайдите на figma.com/downloads и выберите версию для macOS или Windows.
Как пользоваться редактором?
После регистрации вам будут доступны две рабочие области — графический редактор и менеджер файлов. В менеджере файлов вы можете создавать проекты и изменять настройки профиля.
Профиль
В настройках профиля можно загрузить аватарку, сменить имя, пароль и email, на который приходят оповещения, а также поменять тему. Там же можно обновить тариф и удалить аккаунт.
В настройках профиля можно загрузить аватарку, сменить имя, пароль и email, на который приходят оповещения, а также поменять тему. Там же можно обновить тариф и удалить аккаунт.
Поиск (Search)
Через поиск Search ищите файлы и проекты, которые у вас есть.
Через поиск Search ищите файлы и проекты, которые у вас есть.
Последние файлы (Drafts)
В Фигме файлы сохраняются автоматически. Все файлы, которые вы открывали, можно увидеть во вкладке Recents.
В Фигме файлы сохраняются автоматически. Все файлы, которые вы открывали, можно увидеть во вкладке Recents.
Проекты (Projects)
По умолчанию при добавлении в свой проект других пользователей для совместной работы, Figma создаёт новый проект.
Проект — это папка. В ней команда хранит все файлы, которые относятся к одному проекту. Это удобно, если в каждом проекте у вас десятки файлов и вы не хотите в них путаться. На бесплатном тарифе вы сможете создать максимум три проекта.
По умолчанию при добавлении в свой проект других пользователей для совместной работы, Figma создаёт новый проект.
Проект — это папка. В ней команда хранит все файлы, которые относятся к одному проекту. Это удобно, если в каждом проекте у вас десятки файлов и вы не хотите в них путаться. На бесплатном тарифе вы сможете создать максимум три проекта.
В новом файле вам доступны три области:
- 1Рабочая областьЗдесь вы создаете и редактируете свои слайды, размещая текст, графические элементы и изображения.
- 2Панель слоевЭта область помогает организовать все элементы слайда, управлять их положением, порядком, а также видимостью.
- 3Панель инструментовЗдесь находятся все инструменты для работы с текстом, изображениями, формами и другими элементами.
Иногда интерфейс Figma может выглядеть по-другому в зависимости от версии программы. Поэтому панель инструментов может находиться в верхней части экрана, а другие элементы интерфейса выглядеть по-другому.
Панель Меню:
File
Инструменты панели помогают применить действие к файлу, в котором вы работаете. Например, с помощью Place image можно импортировать рисунки или элементы в формате PNG, SVG, JPG.
Инструменты панели помогают применить действие к файлу, в котором вы работаете. Например, с помощью Place image можно импортировать рисунки или элементы в формате PNG, SVG, JPG.
Инструменты и возможности Figma:
Рассмотрим панель инструментов для работы с графикой и выравнивания объектов, выбора шрифтов, создания эффектов для слоёв и фигур.
Рассмотрим панель инструментов для работы с графикой и выравнивания объектов, выбора шрифтов, создания эффектов для слоёв и фигур.
Фреймы
Фрейм или артборд — основной элемент дизайна в Фигме. Это законченный документ, который может быть страницей сайта или экраном мобильного приложения.
Вы можете задать размер фрейма самостоятельно или выбрать готовые размеры экранов популярных устройств — ноутбуков, часов, планшетов — в панели инструментов справа.
Фрейм или артборд — основной элемент дизайна в Фигме. Это законченный документ, который может быть страницей сайта или экраном мобильного приложения.
Вы можете задать размер фрейма самостоятельно или выбрать готовые размеры экранов популярных устройств — ноутбуков, часов, планшетов — в панели инструментов справа.
Фрейм объединяет объекты внутри себя. Когда вы создаёте дизайн внутри фрейма, в панели свойств слева будут добавляться слои. Слои в Фигме — это содержимое вашего фрейма: объекты, текст, фотографии.
Чтобы выровнять объекты во фрейме по оси X/Y или расстояние между элементами, используйте панель справа.
Объекты внутри фрейма можно группировать. Допустим, вы делаете несколько страниц сайта. На каждой странице внизу экрана у вас будут контакты: телефон и электронная почта. Сгруппируйте объекты из меню Object → Group Selection или сочетанием клавиш
Ctrl (Cmd) + G. Вы увидите изменения в слоях объектов — они объединились в группу. Теперь вы можете перемещать все объекты разом.
Ctrl (Cmd) + G. Вы увидите изменения в слоях объектов — они объединились в группу. Теперь вы можете перемещать все объекты разом.
Фрейм — это законченный дизайн, его можно скачать одним файлом. При сохранении убедитесь, что все объекты находятся внутри фрейма. Если случайно переместить слой объекта за пределы фрейма, можно потерять часть дизайна. Перед скачиванием, проверьте превью файла, и выберите нужный формат.
О том, как скачать или экспортировать свой документ из Figma будет написано ниже.
О том, как скачать или экспортировать свой документ из Figma будет написано ниже.
Векторные формы
Создавайте векторные объекты инструментом Shape Tool. С его помощью можно отрисовывать элементы интерфейса, например, иконки.
Создавайте векторные объекты инструментом Shape Tool. С его помощью можно отрисовывать элементы интерфейса, например, иконки.
Основные векторные объекты — прямоугольник, линия, треугольник, стрелка, круг, звезда. Вы можете вставлять объекты произвольной формы или зажать клавишу Shift и вставить объект правильной формы. Если нажать Alt — объект растягивается из центра.
Кривые
Pen Tool позволяет рисовать кривые линии и объекты произвольной формы. Если вы хотите работать со сложными формами, лучше загрузить их из Adobe Illustrator.
Pen Tool позволяет рисовать кривые линии и объекты произвольной формы. Если вы хотите работать со сложными формами, лучше загрузить их из Adobe Illustrator.
Используйте дополнительную опцию Bend Tool для скругления кривых или Paint Bucket для заливки закрытого контура.
Изображения
Добавьте одно или несколько изображений в макет через панель File, инструмент Place Image или просто перетащите их с рабочего стола.
Добавьте одно или несколько изображений в макет через панель File, инструмент Place Image или просто перетащите их с рабочего стола.
Вы можете применять векторные объекты к фотографиям и использовать их как маски. Чтобы сделать маску в Фигме, создайте объект, перенесите слой ниже фотографии. С панели инструментов выберите Use as mask (горячие клавиши для Windows: Ctrl + Alt + M, для Mac OS: Cmd + Opt + M).
Текст
Инструменты для работы с текстовым слоем стандартные: начертание, размер, выравнивание текста, высота строки, отступ между параграфами и красная строка.
Также есть превью шрифтов и возможность переключать категории, например, отобразить все шрифты, только популярные или установленные на вашем устройстве.
По умолчанию вам доступна библиотека шрифтов Google Fonts, если вы хотите загружать свои шрифты в Фигму — скачайте десктопную версию Фигмы
Инструменты для работы с текстовым слоем стандартные: начертание, размер, выравнивание текста, высота строки, отступ между параграфами и красная строка.
Также есть превью шрифтов и возможность переключать категории, например, отобразить все шрифты, только популярные или установленные на вашем устройстве.
По умолчанию вам доступна библиотека шрифтов Google Fonts, если вы хотите загружать свои шрифты в Фигму — скачайте десктопную версию Фигмы
Плагины для Figma
Графический редактор Figma — один из универсальных инструментов для дизайнеров. Однако его базового функционала может не хватить, если нужно воплотить в жизнь нестандартные решения и идеи. Тогда на помощь приходят плагины: они расширяют возможности редактора, помогают упростить рутинные задачи и сэкономить кучу времени.
Remove BG
Полезный плагин, который автоматически вырезает фон с изображения. Инструмент бесплатный, но для работы с ним нужно зарегистрироваться на сайте remove.bg и получить API ключ. Этот уникальный код необходимо указать в окне настроек плагина.
Модуль хорошо работает с контрастными изображениями, где основной объект значительно выделяется и не сливается с фоном. В остальных случаях может потребоваться доработка картинки в Adobe Photoshop или других редакторах.
Ссылка для скачивания: Remove BG
Полезный плагин, который автоматически вырезает фон с изображения. Инструмент бесплатный, но для работы с ним нужно зарегистрироваться на сайте remove.bg и получить API ключ. Этот уникальный код необходимо указать в окне настроек плагина.
Модуль хорошо работает с контрастными изображениями, где основной объект значительно выделяется и не сливается с фоном. В остальных случаях может потребоваться доработка картинки в Adobe Photoshop или других редакторах.
Ссылка для скачивания: Remove BG
Unsplash
Удобный плагин Фигма для изображений — автоматически ищет и загружает в макет картинки с фотостока Unsplash. Фотографию можно выбрать прямо из каталога или найти по ключевым словам в поиске.
Есть удобная функция добавления целых групп файлов. Она пригодится, если нужно быстро заполнить изображениями всю галерею.
Ссылка для скачивания: Unsplash
Удобный плагин Фигма для изображений — автоматически ищет и загружает в макет картинки с фотостока Unsplash. Фотографию можно выбрать прямо из каталога или найти по ключевым словам в поиске.
Есть удобная функция добавления целых групп файлов. Она пригодится, если нужно быстро заполнить изображениями всю галерею.
Ссылка для скачивания: Unsplash
To Path
Этот модуль — тоже любимчик многих дизайнеров. С его помощью можно быстро разместить по контуру фигуры текст или другие элементы.
В настройках можно поменять ширину отступов, количество и размер размещаемых объектов. После добавления элементов центральную фигуру
(в нашем случае это круг) можно удалить.
Ссылка для скачивания: To Path
Этот модуль — тоже любимчик многих дизайнеров. С его помощью можно быстро разместить по контуру фигуры текст или другие элементы.
В настройках можно поменять ширину отступов, количество и размер размещаемых объектов. После добавления элементов центральную фигуру
(в нашем случае это круг) можно удалить.
Ссылка для скачивания: To Path
Deck
Deck - это бесплатный плагин, с помощью которого вы можете экспортировать свои слайд в редактируемые презентации PowerPoint. Пакет поддерживает текстовые и основные формы. Все не поддерживаемые типы слоев преобразуются в изображение.
Ссылка для скачивания: Deck
Deck - это бесплатный плагин, с помощью которого вы можете экспортировать свои слайд в редактируемые презентации PowerPoint. Пакет поддерживает текстовые и основные формы. Все не поддерживаемые типы слоев преобразуются в изображение.
Ссылка для скачивания: Deck
Как установить плагины в Figma?
Плагины в Фигме хранятся в разделе Figma community, который похож на магазин мобильных приложений. В поиске можно найти нужный плагин, посмотреть, сколько людей его установило, прочесть отзывы. Сохранённые плагины привязываются к аккаунту, поэтому зайдя с разных устройств в свой профиль, вы сможете пользоваться привычными расширениями.
Установка плагина через Figma Community
1. Запустите приложение Figma на компьютере или открыть веб-приложение Figma в браузере.
2. Кликнуть на иконку Figma community, которая находится в левом нижнем углу главного экрана (Менеджер файлов). Если у вас есть ссылка на нужный плагин, вы можете сразу перейти по ней или найти его через поиск.
3. В карточке плагина нажмите Open in и выберите, в каком проекте хотите использовать плагин. Чтобы его сохранить и использовать позже, нажмите иконку флажка.
Плагины в Фигме хранятся в разделе Figma community, который похож на магазин мобильных приложений. В поиске можно найти нужный плагин, посмотреть, сколько людей его установило, прочесть отзывы. Сохранённые плагины привязываются к аккаунту, поэтому зайдя с разных устройств в свой профиль, вы сможете пользоваться привычными расширениями.
Установка плагина через Figma Community
1. Запустите приложение Figma на компьютере или открыть веб-приложение Figma в браузере.
2. Кликнуть на иконку Figma community, которая находится в левом нижнем углу главного экрана (Менеджер файлов). Если у вас есть ссылка на нужный плагин, вы можете сразу перейти по ней или найти его через поиск.
3. В карточке плагина нажмите Open in и выберите, в каком проекте хотите использовать плагин. Чтобы его сохранить и использовать позже, нажмите иконку флажка.
Установка плагина через страницу проекта
1. Откройте проект, в панели инструментов выберите Resourses и перейдите во вкладку Plugins.
2. Введите название нужного плагина в строке поиска.
3. Кликните по иконке флажка, чтобы сохранить плагин. Если нажать на три точки и выбрать View details, отроется окно с подробной информацией о плагине. Чтобы запустить плагин, нажмите кнопку Run.
1. Откройте проект, в панели инструментов выберите Resourses и перейдите во вкладку Plugins.
2. Введите название нужного плагина в строке поиска.
3. Кликните по иконке флажка, чтобы сохранить плагин. Если нажать на три точки и выбрать View details, отроется окно с подробной информацией о плагине. Чтобы запустить плагин, нажмите кнопку Run.
Сделаем дизайн слайдов для презентации
1. Для начала создаем фрейм, выбрав для презентации формат слайда 16:9 с разрешением 1920x1080 пикселей.
2. Добавляем заливку для фона, чтобы задать базовый цвет слайда.
3. Добавляем заголовок и текст. Для ускорения работы можно нажать клавишу "T" и сразу приступить к написанию.
4. Вставляем графический элемент или картинку. Для быстрого добавления нажмите сочетание клавиш CTRL+Shift+K и выберите нужное изображение.
*Кроме того, вы можете изменить название слайда, чтобы упорядочить структуру презентации и облегчить навигацию между слайдами.
Как экспортировать из Figma?
Работа с экспортом файлов из Figma осуществляется на правой панели в блоке Export. Чтобы увидеть параметры экспорта, нужно нажать на иконку «Плюс». Чтобы выбрать нужный формат экспорта, нужно кликнуть на поле с форматом и выбрать нужное значение в выпадающем списке. После этого надо нажать кнопку «Export».
Работа с экспортом файлов из Figma осуществляется на правой панели в блоке Export. Чтобы увидеть параметры экспорта, нужно нажать на иконку «Плюс». Чтобы выбрать нужный формат экспорта, нужно кликнуть на поле с форматом и выбрать нужное значение в выпадающем списке. После этого надо нажать кнопку «Export».
Как сохранить в Figma файл PDF
В Figma есть функция выгрузки всех фреймов со страницы в формате PDF. Такой вариант будет удобен, например, для экспорта всех слайдов презентации. Чтобы выгрузить их в один PDF-файл, нужно зайти в главное меню в левом верхнем углу и выбрать File — Export frames to PDF.
В Figma есть функция выгрузки всех фреймов со страницы в формате PDF. Такой вариант будет удобен, например, для экспорта всех слайдов презентации. Чтобы выгрузить их в один PDF-файл, нужно зайти в главное меню в левом верхнем углу и выбрать File — Export frames to PDF.
Желаем вам легкого и интересного обучения!
