Перед началом
Работайте в копии файла, чтобы сохранить исходный дизайн. Для изменения общего файла нужен доступ на редактирование. На Mac вместо Ctrl используйте ⌘ Command. Вид интерфейса может отличаться от скриншотов.
Работайте в копии файла, чтобы сохранить исходный дизайн. Для изменения общего файла нужен доступ на редактирование. На Mac вместо Ctrl используйте ⌘ Command. Вид интерфейса может отличаться от скриншотов.
01
Регистрация и установка
- Откройте приложение вашего браузера и перейдите на страницу Figma. Нажмите на кнопку «Начать бесплатно» и заполните предложенную форму. После этого вы получите ссылку для подтверждения регистрации. Перейдите по ссылке и авторизуйтесь в приложении. Затем вы сможете скачать Figma на ваше устройство.
- Вы можете бесплатно скачать Фигму на рабочий стол, это поможет избавиться от многочисленных вкладок браузера перед глазами. Зайдите на figma.com/downloads и выберите версию программы для macOS или Windows.


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

03
Как скопировать макет к себе
- Откройте ссылку Figma и перейдите к проекту, из которого вы хотите скопировать файлы.

2.
Выделите и щёлкните правой кнопкой мыши на файле или папке, которые вы хотите скопировать, нажмите Copy.( или выделите и нажмите сочетание клавиш Ctrl+C)
Выделите и щёлкните правой кнопкой мыши на файле или папке, которые вы хотите скопировать, нажмите Copy.( или выделите и нажмите сочетание клавиш Ctrl+C)

3.
Откройте свою Figma, нажмите "Create new", создадите новый проект.
Откройте свою Figma, нажмите "Create new", создадите новый проект.

4.
На рабочей области, в своем приложении, щёлкните правой кнопкой мыши ,нажмите Paste here.( или нажмите сочетание клавиш Ctrl+V)
На рабочей области, в своем приложении, щёлкните правой кнопкой мыши ,нажмите Paste here.( или нажмите сочетание клавиш Ctrl+V)

5.
Файлы скопированы к вам, можно вносить правки или продолжать работу
Файлы скопированы к вам, можно вносить правки или продолжать работу

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

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

Фрейм объединяет объекты внутри себя. Когда вы создаёте дизайн внутри фрейма, в панели слоёв слева будут добавляться слои. Слои в Фигме — это содержимое вашего фрейма: объекты, текст, фотографии.

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

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

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

3. С помощью заливки можно использовать изображение в качестве фона фрейма или фигуры:
- Выберите ваш фрейм или фигуру.
- На панели инструментов в блоке Fill нажмите на цвет и в появившемся меню в верхнем правом углу вместо Solid выберите Image.
- В том же меню нажмите на чёрно-белую картинку и выберите любое изображение на компьютере.

08
Настройки изображения
В Figma у любого изображения можно изменить свойства заливки и сделать минимальную коррекцию цвета. Чтобы открыть эти настройки, выделите любую иллюстрацию на макете, затем в блоке Fill нажмите на её миниатюру.
Свойства заливки:
Свойства заливки:
- Fill — изображение полностью заполняет собой доступное пространство, в котором находится.

- Fit — изображение заполняет пространство так, чтобы его было видно целиком.
- Crop — обрезает изображение и фиксирует его видимую часть. При изменении размера оно может растянуться.
- Tile — всё свободное пространство заполняется копиями изображения. Это свойство очень удобно использовать с паттернами.

09
Настройки цветокоррекции
Настройки цветокоррекции в Figma:
- Exposure — экспозиция.
- Contrast — контраст.
- Saturation — насыщенность.
- Temperature — температура.
- Tint — оттенок.
- Highlights — интенсивность света.
- Shadows — интенсивность тени.

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

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

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

Помогу с вашим макетом
Нужны правки
или новый дизайн?
Напишите мне и пришлите ссылку на файл — обсудим задачу и подходящее решение.
ОБСУДИТЬ ПРОЕКТ ↗