Как добавить тень в фигме

Как сделать красивую тень в Figma

На многих веб-сайтах вы можете наблюдать использование теней в дизайне: на карточках, объектах, кнопках, формах и так далее. В этой статье покажем два способа, как сделать красивую и плавную тень в Фигме.

1-й способ. Здесь мы создадим тень через правую панель настроек. Выделяем объект (в нашем случае кнопку) и добавляем эффект тени нажав “+” напротив надписи “Effects”. По умолчанию будет добавлена внешняя тень, но по надписи Вы можете выбрать внутреннюю – Inner shadow.

Для цветных объектов как у нас в примере лучше делать тень в его цвет и просто понижать прозрачность до 30-40%.

Для кнопки получились следующие оптимальные настройки:

• X = 0
• Y = 8
• Blur = 19
• Spread = 0
• Цвет = F01B4E
• Прозрачность = 40%

Для теней от объектов ориентировочные настройки следующие:

• X = 0
• Y = 8
• Blur = 24
• Spread = 0
• Цвет = 8187BD
• Прозрачность = 15%

2-й способ. Здесь будем использовать плагин Beautiful Shadows, который мы упоминали в статье 10 полезных плагинов в Figma.
Запускаем плагин и выделяем нужный объект.
Регулируем расположение тени через кружок – источник цвета и нажимаем “Apply”.

Справа можно увидеть результат применения плагина на круге.

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

Логотип SILVERWEB в стилистике известных компаний

Фирменные цвета известных компаний

5 признаков того, что вам нужен редизайн сайта

Готовы предоставить полную консультацию по условиям и
всем интересующим вопросам работы с нашей компанией!

Получить консультацию

Весь спектр услуг маркетинга и рекламы: лидогенерация, SEO, контекстная реклама, таргетированная реклама, создание и правка сайтов, управление репутацией, внедрение crm-систем и многие другие услуги

• Минск, пр-т Независимости 169, 805Ю, БЦ «XXI век»
• +375 (29) 390-56-65
• zakaz @ silverweb.by

Отвечаем
в мессенджерах:

Частное Предприятие «Сильвервеб ПРО» © 2017-2023

5 на основе 117 отзывов

Заявка на обратный звонок

Частное Предприятие «Сильвервеб ПРО» с уважением относится к правам наших клиентов. Мы безоговорочно признаем важность конфиденциальности личной информации и соблюдаем правила защиты персональных данных от несанкционированного доступа третьих лиц (защита персональных данных).

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

Ниже приводится информация об обработке персональных данных.

1. Персональные данные. Цель сбора и обработки персональных данных.

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

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

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

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

2. Условия обработки персональной информации покупателя и её передачи третьим лицам.

2.1. При обработке персональных данных наших клиентов мы руководствуемся законом РБ «Об информации, информатизации и защите информации».

2.2. В отношении персональной информации покупателя сохраняется ее конфиденциальность.

2.3. Наше агентство не передает персональные данные третьим лицам.

3. Меры, применяемые для защиты персональной информации пользователей.

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

Тень в фигме: как сделать красивую тень от объекта в Figma

В этом уроке вы научитесь делать красивую тень от любого объеткта в фигме.

Для создания тени в фигме, выберите нужный объект. В правой панели напротив надписи «Effects» нажмите иконку «+». По умолчанию будет выбрана надпись «Drop shadow», что означает «Внешняя тень». Стандартная тень не очень красивая, поэтому давайте её изменим.

Нажмите на иконку солнца, и поставьте следующие параметры тени:

• X = 0
• Y = 8
• Blur = 24
• Spread = 0
• Цвет = 8187BD
• Прозрачность = 15%

Если выберите из списка вместо значения «Drop shadow» «Inner shadow», то у объекта появится внутренняя тень.

Вот пример того, что получится если задать значение «Inner shadow».

Какую тень делать для цветных объектов в Figma?

Тень следует подбирать на основании цвета объекта. К примеру, если у вас есть синий круг, то следует задать цвет тени, как у этого объекта. Простыми словами сделайте тень синим цветом. Аналогично с другими цветаи.

Как сохранить стиль тени в фигме и использовать повторно в других проектах?

Если вы хотите сохранить стиль тени, чтобы использовать в других проектах, то нажмите на иконку с четырьмя точками напротив надписи «Effects». Затем на плюс. Появится всплывающее окно, где можно сохранить стиль тени. Укажите название стиля (например внешняя тень) и нажмите на синюю кнопку «Create style».

Если ни один объект не выбран, то в правой панели можно увидеть стиль этой тени.

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

Если хотите использовать этот стиль в других проектах, то нажмите на вкладку «Accets», затем на пиктограмму книги. В появившемся окне жмите на кнопку «Publish». Затем на надпись «Publish style only». Если создадите новый проект, затем нажмете на иконку книги, то можно будет включить тумблер напротив этого проекта. Таким образом вы подключите стили и сможете их использовать повторно.

Заключение

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

P.S. Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке.

P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).

Тень в Фигме: как сделать красивый эффект от объекта в Figma

В Figma удобно создавать макеты, отдельные детали — карточки, кнопки, и крупные проекты. Онлайн-программа пользуется популярностью среди дизайнеров, разработчиков, маркетологов и других специалистов. Её функционал довольно широк. Мы уже писали о том, как рисовать линии, вырезать объекты и создавать градиент. В этой статье раскроем особенности наложения тени от объекта или фигуры — нарисовать красивую тень не так уж и сложно. Главное — уметь пользоваться необходимыми инструментами.

Как сделать тень от объекта в Фигме?

Для начала на рабочую панель нужно добавить объект — это может быть фигура, например, квадрат. Перемещать его по площади легко при помощи нажатия мыши, также можно расширить квадрат, используя кнопки по краям объекта.

На панели инструментов необходимо выбрать пункт «Effects». Затем нажмите кнопку «+». Вы увидите надпись «Drop shadow» — это значит «Внешняя тень». Она установлена по умолчанию и подходит не для всех предметов. Например, если фигура большая и имеет яркий цвет, тень практически не будет видно. Попробуем выбрать другой вариант.

Кликните на «Drop shadow», чтобы увидеть виды теней в Figma. В программе можно редактировать прозрачность, размытие, положение, цвет тени. Выбор настроек не займёт много времени, если вы будете знать, чем они отличаются друг от друга. Помимо уже описанной выше внешней тени есть тень внутренняя или «Inner shadow». Она падает внутрь объекта и делает его будто на уровень ниже, чем общий фон.

Обучиться работе с Figma можно на онлайн-курсах. Проверенные варианты от tutortop:

• «Figma» от Pentaschool
• «Курс Figma» от Contented
• «Веб-дизайнер» от Eduson Academy
• «Профессия UX/UI-дизайнер» от Chulakov School

Мы дарим 10 000 ₽ на обучение в любой из школ-партнёров, представленных на сайте tutortop. При покупке через tutortop вы также получите курсы стоимостью 20 000 ₽ абсолютно бесплатно.

Получите промокод 10 000 ₽ на обучение и курсы стоимостью 20 000 ₽ в подарок!

Тень в Figma

Чтобы добавить к объекту тень, выделите объект и добавьте с помощью значка «+» к нему эффект.

О том, как сделать тень в стиле Flat читайте здесь.

По умолчанию добавляется тень (Drop Shadow), но вы можете переключить его на другие:

1. тень внутрь объекта (Inner Shadow)
2. размытие объекта (Layer Blur)
3. размытие фона (Background Blur)

Чтобы настроить тень, нажмите иконку лампочки рядом с эффектом.

Параметры тени

Blur — насколько плавно будет переходить тень в размытие

X — сдвиг по горизонтали

Y — сдвиг по вертикали

С 22 июля 2021 доступен параметр Show behind transparent areas — показывать ли тень за прозрачной частью фигуры

Цвет и прозрачность в процентах

Вы можете добавлять несколько эффектов к одному объекту — в том числе несколько теней.