Для чего нужен плагин unsplash
Как вставить картинку в фигме за 1 клик с сайта Unsplash
В этом обзоре вы узнаете как вставить картинку в фигме с использованием специального плагина. Этот плагин вставляет фотографии с сайта unsplash.com
В чем особенности сайта unsplash? Там размещаются фотографии, которые можно использовать в любых целях: как собственных, так и коммерческих.
Установка плагина Unsplash
Чтобы установить плагин «Unsplash» перейдите на официальный сайт фигмы, где расположен плагин. Нажмите в правой, верхней области на кнопку «Install».
Также можно найти его в разделе «Community» на главной странице фигмы во вкладке «Plagins».
Как активировать плагин:
Чтобы активировать плагин Unsplash в Figma, кликните на иконку меню в левой, верхней стороне. Затем перейдите во вкладку «Plagins» и выберите надпись «Unsplash».
Как устроен плагин «Unsplash» и какие у него есть функции
После активации плагина, перед вами появится всплывающее окно. Функции у плагина следующие.
Во вкладке «Random» можно вставлять случайные фотографии из определенных разделов.
Есть следующие категории фотографий:
Если переключитесь во вкладку «Search», то можно осуществлять поиск по фото. Для этого введите запрос в окно поиска на нажмите синею кнопку справа.
Как вставлять фотографии в Figma и работать с плагином
Вставка изображения на свободную область:
1. Чтобы вставить изображение из раздела «Random» нажмите на нужную категорию.
2. Для вставки картинок из раздела «Search», введите нужный запрос на английском выберите понравившуюся картинку.
Как вставить картинку в Figma в фигуру
С помощью плагина Unsplash вы можете вставлять картинки в различные фигуры. Фигуры можете создать с помощью стандартных инструментов фигмы (Shape tools), в верхней, левой панели фигмы.
Инструкция по массовой вставке изображений
Вставим фотографии в прямоугольники. Для этого выделяю нужные прямоугольники и для примера выбираю категорию «Nature».
Вставка изобрежений в figma в прямоугольники
Аналогично можно вставлять фотографии в другие фигуры (прямоугольники, квадраты, круги, многоугольники, треугольники, звезды и т.д). Для этого выберите нужную фигуру и нажмите на изображение в плагине «Unsplash».
В этой статье вы узнали как вставить картинку в фигме легко и просто с помощью плагина «Unsplash». Изучите другие полезные плагины, которые мы разбираем в разделе плагины.
Обзор и рецензия плагина Unsplash WordPress
Доброго времени суток, уважаемые друзья!
Я рад что вы заходите и читаете мой блог, поэтому сегодня я вас побалую обзором нового плагина Unsplash.
Плагин вышел не так давно, поэтому у него не так много скачиваний и отзывов. Но сейчас не об этом. Давайте я проведу небольшой обзор этого плагина, а вы решите — будете вы его использовать или нет.
Unsplash — один из самых популярных источников бесплатных изображений в сети. Плагин Unsplash предлагает миллионы изображений профессионального качества, которые можно бесплатно использовать в своих коммерческих и некоммерческих проектах с указанием авторства или без него.
Это делает Unsplash популярным среди блогов и веб-сайтов WordPress. Unsplash выпустила бесплатный плагин для WordPress, чтобы сделать их изображения еще проще в использовании. В этой статье мы рассмотрим новый плагин Unsplash WordPress и посмотрим, на что он способен.
Использование изображений Unsplash без плагина
Во-первых, давайте рассмотрим ручной метод добавления изображений Unsplash на ваш сайт. Стандартный метод — перейти на веб-сайт, выполнить поиск изображений, щелкнуть его, чтобы загрузить любое изображение, а затем вручную загрузить его на свой сайт WordPress в медиа.
Вам не понадобится учетная запись Unsplash для загрузки и использования изображений вручную, но с учетной записью вам будет доступно еще несколько функций.
При наведении курсора на фотографию вы увидите миниатюру фотографа с его именем, кнопку, чтобы поставить лайк изображению, кнопку для добавления его в коллекцию и кнопку для его загрузки. Загрузите изображение на свой компьютер.
Загрузите изображение в свою медиатеку, как любое изображение. Вам нужно будет ввести информацию об изображении самостоятельно.
Если вы хотите использовать атрибуцию, вам нужно скопировать его из всплывающего окна, которое появляется, когда вы выбираете загрузку изображения, и вручную вставить его в свой контент.
Преимущество плагина Unsplash
Плагин Unsplash упрощает этот процесс и принимает боль от загрузки изображений в медиа-библиотеку и добавить информацию самостоятельно. Вам даже не нужно покидать свой веб-сайт, и вы можете добавлять их в свой контент так же легко, как и что-либо в своей библиотеке.
Изображения предоставляются вашим посетителям через CDN. Он работает как с классическим редактором, так и с Гутенбергом. Образы останутся на месте, даже если вы удалите плагин.
Установка плагина Unsplash WordPress
Вы можете либо загрузить плагин со страницы плагинов WordPress, либо найти его в WordPress. Для поиска и установки:
Затем вам необходимо подключить плагин к своей учетной записи Unsplash. Перейдите в «Настройки — Unsplash», чтобы активировать свой ключ API. Если у вас есть учетная запись, все, что вам нужно сделать, это нажать «Завершить настройку», и плагин сделает все остальное.
Вы также можете ввести его вручную, если хотите. Для этого вам нужно получить ключ API из вашей учетной записи Unsplash.
Как только ваш ключ API аутентифицирован, вы готовы к использованию плагина.
Плагин Unsplash для WordPress
Вы увидите новую вкладку Unsplash, добавленную в вашу медиатеку. Когда вы выбираете добавление изображения к своему содержимому или выбираете избранное изображение, вы можете выбрать вкладку Unsplash для поиска изображений в окне мультимедиа.
Когда вы выбираете изображение, автоматически добавляются замещающий текст, заголовок и описание. Эти данные помогают улучшить СЕО, и вам не нужно добавлять их самостоятельно.
Подпись включает в себя ссылку на фотографию на Unsplash с указанием авторства фотографа. Все эти поля доступны для редактирования. Он не включает настройки отображения на этом экране.
Вот экран для избранного изображения.
Изображения автоматически используют последние настройки, которые вы использовали. Вы можете изменить настройку для каждого изображения как обычно, выбрав для редактирования изображение в редакторе.
Изображения Unsplash связаны «горячими» ссылками
Когда вы выбираете изображения для добавления к вашему контенту, изображения также добавляются в вашу медиатеку. Однако они обслуживаются вашими посетителями из Unsplash CDN.
Когда вы щелкаете правой кнопкой мыши, чтобы увидеть изображение на другой вкладке, вы попадаете на страницу изображения в Unsplash. Нажав, чтобы скопировать URL-адрес изображения, вы также получите этот веб-адрес.
Unsplash с классическим редактором
Вот как изображение выглядит в классическом редакторе со ссылкой атрибуции, добавленной к подписи.
Unsplash с Gutenberg
Unsplash имеет больше возможностей при использовании с Gutenberg. Новый блок Unsplash позволяет искать изображения в Unsplash и отображать их как блок изображений.
Настройки блока позволяют выбрать квадратный или закругленный стиль. Вы можете установить любой стиль по умолчанию.
При нажатии кнопки «Поиск» открывается панель управления Unsplash, где можно выбрать изображение или выполнить поиск по нему. Он работает так же, как и классический редактор, и включает в себя альтернативный текст, подпись со ссылкой атрибуции и заполненное описание.
Вот изображение в редакторе Гутенберга. Щелкнув параметры изображения, выберите параметры справа. Здесь вы можете увидеть настройки изображения и изменить стили, замещающий текст и размер. Это квадратный стиль, используемый по умолчанию.
Это округлый стиль.
Закругленный стиль автоматически добавляет класс CSS в поле «Дополнительно».
Вы можете перетаскивать края, чтобы изменить размер изображения.
Отображение изображения без указания авторства
Лицензия Unsplash позволяет любому использовать изображения с указанием авторства или без него. Они ценят это, если вы его включаете, и он включен в заголовок по умолчанию, но его легко удалить, если вы не хотите его включать.
Чтобы отображать изображения без указания авторства, просто удалите подпись. В зависимости от того, где вы его удалите, указание авторства может быть удалено с изображения полностью или для определенных сообщений.
В этом примере показан заголовок на экране поиска Unsplash. Если вы удалите его здесь, он будет полностью удален из изображения, и без него изображение будет помещено в вашу медиатеку.
Если изображение уже находится в вашем контенте, выделите подпись и удалите ее. Это удалит только указание авторства этого изображения. Изображение в вашей медиатеке по-прежнему будет содержать подпись.
Вы также можете удалить подпись к изображению в своей библиотеке, если не хотите, чтобы подпись появлялась каждый раз, когда вы используете изображение.
Изображение будет отображаться без подписи, что позволит вам добавить собственную подпись.
Конечные мысли
Это мой взгляд на новый плагин Unsplash WordPress. Плагин прост в использовании и не требует настройки. Вкладка Unsplash, добавленная в вашу медиатеку, упрощает поиск и добавление новых изображений.
Поскольку вы можете добавить их в свою медиатеку, изображения доступны для любого построителя тем, который вы хотите использовать. Пользовательский интерфейс чистый и интуитивно понятный. Атрибуция уже добавлена, но вы можете легко ее отредактировать. Изображения загружаются быстро благодаря CDN Unsplash.
Unsplash — отличный источник бесплатных изображений. Плагин значительно упрощает добавление изображений в ваш контент WordPress. Это экономит много времени и дает вам бесплатный доступ к миллионам потрясающих изображений для использования на вашем веб-сайте.
Если вы используете бесплатные изображения со своим контентом WordPress, вам нужно добавить плагин Unsplash.
Дайте мне знать, что вы думаете об этом, в комментариях ниже.
А я на этом буду заканчивать этот не большой пост — до скорых встреч и берегите себя!
15 полезных плагинов для Figma, которые существенно ускорят работу
Рассказываем про плагины для Figma, автоматизирующие рабочую рутину.
Особенности плагинов в Figma
Команда Figma очень бережно относится к своему детищу и прислушивается к мнению сообщества. Благодаря этому в середине июля 2019 года была выпущена бета-версия редактора с поддержкой плагинов. А уже в начале августа презентовали обновлённую Figma со встроенными плагинами. Любой разработчик или дизайнер, знающий базовый HTML и JavaScript, мог подать заявку и принять участие в их разработке.
В этой статье мы разберём работу нескольких популярных и полезных плагинов, которые существенно упростят и автоматизируют ваш процесс проектирования.
Автор статей по дизайну.
В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикую переводы на хабре.
Где находятся плагины
Откройте программу, авторизуйтесь под своим Google-аккаунтом, перейдите на главную страницу редактора Figma. Слева на панели увидите пункт Plugins (он находится сразу под Drafts).
Нажав на Plugins, вы окажетесь на странице плагинов. Они сгруппированы — рекомендуемые, популярные и установленные.
Также можно посмотреть все плагины, которые есть на данный момент, если нажать на кнопку Browse all plugins.
Установка плагинов
Философия FIgma — в простоте, поэтому установка плагинов простая и понятная для любого пользователя.
Установить плагины можно двумя способами:
Установка плагина происходит мгновенно. Еще одно нажатие на кнопку инсталляции приводит к его деактивации.
На странице плагина вы можете посмотреть краткое описание и руководство по использованию, ознакомиться с информацией об авторе и посмотреть его контакты, там же находится информация по истории версий.
Обзор 15 плагинов для дизайнера
Я отобрал пятнадцать простых и функциональных плагинов, которые будут полезны большинству дизайнеров:
Unsplash
Плагин для быстрого автозаполнения блоков фотографиями
Один из самых популярных и востребованных плагинов в Figma: он в разы сокращает время работы с контентом. Особенно полезен, когда нужно быстро заполнить сайт и нет времени даже на то, чтобы переключаться с вкладки на вкладку, искать и сохранять изображения.
Давайте посмотрим на его работу. Выберите плагин — нажмите правой кнопкой мыши в любом месте холста. Выберите пункт Plugins — Unsplash.
Появится окно плагина.
Выделите все карточки на холсте и выберите любую тематику (у нас в примере портреты).
Преимущество Unsplash в том, что вы быстро сможете заполнить сколь угодно большое количество карточек, слайдеров, фотографий к статьям. При этом остается возможность детального поиска подходящей фотографии.
Map Maker
Плагин для добавления карт
Map Maker позволяет быстро создавать уникальную настраиваемую карту для вашего проекта. В настоящее время он поддерживает Google Maps и Mapbox. Разберем процесс создания карты на основе Google Maps.
Выберите плагин Map Maker.
По умолчанию установлена вкладка Google Maps, она нам и нужна.
Перейдите на поле Address и введите нужную локацию, например, Paris.
Ниже адресной строки вы можете поменять тип карты и зум на тот, который вас устроит.
Теперь самое интересное — стиль карты. Поменять стиль карты можно, если перейти по одной из двух ссылок в блоке Custom Style.
Давайте перейдем по первой ссылке Snazzy Map и посмотрим, что это.
Перейдя по ссылке на ресурс, мы видим информационное окно, предупреждающее, что сервис не может в полной мере поддерживать Google Maps. С июля 2019 года компания Google взимает плату за использование их API. Суммы достаточно большие. Чтобы не закрыть сервис и хоть как-то оставаться на плаву, руководство Snazzy Map было вынуждено урезать самые дорогие функции и тем самым сократить свои расходы, оставив сервис бесплатным.
Вы можете посмотреть и изучить возможности сервиса самостоятельно, он очень простой. Судьба Snazzy Map непонятна, поскольку аналог появился у Google и смысл в использовании именно его отпадает.
Посмотрим, что предлагается в Custom Style по ссылке Google Official Map Style.
Нажмите Create a Style. Теперь вы можете подобрать нужный стиль карты.
Если не знаете, какой стиль выбрать, обратите внимание на Silver. Он одинаково хорошо смотрится на любом проекте за счет своей ненавязчивости.
Также можно немного почистить карту: убрать лишние мешающие названия, достопримечательности и дороги. Для этого есть специальный фильтр Adjust density of features (Регулировка плотности функций).
Также можно поменять цвета и сделать более точные настройки карты. Для этого нажмите внизу кнопку More Options.
Когда карта готова, нажмите Finish, появится следующее окно:
Нажмите на ссылку Copy JSON — код скопируется в буфер обмена, это нужно для того, чтобы получить код настроенной карты и перенести его в наш плагин.
Возвращаемся обратно в Figma и вставляем скопированный код в поле Custom Style.
Обратите внимание на то, как изменилась карта в окне просмотра. Это значит, что все настройки применились, карта отображается корректно.
Далее осталось только нажать на кнопку Make Map, чтобы применить настроенную карту к нашему блоку.
Я немного уменьшил зум, и вот что из этого получилось.
Charts
Плагин для визуализации данных
Если вы часто проектируете дашборды, то плагин Charts сильно облегчит выполнение рутины и позволит вам создавать симпатичные графики.
Выбираем Charts из выпадающего списка плагинов.
Получаем вот такое окно:
Charts довольно простой и интуитивно понятный. Давайте немного пройдемся по настройкам.
Можно создавать любое количество разных диаграмм, а потом настраивать их под свои задачи.
Iconify
Плагин для иконок
Очень полезный и нужный плагин, который должен быть в арсенале любого дизайнера. Суть его проста — быстрый поиск и добавление нужной иконки в SVG-формате в ваш проект.
Выбираем из списка плагин Iconify.
Получаем окно со всевозможными сборниками иконок. Коллекций иконок огромное количество.
Очень удобно реализована подача коллекций иконок, понятно их количество, виден размер, а также указаны компания и автор.
Пользоваться иконками очень просто: можно подобрать из конкретной коллекции или найти иконку через поиск.
Затем выбранную иконку можно немного преобразовать — повернуть на определенный угол или отзеркалить по вертикали или горизонтали, а также задать нужный цвет.
Autoflow
Плагин, визуализирующий связи между объектами
Один из самых простых и самых популярных на сегодняшний день плагинов.
Плагин позволяет показывать связь между объектами — очень полезная штука для изображения пользовательских сценариев и любых ситуаций, где важно передать принадлежность и последовательность событий.
Чтобы создать взаимосвязь, достаточно выделить два объекта и выбрать в выпадающем списке Autoflow.
Чтобы каждый раз не выбирать из списка, воспользуйтесь сочетанием клавиш Ctrl+Alt+P. Оно позволяет активировать последний плагин, которым вы пользовались.
Вот так в три клика можно получить связи между нужными объектами.
Content Reel
Плагин для наполнения макета сайта контентом
Плагин нужен, чтобы наполнить страницы макета уникальным контентом. Он выдаёт имена, телефоны, адреса, сайты, email, а также аватары и иконки.
Я создал восемь карточек с таким наполнением:
Задача — получить на всех карточках разный контент. Начинаем с выбора плагина.
Получаем вот такое окно.
Далее выберите поочередно все имена, адреса, email и нажмите нужный пункт в окне плагина, как показано на гифке.
Мы рандомно поменяли на восьми карточках имена, адреса, телефоны, email и аватарки. В первой версии плагина не было возможности менять аватары, и я делал это, используя сторонний сервис. В текущей версии разработчики добавили такую возможность.
Если ранее я говорил, что плагин сыроват, то теперь скажу, что это мегаплагин, огромный респект разработчикам.
Blobs
Плагин, делающий симпатичные кляксы
Незамысловатый, простой и очень нужный плагин, помогающий делать фоны и абстракции.
Выбираем Blobs из списка.
Появляется вот такое окно.
И, по сути, это и есть весь плагин, всего две настройки — сложность и контраст, количество и там, и там ограничено десятью. Давайте посмотрим, что может этот малыш.
Еще минута — и готово вот такое чудо:
Все эти фигуры можно масштабировать и редактировать, плагин пока недооценен сообществом, но, думаю, это изменится в будущем.
Image tracer
Плагин, который умеет переводить растр в вектор
Этот плагин нужен в том случае, когда у вас есть растровое изображение, но вам нужен вектор, а обводить нет ни времени, ни желания.
Преимущества изображений с четкими очертаниями и однородной заливкой в векторе перед растром:
Итак, ищем растровое изображение, желательно с четкими очертаниями и контрастной заливкой. Выбираем плагин.
Окно активируется только в том случае, если вы уже перенесли изображение в редактор и выделили его.
Работает он следующим образом.
Существуют дополнительные опции по более точной настройке плагина. Настроить их можно, если нажать на кнопку Show Options.
Пожалуй, самая важная опция — это blur. Она предназначена для сглаживания пикселей и превращения рваной линии в более плавную.
Теперь вам не придется пользоваться дополнительным софтом (Illustrator или Corel) специально для того, чтобы трассировать изображение.
Figmotion
Плагин для анимации
Когда установите плагин, самое время его запустить. Перейдите в Figma, создайте новый файл проекта, выберите для работы Frame и нарисуйте фигуру, например треугольник. Теперь нажмите на фрейм правой кнопкой мыши для вызова контекстного меню. Выберите Plugins — Figmotion — Open Figmotion.
Откроется вот такое окно.
В левой части окна — возможные свойства анимации элемента, такие как прозрачность, поворот, заливка и так далее. В правой части расположена временная шкала (Timeline), на которой происходит настройка анимации выбранной функции с помощью ключевых кадров.
Верхняя часть окна отведена довольно значимому функционалу просмотру получившейся анимации, её сохранению, экспорту в CSS — или JSON-формат. То есть при необходимости можно использовать созданную анимацию где-нибудь на сайте. Также в верхней части окна вы сможете задать нужный размер экрана.
Давайте попробуем передвинуть треугольник вправо и сделаем так, чтобы он вращался вокруг своей оси.
Чтобы передвинуть треугольник, нужно выбрать свойство x — это означает, что мы будем двигать элемент по оси x. Напротив каждого свойства нарисован ромб. Он нужен, чтобы ставить ключи анимации на панели Timeline.
Переместите оранжевый маркер на нулевую секунду (0ms) и нажмите на ромб (ключ анимации напротив свойства), который отмечен на скриншоте выше. Появится ключ анимации на нулевом кадре, откуда и начнёт движение треугольник.
Следующим шагом нужно обозначить окончание движения элемента — для этого переместите оранжевый маркер на 0,7 секунды (что соответствует 700ms). Сделать это можно двумя способами:
Удалить ключевой кадр можно с помощью кнопки Remove в появившемся окне, как это показано выше. Также в этом окне настраивается смягчение движения элемента как в начале, так и в конце. Используется тот же принцип, что и в After Effects — Easy Ease.
Продолжим создание анимации: установите ключевой кадр на 700ms любым способом и выберите easeOut. Таким образом элемент завершит анимацию более плавно.
Теперь нужно обозначить вектор движения и окончательное местоположение элемента. Делается это довольно легко: передвиньте треугольник вправо на нужное расстояние, на панели свойств элемента посмотрите значение оси x. Это значение введите в окно ключевого кадра.
Правда, есть небольшой нюанс, который я обнаружил опытным путём. От фактического значения оси x (когда установите его в окне ключевого кадра) будет вычтен размер, равный половине вашего элемента, и фактически ось x будет равна 514. А не 608, как в моём примере.
Поэтому, если вы хотите получить элемент точно по конкретной координате от края объекта, учитывайте, что придётся прибавить число, равное половине этого объекта. Поэтому я прибавил 94 и получил ровно 608. Но в окне ключевого кадра будет 702.
Конечно, не стоит заморачиваться подобными вычислениями, но понимать, откуда берутся различия в значениях координат элемента и ключевого кадра, думаю, нужно.
Для такого случая есть выход — поменять привязку центра ключевого кадра объекта. Меняется в выпадающем окне, где и все значения ключевого кадра.
Вроде как это отличный выход, но опять же есть «но»: данное свойство применяется для всех ключевых кадров всех свойств, что становится очередной проблемой. Ниже я рассмотрю подобный случай, а пока завершим нашу анимацию.
Давайте посмотрим промежуточный вариант. Чтобы проиграть анимацию, перейдите к нулевой секунде и нажмите пробел или кнопку Play в верхней части окна.
Анимация треугольника по оси x.
Теперь, используя свойство Rotate, заставим фигуру вращаться вокруг своей оси во время движения. Для этого перейдите на свойство Rotate и установите два ключевых кадра — на нулевой секунде и на 700ms.
Нажмите на второй ключевой кадр и выставите значение 360 градусов. Это вполне логично, так как мы имеем дело уже не с координатами, а с углами, то есть по сути мы повернули треугольник на 360 градусов.
Итоговый вариант анимации.
Теперь давайте поменяем расположение центра ключевого кадра оси x.
Запускаем анимацию и смотрим, что получилось.
Треугольник сместился от левого края вправо, но мы перестали контролировать его вращение, так как оно происходит относительно смещённого центра. Его мы установили только для ключевого кадра свойства оси x. Вращается треугольник довольно хаотично, не вокруг своей оси, как задумывалось изначально.
Но если быть более внимательным, авторы плагина сразу предупреждают, что изменение центра объекта будет применено сразу ко всем ключевым кадрам. Иногда это может быть полезно, а иногда может сыграть злую шутку.
В целом, считаю этот плагин довольно полезным, особенно для тех, кто не знаком даже с базовой анимацией. Это отличный тренажёр перед тем, как перейти на более сложные пакеты типа After Effects.
Figmotion незаменим при быстрой подаче и презентации идеи, когда не нужно заморачиваться с деталями, а достаточно показать направление и принцип.