Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

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

2 <ul><li>26 авг 2019</li>

3 <li>0</li>

4 </ul>Рассказываем про плагины для Figma, автоматизирующие рабочую рутину.

5 vlada_maestro / shutterstock

6 Автор статей по дизайну. В веб-дизайн пришёл в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил вёрстку. Время от времени публикую переводы на Habr.

7 Команда Figma очень бережно относится к своему детищу и прислушивается к мнению<a>сообщества</a>. Благодаря этому в середине июля 2019 года была выпущена бета-версия редактора с поддержкой плагинов. А уже в начале августа презентовали обновлённую Figma со встроенными плагинами. Любой разработчик или дизайнер, знающий базовый<a>HTML</a>и <a>JavaScript</a>, мог подать заявку и принять участие в их разработке.

8 Общие принципы:

9 <ul><li>Плагины должны быть простыми и понятными для любого дизайнера.</li>

10 <li>Если вы можете создать сайт, вы можете создать плагин.</li>

11 <li>Люди должны иметь возможность создавать плагины на <a>популярных языках программирования</a>.</li>

12 <li>Плагины не должны наносить ущерб производительности и пользовательскому опыту Figma.</li>

13 <li>Figma должна полностью поддерживать API, на которые опираются плагины.</li>

14 </ul>В этой статье мы разберём работу нескольких популярных и полезных плагинов, которые существенно упростят и автоматизируют ваш процесс проектирования.

15 Откройте программу, авторизуйтесь под своим Google-аккаунтом, перейдите на главную страницу редактора Figma. Слева на панели увидите пунктPlugins(он находится сразу подDrafts).

16 Как найти плагины в FigmaНажав на Plugins, вы окажетесь на странице плагинов. Они сгруппированы - рекомендуемые, популярные и установленные.

17 Так выглядят списки всех доступных плагиновТакже можно посмотреть все плагины, которые есть на данный момент, если нажать на кнопкуBrowse all plugins.

18 Философия FIgma - в простоте, поэтому установка плагинов простая и понятная для любого пользователя.

19 Установить плагины можно двумя способами:

20 <ul><li>На странице всех плагинов напротив нужного нажмите на кнопкуInstall - он будет автоматически установлен, состояние кнопки изменится на Installed, а плагин будет помещен в список группыInstalled.</li>

21 </ul>Установка плагина с общей страницы<ul><li>На отдельной странице плагина выберите нужный, перейдите на него и нажмите на кнопкуInstallдля установки.</li>

22 </ul>Установка со страницы описания плагинаУстановка плагина происходит мгновенно. Еще одно нажатие на кнопку инсталляции приводит к его деактивации.

23 Плагин легко как установить, так и удалитьНа странице плагина вы можете посмотреть краткое описание и руководство по использованию, ознакомиться с информацией об авторе и посмотреть его контакты, там же находится информация по истории версий.

24 Я отобрал пятнадцать простых и функциональных плагинов, которые будут полезны большинству дизайнеров:

25 <ul><li><a>Unsplash</a>- для быстрого автозаполнения блоков фотографиями.</li>

26 <li><a>Map Maker</a> - добавляет карты.</li>

27 <li><a>Charts</a>- для визуализации данных.</li>

28 <li><a>Iconify</a> - для иконок.</li>

29 <li><a>Autoflow</a> - визуализирует связи между объектами.</li>

30 <li><a>Content Reel</a> - для наполнения макета сайта контентом.</li>

31 <li><a>Blobs</a> - делает симпатичные кляксы.</li>

32 <li><a>Image tracer</a> - умеет переводить растр в вектор.</li>

33 <li><a>Figmotion</a> - для анимации.</li>

34 <li><a>Find and Replace</a> - ищет и заменяет текст.</li>

35 <li><a>Nisa Text Splitter</a>- для работы с таблицами и списками.</li>

36 <li><a>Spellchecker</a> - проверяет грамматику.</li>

37 <li><a>Isometric</a> - для быстрого создания изометрии.</li>

38 <li><a>Datavizer</a> - умеет создавать графики и гистограммы.</li>

39 <li><a>Icon Resizer</a>- для быстрого изменения размеров иконок.</li>

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

41 Давайте посмотрим на его работу. Выберите плагин - нажмите правой кнопкой мыши в любом месте холста. Выберите пунктPlugins - Unsplash.

42 Запускаем Unsplash в FigmaПоявится окно плагина.

43 Окно плагина UnsplashВыделите все карточки на холсте и выберите любую тематику(у нас в примере портреты).

44 Заполняем карточки портретамиПреимуществоUnsplashв том, что вы быстро сможете заполнить сколь угодно большое количество карточек, слайдеров, фотографий к статьям. При этом остается возможность детального поиска подходящей фотографии.

45 Заменяем конкретный портрет на пейзаж в пару кликовПлагин Map MakerMap Maker позволяет быстро создавать уникальную настраиваемую карту для вашего проекта. В настоящее время он поддерживает Google Maps и Mapbox. Разберем процесс создания карты на основе Google Maps.

46 Выберите плагинMap Maker.

47 Выбираем Map Maker из спискаПо умолчанию установлена вкладкаGoogle Maps, она нам и нужна.

48 Перейдите на полеAddressи введите нужную локацию, например,Paris.

49 1 - вкладка Google Maps, 2 - адресная строка для ввода названия локации, 3 - блок Custom Style для ввода JSON-кодаНиже адресной строки вы можете поменять тип карты и зум на тот, который вас устроит.

50 Теперь самое интересное - стиль карты. Поменять стиль карты можно, если перейти по одной из двух ссылок в блокеCustom Style.

51 Стиль карты может быть разнымДавайте перейдем по первой ссылке<a>Snazzy Map</a>и посмотрим, что это.

52 Информационное окно предупреждает об урезанных функциях карты в Snazzy MapПерейдя по ссылке на ресурс, мы видим информационное окно, предупреждающее, что сервис не может в полной мере поддерживать Google Maps. С июля 2019 года компания Google взимает плату за использование их API. Суммы достаточно большие. Чтобы не закрыть сервис и хоть как-то оставаться на плаву, руководство Snazzy Map было вынуждено урезать самые дорогие функции и тем самым сократить свои расходы, оставив сервис бесплатным.

53 Вы можете посмотреть и изучить возможности сервиса самостоятельно, он очень простой. Судьба Snazzy Map непонятна, поскольку аналог появился у Google и смысл в использовании именно его отпадает.

54 Посмотрим, что предлагается в Custom Styleпо ссылке<a>Google Official Map Style</a>.

55 Окно Google Official Map StyleНажмитеCreate a Style. Теперь вы можете подобрать нужный стиль карты.

56 Если не знаете, какой стиль выбрать, обратите внимание на Silver. Он одинаково хорошо смотрится на любом проекте за счет своей ненавязчивости.

57 Выбираем универсальный стиль карты SilverТакже можно немного почистить карту: убрать лишние мешающие названия, достопримечательности и дороги. Для этого есть специальный фильтрAdjust density of features (Регулировка плотности функций).

58 Убираем лишние подробности с картыТакже можно поменять цвета и сделать более точные настройки карты. Для этого нажмите внизу кнопкуMore Options.

59 Открываем дополнительные настройки картыКогда карта готова, нажмитеFinish, появится следующее окно:

60 Настройки карты можно скопировать и вставить в свой проектНажмите на ссылкуCopy JSON - код скопируется в буфер обмена, это нужно для того, чтобы получить код настроенной карты и перенести его в наш плагин.

61 Возвращаемся обратно в Figma и вставляем скопированный код в полеCustom Style.

62 Карта измениласьОбратите внимание на то, как изменилась карта в окне просмотра. Это значит, что все настройки применились, карта отображается корректно.

63 Далее осталось только нажать на кнопкуMake Map, чтобы применить настроенную карту к нашему блоку.

64 Применяем изменения к проектуЯ немного уменьшил зум, и вот что из этого получилось.

65 Готовый вариант карты, который пойдет в проектПлагин ChartsЕсли вы часто проектируете дашборды, то плагин Charts сильно облегчит выполнение рутины и позволит вам создавать симпатичные графики.

66 Как он работает?

67 ВыбираемChartsиз выпадающего списка плагинов.

68 Выбираем ChartsПолучаем вот такое окно:

69 Окно настройки плагина ChartsCharts довольно простой и интуитивно понятный. Давайте немного пройдемся по настройкам.

70 <ul><li>Choose chart type - выбираем тип диаграммы.</li>

71 <li>Configure - настраиваем конфигурацию, количество линий, точек, начало и конец диапазона данных.</li>

72 <li>Preview - окно просмотра.</li>

73 </ul>Варианты графиков, которые можно быстро построить в ChartsМожно создавать любое количество разных диаграмм, а потом настраивать их под свои задачи.

74 Диаграммы и графики в ChartsПлагин IconifyОчень полезный и нужный плагин, который должен быть в арсенале любого дизайнера. Суть его проста - быстрый поиск и добавление нужной иконки в SVG-формате в ваш проект.

75 Выбираем из списка плагинIconify.

76 Выбираем IconifyПолучаем окно со всевозможными сборниками иконок. Коллекций иконок огромное количество.

77 Доступные для скачивания иконки в IconifyОчень удобно реализована подача коллекций иконок, понятно их количество, виден размер, а также указаны компания и автор.

78 Пользоваться иконками очень просто: можно подобрать из конкретной коллекции или найти иконку через поиск.

79 Подбираем иконку GitHub и меняем ее под наш проектЗатем выбранную иконку можно немного преобразовать - повернуть на определенный угол или отзеркалить по вертикали или горизонтали, а также задать нужный цвет.

80 Один из самых простых и самых популярных на сегодняшний день плагинов.

81 Плагин AutoiflowПлагин позволяет показывать связь между объектами - очень полезная штука для изображения пользовательских сценариев и любых ситуаций, где важно передать принадлежность и последовательность событий.

82 Чтобы создать взаимосвязь, достаточно выделить два объекта и выбрать в выпадающем спискеAutoflow.

83 Связываем объекты с помощью AutoflowЧтобы каждый раз не выбирать из списка, воспользуйтесь сочетанием клавиш Ctrl+Alt+P. Оно позволяет активировать последний плагин, которым вы пользовались.

84 Связь между объектами в AutoflowВот так в три клика можно получить связи между нужными объектами.

85 Плагин Content ReelПлагин нужен, чтобы наполнить страницы макета уникальным контентом. Он выдаёт имена, телефоны, адреса, сайты, email, а также аватары и иконки.

86 Я создал восемь карточек с таким наполнением:

87 Создаем восемь одинаковых карточекЗадача - получить на всех карточках разный контент. Начинаем с выбора плагина.

88 Выбираем Content Reel из списка доступных плагиновПолучаем вот такое окно.

89 Окно плагина Content ReelДалее выберите поочередно все имена, адреса, email и нажмите нужный пункт в окне плагина, как показано на гифке.

90 Content Reel наполняет заменяет поля даннымиМы рандомно поменяли на восьми карточках имена, адреса, телефоны, email и аватарки. В первой версии плагина не было возможности менять аватары, и я делал это, используя сторонний сервис. В текущей версии разработчики добавили такую возможность.

91 Если ранее я говорил, что плагин сыроват, то теперь скажу, что это мегаплагин, огромный респект разработчикам.

92 Плагин BlobsНезамысловатый, простой и очень нужный плагин, помогающий делать фоны и абстракции.

93 ВыбираемBlobsиз списка.

94 Выбираем Blobs из списка доступных плагиновПоявляется вот такое окно.

95 Окно настроек BlobsИ, по сути, это и есть весь плагин, всего две настройки - сложность и контраст, количество и там, и там ограничено десятью. Давайте посмотрим, что может этот малыш.

96 Blobs генерирует кляксы случайной формы: мы можем влиять только на сложность фигуры и контрастЕще минута - и готово вот такое чудо:

97 Пример того, как можно разместить рандомные фигуры, сгенерированные BlobsВсе эти фигуры можно масштабировать и редактировать, плагин пока недооценен сообществом, но, думаю, это изменится в будущем.

98 Плагин Image tracerЭтот плагин нужен в том случае, когда у вас есть растровое изображение, но вам нужен вектор, а обводить нет ни времени, ни желания.

99 Преимущества изображений с четкими очертаниями и однородной заливкой в векторе перед растром:

100 <ul><li>Вектор можно редактировать.</li>

101 <li>Можно масштабировать без потери качества.</li>

102 <li>Можно быстро менять цвет.</li>

103 <li>Можно задавать обводку.</li>

104 </ul>Итак, ищем растровое изображение, желательно с четкими очертаниями и контрастной заливкой. Выбираем плагин.

105 Выбираем Image tracer из списка доступных плагиновОкно активируется только в том случае, если вы уже перенесли изображение в редактор и выделили его.

106 Справа растровое изображение, слева обработанное плагином - векторное, которое можно еще настроить и улучшить контурРаботает он следующим образом.

107 Переводим растр в вектор в Image tracerСуществуют дополнительные опции по более точной настройке плагина. Настроить их можно, если нажать на кнопкуShow Options.

108 Окно дополнительных настроек в Image tracerПожалуй, самая важная опция - этоblur. Она предназначена для сглаживания пикселей и превращения рваной линии в более плавную.

109 Применение blur в Image tracerТеперь вам не придется пользоваться дополнительным софтом(Illustrator или Corel)специально для того, чтобы трассировать изображение.

110 Плагин FigmotionFigmotion позволяет создавать анимацию прямо в Figma.Существенный плюс этого плагина - нет необходимости переключаться на другие пакеты анимации, как, например,Principleили<a>After Effects</a>.Если вы не умеете с ними работать, но анимация вам жизненно необходима, то плагинFigmotionдолжен быть в вашем арсенале.

111 Когда установите плагин, самое время его запустить. Перейдите в Figma, создайте новый файл проекта, выберите для работыFrameи нарисуйте фигуру, например треугольник. Теперь нажмите на фрейм правой кнопкой мыши для вызова контекстного меню. ВыберитеPlugins - Figmotion - Open Figmotion.

112 Выбор плагинаОткроется вот такое окно.

113 Рабочее окно плагинаВ левой части окна - возможные свойства анимации элемента, такие как прозрачность, поворот, заливка и так далее. В правой части расположена временная шкала(Timeline),на которой происходит настройка анимации выбранной функции с помощью ключевых кадров.

114 Верхняя часть окна отведена довольно значимому функционалу просмотру получившейся анимации, её сохранению, экспорту в <a>CSS</a>- илиJSON-формат. То есть при необходимости можно использовать созданную анимацию где-нибудь на сайте. Также в верхней части окна вы сможете задать нужный размер экрана.

115 Давайте попробуем передвинуть треугольник вправо и сделаем так, чтобы он вращался вокруг своей оси.

116 Чтобы передвинуть треугольник, нужно выбрать свойствоx - это означает, что мы будем двигать элемент по осиx.Напротив каждого свойства нарисован ромб. Он нужен, чтобы ставить ключи анимации на панелиTimeline.

117 Красным прямоугольником обозначен ромб - с помощью него можно проставлять ключевые кадры на временной шкале для создания анимацииПереместите оранжевый маркер на нулевую секунду(0ms)и нажмите на ромб(ключ анимации напротив свойства), который отмечен на скриншоте выше. Появится ключ анимации на нулевом кадре, откуда и начнёт движение треугольник.

118 Следующим шагом нужно обозначить окончание движения элемента - для этого переместите оранжевый маркер на 0,7секунды(что соответствует 700ms).Сделать это можно двумя способами:

119 <ul><li>Промотайте горизонтальный ползунок, который находится ниже временной шкалы, и установите оранжевый маркер на нужное значение. Конечно, есть вероятность, что будет некоторая погрешность и не удастся установить четкое значение700ms.Такая чёткость нужна не всегда, но так на порядок удобнее.</li>

120 <li>Довольно точный способ - произвольно установите второй ключевой кадр на любом временном значении и один раз нажмите на установленном ключевом кадре. Появится окно, в котором можно ввести интересующее вас значение, - туда и переместится ключевой кадр.</li>

121 </ul>Выставляем нужное значение ключевого кадраУдалить ключевой кадр можно с помощью кнопкиRemoveв появившемся окне, как это показано выше. Также в этом окне настраивается смягчение движения элемента как в начале, так и в конце. Используется тот же принцип, что и вAfter Effects - Easy Ease.

122 Продолжим создание анимации: установите ключевой кадр на 700msлюбым способом и выберитеeaseOut.Таким образом элемент завершит анимацию более плавно.

123 Выбор свойства easeOut для смягчения движения в конце путиТеперь нужно обозначить вектор движения и окончательное местоположение элемента. Делается это довольно легко: передвиньте треугольник вправо на нужное расстояние, на панели свойств элемента посмотрите значение осиx.Это значение введите в окно ключевого кадра.

124 Вводим значение по оси xПравда, есть небольшой нюанс, который я обнаружил опытным путём. От фактического значения осиx (когда установите его в окне ключевого кадра) будет вычтен размер, равный половине вашего элемента, и фактически осьxбудет равна514.А не 608,как в моём примере.

125 Поэтому, если вы хотите получить элемент точно по конкретной координате от края объекта, учитывайте, что придётся прибавить число, равное половине этого объекта. Поэтому я прибавил94и получил ровно608.Но в окне ключевого кадра будет702.

126 Наглядно значение координат в окне проектаКонечно, не стоит заморачиваться подобными вычислениями, но понимать, откуда берутся различия в значениях координат элемента и ключевого кадра, думаю, нужно.

127 Для такого случая есть выход - поменять привязку центра ключевого кадра объекта. Меняется в выпадающем окне, где и все значения ключевого кадра.

128 Меняем привязку центра ключевого кадра объектаВроде как это отличный выход, но опять же есть "но": данное свойство применяется для всех ключевых кадров всех свойств, что становится очередной проблемой. Ниже я рассмотрю подобный случай, а пока завершим нашу анимацию.

129 Давайте посмотрим промежуточный вариант. Чтобы проиграть анимацию, перейдите к нулевой секунде и нажмите пробел или кнопкуPlayв верхней части окна.

130 Красным прямоугольником выделена кнопка Play для начала воспроизведения анимацииАнимация треугольника по осиx.

131 Наглядная анимация треугольника по оси xТеперь, используя свойствоRotate,заставим фигуру вращаться вокруг своей оси во время движения. Для этого перейдите на свойствоRotateи установите два ключевых кадра - на нулевой секунде и на 700ms.

132 Установка ключевых кадров для свойства RotateНажмите на второй ключевой кадр и выставите значение360градусов. Это вполне логично, так как мы имеем дело уже не с координатами, а с углами, то есть по сути мы повернули треугольник на 360градусов.

133 Итоговый вариант анимации.

134 Наглядная анимация треугольника по оси x и с помощью свойства RotateТеперь давайте поменяем расположение центра ключевого кадра осиx.

135 Меняем расположение центра ключевого кадра оси xЗапускаем анимацию и смотрим, что получилось.

136 Неожиданный эффект вращения треугольникаТреугольник сместился от левого края вправо, но мы перестали контролировать его вращение, так как оно происходит относительно смещённого центра. Его мы установили только для ключевого кадра свойства осиx.Вращается треугольник довольно хаотично, не вокруг своей оси, как задумывалось изначально.

137 Но если быть более внимательным, авторы плагина сразу предупреждают, что изменение центра объекта будет применено сразу ко всем ключевым кадрам. Иногда это может быть полезно, а иногда может сыграть злую шутку.

138 Пояснение работы свойства изменения центра объектаВ целом, считаю этот плагин довольно полезным, особенно для тех, кто не знаком даже с базовой анимацией. Это отличный тренажёр перед тем, как перейти на более сложные пакеты типа After Effects.

139 Figmotionнезаменим при быстрой подаче и презентации идеи, когда не нужно заморачиваться с деталями, а достаточно показать направление и принцип.

140 Плагин Find and ReplaceПлагин позволяет искать фрагменты текста на странице и менять их на любые другие. Удобно, если вы работаете с большими объёмами текста.

141 Чтобы проверить работу плагина, нужен текст; я взял его из Яндекс.Рефератов по теме философии. Текст подобрал, чтобы в нём встречалось несколько повторений, - в моём случае это слово"гедонизм".

142 Пример текстаИз контекстного меню выберите установленный плагинFind and Replace.Откроется вот такое окно.

143 Окно плагинаВ полеFindвведите слово или словосочетание, которое нужно найти, а в полеReplace with- текст на замену.

144 Наглядная работа плагинаМы видим, как старый текст поменялся на новый, но есть небольшая проблема - окончания. Если нужно заменить слово"гедонизм",а в тексте оно встречается как"гедонизма",то окончание"а"останется после замены. Плагин в любом случае не исключает финальной вычитки и правки текста.

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

146 Расширенный функционал плагинаПлагин хорош, плюсов существенно больше, чем минусов. До волшебной кнопки "Написать идеальный текст" ему ещё далеко, но то, что имеется, уже можно использовать вовсю.

147 Плагин Nisa Text SplitterПлагин упрощает работу со списками и таблицами. Позволяет быстро разделить текст на строки, строки на столбцы, слово на буквы. Может удалять дубликаты, сортировать и объединять строки.

148 Для демонстрации работы плагина нам понадобится список одним блоком, ну и сам плагин, конечно.

149 Список для примера демонстрации плагинаВ левой панели видно, что текст действительно набран одним блоком и находится на одном текстовом слое.

150 Далее, не снимая выделения с текста, нажмите кнопкуSplitв окне плагина, таким образом разбив текст на отдельные строки, каждая из которых будет находиться на своём текстовом слое.

151 С помощью инструмента Split мы разбили текст на отдельные строкиВот так это выглядит в панели слоёв.

152 Каждая строка - на своём слоеИ ещё несколько примеров использования плагина: сортировка, реверс и удаление дублей.

153 Демонстрация основных инструментов плагинаПлагин SpellcheckerПродолжаем тему работы над текстом. Плагин проверяет грамматику с помощью сервиса<a>Яндекс.Спеллер</a>. Теперь нет необходимости переключаться на сервис и копировать текст по несколько раз - всё можно делать сразу в Figma.

154 Наглядная демонстрация работы плагинаПлагин очень хорош, часто незаменим при работе с текстом.

155 Плагин IsometricЭто, пожалуй, один из самых простых плагинов Figma, что не противоречит его возможностям. Достаточно вспомнить, сколько времени приходилось тратить на построение изометрии той же иконки раньше. Сейчас - просто восторг и изумление.

156 Убедитесь сами:

157 Наглядная демонстрация работы плагинаВот и всё, что может быть легче? Конечно, можно менять направление и угол, но всё равно всё очень и очень просто.

158 Плагин для создания графиков и гистограмм.

159 Плагин DatavizerПлагин позволяет создавать гистограммы, линейные диаграммы, точечные графики.

160 Если нужен график с точными данными, вы можете загрузить их с помощью файлаCSVилиJSON.Если график нужен просто как демонстрация или визуальный элемент интерфейса для презентации, можно воспользоваться функциейUse random data(использовать случайные данные).

161 Наглядная демонстрация работы плагинаЕсли вы дизайнер дашбордов, то вам этот плагин просто необходим.

162 Плагин Icon ResizerНе могу пройти мимо этого плагина - это простой, но эффективный инструмент, который должен быть в арсенале любого дизайнера.

163 Наглядная демонстрация работы плагинаУказать нужно два значения - размер иконки и размер ограничительной рамки. В итоге в один клик у вас получатся аккуратные иконки, готовые к размещению на сайте.

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

165 Перед тем как начать пользоваться плагинами,<a>изучите</a>сам редактор так, чтобы использовать все его возможности максимально эффективно.

166 <a>Научитесь: Figma с нуля до PRO Узнать больше</a>