0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#Руководства</a></p>
1
<p><a>#Руководства</a></p>
2
<ul><li>10 дек 2021</li>
2
<ul><li>10 дек 2021</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Как быстро сделать набор визиток, найти нужный логотип и выделить одинаковые объекты.</p>
4
</ul><p>Как быстро сделать набор визиток, найти нужный логотип и выделить одинаковые объекты.</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
6
<p>Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.</p>
6
<p>Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.</p>
7
<p>В Figma по умолчанию практически нет функций для автоматизации работы. Например, вам придётся самостоятельно копировать и вставлять 200 имён в свои макеты визиток из таблицы, хотя было бы легче просто синхронизировать её со своим макетом. Избавиться от этой монотонной работы вам помогут плагины, которые расширяют функционал графического редактора.</p>
7
<p>В Figma по умолчанию практически нет функций для автоматизации работы. Например, вам придётся самостоятельно копировать и вставлять 200 имён в свои макеты визиток из таблицы, хотя было бы легче просто синхронизировать её со своим макетом. Избавиться от этой монотонной работы вам помогут плагины, которые расширяют функционал графического редактора.</p>
8
<p>Рассказываем, какие плагины для Figma помогут вам автоматизировать рутинные задачи и сэкономить время.</p>
8
<p>Рассказываем, какие плагины для Figma помогут вам автоматизировать рутинные задачи и сэкономить время.</p>
9
<p>Наверняка у вас бывало так, что какая-то мелкая ошибка в тексте оказывается сразу во всех макетах приложения. Отлавливать и исправлять такое самостоятельно очень тяжело.</p>
9
<p>Наверняка у вас бывало так, что какая-то мелкая ошибка в тексте оказывается сразу во всех макетах приложения. Отлавливать и исправлять такое самостоятельно очень тяжело.</p>
10
<p>Чтобы быстро исправлять мелкие опечатки в тексте, установите плагин Find and Replace - он добавит в Figma функцию автозамены, которая может полностью заменить одно слово на другое.</p>
10
<p>Чтобы быстро исправлять мелкие опечатки в тексте, установите плагин Find and Replace - он добавит в Figma функцию автозамены, которая может полностью заменить одно слово на другое.</p>
11
<p><strong>Как пользоваться</strong></p>
11
<p><strong>Как пользоваться</strong></p>
12
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
12
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
13
<li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Find and Replace.</li>
13
<li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Find and Replace.</li>
14
<li>В появившемся окне в верхнем поле напишите текст, который нужно найти на макете, а в нижнем - на что его нужно поменять.</li>
14
<li>В появившемся окне в верхнем поле напишите текст, который нужно найти на макете, а в нижнем - на что его нужно поменять.</li>
15
<li>Нажмите кнопку Replace, чтобы менять каждый текстовый блок отдельно, или Replace all, чтобы заменить всё сразу.</li>
15
<li>Нажмите кнопку Replace, чтобы менять каждый текстовый блок отдельно, или Replace all, чтобы заменить всё сразу.</li>
16
</ul>Изображение: Skillbox Media<p>При вёрстке страницы магазина приходится бесконечно копировать и вставлять названия товаров, ценники и фотографии. Особенно обидно, если это всё есть у клиента в формате таблицы, которую просто так к Figma подключить нельзя.</p>
16
</ul>Изображение: Skillbox Media<p>При вёрстке страницы магазина приходится бесконечно копировать и вставлять названия товаров, ценники и фотографии. Особенно обидно, если это всё есть у клиента в формате таблицы, которую просто так к Figma подключить нельзя.</p>
17
<p>Чтобы избавиться от этой ручной работы, воспользуйтесь плагином Google Sheets Sync. С помощью него вы можете добавить готовые данные из таблиц, а не заниматься этим самостоятельно.</p>
17
<p>Чтобы избавиться от этой ручной работы, воспользуйтесь плагином Google Sheets Sync. С помощью него вы можете добавить готовые данные из таблиц, а не заниматься этим самостоятельно.</p>
18
<p><strong>Как пользоваться</strong></p>
18
<p><strong>Как пользоваться</strong></p>
19
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
19
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
20
<li>Сделайте таблицу в Google Sheets. Для примера, подготовьте её под визитки - сделайте колонки с названиями name, position и mail. В каждую добавьте соответствующие данные и откройте к ней доступ на редактирование.</li>
20
<li>Сделайте таблицу в Google Sheets. Для примера, подготовьте её под визитки - сделайте колонки с названиями name, position и mail. В каждую добавьте соответствующие данные и откройте к ней доступ на редактирование.</li>
21
<li>Зайдите в Figma и набросайте макет визитки. На ней обязательно должно быть три текстовых модуля - назовите их как колонки в таблице, но с хештегом в начале: #name, #position и #mail. Так плагин поймёт, что и куда ему нужно добавлять.</li>
21
<li>Зайдите в Figma и набросайте макет визитки. На ней обязательно должно быть три текстовых модуля - назовите их как колонки в таблице, но с хештегом в начале: #name, #position и #mail. Так плагин поймёт, что и куда ему нужно добавлять.</li>
22
<li>Сделайте несколько копий своей визитки, например - 20. Заполненных визиток будет столько, сколько строк в вашей таблице.</li>
22
<li>Сделайте несколько копий своей визитки, например - 20. Заполненных визиток будет столько, сколько строк в вашей таблице.</li>
23
<li>Выделите все свои визитки, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Google Sheets Sync.</li>
23
<li>Выделите все свои визитки, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Google Sheets Sync.</li>
24
<li>В появившемся окне вставьте ссылку на таблицу и нажмите кнопку Fetch & Sync. Все ваши визитки заполнятся данными из таблицы.</li>
24
<li>В появившемся окне вставьте ссылку на таблицу и нажмите кнопку Fetch & Sync. Все ваши визитки заполнятся данными из таблицы.</li>
25
</ul>Изображение: Skillbox Media<p>В Figma есть функция выделения одинаковых объектов, но она сильно ограничена. Например, вы не сможете найти кнопки с одинаковым цветом и размером.</p>
25
</ul>Изображение: Skillbox Media<p>В Figma есть функция выделения одинаковых объектов, но она сильно ограничена. Например, вы не сможете найти кнопки с одинаковым цветом и размером.</p>
26
<p>Чтобы не искать всё самостоятельно, установите плагин Similayer. Он поможет вам быстро выделить все необходимые блоки макета с одинаковыми параметрами и изменить их.</p>
26
<p>Чтобы не искать всё самостоятельно, установите плагин Similayer. Он поможет вам быстро выделить все необходимые блоки макета с одинаковыми параметрами и изменить их.</p>
27
<p><strong>Как пользоваться</strong></p>
27
<p><strong>Как пользоваться</strong></p>
28
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
28
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
29
<li>Зайдите в Figma, выберите модуль с нужными вам свойствами, нажмите на него правой кнопкой мыши, в выпадающем меню перейдите в пункт Plugins и выберите Similayer.</li>
29
<li>Зайдите в Figma, выберите модуль с нужными вам свойствами, нажмите на него правой кнопкой мыши, в выпадающем меню перейдите в пункт Plugins и выберите Similayer.</li>
30
<li>В появившемся окне укажите, по каким именно признакам нужно искать одинаковые элементы. Обратите внимание на пункт Limit selection with root frame - если он активен, то плагин будет искать похожие элементы только внутри родительского фрейма.</li>
30
<li>В появившемся окне укажите, по каким именно признакам нужно искать одинаковые элементы. Обратите внимание на пункт Limit selection with root frame - если он активен, то плагин будет искать похожие элементы только внутри родительского фрейма.</li>
31
<li>Нажмите кнопку Select layers и меняйте выделенные блоки.</li>
31
<li>Нажмите кнопку Select layers и меняйте выделенные блоки.</li>
32
</ul>Изображение: Skillbox Media<p>Вы наверняка часто ищете в интернете разные логотипы, чтобы добавить на промостраницу ссылки на соцсети или партнёров клиента. Обычно это занимает много времени, так как в интернете не всегда сразу попадаются картинки в хорошем качестве.</p>
32
</ul>Изображение: Skillbox Media<p>Вы наверняка часто ищете в интернете разные логотипы, чтобы добавить на промостраницу ссылки на соцсети или партнёров клиента. Обычно это занимает много времени, так как в интернете не всегда сразу попадаются картинки в хорошем качестве.</p>
33
<p>Чтобы не тратить много времени на поиск этих картинок, воспользуйтесь плагином Brandfetch, в котором, скорее всего, уже есть все нужные вам логотипы.</p>
33
<p>Чтобы не тратить много времени на поиск этих картинок, воспользуйтесь плагином Brandfetch, в котором, скорее всего, уже есть все нужные вам логотипы.</p>
34
<p><strong>Как пользоваться</strong></p>
34
<p><strong>Как пользоваться</strong></p>
35
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
35
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
36
<li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Brandfetch.</li>
36
<li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Brandfetch.</li>
37
<li>В появившемся окне введите в поиске название нужной компании.</li>
37
<li>В появившемся окне введите в поиске название нужной компании.</li>
38
<li>Выберите логотип - он сразу появится на макете в формате SVG. По желанию фирменные цвета можно изменить сразу в плагине.</li>
38
<li>Выберите логотип - он сразу появится на макете в формате SVG. По желанию фирменные цвета можно изменить сразу в плагине.</li>
39
</ul>Изображение: Skillbox Media<p>Работает так же, как и Brandfetch, но уже с иконками. Плагин содержит несколько бесплатных наборов с иконками в формате SVG, которые вы можете сразу использовать в макете.</p>
39
</ul>Изображение: Skillbox Media<p>Работает так же, как и Brandfetch, но уже с иконками. Плагин содержит несколько бесплатных наборов с иконками в формате SVG, которые вы можете сразу использовать в макете.</p>
40
<p><strong>Как пользоваться</strong></p>
40
<p><strong>Как пользоваться</strong></p>
41
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
41
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
42
<li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Iconify.</li>
42
<li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Iconify.</li>
43
<li>В появившемся окне выберите нужный набор иконок или введите её название в поиске.</li>
43
<li>В появившемся окне выберите нужный набор иконок или введите её название в поиске.</li>
44
<li>Выберите нужную иконку и нажмите кнопку Import Icon.</li>
44
<li>Выберите нужную иконку и нажмите кнопку Import Icon.</li>
45
</ul>Изображение: Skillbox Media<p>Ещё один плагин, который помогает посмотреть, как ваше приложение будет выглядеть на разных устройствах, и сразу выявить ошибки в вёрстке или адаптации приложения.</p>
45
</ul>Изображение: Skillbox Media<p>Ещё один плагин, который помогает посмотреть, как ваше приложение будет выглядеть на разных устройствах, и сразу выявить ошибки в вёрстке или адаптации приложения.</p>
46
<p>Особенность плагина в том, что вы сразу можете посмотреть, сколько потенциальных пользователей в конкретном регионе используют определённую диагональ экрана. Но учтите, что эти цифры приблизительные и могут не отражать реальной картины.</p>
46
<p>Особенность плагина в том, что вы сразу можете посмотреть, сколько потенциальных пользователей в конкретном регионе используют определённую диагональ экрана. Но учтите, что эти цифры приблизительные и могут не отражать реальной картины.</p>
47
<p><strong>Как пользоваться</strong></p>
47
<p><strong>Как пользоваться</strong></p>
48
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
48
<ul><li>Скачайте плагин<a>по ссылке</a>.</li>
49
<li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Viewports.</li>
49
<li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Viewports.</li>
50
<li>В появившемся окне выберите нужный регион и устройство.</li>
50
<li>В появившемся окне выберите нужный регион и устройство.</li>
51
</ul>Изображение: Skillbox Media<p><a>Самоучитель по Figma</a></p>
51
</ul>Изображение: Skillbox Media<p><a>Самоучитель по Figma</a></p>
52
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
52
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
53
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>
53
<a>Научитесь: Figma с нуля до PRO Узнать больше</a>