Полезные плагины для Figma. Часть вторая. | by Sorokin Egor | Дизайн-кабак

В первой части я рассказывал про те плагины, которые использую ежедневно. Сейчас рассмотрим расширения немного другого плана. Эти плагины требуются не так часто, но выручают и расширяют возможности фигмы как векторного редактора. Применяю по необходимости, когда хочется обойтись без перехода в Фотошоп или Иллюстратор.

Несмотря на название, этот плагин не делает бленды — переходы форм объектов, как в Иллюстраторе. Он просто размещает копии объект вдоль определённого пути. Тоже бывает полезно.

Аналогично предыдущему плагину, размещает объекты вдоль выбранного пути. Хорошая вещь.

Генерирует красивые волнушки. Сейчас они не такие модные, как в 2019, но порой нужны.

Быстренько трансформирует макеты в изометрию. Этот плагин — лучший по функционалу среди своих конкурентов.

Работа плагина

Опять же периодически — но очень полезный плагин, позволяющий сделать наклон объектов. До этого плагина мне приходилось лезть в Иллюстратор.

Тут всё просто. Генератор шума. Хорошо заходит для создания текстурных фонов в веб-дизайне.

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

Так вот, возвращаясь к плагину — он создаёт целую тучу промежуточных точек, чтобы сгладить переходы градиентов. Сравните:

На сложных градиентах он, конечно, лажает, но попробовать применить можно, иногда выдаёт приличный результат.

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

Полезный плагин-костыль, который позволяет обойти ограничение размера вставляемого изображения в 4096 пикселей в макет Фигмы. С помощью него можно вставить большие картинки. Нужная вещь.

Изгибает объект. Чаще всего применяю для каких-то надписей.

Честно, никогда не применял, потому что пользоваться Freehand в Фигме практически не приходится, подобные вещи заранее готовлю в Иллюстраторе. Но иметь в арсенале всегда полезно.

«Из коробки» в Фигме слабые возможности коррекции изображений. Плагин включает в себя целый ряд знакомых с Фотошопа фильтров типа Hue/Saturation, Unsharping Mask, Tilt Shift и прочие.

Создаёт разнообразные пятна-кляксы. Я применяю для быстрого создания абстрактных фонов.

Создаёт паттерны из элементов или выбранных объектов.

Считает количество символов в тексте. Бывает полезно, когда вместе с разработчиками решаете вопрос о том, насколько большой текстовый блок сделать.

Аналог выбора шрифтов в любом Адобопродукте — видны сразу превью шрифтов, а не только названия. Работает чуток медленно, но пользоваться можно.

Полезные плагины для Figma. Часть вторая.

— Brandloga.ru — творческая берлога Егора Сорокина

Вторая часть моего обзора на самые необходимые в арсенале дизайнера плагины для Фигмы.

В первой части я рассказывал про те плагины, которые использую ежедневно. Сейчас рассмотрим расширения немного другого плана. Эти плагины требуются не так часто, но выручают и расширяют возможности фигмы как векторного редактора. Применяю по необходимости, когда хочется обойтись без перехода в Фотошоп или Иллюстратор.

Несмотря на название, этот плагин не делает бленды — переходы форм объектов, как в Иллюстраторе. Он просто размещает копии объект вдоль определённого пути. Тоже бывает полезно.

Аналогично предыдущему плагину, размещает объекты вдоль выбранного пути. Хорошая вещь.

Генерирует красивые волнушки. Сейчас они не такие модные, как в 2019, но порой нужны.

Быстренько трансформирует макеты в изометрию. Этот плагин — лучший по функционалу среди своих конкурентов.

Работа плагина Easometric

Опять же периодически — но очень полезный плагин, позволяющий сделать наклон объектов. До этого плагина мне приходилось лезть в Иллюстратор.

Тут всё просто. Генератор шума. Хорошо заходит для создания текстурных фонов в веб-дизайне.

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

Так вот, возвращаясь к плагину — он создаёт целую тучу промежуточных точек, чтобы сгладить переходы градиентов. Сравните:

Градиент становится плавным и приятным глазу

На сложных градиентах он, конечно, лажает, но попробовать применить можно, иногда выдаёт приличный результат.

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

Полезный плагин-костыль, который позволяет обойти ограничение размера вставляемого изображения в 4096 пикселей в макет Фигмы. С помощью него можно вставить большие картинки. Нужная вещь.

Изгибает объект. Чаще всего применяю для каких-то надписей.

Честно, никогда не применял, потому что пользоваться Freehand в Фигме практически не приходится, подобные вещи заранее готовлю в Иллюстраторе. Но иметь в арсенале всегда полезно.

«Из коробки» в Фигме слабые возможности коррекции изображений. Плагин включает в себя целый ряд знакомых с Фотошопа фильтров типа Hue/Saturation, Unsharping Mask, Tilt Shift и прочие.

Создаёт разнообразные пятна-кляксы. Я применяю для быстрого создания абстрактных фонов.

Создаёт паттерны из элементов или выбранных объектов.

Считает количество символов в тексте. Бывает полезно, когда вместе с разработчиками решаете вопрос о том, насколько большой текстовый блок сделать.

Аналог выбора шрифтов в любом Адобопродукте — видны сразу превью шрифтов, а не только названия. Работает чуток медленно, но пользоваться можно.

Легко создавайте цвета и градиенты в Figma с помощью этих крутых плагинов — Satyam Anand

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

В сообществе Figma есть множество замечательных плагинов, которые помогают нам создавать лучшие дизайны, а также поддерживать отличные цветовые комбинации и согласованность между дизайнами.

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

Панель инструментов плагинов Figma

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

Эти плагины значительно сэкономят ваше время и помогут вам проектировать лучше и быстрее.

1.Coolors

Colors — самый известный плагин для создания красивых цветовых палитр и цветовых схем. Его использовали более 2,5 миллионов человек по всему миру.

Coolors

Как использовать плагин Coolors?

✓ Случайные цветовые схемы можно сгенерировать, нажав «Создать».

✓ Нажмите на кнопку блокировки, чтобы сохранить ваши любимые цвета.

✓ Чтобы получить оставшиеся идеально совпадающие цвета, нажмите «Создать» еще раз.

Ссылка на плагин: COOLORS

2.WebGradients

Всего несколькими щелчками мыши вы можете превратить любую часть вашего веб-сайта в привлекательный фон с помощью простого и мощного плагина градиента.

WebGradients

Как использовать плагин WebGradients?

✓ Из палитры из 180 ярких оттенков вы можете выбрать свой любимый градиент.

✓ Используйте фильтр, чтобы выделить определенный оттенок.

✓ Создайте коллекцию своих любимых градиентов.

Ссылка на плагин: WEB GRADIENTS

3.Spectrum

Spectrum — отличный плагин для быстрого создания цветовой палитры. Одним щелчком мыши вы можете создавать потрясающие цветовые палитры и применять их к графике, фотографиям, интерфейсам и практически ко всему остальному на холсте!

Spectrum

Как использовать плагин Spectrum?

✓ Выберите основной цвет в инструменте.

✓ Кнопка «Создать в случайном порядке».

✓ Вы можете выбрать другую цветовую гармонию — Shades, Hue и Custom

✓ Нажмите «Применить палитру».

Ссылка на плагин: SPECTRUM

4. Название цвета

Название цвета — это классный плагин для определения цвета выбранных фигур или любого объекта со сплошной заливкой. Это также дает цвета, близкие к спектру выбранного цвета.

Название цвета

Как использовать плагин названия цвета?

✓ Выберите фигуру/фигуры, залитые цветом.

✓ Предварительный просмотр информации о цвете и похожих цветовых предложений.

✓ Дает уникальное имя всем цветам.

Ссылка на подключаемый модуль: НАЗВАНИЕ ЦВЕТА

5. Color Designer

Плагин Color Designer, может использоваться для создания оттенков, оттенков и цветовых гармоний. Он имеет четыре основные функции:

• Оттенок/оттенки
• Генератор градиента (Генератор шагов доступен)
• Выбор цвета
• Библиотека изображений

Дизайнер цвета

Как использовать плагин Color Designer?

✓ Выберите фигуру/фигуры, залитые сплошным цветом.

✓ Сдвиньте ползунок оттенка, чтобы создать до 40 оттенков.

✓ Сдвиньте ползунок оттенков, чтобы создать до 40 оттенков цвета.

✓ Вы можете создавать цветовые гармонии, такие как дополнительные, аналоговые, триады и т. д.

Color Designer

Ссылка на плагин: COLOR DESIGNER

Color Designer также имеет веб-инструменты. Изучайте эти удобные инструменты всякий раз, когда вам нужно.

Color Designer Tools

Я предполагаю, что этот пост дал бы вам лучшее понимание того, как генерировать цвета и градиенты в Figma.

Поделитесь статьей, если она вам понравилась. Добавьте его в свой список. 📑 ✓

▹ Подпишитесь на меня в других социальных сетях: Twitter LinkedIn Instagram Quora

Спасибо за чтение.

#figmatool #figmaplugin #colortools #градиенты #uicolor #spectrum #coolors #color Designer #figmacolors

Окончательный список плагинов Figma, организованный 😊 | Салман Кхан

Мальчик использует свой ноутбук.

Это систематизированный список лучших плагинов figma для изображений, цветов, передачи разработки и многого другого. Это поможет вам работать быстрее, умнее и эффективнее.

Совет : сохраните эту статью, чтобы иметь к ней доступ в любое время

1. Unsplash — Вставляйте красивые изображения из Unsplash прямо в свои дизайны.
2. Iconify — импорт значков Material Design, FontAwesome, значков Jam, EmojiOne, Twitter Emoji и многих других значков (более 60 наборов значков, содержащих более 50 000 значков) в документ Figma в виде векторных фигур.
3. Content Reel — Создавайте макеты более эффективно, вытягивая текстовые строки, изображения и значки из одной палитры. Это один из моих любимых плагинов.
4. Autoflow — Autoflow упрощает рисование потоков. Просто выберите 2 объекта, и между ними будет волшебно проведена линия.
5. Палитра изображений — извлекает цветовую палитру из 5 различных цветов из выбранных изображений.
6. Blush — Создавайте и настраивайте иллюстрации в своих проектах с помощью Blush. Просто выберите коллекцию, выберите композицию и поместите ее на холст.
7. Remove BG — Автоматическое удаление фона изображений одним щелчком мыши — с помощью API remove. bg.
8. Mapsicle — Больше никогда не делайте скриншот карты! С помощью Mapsicle вы можете быстро и легко размещать карты в макетах.
9. Диаграммы — Диаграммы позволяют создавать диаграммы, которые можно добавлять и редактировать в документе Figma. Выберите линейную, площадную, круговую, кольцевую, точечную и гистограмму.
10. Лорем Ипсум — Создайте «Lorem ipsum», чтобы заполнить ваши текстовые слои фиктивным текстом.

1. Color Designer — Плагин создает оттенки, оттенки и цветовые гармонии на основе выбранных слоев или локальных стилей.
2. Название цвета — Отвечает на вопрос «Как назвать этот цвет?» раз и навсегда. Выберите любой узел со сплошной заливкой и посмотрите название цвета или список ближайших к нему названий цветов.
3. Палитра — Палитра поможет вам создать идеальную цветовую палитру с помощью машинного обучения от Colormind.
4. uiGradients — Добавляет градиенты к группам, тексту и фреймам в один клик.
5. Веб-градиенты — простой в использовании и мощный функциональный плагин градиента, который вы можете использовать в качестве фона контента в любой части вашего сайта в одно мгновение!

1. Stark — набор интегрированных специальных инструментов для вашей команды дизайнеров и разработчиков продуктов
2. Color Blind — Color Blind позволяет просматривать ваши проекты с 8 различными типами нарушения цветового зрения.
3. A11y — Color-Contrast-Checker — Убедитесь, что ваш текст удобочитаем для пользователей, придерживаясь стандартов WCAG (Руководство по обеспечению доступности веб-контента).
4. Карты для человечества — Карты для человечества — это инструмент Idean для инклюзивного дизайна. Раздайте карты, чтобы получить человека и черту. Ваша задача состоит в том, чтобы решить, как вы можете разработать дизайн для их нужд.
5. Able — Able упрощает доступ, но выглядит и ощущается как Figma!

1. arc — изогнуть текст вверх, вниз или по кругу. Настройте ползунок и просмотрите результат.
2. Confetti — Confetti for Figma позволяет любому создавать великолепные узоры из конфетти.
3. Фильтр — На данный момент доступно более 40 настраиваемых фильтров. Они отлично подходят для создания крутых эффектов.
4. Геометрический — Создание математических фигур и кривых. Выберите из полярной розы, тригонометрических функций, многоугольников, спиралей различных видов, суперэллипса, астроиды и измените несколько параметров, чтобы с легкостью получить сложные формы.
5. Get Waves — Get Waves — это бесплатный генератор волн SVG, позволяющий создавать уникальные волны SVG для вашего следующего дизайна. Выберите кривую, отрегулируйте сложность, рандомизируйте!
6. Morph — Создавайте потрясающие эффекты, такие как Skeuomorph, Neon, Glitch, Reflection, Glass, Gradient и т. д., прямо в Figma!
7. Неоморфизм — Создавайте красивый неоморфный дизайн всего за несколько секунд. Просто выберите все, что вы хотите «неоморфировать», откройте плагин и бум.
8. Шум — Наделай шума в Figma! Шум — удобный инструмент, когда вам нужно добавить немного реализма в вашу работу. Масштабируйте шум, чтобы имитировать облака или пятна и износ.
9. Pattern Hero — Pattern Hero позволяет размещать выбранные элементы или кадры в сетке для создания узоров.
10. Skew Dat — С помощью этого плагина вы можете искажать все, что угодно, в пределах комфорта всеми любимой дизайнерской программы Figma.

1. Капли — Создавайте органические формы капель одним нажатием кнопки. Каждая сгенерированная форма уникальна до последней. Вы можете контролировать, насколько уникальна форма, а также количество точек, которые она имеет.
2. Конвертируйте Figma в Sketch/XD (бета-версия) — Конвертируйте и экспортируйте свои проекты из Figma в Sketch или Adobe XD (бета-версия) одним щелчком мыши народы.
3. Figmotion — Figmotion — это инструмент для анимации, встроенный прямо в Figma.
4. Найти и заменить — Поиск текстов на странице и их замена, как в текстовом редакторе.
5. Изометрический — Изометрический позволяет создавать изометрические слои без необходимости их ручной настройки.
6. Файлы лотов — С плагином LottieFiles для Figma вы можете перетаскивать файлы лотов в figma, получать доступ к библиотеке из 1000 бесплатных анимаций Lottie, вставлять Lottie в виде GIF-анимаций и многое другое.
7. Similayer — Этот плагин выводит встроенную команду Figma «Выбрать все с помощью…» на новый уровень. Вы можете выбрать похожие слои; на основе целого ряда свойств.
8. Набор историй от Freepik — классные иллюстрации, которые сделают ваш проект еще интереснее!
9. Table Generator — Плагин Table Generator автоматизирует добавление табличных данных.