За урок мы научимся добавлять различные изображения в проект и поработаем с эффектами для них. Мы научимся выполнять булевые операции над объектами, а также изучим добавление эффектов к разным типам изображений.
Фигма автоматически создает все объекты в формате SVG. Векторные изображения (SVG) генерируются из кода, что позволяет увеличивать их или же уменьшать без потери качества.
Помимо SVG вы можете добавлять в проект любые стандартные фото: PNG, JPG, JPEG и прочие. К каждой фотографии вы легко можете добавить эффекты и преобразовать её изначальный вид.
Материалы для курса figma-photos.svg
Задание к уроку
При помощи булевых операций создайте объект как на фото ниже:
Помощь: сперва создайте квадрат и к нему добавьте еще один небольшой квадрат. Далее из получившегося вычтите сферу сбоку.
Вы можете скачать весь проект по этой ссылке. Позже вы сможете импортировать его в Figma.
Добавьте в Фигму изображение ниже:
Добавьте к фото эффекты таким образом, дабы фото выглядело так:
Вам необходимо добавить изображение в проект. После этого укажите эффекты в компоненте Fill.
Можно уменьшить температуру, добавить контраст и усилить Exposure.
Большое задание по курсу
Задание рассчитано на весь видеокурс. Его необходимо выполнять по мере прохождения курса или по его окончанию.
В ходе большой работы вам предстоит разработать дизайн для основной страницы мобильного приложения. Дизайн не столь сложный, но при его выполнении постарайтесь максимально не использовать готовые иконки, а воссоздавать все самостоятельно.
Ниже вы можете посмотреть на пример дизайна, что вам необходимо реализовать:
