Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>28 фев 2025</li>

3 <li>0</li>

4 </ul>Простая инструкция: как добавить изображение на макет и отредактировать его без Photoshop.

5 Изображение: Meery Mary для Skillbox

6 Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

8 Перетащитеизображение на макет с рабочего стола или из папки:

9 Скопируйтеизображение сочетанием клавиш Ctrl (⌘) + C и вставьте его в макет, нажав Ctrl (⌘) + V:

10 Также можно копировать изображения из интернета: нажмите правой кнопкой мыши на любую иллюстрацию в браузере, выберите "Копировать изображение", затем перейдите в Figma и нажмите Ctrl (⌘) + V:

11 Функцией Place Imageможно автоматически поставить изображение сразу туда, где оно должно находиться:

12 1. Создайте несколько произвольных фреймов на макете.

13 2. Нажмите на иконку , выберите пункт File и нажмите на Place Image. Или зажмите клавиши Ctrl (⌘) + Shift + K.

14 3. В появившемся меню выберите любые изображения.

15 4. По очереди добавьте изображения на фреймы. На курсоре отображается миниатюра текущей иллюстрации.

16 С помощью заливкиможно использовать изображение в качестве фона фрейма или фигуры:

17 1. Выберите ваш фрейм или фигуру.

18 2.На панели инструментов в блоке Fill нажмите на цвет и в появившемся меню в верхнем правом углу нажмите .

19 3. В том же меню нажмите на серо-белую картинку и выберите любое изображение на компьютере.

20 Аналогично можно использовать изображение как заливку обводки. Только вместо блока Fill нужно заходить в блок Stroke.

21 В Figma у любого изображения можно изменить свойства заливки и сделать минимальную коррекцию цвета. Чтобы открыть эти настройки, выделите любую иллюстрацию на макете, затем в блоке Fill нажмите на её миниатюру.

22 Свойства заливки:

23 Fill - стандартный вариант, изображение полностью заполняет собой доступное пространство, в котором находится.

24 Fit - изображение заполняет пространство так, чтобы его было видно целиком.

25 Crop - обрезает изображение и фиксирует его видимую часть. При изменении размера оно может растянуться.

26 Tile - всё свободное пространство заполняется копиями изображения. Это свойство очень удобно использовать с паттернами.

27 Хотя в Figma можно сделать минимальную цветокоррекцию, качественно отредактировать фотографию не получится - для этого лучше идти в Photoshop или Lightroom.

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

29 Exposure - экспозиция.

30 Contrast - контраст.

31 Saturation - насыщенность.

32 Temperature - температура.

33 Tint - оттенок.

34 Highlights - интенсивность света.

35 Shadows - интенсивность тени.

36 С помощью маски слоя можно придать изображению нестандартную для Figma форму:

37 1. Создайте любую фигуру, выберите изображение на макете и расположите их друг на друге. Проследите, чтобы на панели слоёв изображение было выше фигуры.

38 2. Зажмите Shift, выделите фигуру и изображение, затем на панели инструментов нажмите на иконку .

39 3. Чтобы изменить отображаемую часть изображения, просто выделите её на панели слоёв и измените размер на холсте.

40 Таким же образом изображением можно заполнить что угодно: от нескольких фигур до текста.

41 Отразить изображениепо вертикали можно с помощью горячих клавиш Shift + H. По горизонтали - Shift + V.

42 Скопировать SVG-иконку с любого сайтав Figma можно через браузер:

43 1.Зайдите на сайт с нужной иконкой, нажмите правую кнопку и выберите "Посмотреть код". Справа откроется панель с HTML-кодом сайта.

44 2.В окне с кодом на панели сверху нажмите на значок и выберите нужную иконку на сайте.

45 3.В HTML-коде выделится тег <path>, прямо над ним будет <svg> - нажмите на него и скопируйте с помощью сочетания Ctrl (⌘) + C на клавиатуре.

46 4. Зайдите в Figma и нажмите Ctrl (⌘) + V - иконка встанет на макет.

47 Быстро вырезать объектпоможет плагин Icons8 Background Remover, который автоматически удаляет фон.

48 Как установить плагин Background Remover:

49 1.Зайдите<a>на страницу плагина</a>и установите его, нажав Install.

50 2. В файле выберите изображение, кликните по нему правой кнопкой мыши и перейдите Plugins → Saved plugins → Icons8 Background Remover.

51 3.Дождитесь, пока плагин сделает своё дело.

52 Учтите, что этот способ не подойдёт для финального удаления фона, так как плагин работает неидеально. Но если вам нужно просто показать идею, то Background Remover поможет сэкономить много времени.

53 <a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>