Полезное · инструкция для клиентов

Как редактировать
макет в Figma

Понятное руководство для работы с исходником: от первого входа до замены изображений и экспорта готового макета.

Без опыта в дизайнеПошагово, со скриншотамиНачать ↓
Перед началом
Работайте в копии файла, чтобы сохранить исходный дизайн. Для изменения общего файла нужен доступ на редактирование. На Mac вместо Ctrl используйте ⌘ Command. Вид интерфейса может отличаться от скриншотов.
01

Регистрация и установка

  1. Откройте приложение вашего браузера и перейдите на страницу Figma. Нажмите на кнопку «Начать бесплатно» и заполните предложенную форму. После этого вы получите ссылку для подтверждения регистрации. Перейдите по ссылке и авторизуйтесь в приложении. Затем вы сможете скачать Figma на ваше устройство.
  2. Вы можете бесплатно скачать Фигму на рабочий стол, это поможет избавиться от многочисленных вкладок браузера перед глазами. Зайдите на figma.com/downloads и выберите версию программы для macOS или Windows.
Регистрация и установка — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
Регистрация и установка — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
02

Знакомство с интерфейсом

После регистрации пользователю доступны две рабочие области — графический редактор и менеджер файлов, в котором можно создавать проекты и изменять настройки профиля. Рассмотрим пункты меню менеджера файлов.
  1. Профиль. В настройках профиля можно загрузить аватарку, сменить имя, пароль и email, на который приходят оповещения. Там же можно обновить тариф и удалить аккаунт.
  2. Поиск. Ищите файлы и проекты, в которых вы участвуете, через поиск Search.
  3. Последние файлы. В Фигме файлы сохраняются автоматически. Все файлы, которые вы открывали, можно увидеть во вкладке Recent.
  4. Новый файл. Создать новый файл в Фигме можно через пункт Drafts или New File в правом углу экрана. По умолчанию файл называется Untitled.
Знакомство с интерфейсом — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
03

Как скопировать макет к себе

  1. Откройте ссылку Figma и перейдите к проекту, из которого вы хотите скопировать файлы.
Как скопировать макет к себе — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
2.
Выделите и щёлкните правой кнопкой мыши на файле или папке, которые вы хотите скопировать, нажмите Copy.( или выделите и нажмите сочетание клавиш Ctrl+C)
Как скопировать макет к себе — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
3.
Откройте свою Figma, нажмите "Create new", создадите новый проект.
Как скопировать макет к себе — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
4.
На рабочей области, в своем приложении, щёлкните правой кнопкой мыши ,нажмите Paste here.( или нажмите сочетание клавиш Ctrl+V)
Как скопировать макет к себе — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
5.
Файлы скопированы к вам, можно вносить правки или продолжать работу
Как скопировать макет к себе — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
04

Графический редактор

В программе есть три основные области: Рабочая область (1), где создаются и редактируются проекты, Панель инструментов (2) с набором функций для работы с файлом и Панель слоёв (3) для управления слоями в вашем проекте. Рассмотрим, как использовать некоторые функции программы.
Графический редактор — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
05

Фреймы и слои

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

Вы можете задать размер фрейма самостоятельно или выбрать готовые размеры экранов.
Фреймы и слои — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
Фрейм объединяет объекты внутри себя. Когда вы создаёте дизайн внутри фрейма, в панели слоёв слева будут добавляться слои. Слои в Фигме — это содержимое вашего фрейма: объекты, текст, фотографии.
Фреймы и слои — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
Фрейм — это законченный дизайн, его можно скачать одним файлом. При сохранении убедитесь, что все объекты находятся внутри фрейма. Если случайно переместить слой объекта за пределы фрейма, можно потерять часть дизайна. Перед скачиванием, проверьте превью файла, и выберите нужный формат.
Фреймы и слои — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
06

Векторные объекты

В программе доступны основные векторные объекты, такие как прямоугольник, линия, треугольник, стрелка, круг и звезда. Также есть возможность вставить объект произвольной формы или, зажав клавишу Shift, вставить объект правильной формы. При нажатии клавиши Alt объекты растягиваются из центра. При нажатии клавиш **Shift**+**Alt** объекты растягиваются из центра пропорционально
Векторные объекты — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
07

Как добавить изображение

В Figma очень удобно работать с изображениями: быстро обрезать, удалить фон или скорректировать цвет. Есть несколько способов добавления изображения на рабочую область:

  1. Скопируйте изображение сочетанием клавиш Ctrl (⌘) + C и вставьте его в макет, нажав Ctrl (⌘) + V.
  2. Функцией Place Image можно автоматически поставить изображение сразу туда, где оно должно находиться:
  • Создайте несколько произвольных фреймов на макете.
  • Нажмите на иконку , выберите пункт File и нажмите на Place Image. Или зажмите клавиши Ctrl (⌘) + Shift + K.
  • В появившемся меню выберите любые изображения.
  • По очереди добавьте изображения на фреймы. На курсоре отображается миниатюра текущей иллюстрации.
Как добавить изображение — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
3. С помощью заливки можно использовать изображение в качестве фона фрейма или фигуры:
  • Выберите ваш фрейм или фигуру.
  • На панели инструментов в блоке Fill нажмите на цвет и в появившемся меню в верхнем правом углу вместо Solid выберите Image.
  • В том же меню нажмите на чёрно-белую картинку и выберите любое изображение на компьютере.
Как добавить изображение — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
08

Настройки изображения

В Figma у любого изображения можно изменить свойства заливки и сделать минимальную коррекцию цвета. Чтобы открыть эти настройки, выделите любую иллюстрацию на макете, затем в блоке Fill нажмите на её миниатюру.
Свойства заливки:
  • Fill — изображение полностью заполняет собой доступное пространство, в котором находится.
Настройки изображения — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
  • Fit — изображение заполняет пространство так, чтобы его было видно целиком.
  • Crop — обрезает изображение и фиксирует его видимую часть. При изменении размера оно может растянуться.
  • Tile — всё свободное пространство заполняется копиями изображения. Это свойство очень удобно использовать с паттернами.
Настройки изображения — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
09

Настройки цветокоррекции

Настройки цветокоррекции в Figma:
  • Exposure — экспозиция.
  • Contrast — контраст.
  • Saturation — насыщенность.
  • Temperature — температура.
  • Tint — оттенок.
  • Highlights — интенсивность света.
  • Shadows — интенсивность тени.
Настройки цветокоррекции — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
10

Настройки размера изображения

Для изменения размера изображения достаточно потянуть левой кнопкой мыши за любой уголок объекта. Для сохранения его пропорций при этом нужно зажать клавишу Shift.
Когда необходимы точные изменения, можно воспользоваться панелью свойств объекта и ввести данные в пикселях в соответствующих полях раздела Dimensions.
Настройки размера изображения — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
11

Экспорт изображений

Работа с экспортом файлов из Фигмы осуществляется на правой панели в блоке Export. Чтобы увидеть параметры экспорта, нужно нажать на этот блок. Чтобы выбрать нужный формат экспорта, нужно кликнуть на поле с форматом и выбрать нужное значение в выпадающем списке. После этого надо нажать кнопку Export.
Экспорт изображений — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
12

Экспорт PDF

Чтобы экспортировать все фреймы в один PDF-файл, к примеру, для создания презентации, необходимо убрать с рабочей области все лишние фреймы/объекты, которые не должны попасть в итоговый файл. Сделать это можно как удалением, так и с помощью опции "Видимость" - иконка глаза напротив названия фрейма на панели слоев.
Когда на рабочей области остались только нужные фреймы, необходимо вызвать меню в верхнем левом углу - File - Export frames to PDF...
После загрузки редактором всех фреймов (в зависимости от их количества и наполнения это может занять время) нужно выбрать цветовой профиль и качество сохранения файла - от низкого до высокого, и нажать на кнопку Export, после чего будет предложена папка сохранения файла.
Экспорт PDF — пример в Figma
Нажмите на изображение, чтобы рассмотреть детали ↗
Помогу с вашим макетом

Нужны правки
или новый дизайн?

Напишите мне и пришлите ссылку на файл — обсудим задачу и подходящее решение.

ОБСУДИТЬ ПРОЕКТ ↗
Мария Лохматова · веб и графический дизайнерВернуться наверх ↑
Скриншот инструкции
Made on
Tilda