HTML Diff
1 added 1 removed
Original 2026-01-01
Modified 2026-02-21
1 <p><a>#Руководства</a></p>
1 <p><a>#Руководства</a></p>
2 <ul><li>25 фев 2022</li>
2 <ul><li>25 фев 2022</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 очень удобно делать сайты и лендинги, но некоторые нужные функции в ней не предусмотрены. Например, источник света для тени приходится рассчитывать самостоятельно, а размер выходного изображения может быть слишком большим. В этом вам помогут плагины, которые расширяют функционал графического редактора.</p>
7 <p>В Figma очень удобно делать сайты и лендинги, но некоторые нужные функции в ней не предусмотрены. Например, источник света для тени приходится рассчитывать самостоятельно, а размер выходного изображения может быть слишком большим. В этом вам помогут плагины, которые расширяют функционал графического редактора.</p>
8 <p>Рассказываем, какие плагины для Figma помогут вам сделать сайт или лендинг.</p>
8 <p>Рассказываем, какие плагины для Figma помогут вам сделать сайт или лендинг.</p>
9 - <p>Этот плагин поможет скорректировать свет и тени любой фотографии с помощью тональных кривых. Сдеать полную цветокоррекцию с помощью него не выйдет, но зато можно по-быстрому исправить ошибки и не открывать Lightroom.</p>
9 + <p>Этот плагин поможет скорректировать свет и тени любой фотографии с помощью тональных кривых. Сделать полную цветокоррекцию с помощью него не выйдет, но зато можно по-быстрому исправить ошибки и не открывать Lightroom.</p>
10 <p><strong>Как пользоваться</strong></p>
10 <p><strong>Как пользоваться</strong></p>
11 <ul><li>Скачайте плагин<a>по ссылке</a>.</li>
11 <ul><li>Скачайте плагин<a>по ссылке</a>.</li>
12 <li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Tone Curve.</li>
12 <li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Tone Curve.</li>
13 <li>Выделите любую фотографию на макете - она сразу откроется в окне плагина.</li>
13 <li>Выделите любую фотографию на макете - она сразу откроется в окне плагина.</li>
14 <li>В окне плагина измените кривые в любых доступных тонах - серых, красных, зелёных или синих.</li>
14 <li>В окне плагина измените кривые в любых доступных тонах - серых, красных, зелёных или синих.</li>
15 </ul><p>Если на сайте не хватает декоративных элементов, попробуйте нагенерировать их через Gradient Blob. Этот плагин создаёт векторные пятна со случайными пропорциями, которые можно использовать в лендинге для выделения важной информации.</p>
15 </ul><p>Если на сайте не хватает декоративных элементов, попробуйте нагенерировать их через Gradient Blob. Этот плагин создаёт векторные пятна со случайными пропорциями, которые можно использовать в лендинге для выделения важной информации.</p>
16 <p><strong>Как пользоваться</strong></p>
16 <p><strong>Как пользоваться</strong></p>
17 <ul><li>Скачайте плагин<a>по ссылке</a>.</li>
17 <ul><li>Скачайте плагин<a>по ссылке</a>.</li>
18 <li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Gradient Blob.</li>
18 <li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Gradient Blob.</li>
19 <li>В появившемся окне вы увидите изменяющееся пятно - нажимайте на него правой кнопкой мыши, и оно появится на макете.</li>
19 <li>В появившемся окне вы увидите изменяющееся пятно - нажимайте на него правой кнопкой мыши, и оно появится на макете.</li>
20 </ul><p>Проблема медленного интернета у пользователя обычно связана с иллюстрациями - если они много весят, то и загружаться будут очень долго. Чтобы этого избежать, воспользуйтесь плагином TinyImage Compressor - он удаляет из изображений лишнюю информацию и помогает уменьшить размер картинок в несколько раз.</p>
20 </ul><p>Проблема медленного интернета у пользователя обычно связана с иллюстрациями - если они много весят, то и загружаться будут очень долго. Чтобы этого избежать, воспользуйтесь плагином TinyImage Compressor - он удаляет из изображений лишнюю информацию и помогает уменьшить размер картинок в несколько раз.</p>
21 <p><strong>Как пользоваться</strong></p>
21 <p><strong>Как пользоваться</strong></p>
22 <ul><li>Скачайте плагин<a>по ссылке</a>.</li>
22 <ul><li>Скачайте плагин<a>по ссылке</a>.</li>
23 <li>Зайдите в Figma, выделите нужную картинку, на боковой панели в блоке Export нажмите на плюсик и укажите выходной формат JPG.</li>
23 <li>Зайдите в Figma, выделите нужную картинку, на боковой панели в блоке Export нажмите на плюсик и укажите выходной формат JPG.</li>
24 <li>Кликните правой кнопкой мыши на вашу картинку, в выпадающем меню перейдите в пункт Plugins и выберите TinyImage Compressor.</li>
24 <li>Кликните правой кнопкой мыши на вашу картинку, в выпадающем меню перейдите в пункт Plugins и выберите TinyImage Compressor.</li>
25 <li>В появившемся меню укажите, с каким качеством вы хотите её выгрузить из макета. Советуем делать сжатие не ниже 76%, чтобы качество изображения не пострадало.</li>
25 <li>В появившемся меню укажите, с каким качеством вы хотите её выгрузить из макета. Советуем делать сжатие не ниже 76%, чтобы качество изображения не пострадало.</li>
26 </ul><p>Кстати, размер изображения из примера удалось сжать с 7 МБ до 2 МБ.</p>
26 </ul><p>Кстати, размер изображения из примера удалось сжать с 7 МБ до 2 МБ.</p>
27 <p>Этот плагин позволяет довольно быстро и удобно добавлять тени на любые элементы макета. Его особенность - в виртуальном источнике света, который можно регулировать как угодно и добиваться хороших результатов.</p>
27 <p>Этот плагин позволяет довольно быстро и удобно добавлять тени на любые элементы макета. Его особенность - в виртуальном источнике света, который можно регулировать как угодно и добиваться хороших результатов.</p>
28 <p><strong>Как пользоваться</strong></p>
28 <p><strong>Как пользоваться</strong></p>
29 <ul><li>Скачайте плагин<a>по ссылке</a>.</li>
29 <ul><li>Скачайте плагин<a>по ссылке</a>.</li>
30 <li>Зайдите в Figma, нажмите правой кнопкой мыши на нужный объект, в выпадающем меню перейдите в пункт Plugins и выберите Beautiful Shadows.</li>
30 <li>Зайдите в Figma, нажмите правой кнопкой мыши на нужный объект, в выпадающем меню перейдите в пункт Plugins и выберите Beautiful Shadows.</li>
31 <li>В появившемся окне установите источник света в нужное положение и нажмите кнопку Apply.</li>
31 <li>В появившемся окне установите источник света в нужное положение и нажмите кнопку Apply.</li>
32 </ul><p>Это - обновляемый склад мемов, который поможет сделать ваш лендинг веселее. Ну или просто развлечься после рабочего дня :-)</p>
32 </ul><p>Это - обновляемый склад мемов, который поможет сделать ваш лендинг веселее. Ну или просто развлечься после рабочего дня :-)</p>
33 <p><strong>Как пользоваться</strong></p>
33 <p><strong>Как пользоваться</strong></p>
34 <ul><li>Скачайте плагин<a>по ссылке</a>.</li>
34 <ul><li>Скачайте плагин<a>по ссылке</a>.</li>
35 <li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите FigMeme.</li>
35 <li>Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите FigMeme.</li>
36 <li>В появившемся окне выберите нужную картинку, и она появится на макете. Если сразу найти нужное у вас не получается, воспользуйтесь поиском вверху окна.</li>
36 <li>В появившемся окне выберите нужную картинку, и она появится на макете. Если сразу найти нужное у вас не получается, воспользуйтесь поиском вверху окна.</li>
37 </ul><p><a>Самоучитель по Figma</a></p>
37 </ul><p><a>Самоучитель по Figma</a></p>
38 <p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
38 <p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
39 <a>Научитесь: Веб-дизайн 3.0 Узнать больше</a>
39 <a>Научитесь: Веб-дизайн 3.0 Узнать больше</a>