15 бесплатных фотостоков для веб дизайнера

Есть такая поговорка:

Изображение стоит тысячи слов

Сегодня можно отыскать более 100
сайтов, которые предлагают бесплатные фото стоки, но начинающие, да и опытные
дизайнеры все равно упорно идут в гугл и берут фото там, игнорируя права на использование.
Ты можешь по-разному относиться к лицензии на фото, но ИМХО красть фото не
очень хорошо. Тебе бы не понравилось, если бы кто-то не заплатил тебе за работу.

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

Negative Space

Все фото представлены в высоком
разрешении. Сайт позиционирует себя, как ресурс с фото для СМИ. Фото без
авторских прав

negativespace.co

Unsplash

Пожалуй, самый известный и от того
затасканный фотобанк. Его прелесть в том, что все фото когда-то были защищены
авторским правом, но срок лицензии истек. Теперь ты смело можешь использовать
бесплатные фото в своих проектах. Обновляется каждые 10 дней на 10 фото.

unsplash.com

Burst

Все изображения можно использовать в
личных и коммерческих целях. Дает возможность скачивать, как в супер высоком качестве
фото, так и в среднем.

burst.shopify.com

Gratisography

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

gratisography.com

Stockpic

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

stokpic.com

Skitterphoto

Еще один веб-сайт, предоставляющий широкий
выбор бесплатных фотографий. Все фотографии публикуются в свободном
доступе

skitterphoto.com

MMT Stocks

Еще один сайт фотографа. Можешь смело
качать отсюда фото для своих проектов.

mmtstock.com

Picjumbo

Проект в работе с 2013 годна и уже
накопил более 2,5 миллиона фото на разные тематики. Коллекция постоянно
обновляется.

picjumbo.com

IMcreater

Отличается от других фотостоков тем,
что тут ты можешь искать фото по ориентации, по цвету, режиму съемки и многим
другим параметрам, что очень круто. К тому же тут много качественных фото еды.

imcreator.com/free

Pexels

Обновления каждый месяц на 3000 фото.
На сайте работает команда, которая тщательно отбирает только самые крутые и
качественны фото.

pexels.com

Pixabay

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

pixabay.com

Rawpixel

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

rawpixel.com

Canva Photos

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

canva.com/photos/free/

MOOSE

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

photos.icons8.com

Stocksnap

На сайте удобный и простой поиск. Фото
качественные и не заезженные, как на популярных фотостоках.

stocksnap.io

Вывод по этим бесплатным фотостокам

А вывода нет. Я подобрал 15 бесплатных
фотостоков, которые посчитал интересными. На них можно найти все, что тебе
нужно и использовать эти фото со спокойной душой.

Если материал был полезен — подпишись на меня в вк и инсте.

Добра тебе!

20 плагинов для Figma, которые экономят время дизайнера при создании макетов онлайн

Figma — графический онлайн-редактор, который за несколько лет активного развития обошёл основных конкурентов Sketch и Zeppelin. Успех обеспечивается за счёт решения проблем аудитории и того, что разработчики активно прислушивались к мнению пользователей.

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

Плагины — полезные дополнения, которые создают сторонние программисты. В июле 2019 года появилась тестовая версия редактора Figma с поддержкой расширений. Уже в августе команда сервиса заявила о полной работоспособности обновлённой панели управления.

Процесс установки состоит из 5 шагов:

1. Авторизуйтесь в учётной записи.
2. Перейдите во вкладку с плагинами.
3. Найдите подходящее расширение.
4. Нажмите кнопку Install.

Удобство «Фигмы» прослеживается в каждой детали. В том же Adobe Photoshop надо потратить время на поиск плагина, скачать его и загрузить в библиотеку. Длинный путь окажется бесполезным, если продукт не адаптирован под установленную версию графического редактора. С Figma таких проблем нет. Выбрал, нажал на кнопку и появились новые возможности.

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

Мы подготовили список из 20 расширений, которые пригодятся дизайнерам, работающим в «Фигме».

Unsplash

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

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

1. Включить Unsplash в настройках.
2. Выбрать области для подгрузки картинок.
3. Задать тематику изображений или выбрать случайные.

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

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

Скачать

Map Maker

Плагин добавляет возможность вставлять интерактивные карты с сервисов Google Maps и Mapbox. При создании макетов дизайнеры часто добавляют блоки на страницы с контактами и описанием проекта. Чаще всего они просто делают снимки экрана в Гугле.

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

Минус в том, что адрес надо проверять в Google Maps перед вставкой в редактор. Иначе в режиме предпросмотра отобразится ошибка и вставить блок не получится.

Скачать

Charts

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

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

Скачать

Iconify

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

Расширение Iconify добавляет в «Фигму» архив из 40 тысяч картинок в векторном SVG формате. Их можно растягивать, перекрашивать и менять отображение.

Разработчик потрудился над созданием удобной структуры. Доступные изображения разделены на категории по типам и стилям. Есть emoji, популярные иконочные шрифты, наборы с разной цветовой гаммой. Функция вставки в виде XML кода позволяет добавлять в область документа любые фигуры из интернета.

Скачать

Autoflow

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

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

Для установки связи надо выделить два элемента и включить Autoflow. Чтобы сократить время выполнения операции, воспользуйтесь сочетанием клавиш Ctrl+Alt+P. Оно запускает последний использованный плагин.

Скачать

Content Reel

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

Content Reel состоит из 3 вкладок. В первой отображаются текстовые поля, которые часто используются в формах: имя, email, телефон, логин, название компании. Во второй области доступны женские и мужские аватары. Они подходят для оформления страницы профиля или списка комментариев. В третьем меню собрана коллекция иконок. Разделения по категориям нет, зато есть поиск.

Идея крутая, но пока реализация не дотягивает до идеала. Для вставки любого элемента надо сначала добавить соответствующий блок в макет. Затем выбрать его в документе и запустить плагин. Ещё один недостаток — отсутствие русского языка.

Скачать

Blobs

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

Инструкция по использованию:

1. Запустите расширение.
2. Задайте сложность и контраст по шкале от 1 до 10 баллов.
3. Измените цвет, расположение и масштаб фигуры.

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

Скачать

Image tracer

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

Image tracer умеет делать эту операцию в Figma. Он распознает фигуры с чёткими контурами и экономит время. Не надо отрисовывать объект вручную, чтобы вставить его в макет.

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

1. Вставьте растровую картинку в документ.
2. Найдите расширение в библиотеке.
3. Задайте параметры. Обратите внимание на пункт blur. Он отвечает за сглаживание пикселей. Экспериментируйте со значениями, чтобы найти баланс.

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

Скачать

Content Buddy

Дополнение решает одну из главных проблем дизайнеров. В программах вроде Photoshop сложно менять слои в нескольких макетах одновременно. Такая задача — часть повседневной работы. Клиенты могут в последний момент попросить заменить логотип на 20 прототипах или обновить цвет панели.

Content Buddy меняет текст во всех выделенных фреймах. Задали искомый фрагмент, заменили вхождения и сохранили изменения. Плагин не умеет работать с фигурами и другими объектами. Пока что он ориентирован только на текст. Будем надеяться, что разработчик в будущем расширит возможности продукта.

Скачать

Tumble

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

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

1. Выделите слои.
2. Включите расширение.
3. Подождите несколько секунд.

Инструмент корректно определяет количество выделенных объектов и гармонично прижимает их к нижней границе фрейма.

Скачать

Translate

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

Дополнение Translate переводит текст на любой из 15 доступных языков. Для работы плагина надо получить ключ в настройках API «Яндекс.Переводчика».

Автор редко обновляет расширение, но за 6 месяцев количество доступных локализаций выросло с 6 до 15. Русский пока что не добавлен, но плагин всё равно будет полезен специалистам, работающим с иностранными заказчиками.

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

Скачать

Brandfetch

На сайтах-визитках, корпоративных порталах и портфолио иногда размещают блоки со списком партнёров. Чаще всего это «плитки» с логотипами одинакового размера.

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

При тестировании дополнения Brandfetch не смогли найти логотип онлайн-медиа о бизнесе VC.ru, но зато корректно подгрузили картинку с популярного SEO форума.

Минусы:

1. Долгое ожидание при поиске.
2. Нельзя выбрать размер изображения.
3. Срабатывает в 80% случаев.

Скачать

Figmoji

Эмодзи — неотъемлемая часть UI. Их вставляют в списки комментариев или элементы фирменного стиля.

Добавлять emoji в Figma можно двумя способами. Первый — скопировать элемент с внешнего сайта и вставить как текст. Второй — использовать дополнение Figmoji.

Доступные эмодзи разделены на категории. Поиска нет, надо просмотреть список целиком и найти подходящий смайлик. Пока что в архиве доступен набор от Твиттера. Разработчик обещает добавить популярную библиотеку Apple.

Скачать

QR code generator

QR-код — удобный способ передать информацию. В него можно зашифровать визитную карточку, ссылку на сайт или произвольный текст. В дизайне интерфейсов штрихкоды применяют для добавления ссылок на загрузку приложений. Стандартная камера в популярной операционной системе iOS способна распознавать QR-коды. Для Android надо установить специальную программу.

Расширение QR code generator превращает любой контент в штрихкод. Через него удобно передавать ссылку на прототип или загрузку файла из облачного хранилища «Фигмы».

Скачать

Table Generator

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

Назначение Table Generator легко понять из названия. Инструмент не создаёт идеальные таблицы, а лишь ускоряет проектирование.

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

1. Откройте дополнение.
2. Задайте параметры.
3. Подгрузите данные из CSV.
4. Нажмите на кнопку.

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

Скачать

Lorem Ipsum

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

Популярный Lorem Ipsum добрался и до «Фигмы». У плагина минимальное количество настроек. Пользователь включает стандартное начало предложения, задаёт количество предложений или абзацев и начинается генерация.

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

Скачать

Nisa Text Splitter

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

Nisa Text Splitter выполняет 7 операций:

• разбиение;
• сортировка;
• изменение позиции;
• удаление дубликатов;
• объединение списков;
• смена ориентации.

Скачать

Image Palette

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

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

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

Скачать

Color Overlay

Новое расширение, которое умеет перекрашивать растровые картинки. С векторными фигурами в среде «Фигмы» работать удобно, а вот с PNG ситуация непростая.

Как это работает:

1. Загрузите изображение.
2. Откройте дополнение.
3. Обновите HEX код цвета вручную или через палитру.

Плагин действительно экономит время, но только если надо быстро перекрасить фигуру в один тон. Для детализированных картинок он не подойдёт. Область полностью заливается цветом, а внутреннее содержимое скрывается под слоем «краски».

Скачать

Viewports

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

Работа по созданию «резинового» дизайна в Figma построена на ограничителях. Они задают границы фрейма и контролируют поведение элементов при изменении размера окна.

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

Скачать

Плагины — отличный инструмент для пользователей, работающих в «Фигме». Искусственный интеллект не решает все проблемы, а лишь помогает реализовать конкретные задачи. На построение диаграмм или подбор фотографий без него пришлось бы потратить много времени.

Дизайнеры веб-студии IDBI следят за трендами и применяют в работе всю мощь продуктов автоматизации. Мы создадим идеальный интерфейс сайта или мобильного приложения для вашего проекта.

1K+ изображений Figma | Скачать бесплатные изображения на Unsplash

1K+ Figma Pictures | Download Free Images on Unsplash

• A framed photoPhotos 221
• A stack of photosCollections 612
• A group of peopleUsers 5

electronic

computer

display

monitor

screen

lcd screen

design

ноутбук

человек

дизайн иконок3d дизайнpotify

kunsthochschule kasselmenzelstraßekassel

— United Statessalt Lake Cityutah

январь

HQ. – –––– – –––– –– –– –––– – – –– ––– –– –––– – –.

визуализацияHd 3d обоицифровое изображение

Бразилиа — федеральный округ БразилииБразилия

québec cityqcmonitor

Hd grey wallpapersHd design wallpapersweb

officemeetingdiscussion

Coffee imagesworkdesigner

canadarivière-du-loupBrown backgrounds

Hd computer wallpapersHd pc wallpaperscomputer hardware

electronicsHd laptop wallpapersHd screen wallpapers

Related collections

figma

24 фото · Куратор журнала GRÆS

Обложки Figma

54 фото · Куратор Алексей Шутин

FIGMA

14 photos · Curated by Héctor Guevara

chairfurnitureoffice building

são caetano do sulspbrasil

icon design3d designspotify

united statessalt lake cityutah

textHd blue wallpapersKeyboard backgrounds

Hq background imagesshapeperspective

Hd computer wallpapersHd pc обоикомпьютерное оборудование

2021startupкофе на вынос

são caetano do sulspbrasil

renderHd 3d wallpapersdigital image

kunsthochschule kasselmenzelstraßekassel

Hd grey wallpapersHd design wallpapersweb

januarysketch app

canadarivière-du-loupBrown backgrounds

electronicsHd laptop wallpapersHd screen wallpapers

san francisco900 marin streetca

–––– ––– – –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

brasília — brasiliafederal Districtbrazil

québec cityqcmonitor

OfficeMeetingDiscussion

Coffee Imagesworkworkdesigner

Связанные коллекции

Рис.

24 Фотографии · Куратор с куратором GRæs Magazine

Figma Covers

54 Фотографии · Куратор AlexIn

.

54 Фотографии · Куратор AlexIn

.

. создатель контентатехнологииразработчик

стулмебельофисное здание

Александр Шатов

дизайн иконок3d дизайнpotify

Shubham Dhage

renderHd 3d wallpapersdigital image

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –– –– – –.

Mario Gogh

brasília — brasiliafederal districtbrazil

Olaf Val

kunsthochschule kasselmenzelstraßekassel

Sigmund

québec cityqcmonitor

Tracy Adams

united statessalt lake cityutah

Sigmund

Hd grey wallpapersHd design wallpapersweb

charlesdeluvio

officemeetingdiscussion

Tran Mau Tri Tam ✪

januarysketch app

Ion (Ivan) Sipilov

Coffee imagesworkdesigner

Sigmund

textHd blue wallpapersKeyboard backgrounds

Shubham Dhage

Hq background imagesshapeperspective

Sigmund

canadarivière- du-loupКоричневые фоны

Нубельсон Фернандес

создатель контентатехнологииразработчик

Зигмунд

Hd computer wallpapersHd pc wallpaperscomputer hardware

Sigmund

electronicsHd laptop wallpapersHd screen wallpapers

Lala Azizli

2021startuptake away coffee

Sigmund

chairfurnitureoffice building

Paul Hanaoka

san francisco900 marin streetca

Marília Castelli

são caetano do sulspbrasil

Просмотр премиальных изображений на iStock | Скидка 20% на логотип iStock

Unsplash

Make something awesome

Using Images — Figma Handbook

Add to favorites

Steps on how to use images in Figma

Figma Handbook

1

The Figma Design Tool

0:54

2

The Редактор на рис.

1:17

3

Основные инструменты

2:14

4

Положение, размер, ротация и уголовые радиус.0011

1:13

7

Темный режим с цветами выбора

1:17

8

Градиенты

1:36

Создание фона

2:37

BLING

2:02

11

Выравнивание, распределение, и Tidy UP Properties

1:24

12

Союз и угловой радиус

2:53

13

эффекты Shadow and Blur.0011

1:48

14

Использование изображений

2:00

15

Заполнение, ход и усовершенствованный ход

3:21

16

Текстовые свойства и стили

1:37

. 17

Google Fonts and Custom Fonts

1:13

18

Accessibility

19

Responsive Design

3:07

20

Constraints

1:11

21

Layout Grid

2:00

22

Auto Layout in Figma

8:17

23

Vector Mode

0:55

24

Vector Network

1:19

25

Perspective Mockups

2:00

26

3D Mockups

1:20

27

Using Illustrations in Design

2:03

28

Booleans

2:24

29

Icon Design

1:48

30

Components

1:50

31

Team Library

2:14

32

Creating Confetti

1:59

33

Looper Shape Дублирование

1:41

34

Apple Watch Ring Dring

2:23

35

Экспортные активы на рис.

1:39

36

Экспорт CSS Code

1:04

Экспорт CSS код

1:04

.0010 37

Designing with Data

1:57

38

Prototyping

2:25

39

Version History

1:25

40

Multiplayer, Commenting, & Previews

1: 36

41

Variants

5:39

42

Interactive Components

43

UIKits

4:47

44

Plugins

5:47

45

Blob Background

4:45

46

Wave Background

6:46

47

3D Shapes

12:27

48

Parallax Prototyping in Figma

7:52

49

3D Perspection Design

7:16

50

стеклянный значок

9:16

51

Кристаллический шарик с анимацией эффекта воды

12:54

52

Дизайн и код анимация анимация анимация анимация анимация анимация

12:54

52

и код анимация

12:54

52

. с буквами

29:38

53

Анимация футуристической линии

19:30

54

Импорт Adobe Illustrator на рис.

3:16

55

Создайте иллюстрацию на фиг.

4:07

.

56

Снять плагин BG

2:27

57

Круговые линии Advanced Stroke

3:27

58

Publish Design для Community

4:49

59

. Поворот.0011

3:11

60

Прототип с содержанием прокрутки

3:42

61

Содержание объятия и изменение размера

62

Усовершенствованный автоматический макет

63

Circular Texcul

64

зеркальный прототип

2:39

65

Прототипирование навигационной и вкладок

4:37

66

ВИДЕО В ПИСЬ.0011

3:03

68

Figma Sections

69

Unsplash Stock Photos

70

Angular Gradient

71

Radial Gradient

72

After Delay Animation Prototyping

73

UI Wireframe

74

Lottie Animations

75

Дизайн экрана регистрации

76

Генератор контента

77

Дизайн Отсутствует стиль ворса

78

Slice Tool

79

Адаптивный макет с точками перерыва

80

Дизайн диаграмм

Дизайн модалы

Переименование

. использовать изображения на Figma.

Покупка включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.

Учитесь с видео и исходными файлами. Доступно только подписчикам Pro.

Покупка включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.

Шаблоны и исходный код

Загрузить исходные файлы

Загрузить видео и ресурсы, чтобы просматривать и учиться в автономном режиме без перерыва.

Шаблон дизайна

Исходный код для всех разделов

Видеофайлы, ePub и субтитры

Просмотреть все загрузки

1

Инструмент дизайна Figma

Начало работы с Figma в качестве инструмента дизайна

0:54

2

Редактор в Figma

Знакомство с интерфейсом Figma

1:17

3

Основные инструменты

1 Основные инструменты панель в Figma

2:14

4

Свойства положения, размера, поворота и углового радиуса

Работа со свойствами положения, размера, поворота и углового радиуса

1:27

5

Стили цветов

Работа со стилями цвета на рис.

1:13

6

Маски

Использование масок для содержимого клипа и сочинения вашего дизайна на рис.

1:47

7

Dark Mode с выбором. Цвета

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

1:17

8

Градиенты

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

1:36

Создание фонов

Дизайн. Свойства распределения, распределения и очистки

Изучение выравнивания и очистки в Figma

1:24

12

Объединение и угловой радиус

Работа с объединением и угловым радиусом

2:53

13

Shadow and Blur Effects

Изучение способов включения тени и размытия в ваш дизайн

1:48

14

Изображения

Шаги о том, как использовать изображения на рис.

. 2:00

15

Заливка, обводка и расширенная обводка

Узнайте больше о заливке и различных параметрах обводки в Figma

3:21

16

Свойства и стили текста

и узнайте о

900 Типовые свойства Figma

1:37

17

Google Fonts и пользовательские шрифты

Исследуйте различия между шрифтами Google и пользовательскими шрифтами для вашего веб -сайта

1:13

18

Доступность

Изучение a11y в дизайне

1

Изучение a11y в дизайне

1

.

Адаптивный дизайн

Разработка адаптивных макетов в Figma с использованием ограничений и автоматического макета

3:07

20

Ограничения

Работа с ограничениями в Figma

1:11

21

Сетка макета

Научитесь проектировать с использованием сеток, столбцов, строк и полей.

2:00

22

Автоматический макет на рис.

Работа с автоматической компоновкой для адаптивной конструкции

8:17

23

векторный режим

Изучение векторного режима для редактирования и настройки векторных Shapes

0: 55

24

Векторная сеть

Научитесь использовать векторные сети и создавать иконки

1:19

25

Перспективные макеты

Используйте реалистичные макеты для представления ваших дизайнов

2:00

26

3D Mockups

Добавление 3D Mockups к проектированию

1:20

271111111110 271111111111111111111111111110 гг. Использование иллюстраций в дизайне

Включение иллюстраций в ваш дизайн

2:03

28

Булевы значения

Использование логических выражений для создания значков

2:24

10 Дизайн

29 Иконка

2

Узнайте, как создавать значки с помощью инструментов, предоставляемых Figma

1:48

30

Компоненты

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

1:50

31

Team Library

Publishing your design styles and components

2:14

32

Creating Confetti

Working with Confetti plugin

1:59

33

Looper Shape Дублирование

Работа с плагином Looper Figma

1:41

34

Apple Watch Ring

Создание кольца Apple Watch на рис.

2:23

35

Экспортные активы на рис.

Узнайте об экспорте

36

Экспорт кода CSS

Работа с кодом CSS в Figma

1:04

37

Проектирование с использованием данных

Плагины, помогающие создавать дизайн с использованием реального контента

1 9:50101

38

Прототипирование

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

2:25

39

История версии

Работа с историей версии на рис. , Комментирование и Предварительный просмотр

Узнайте о совместной работе и совместном использовании с Figma

1:36

41

Варианты

Объединение похожих компонентов в варианты

5:39

42

Интерактивные компоненты

Создание повторных взаимодействий с использованием интерактивных компонентов

43

UIKITS

Дизайн с использованием UIKITS на рисмере

4:47

44

Плагины

ИСПОЛЬЗОВАНИЕ И ОБРАЗОВАНИЕ ИСПОЛЬЗОВАНИЯ ИСПОЛЬЗОВАНИЯ ИСПОЛЬЗОВАНИЯ ИСПОЛЬЗОВАНИЯ ИСПОЛЬЗОВАНИЯ ИСПОЛЬЗОВАНИЯ ИСПОЛЬЗОВАНИЯ ИСПОЛЬЗОВАНИЯ ИСПОЛЬЗОВАНИЯ ИСПОЛЬЗОВАНИЯ. 5:47

45

Фон с кляксами

Создать простой фон с кляксами в Figma

4:45

46

Фон с волнами

Создайте волновой дизайн в Figma с помощью инструмента «Изгиб» и плагина «Волна»

6:46

47

3D-фигуры

Создайте 3D-формы с помощью векторных инструментов в Figma

1 0 1 0 900 8 00011 9 Параллаксное прототипирование в Figma

Узнайте, как создать технику анимации с прокруткой параллакса, при которой фон и передний план движутся с разной скоростью

7:52

49

Перспективный дизайн 3D-интерфейса

Преобразование пользовательского интерфейса с помощью трехмерной перспективы

7:16

50

Стеклянная иконка

Узнайте, как создать креативную иконку с помощью размытия фона

9:16

10 9 9 Хрустальный шар с анимацией с эффектом воды

Анимация волн в хрустальном шаре с помощью инструмента прототипирования

12:54

52

Разработка и программирование линейной анимации с буквами

Узнайте, как анимировать линии с помощью CSS в CodeSandbox

29:38

53

Анимация футуристической линии

Узнайте, как создать футуристический фон с линиями, используя инструмент для ручки на рис.

19:30

54

Импорт Adobe Illustrator на рис

Best Practies для импорта файла Illustrator в Figma

3:16

55

Создать иллюстрацию в Figma

Используйте векторный инструмент в Figma для создания иллюстрации с нуля

4:07

56

Удалить плагин BG

Удалить фон изображения с помощью плагина RemoveBG в Figma

2:27

57

Круговые линии Advanced Stroke

101 Fig 31 90 0 линий

58

Публикация дизайна в сообществе

Публикация файлов дизайна в сообществе Figma

4:49

59

Преобразование изображения в вектор

Преобразование изображения в вектор в Figma

3:11

60

Прототип с содержанием прокрутки

Добавить вертикальную и горизонтальную прокрутку на вашем фигма -прототипе

3:42

61

HUG CONTEC

62

Расширенный автоматический макет

Узнайте, как использовать режим интервалов, наложение холста, выравнивание по базовой линии текста, значения обводки в расширенном макете

63

Круговой текст на пути

Создайте круговой текст на пути с помощью плагина ARC в Figma

5:57

64

Зеркальный прототип

Просмотрите свои прототипы на мобильном устройстве с помощью мобильного приложения 2:39

65

Прототипирование липкой панели навигации и панели вкладок

Как исправить положение с помощью липкой панели навигации и панели вкладок

4:37

66

Видео в Figma Prototype

Применить используя любую векторную сеть на вашем прототипе

67

Градиенты сетки

Создавайте красивые и волнообразные градиенты с помощью фигур или плагина градиента сетки в Figma

3:03

68

Разделы Figma

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

69

Unsplash Стоковые Фото

Вставьте красивые изображения из Unsplash прямо в свой дизайн

70

Угловой градиент

Пошаговое руководство по созданию и настройке углового градиента в Figma

71

Радиальный градиент

Создание ярких радиальных градиентов в Figma для профессионального дизайна

72

Прототипирование анимации после задержки

Каркас пользовательского интерфейса

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

74

Анимации Lottie

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

75

Дизайн экрана регистрации

Простой дизайн экрана регистрации в Figma для вашего приложения или веб-сайта

76

Генератор контента

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

77

Design Lint Missing Style

Экономьте время на поиске и исправлении ошибок в проектах Figma с помощью Design Lint

78

Slice Tool

Export your designs using the slice tool in Figma

79

Adaptive Layout with Breakpoints

Creating flexible and responsive web designs with adaptive layout and breakpoints

80

Chart Designs

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

81

Дизайн модальных окон

Как создавать модальные окна, улучшающие пользовательский интерфейс

82

Пакетное переименование

Быстро и легко переименовывайте несколько файлов в Figma с помощью плагина пакетного переименования

Познакомьтесь с инструктором

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