наборы иконок, векторных карт и фотографий / Skillbox Media

Дизайн

#Руководства

• 6 май 2022

• 0

Как быстро загрузить на макет картинку из фотостока, иконку из Material Design и карту регионов любой страны.

Vkontakte

Twitter

Telegram

Скопировать ссылку

Иллюстрация: Оля Ежак для Skillbox Media

Вячеслав Лазарев

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

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

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

Как пользоваться

• Скачайте плагин по ссылке.
• Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Automatic Style Guides.
• В вашем документе появится новая страница — в ней будут все ваши стили и пояснения по их использованию.

Создаёт экран с «недогрузившимся» контентом на основе вашего макета. Такой макет поможет разработчикам понять, что должен видеть пользователь, если у него очень медленный интернет.

Как пользоваться

• Скачайте плагин по ссылке.
• Зайдите в Figma, нажмите правой кнопкой мыши на любой фрейм, в выпадающем меню перейдите в пункт Plugins и выберите Ghost.
• В появившемся окне укажите нужный стиль «недогрузившегося» экрана.

Создаёт карту любой страны и её регионов. Плагин выдаёт результат в векторном формате, поэтому готовую картинку можно выгрузить в высоком разрешении.

Как пользоваться

• Скачайте плагин по ссылке.
• Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Vector Maps.
• В появившемся окне выберите нужную страну, укажите её регионы и нажмите Get as Layer.

Полный набор иконок из дизайн-системы Material Design. Каждую из них можно изменить: добавить заливку, поменять размер и толщину обводки.

Как пользоваться

• Скачайте плагин по ссылке.
• Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Material Symbols.
• В появившемся окне выберите нужную иконку, укажите необходимые параметры — иконка автоматически появится на макете.

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

Как пользоваться

• Скачайте плагин по ссылке.
• Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Photos.
• В появившемся окне выберите нужную фотографию или нажмите на любую категорию, чтобы плагин выдал вам случайную картинку.

Больше о Figma

Больше интересного про дизайн в нашем телеграм-канале.  Подписывайтесь!

Vkontakte

Twitter

Telegram

Скопировать ссылку

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

Шигеру Бан сделал выставку светильников Фрэнка Ллойда Райта в туннеле из бумажных труб
21 апр 2023

Для кинофестиваля «Сандэнс» сделали первый долгосрочный брендинг
21 апр 2023

Организаторы фестиваля нового дизайна «Среда» рассказали о брендинге этого года
20 апр 2023

Понравилась статья?

Да

30+ полезных плагинов для Figma необходимых UX дизайнеру

Автор: Андрей Климов
Должность: Арт – директор

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

Принципы работы

1. Плагины по работе с графикой
2. Плагины для генерирования контента
3. Плагины для анимации
4. Плагины по наведению порядка в проекте

Плагины по работе с графикой 

Blobs и Get Waves

Blobs позволяет нам делать простые абстрактные фоны в виде клякс. А Get Waves позволяет генерировать разные волны, иногда используем для создания графиков.

Image Tracer

Очень полезный плагин, который позволяет быстро перевести растровое изображение в векторное.

Color Kit

Этот плагин позволяет сгенерировать темные или светлые оттенки нужного цвета с выбором шага. Помогает нам при создании UI кита для проекта.

Webgradients и uiGradients

Плагины с большой библиотекой красивых градиентов.

TinyImage Compressor

Очень полезный плагин, который сжимает размер файлов лучше, чем экспорт по умолчанию из Figma. Мы часто используем его для оптимизации изображений под web сайты. После 15 сжатий файлов через TinyImage вам будет предложено приобрести лицензию.

Image Palette

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

Stark и Contrast

Эти плагины помогут посмотреть контрастность элементов по отношению друг к другу.

Remove BG

Крутой плагин, который позволяет быстро удалить фон у изображения.
Есть примечание: Для этого плагина вам потребуется аккаунт и вам дается 50 бесплатных действий на год.

Isometric

Плагин позволяет отобразить объект в изометрии вам только требуется настроить угол.

Плагины для генерирования контента

Chart и Charts

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

Figmoji

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

Iconify

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

Unsplash

Unsplash – это большая библиотека фотографий, с помощью которой можно быстро найти и добавить фотографию прямо в проект.

Mapsicle и Map Maker

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

Table Generator

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

Content Reel

С помощью этого плагина можно быстро заполнить сайт контентом. Например заполнить имя, фамилию, телефон, время и дату, быстро добавить аватар и тд… Один момент весь контент на английском.

Chroma

Теперь можно добавить цвет в цветовую палитру в один клик. Вам просто надо выбрать нужный объект с цветом и запустить плагин. Цвет появится в библиотеке стилей с названием выбранного объекта.

Wire Box

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

Плагины для анимации

GiffyCanvas

GiffyCanvas позволяет быстро создать gif внутри Figma. Нам просто надо выбрать 2 и более макетов, поставить время интервала и количество циклов.

LottieFiles

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

Плагины по наведению порядка в проекте

LilGrid

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

Design System Organized

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

Design Lint

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

Viewports

Плагин показывает как выглядит ваш макет на разных устройствах. Главное не забывать настроить в Figma ограничения элемента в зависимости от размера окна.

Product Planer

Интересный плагин в котором много шаблонов по которым можно вести планирование по продукту прямо в Figma.

Rename It

Нам этот плагин помогает переименовать быстро слои с разными названиями, чтобы экспортировать макеты в Principle для создания прототипа.

Autoflow

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

Time Machine

Этот плагин автоматически копирует версию, которую вы хотите сохранить, на другую страницу под названием «Time Machine» и присваивает макету имя с датой его сохранения.

Спасибо за просмотр!
Мы будем рады если эти плагины облегчат вам работу.

Плагин

Mapsicle для Figma. Добавляйте карты Mapbox в свои проекты с помощью 0… | by Mapbox

Добавьте карты Mapbox в свои проекты с помощью кода 0

Автор: Эми Ли Уолтон

Figma — это облачный инструмент проектирования, который помогает дизайнерам и командам эффективно работать вместе. Мне нравится, что это сверхбыстрое приложение для браузера, которое позволяет обмениваться файлами так же просто, как делиться ссылкой. Figma только недавно запустила тонну потрясающих плагинов в прямом эфире вчера, и один из моих любимых — Mapsicle, созданный дизайнером ремиксов Крисом Арвином. С плагином Mapsicle вы можете поместить свою карту Mapbox в свой дизайн-проект Figma с помощью 2–3 кликов и 0 строк кода.

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

После того, как вы поместили карту в свой дизайн, внесение изменений не составит труда. Вы можете снова открыть свою карту в Mapsicle, чтобы настроить местоположение или стиль. Это означает, что вы можете быстро выполнять итерации, пробуя различные стили карты, или вы можете сэкономить время, моделируя различные шаги в пользовательском потоке, которые включают разные уровни масштабирования. Нужно спроектировать большую точку останова и нужно больше карты? Вы можете расширить область вашей карты в один клик.

И поскольку детали важны, Mapsicle создает ваши карты в виде изображений с высоким разрешением, что означает, что ваши проекты будут выглядеть четко на экране Retina, даже если вы не используете его при создании карты.

Mapsicle очень простой и красивый. Мне пришлось связаться с Крисом Арвином, создателем Mapsicle и дизайнером продуктов в Remix, чтобы быстро ответить на вопросы:

Откуда пришла идея для Mapsicle?

Карты Mapbox занимают центральное место в моей проектной работе. Почти все, что я разрабатываю в эти дни, так или иначе связано с картой. Как дизайнер, я считаю, что важно использовать реальный контент, включая карты! И, с визуальной точки зрения, важно убедиться, что ваш пользовательский интерфейс и ваши карты хорошо работают вместе.

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

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

Чем вы занимаетесь на работе и на стороне?

Я дизайнер продуктов в Remix, где я работаю над нашим продуктом планирования общественного транспорта. Планировщики в транспортных агентствах используют его для всего: от быстрого изменения маршрута до полной модернизации транспортной сети. У меня также есть ряд личных проектов, ориентированных на транзит. Мы с партнером создали streetcar. live для некоммерческой организации Market Street Railway. Это веб-приложение, которое позволяет вам отслеживать исторические трамваи Сан-Франциско и видеть, какие из них находятся рядом с вами. Я также создал «Затерянные трамваи в районе залива» — набор интерактивных карт и фотогалерей, на которых показаны давно исчезнувшие железнодорожные пути Сан-Франциско.

Что заставило вас соединить Figma с Mapbox?

Figma и Mapbox изменили то, как я работаю; Figma с возможностью совместной работы в режиме реального времени и простотой веб-интерфейса, а также Mapbox с его сверхмощными возможностями настройки карт. Еще до того, как Figma анонсировала плагины, я знал, что хочу упростить совместную работу с этими двумя инструментами. И когда я опубликовал свой первый прототип в Твиттере, я получил отличный отклик, который дал мне понять, что я не единственный, кто найдет этот плагин полезным.

Начните добавлять карты Mapbox в свои проекты Figma прямо сейчас! Просто установите Mapsicle со страницы плагина Figma. Когда вы находитесь в своем проекте Figma, откройте «Меню»> «Плагины»> «Mapsicle» или щелкните правой кнопкой мыши прямо на холсте> «Плагины»> «Mapsicle». Это так просто!

Нам бы очень хотелось посмотреть, что вы делаете! Поделитесь своими проектами с помощью @mapbox или твитните с хэштегами #builtwithmapbox и #figmaplugin.

Эми Ли Уолтон — главный дизайнер — Mapbox | LinkedIn

Присоединяйтесь к LinkedIn Опытный старший многопрофильный дизайнер с более чем 10-летним опытом управления несколькими проектами…

www.linkedin.com

Mapsicle для интерактивных карт в Figma. с плагином Mapsicle Figma

Полезные коллекции для дизайнеров и любителей дизайна

ELLIE – идея для вашего резюме и портфолио

Привет, я Элли. В виде файла Notion с настраиваемыми шаблонами я помогаю таким дизайнерам, как вы, с легкостью создавать выдающиеся резюме и портфолио. Делитесь ли вы своим профессиональным опытом, демонстрируете тематические исследования или представляете себя, я здесь, чтобы сделать этот процесс простым, интуитивно понятным и приятным. Лучше всего? Я полностью свободен. Давайте поднимем вашу дизайнерскую карьеру на новый уровень вместе.

Преимущества Ellie

Подготовьте выдающееся резюме и портфолио Настраиваемые шаблоны для демонстрации вашего уникального стиля и навыков Создайте профессиональное представление и с легкостью поделитесь своей работой Совершенно бесплатно – никаких скрытых затрат или сборов!

С Ellie,

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

Так зачем ждать?

Попробуйте Ellie сегодня и убедитесь, что это может изменить вашу карьеру дизайнера.

‍

9,90 $

4,90 $

То же самое с ценой на вкусный кофе

ПОЛУЧИТЕ ЭТО

30 Days UX Design Challenges Полное портфолио, навыки в мире, конкретные проблемы , Понимание процесса проектирования UX.

Получите доступ к задачам и ресурсам на целый месяц. Это всего лишь стоимость чашки кофе!

Получите все лучшие задания по UX-дизайну по цене чашки кофе!

Готовы ли вы повысить уровень своих навыков UX-дизайна? Не смотрите дальше нашего 30-дневного челленджа по дизайну UX. С новой задачей на каждый день месяца вы будете подталкиваться к творческому и нестандартному мышлению, решая реальные проблемы дизайна. Каждая задача предназначена для улучшения определенного аспекта ваших навыков UX-дизайна, от исследования пользователей до вайрфрейминга и прототипирования.
К концу 30 дней у вас будет более глубокое понимание процесса проектирования UX, а также портфолио выполненных задач, чтобы продемонстрировать свои новые навыки.

Преимущества этих невероятных задач

Улучшите свои дизайнерские навыки в определенной области
Реальные проблемы дизайна
Заполните портфолио
Понимание процесса проектирования UX
Доступ к задачам и ресурсам на целый месяц
Это всего лишь стоимость чашка кофе!

Примите участие в этих невероятных испытаниях сегодня и улучшите свои навыки UX-дизайна!

‍

‍

4,90 $

То же самое с вкусным кофе Цена

ПОЛУЧИТЕ 

Практический список дизайнеров

Получите этот невероятный практический список сегодня и начните творить как профессионал.

Получите все лучшие практики по цене чашки кофе!

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

Преимущества этого невероятного списка практических занятий

Этот список практических занятий является важным ресурсом для всех творческих профессионалов. Вот невероятные преимущества наличия этого списка:

• Он полезен для всех творческих профессионалов, а не только для дизайнеров.
• Вы получите список как в Notion, так и в Airtable.
• Включает более 100 проверенных практик, включая игры, тематические исследования и шаблоны.
• Он постоянно обновляется, так что у вас всегда будет доступ к самому последнему и лучшему.
• Это только стоимость чашки кофе!

Получите этот невероятный список практических занятий сегодня и начните творить как профессионал.

12,90 $

4,90 $

То же самое с ценой на вкусный кофе

GET IT

Список вводных курсов для дизайнеров

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

Получите лучшие вводные курсы по цене чашки кофе!

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

Преимущества этого невероятного списка

Этот список является важным ресурсом для всех творческих профессионалов. Вот невероятные преимущества наличия этого списка:

• Это полезно для всех творческих профессионалов, а не только для дизайнеров.
• Вы получите список как в Notion, так и в Airtable.
• Включает более 100 вводных курсов.
• Он постоянно обновляется, так что у вас всегда будет доступ к самому последнему и лучшему.
• Это только стоимость чашки кофе!

Получите этот невероятный список сегодня и начните учиться как профессионал.

12,90 $

4,90 $

То же самое с вкусным кофе Цена

ПОЛУЧИТЕ 

Список инструментов дизайнера

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

Создавайте как профессионал с помощью этих инструментов всего за чашку кофе!

Этот Notion Pack необходим всем творческим профессионалам! С более чем 100 инструментами, включая инструменты дизайна, инструменты искусственного интеллекта и инструменты повышения производительности, у вас всегда будут ресурсы, необходимые для успеха ваших проектов. Кроме того, он постоянно обновляется, поэтому у вас всегда будет доступ к самому последнему и лучшему. И, лучшая часть? Это всего лишь стоимость чашки кофе! Получите в свои руки этот невероятный пакет Notion сегодня и начните творить как профессионал.

Преимущества этого невероятного набора идей

Этот набор идей является важным ресурсом для всех творческих профессионалов. Вот невероятные преимущества наличия этого списка:

• Он полезен для всех творческих профессионалов, а не только для дизайнеров.
• Вы получите список как в Notion, так и в Airtable.
• Включает более 100 инструментов, в том числе инструменты дизайна, инструменты искусственного интеллекта и инструменты повышения производительности.
• Он постоянно обновляется, так что у вас всегда будет доступ к самому последнему и лучшему.
• Это только стоимость чашки кофе!

Получите этот невероятный пакет Notion сегодня и начните творить как профессионал.

12,90 $

4,90 $

То же самое с ценой на вкусный кофе

ПОЛУЧИТЕ

Центр настроек конфиденциальности

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

Отклонить все файлы cookieРазрешить все файлы cookie

Управление настройками согласия по категориям

Основные

Всегда активны

Эти элементы необходимы для включения основных функций веб-сайта.

Маркетинг

Essential

Эти предметы используются для доставки рекламы, которая больше соответствует вам и вашим интересам.