Содержание
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 шагов:
- Авторизуйтесь в учётной записи.
- Перейдите во вкладку с плагинами.
- Найдите подходящее расширение.
- Нажмите кнопку Install.
Удобство «Фигмы» прослеживается в каждой детали. В том же Adobe Photoshop надо потратить время на поиск плагина, скачать его и загрузить в библиотеку. Длинный путь окажется бесполезным, если продукт не адаптирован под установленную версию графического редактора. С Figma таких проблем нет. Выбрал, нажал на кнопку и появились новые возможности.
На странице плагина размещено описание, история версий и контакты автора. При необходимости можно связаться с разработчиком, чтобы сообщить о проблеме или попросить добавить полезную функцию.
Мы подготовили список из 20 расширений, которые пригодятся дизайнерам, работающим в «Фигме».
Unsplash
Продукт от известного фотостока. Unsplash быстро заполняет блоки фотографиями. По состоянию на январь 2020 у него самое большое количество загрузок.
Принцип работы:
- Включить Unsplash в настройках.
- Выбрать области для подгрузки картинок.
- Задать тематику изображений или выбрать случайные.
В дополнение интегрирована большая коллекция иллюстраций, разделённых на категории. Интерфейс на английском языке, но для понимания особенностей хватит базовых знаний.
Инструмент экономит время, когда нужно заполнить макет контентом. Выбрали карточки, задали тему и через несколько секунд слайдеры, «плитки» товаров и другие элементы показываются с красивыми фотографиями.
Скачать
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 до 10 баллов.
- Измените цвет, расположение и масштаб фигуры.
Blobs добавляет объекты случайной формы. Пользователь влияет на них минимально. При сложности в 1 балл генерируются фигуры с равномерными пропорциями. На максимальном уровне выходят полноценные кляксы.
Скачать
Image tracer
Разницу между векторной и растровой графикой знает каждый дизайнер. Иногда возникает необходимость конвертировать изображение в SVG или другой формат для масштабирования без потери качества.
Image tracer умеет делать эту операцию в Figma. Он распознает фигуры с чёткими контурами и экономит время. Не надо отрисовывать объект вручную, чтобы вставить его в макет.
Как пользоваться:
- Вставьте растровую картинку в документ.
- Найдите расширение в библиотеке.
- Задайте параметры. Обратите внимание на пункт blur. Он отвечает за сглаживание пикселей. Экспериментируйте со значениями, чтобы найти баланс.
Полученные после конвертации фигуры можно трансформировать и менять другие свойства. Image tracer не заменяет векторные редакторы вроде Illustrator, а лишь помогает в решении конкретной задачи. Он не справится со сложными изображениями.
Скачать
Content Buddy
Дополнение решает одну из главных проблем дизайнеров. В программах вроде Photoshop сложно менять слои в нескольких макетах одновременно. Такая задача — часть повседневной работы. Клиенты могут в последний момент попросить заменить логотип на 20 прототипах или обновить цвет панели.
Content Buddy меняет текст во всех выделенных фреймах. Задали искомый фрагмент, заменили вхождения и сохранили изменения. Плагин не умеет работать с фигурами и другими объектами. Пока что он ориентирован только на текст. Будем надеяться, что разработчик в будущем расширит возможности продукта.
Скачать
Tumble
Полезное дополнение, которое добавляет эффект гравитации. Работает с вектором и текстовыми слоями. Лучше всего плагин взаимодействует с фигурами. Подойдёт для оформления заднего фона и создания паттернов.
Принцип работы:
- Выделите слои.
- Включите расширение.
- Подождите несколько секунд.
Инструмент корректно определяет количество выделенных объектов и гармонично прижимает их к нижней границе фрейма.
Скачать
Translate
Создание мультиязычных интерфейсов — стандартная задача для дизайнера. Многие компании адаптируют корпоративные порталы под несколько языков, чтобы находить новых клиентов в других регионах.
Дополнение Translate переводит текст на любой из 15 доступных языков. Для работы плагина надо получить ключ в настройках API «Яндекс.Переводчика».
Автор редко обновляет расширение, но за 6 месяцев количество доступных локализаций выросло с 6 до 15. Русский пока что не добавлен, но плагин всё равно будет полезен специалистам, работающим с иностранными заказчиками.
Если добавить в Translate поддержку русского и автоопределение языка выбранного фрагмента, он станет идеальным.
Скачать
Brandfetch
На сайтах-визитках, корпоративных порталах и портфолио иногда размещают блоки со списком партнёров. Чаще всего это «плитки» с логотипами одинакового размера.
Brandfetch — поисковая система логотипов. Ввели в поле домен, нажали на кнопку, и если она есть в базе, в фрейм добавится новый слой. Плагин экономит время, но он больше подходит для зарубежных дизайнеров.
При тестировании дополнения Brandfetch не смогли найти логотип онлайн-медиа о бизнесе VC.ru, но зато корректно подгрузили картинку с популярного SEO форума.
Минусы:
- Долгое ожидание при поиске.
- Нельзя выбрать размер изображения.
- Срабатывает в 80% случаев.
Скачать
Figmoji
Эмодзи — неотъемлемая часть UI. Их вставляют в списки комментариев или элементы фирменного стиля.
Добавлять emoji в Figma можно двумя способами. Первый — скопировать элемент с внешнего сайта и вставить как текст. Второй — использовать дополнение Figmoji.
Доступные эмодзи разделены на категории. Поиска нет, надо просмотреть список целиком и найти подходящий смайлик. Пока что в архиве доступен набор от Твиттера. Разработчик обещает добавить популярную библиотеку Apple.
Скачать
QR code generator
QR-код — удобный способ передать информацию. В него можно зашифровать визитную карточку, ссылку на сайт или произвольный текст. В дизайне интерфейсов штрихкоды применяют для добавления ссылок на загрузку приложений. Стандартная камера в популярной операционной системе iOS способна распознавать QR-коды. Для Android надо установить специальную программу.
Расширение QR code generator превращает любой контент в штрихкод. Через него удобно передавать ссылку на прототип или загрузку файла из облачного хранилища «Фигмы».
Скачать
Table Generator
Дизайн таблиц — отдельный вид искусства. Для удобного восприятия данных нужна понятная структура и гармоничная типографика.
Назначение Table Generator легко понять из названия. Инструмент не создаёт идеальные таблицы, а лишь ускоряет проектирование.
Принцип работы:
- Откройте дополнение.
- Задайте параметры.
- Подгрузите данные из CSV.
- Нажмите на кнопку.
В настройках можно регулировать шрифт, пропорции ячеек, выравнивание и другие свойства. Автор обещает поддержку адаптивности, динамический размер ячеек и шаблоны.
Скачать
Lorem Ipsum
Текст-заполнитель применяется для быстрого наполнения контентом. Он оживляет комментарии, текстовые блоки и другие элементы интерфейса.
Популярный Lorem Ipsum добрался и до «Фигмы». У плагина минимальное количество настроек. Пользователь включает стандартное начало предложения, задаёт количество предложений или абзацев и начинается генерация.
Расширение работает молниеносно. После нажатия на кнопку создается фрагмент, и окно закрывается. Порадовало наличие автогенерации. Lorem Ipsum проверяет рамки слоя и создаёт отрывок, который идеально вписывается в заданные границы.
Скачать
Nisa Text Splitter
Figma значительно ускоряет процесс создания прототипов благодаря стандартным опциям и возможностям плагина. В архив инструментов автоматизации стоит добавить расширение, которое выводит работу с текстом на новый уровень.
Nisa Text Splitter выполняет 7 операций:
- разбиение;
- сортировка;
- изменение позиции;
- удаление дубликатов;
- объединение списков;
- смена ориентации.
Скачать
Image Palette
Главный навык дизайнера — умение подбирать гармоничную цветовую гамму. Для этих целей существуют специализированные сервисы, но без интуитивной навигации обойтись не получится.
Расширение Image Palette создаёт цветовую палитру на основе загруженного изображения. Инструмент определяет 5 наиболее ярких оттенков и выдаёт результат в виде цветных кружочков одинакового размера.
При тестировании плагина стало понятно, что он не всегда генерирует правильные значения цветов. Разработчик указал эту особенность на странице описания.
Скачать
Color Overlay
Новое расширение, которое умеет перекрашивать растровые картинки. С векторными фигурами в среде «Фигмы» работать удобно, а вот с PNG ситуация непростая.
Как это работает:
- Загрузите изображение.
- Откройте дополнение.
- Обновите 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 с помощью плагина пакетного переименования
Познакомьтесь с инструктором
Мы все стараемся следовать нашему методу обучения шаг за шагом, предоставляя исходные файлы и расставляя приоритеты дизайн на наших курсах.