Rivalry2

HTML Diff

6 added 124 removed

Original 2026-01-01

Modified 2026-02-28

1 - Дизайн • 25 декабря 2025 • 5 мин чтения

1 + <h2>Подтвердите, что запросы отправляли вы, а не робот</h2>

2 - Подробный гайд о графическом редакторе Figma, его возможностях и инструментах. Рассказываем, что можно делать в Figma и какие дополнительные возможности для дизайнера есть в этом редакторе.

2 + Нам очень жаль, но запросы с вашего устройства похожи на автоматические. <a>Почему это могло произойти?</a>

3 - <ul><li><a>Что такое Figma</a></li>

3 + Я не робот Нажмите, чтобы продолжить

4 - <li><a>Для чего нужна Figma</a></li>

4 + <a>SmartCaptcha by Yandex Cloud</a>

5 - <li><a>Что можно делать в Figma</a></li>

5 + Если у вас возникли проблемы, пожалуйста, воспользуйтесь <a>формой обратной связи</a>

6 - <li><a>Инструменты и возможности Figma</a></li>

6 + 8256532287819896562:1772299360

7 - <li><a>Плюсы и минусы графического редактора</a></li>

8 - <li><a>Дополнительные возможности Figma</a></li>

9 - <li><a>FAQ: часто задаваемые вопросы</a></li>

10 - </ul>Станьте графическим дизайнером с нуля

11 - Освойте востребованную профессию с нуля за 9 месяцев. Будете много практиковаться и получите реальный опыт. ● 5 проектов для портфолио; ● помощь с поиском работы до 7 месяцев после выпуска; ● приглашения на собеседования чаще на 38% и зарплата выше на 9%*

12 - <h6>Что делать, если Figma заблокируют</h6>

13 - Ниже список шагов, которые помогут сохранить файлы и пользоваться ими дальше.

14 - Чтобы открыть файл в личном аккаунте, нужна его локальная копия в формате .fig. Если вы меняли размер растровой иллюстрации, то она сохранится в виде превью того же размера - высокое разрешение будет утрачено. Как это поправить:

15 - <ul><li>Сохранять файл в формате pdf или svg. Это подстраховка. В таком виде текстовые надписи будут в виде кривых, компоненты и стили будут утрачены, а у кривых в виде концевых стрелок появится контур.</li>

16 - <li>Конвертировать файлы в Sketch или XD. Тут несколько нюансов. Sketch - платная программа с большим количеством версий, а XD - это программа Adobe, которая возможно тоже будет заблокирована. Но если конвертировать файлы, то нужно учитывать, что рабочая область в Figma гораздо больше рабочих областей XD, Sketch и Adobe Illustrator. Поэтому если есть возможность уменьшить размер расположения рабочих досок, - стоит это сделать. Кроме этого, можно разбить файл на отдельные страницы.</li>

17 - </ul><h6>Дополнения к Figma и полезные программы на случай блокировки</h6>

18 - <h2>Что такое Figma</h2>

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

20 - Жми скорей сюда: как создать хороший пользовательский интерфейс

21 - <a></a><h2>Для чего нужна Figma</h2>

22 - В фигме обычно создают прототипы сайтов и приложений, иллюстрации, векторную графику, рисуют элементы интерфейса. Ещё здесь создают макеты сайтов для тильды: есть возможность импортировать дизайн.

23 - <h2>Что можно делать в Figma</h2>

24 - В фигме работают<a>дизайнеры</a>, маркетологи, менеджеры продукта, разработчики. Рассмотрим, как использовать фигму.

25 - Интерфейс

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

27 - Интерфейс Tesla Model 3 в фигме

28 - ПрототипПрототип - модель будущего приложения или сайта. Это упрощённая версия продукта, по которой уже понятно, как люди будут пользоваться им. Ещё прототип можно адаптировать под планшеты и смартфоны.

29 - Пример работы в фигме: прототип интерфейса Tesla Model 3: можно изменить режимы

30 - Developer Handoff

31 - Developer Handoff - это решение, которое упрощает работу разработчиков: они могут просто скопировать CSS-стили, а не подбирать высоту, ширину и тени элементов интерфейса.

32 - У метки указаны размеры, цвет, расстояния до края экрана

33 - Неочевидные решения

34 - У фигмы есть<a>библиотека шаблонов</a>, с помощью которой можно создавать:

35 - <ul><li>концепткарты,</li>

36 - <li>диаграммы связей,</li>

37 - <li>рекламные объявления,</li>

38 - <li>доски настроения,</li>

39 - <li>диаграммы.</li>

40 - </ul>Просто копируйте их и используйте на своё усмотрение: сэкономите время.

41 - <h2>Инструменты и возможности Figma</h2>

42 - Дальше расскажем, как пользоваться фигмой. Для начала нужно зарегистрироваться

43 - Программа предложит выбрать специальность и цель использования. Выбор ни на что не повлияет.

44 - Готово! Чтобы начать работать, выбираем "New Design File" - этого достаточно, чтобы создать проект в фигме.

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

46 - На панели инструментов - фигуры, инструменты. Если что-то выбрано для работы, оно окрашено в синий цвет.

47 - У некоторых инструментов есть выпадающий список. Например, там, где нарисован квадрат, в списке выпадут другие фигуры и возможность загрузить свою картинку.

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

49 - На панели слоёв расположен список всех объектов. Их можно свободно перетягивать - менять местами.

50 - Навигация в документе

51 - Пространство, которое видно на экране, - малая часть рабочей площади.

52 - Чтобы переместиться в пустое пространство или посмотреть объекты за пределами экрана компьютера, нужно одновременно зажать левую кнопку мыши и пробел и переместить курсор по документу в нужном направлении.

53 - В правом верхнем углу документа указан масштаб. 100% - это масштаб 1:1. 50% - соответственно, уменьшение в два раза. Чтобы увеличить масштаб, нужно нажать на клавишу "+", чтобы уменьшить - на клавишу "-". Или можно использовать прокрутку колёсика мыши с удержанием Ctrl на Windows или прокрутку колёсика с удержанием Command на Mac. Чтобы быстро вернуть масштаб к 100%, можно использовать<a>сочетание клавиш</a>Shift + 0.

54 - Фигуры

55 - Чтобы нарисовать фигуру, используем инструмент Rectangle:

56 - <ol><li>Кликаем на иконку подходящей фигуры.</li>

57 - <li>Зажимаем левую кнопку мыши и выбираем начальную точку.</li>

58 - <li>Не отпуская кнопку, двигаем мышь в любом направлении, пока фигура не достигнет нужного размера. Теперь можно отпустить кнопку мыши.</li>

59 - </ol>Когда фигура выделена голубой рамкой, в панели справа показаны свойства. Например, высота и ширина в пикселях и цвет фигуры. Их можно изменять вручную или манипулировать самой фигурой.

60 - Изменение свойств объекта

61 - Чтобы понять, как работают свойства, по одному изменяйте их. Например, прямоугольник можно повернуть, округлить его углы, изменить размеры, перекрасить. Если свойство изменилось ошибочно или нужно вернуться к исходным данным, можно использовать комбинацию "Назад": Ctrl + Z.

62 - Выделение, перемещение и изменение размеров

63 - Чтобы выделять, перемещать и изменять размеры, нужно выбрать инструмент Move (справа от главного меню).

64 - Чтобы выделить объект, кликните по нему в рабочей области или выберите его в панели слоёв. Чтобы убрать выделение, кликните в пустой рабочей области.

65 - Когда объект выделен, на его углах видны белые квадратики. Если за них потянуть, нажав на левую кнопку мыши, - фигура увеличится или уменьшится.

66 - Если нужно изменить только ширину или высоту, можно потянуть за одну из сторон фигуры.

67 - А чтобы пропорции фигуры не изменялись при увеличении или уменьшении, нужно зажать Shift.

68 - Чтобы переместить фигуру, нужно навести на неё курсор, зажать левую кнопку мышки и переместить объект куда нужно. Чтобы фигура смещалась только по вертикали или горизонтали, до захвата объекта нужно зажать Shift.

69 - Работа с цветом

70 - Цвета настраиваются очень гибко: можно выбрать оттенок, насыщенность и прозрачность. Если нужен какой-то конкретный оттенок, его не нужно искать в палитре. Можно просто скопировать его точное значение и использовать.

71 - Чтобы скопировать цвет одного объекта, нужно выбрать объект интересующего цвета, нажать на поле со значением цвета правой кнопкой мыши и выбрать "Copy". Дальше выбрать объект, который нужно покрасить в этот цвет, и вставить в поле со значением цвета скопированную информацию.

72 - Отдельно можно изменять цвет заливки фигуры и её обводку. Прозрачность цвета настраивается рядом с иконкой глаза. Чем значение ближе к 100%, тем ярче цвет.

73 - Текст

74 - Чтобы добавить текст, нужно выбрать Text (буква T) на панели инструментов фигмы. Дальше нужно создать границы для текста. Для этого кликните левой кнопкой мыши и растяните границы, как при создании фигуры. Эти границы показывают, в каком месте текст будет переноситься в следующую строку, также он выравнивается относительно рамок. Теперь можно вводить текст.

75 - Когда текст готов, можно его изменять в панели свойств -<a>выбирать шрифт</a>, цвет, выравнивание.

76 - Это основные функции фигмы.

77 - <h2>Плюсы и минусы графического редактора</h2>

78 - Плюсы

79 - Многие люди переходят из<a>фотошопа</a>в фигму, потому что она гибче и постоянно обновляется.

80 - Новичков Алексей, доцент, куратор специализации "Технологии медиа" ОП "Медиакоммуникации" НИУ "Высшая школа экономики", консультант Яндекс Практикума по информационной графике

81 - "Это лучший инструмент графического редактирования для перфекционистов. Здесь очень большой набор функций автоматического контроля отступов, полей, выравнивание по пикселям, контроль соблюдения стилей, автоматическое изменение макета в зависимости от содержания. Этого очень не хватало в Adobe Illustrator. Думаю, что те, кто начинает работать в фигме после Adobe XD часто задаются вопросом: "А что, оказывается, так можно было?"

82 - Другие плюсы этой программы:

83 - <ul><li>Фигма бесплатная, при этом её функции и инструменты не ограничены, но в бесплатной версии можно открыть только один проект. Зато количество файлов в проекте может быть любым.

84 - </li>

85 - <li>Фигма работает на Windows, Mac, Linux. Её можно установить на компьютер или работать через браузер. Есть приложение на смартфон - и iOS, и для андроида.

86 - </li>

87 - <li>В одном проекте могут работать несколько человек одновременно. Можно выдать доступ только на просмотр или на редактирование. Благодаря этой функции не нужно скачивать макеты, прототипы, иллюстрации: доступы можно получить по ссылке. Даже если у человека нет аккаунта в фигме, он может посмотреть проект.

88 - </li>

89 - <li>Есть компоненты, благодаря которым одинаковые элементы проекта можно изменить в один клик, а не изменять каждый по одному. То есть можно зараз изменить цвет и шрифт кнопок на всех страницах в рамках одного проекта.

90 - </li>

91 - <li>В онлайн-редакторе можно создавать интерактивные прототипы. Например, если объединить наборы экранов проекта и нажать на кнопку заказа, откроется форма для контактов. Заказчику не нужно мысленно визуализировать, как будет работать проект: в прототипе и так всё понятно.

92 - </li>

93 - </ul>Минусы Figma

94 - Ни один проект не обходится без минусов.

95 - "В фигме нет переноса текста по слогам, очень мало типографических настроек. Например, хочется оформлять подсветку текста, выбирать цвет подчёркивания, выравнивать текст по базовым линиям шрифта. Но, с другой стороны, нужно ли это? Ещё бывают периоды, когда загрузка файлов при открытии становится раздражающе медленной. Кажется, это как-то связано с приближающимися глобальными нововведениями, но это не точно. Любая облачная технология очень зависит от скорости и загрузки сети.

96 - В целом был и остаюсь фанатом этого проекта. Он постоянно обновляется и становится лучше. Надеюсь, в будущем можно будет работать в офлайне и выравнивать текст по базовым линиям шрифта автоматически. Без переносов можно обойтись."

97 - <h2>Дополнительные возможности Figma</h2>

98 - Плагины для фигмы нужны, чтобы облегчить, ускорить работу или добавить новые функции.

99 - Чтобы добавить плагин, нужно перейти в меню и выбрать "Plugins". Все плагины можно найти в разделе "Browse Plugins in Community". В этом комьюнити пользователи делятся плагинами, иконками, макетами, иллюстрациями и другим.

100 - Нужный плагин ищется через поисковую строку. Чтобы установить его, нужно нажать "Install". После установки нужно перезагрузить фигму.

101 - Вот несколько полезных плагинов:

102 - •<a>Iconify</a>. Больше 40 тысяч векторных иконок: Twitter Emoji, Material Design, Jam Icons и другие.

103 - •<a>Humaaans for Figma</a>. Иллюстрации людей Пабло Стэнли. Можно брать готовых героев или кастомизировать.

104 - •<a>BeatFlyer Lite</a>. Создание анимационных эффектов за пару кликов.

105 - •<a>Bullets</a>. Стильные маркированные списки.

106 - •<a>Chart</a>. Разнообразные графики.

107 - Чтобы использовать фигму и другие инструменты дизайнера на профессиональном уровне, одних гайдов недостаточно - для этого требуется более углублённое изучение с регулярной практикой на реальных задачах. На курсе "Графический дизайнер" вы сможете получить необходимые знания и практический опыт, чтобы стать дизайнером.

108 - Станьте графическим дизайнером с нуля

109 - Освойте востребованную профессию с нуля за 9 месяцев. Будете много практиковаться и получите реальный опыт. ● 5 проектов для портфолио; ● помощь с поиском работы до 7 месяцев после выпуска; ● приглашения на собеседования чаще на 38% и зарплата выше на 9%*

110 - <h2>FAQ: часто задаваемые вопросы</h2>

111 - <ul><li>Можно ли использовать Figma бесплатно?</li>

112 - </ul>Да, у Figma есть бесплатный тариф Starter с доступными базовыми инструментами, наборами шаблонов и неограниченным количеством черновиков. Это идеальный вариант, чтобы попробовать работать в графическом редакторе и выполнить свой первый проект. Тариф поддерживает совместную работу - дизайнер сразу привыкает к командной работе над задачей.

113 - Для выполнения учебных и небольших пет-проектов начинающим дизайнерам достаточно бесплатного тарифного плана. Источник:<a>figma</a>

114 - <ul><li>Подходит ли Figma новичкам?</li>

115 - </ul>Figma обладает интуитивно понятным и дружелюбным интерфейсом: в инструменте достаточно легко разобраться, даже если раньше пользователь не работал в подобных графических редакторах. К тому же в Figma Community и тематических сообществах содержится очень много обучающих материалов, в том числе на русском языке, так что при желании освоить программу на базовом уровне можно за несколько дней. Однако более глубокое освоение потребует больше времени и практики.

116 - <ul><li>Можно ли работать в Figma без интернета?</li>

117 - </ul>В Figma можно работать без интернета, если заранее открыть нужные файлы. Но в этом случае изменения будут синхронизированы только при восстановлении подключения. Открыть новые файлы или загрузить плагины без доступа в интернет не получится. Совместная работа также будет недоступна без интернета.

118 - <ul><li>Какие навыки нужны, чтобы начать?</li>

119 - </ul>Чтобы начать работать с Figma, начинающему специалисту потребуются базовое владение композицией, навыки работы с сеткой и типографикой, умение работать со слоями, группами и компонентами. Важно понимать, как сочетаются цвета, и уметь поддерживать в проекте консистентность. Также пригодится умение импортировать ресурсы и работать с плагинами.

120 - <h2>Подпишитесь на наш ежемесячный дайджест статей - а мы подарим вам полезную книгу про обучение!</h2>

121 - Canva: инструкция по созданию изображений для соцсетей, презентаций и сайтов

122 - Adobe Photoshop: обзор интерфейса, функций и возможностей программы

123 - Дарим 1500 баллов Плюса за покупку курса и новогоднее обещание себе - до 15 января.

124 -