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

Как сделать хорошие тени ��

Редкий современный дизайн обходится совсем без теней. Большинство популярных дизайн-систем типа Material или Fluent включают их в себя. Давайте посмотрим, что можно сделать, чтобы не облажаться при создании теней.

Эй, хотел сказать тебе спасибо (и тебе тоже). Было приятно и неожиданно увидеть столь бурный отклик на эту тему на родном DTF. Продолжайте ставить лайки, мне понравилось.

Если хочется ещё статей — подписывайся�� И подумай про донат. Даю время до конца статьи.

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

Придайте тени оттенок

По умолчанию во всяких редакторах типа Figma, XD, Sketch при создании тень тупо чёрная (#000). Но тень такого цвета далеко не всегда выглядит хорошо. Добавьте тени лёгкий оттенок и она станет выглядеть намного органичнее — даже в реальной жизни тени не чёрные.

Практически идентичные тени. Единственная разница — цвет.

Стандартные тени

Не важно, используете вы Figma, Sketch, XD или ещё что-то, совет универсальный:

Делайте тени мягкими

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

Пока меня профессионалы не закидали помидрами, хочу сделать ремарку: естественно, мягкие тени — не панацея, и они нужны далеко не везде. И большие значения blur подойдут тоже не во всякой ситуации. Даже в вышеупомянутых мной дизайн-системах есть тени для элементов с низким уровнем подъёма (elevation).

Делайте «слоёные» тени

Ещё один лайфхак (*distant trigger sounds*) — использовать несколько теней, наслаивая их друг на друга. Настраивать их, конечно, тяжелее, чем одну, но человечество придумало всякие генераторы как раз для этой цели.

Одинокая тень-одиночка на одинокой дороге. Одна.

Тут, естественно, тоже есть ограничения. Хотя тень слева и выглядит красиво, она получается очень длинная и в интерфейс в приложение, например, её не впихнёшь. Максимум — на какой-нибудь лендинг. Выглядит она как-то так:

box-shadow: 0px 2.07544px 2.21381px rgba(46, 60, 80, 0.0196802), 0px 4.98758px 5.32008px rgba(46, 60, 80, 0.0282725), 0px 9.39116px 10.0172px rgba(46, 60, 80, 0.035), 0px 16.7522px 17.869px rgba(46, 60, 80, 0.0417275), 0px 31.3332px 33.4221px rgba(46, 60, 80, 0.0503198), 0px 75px 80px rgba(46, 60, 80, 0.07);

Понятное дело, что для интерфейсов лучше использовать что-то более подходящее. Например, если не ошибаюсь, в Material тени состоят из трёх слоёв, во Fluent — из двух.

Не задирайте прозрачность (непрозрачность)

Да-да, есть тут небольшая путаница. В английском это — opacity, непрозрачность. Но в русском почему-то все поголовно говорят прозрачность, хотя параметр тот же самый. Он же альфа.

Ну да не суть. Просто не используйте для теней большие значения. Максимум, что вы можете себе позволить — это 25%, больше обычно выглядит плохо. По крайней мере с тёмными тенями. О цветных поговорим чуть ниже.

Тени и размытие в Figma: как настроить

Рассказываем о базовых эффектах и показываем, как за две минуты сделать «матовое стекло».

Иллюстрация: Meery Mary для Skillbox Media

Вячеслав Лазарев

Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

Тени

Drop Shadow — внешняя тень, подходит для отделения объекта от фона. Inner Shadow — внутренняя, подходит для создания объёмных объектов:

Чтобы добавить тень, в разделе Effects нажмите на плюсик. По умолчанию Figma добавит обычную тень, но если нажать на надпись Drop Shadow, в выпадающем меню его можно изменить на Inner Shadow.

Базовые настройки у теней одинаковые, но работают они немного по-разному:

Blur — размытие краёв тени.
Spread — размер тени.
X и Y — смещение относительно центра объекта. X — влево и вправо, а Y — вверх и вниз.
Также у тени можно настроить её цвет и непрозрачность.

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

Также у тени можно изменить цвет и режим наложения. Работает это как в Photoshop — в зависимости от режима и цвета тень будет подстраиваться под фон:

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

Размытие

В Figma есть два вида размытия: Layer blur и Background blur. Настроить у них можно только уровень размытия, но работает он в этих режимах по-разному.

Чтобы добавить размытие, в разделе Effects нажмите на плюсик. Затем нажмите на надпись Drop Shadow и в выпадающем меню выберите Layer blur или Background blur.

Layer blur просто размывает слой целиком в зависимости от выбранного значения в настройках .

Background blur работает немного хитрее. Если просто указать у него уровень размытия, то ничего не произойдёт. Но если в пункте Fill снизить непрозрачность заливки, то фон под слоем с Background blur будет размыт:

Не путайте непрозрачность слоя (Layer) и заливки (Fill). Если вы снизите непрозрачность слоя, то эффект Background blur работать не будет.

Сочетание эффектов

В разделе Effects можно добавить сколько угодно разных эффектов: например, несколько теней и несколько размытий. Благодаря этому можно добиться интересных результатов. Для примера рассмотрим, как сделать эффект матового стекла.

Добавьте на макет фотографию и поверх неё наложите любую фигуру: круг, квадрат, треугольник.
В настройках эффектов фигуры добавьте тень со следующими настройками: X и Y — 12, Blur — 25, Spread — 2, непрозрачность тени — 25%.
В настройках эффектов фигуры добавьте Background blur с размытием 25.
Снизьте непрозрачность заливки фигуры до 10%.
По желанию можно добавить обводку с непрозрачностью 50%.

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

Подробнее о том, как можно сочетать разные эффекты в Figma, читайте в нашей инструкции по морфизмам в интерфейсах:

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

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

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

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

Тени в Figma

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

Тени в Figma

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

Тени в Figma

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

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

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

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

Нажимая на кнопку «Получить», я соглашаюсь на обработку моих персональных данных.

Спасибо! Мы получили вашу заявку. Скоро с вами свяжемся.

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

X = 0
Y = 6
Blur = 4
Spread = 0
Цвет = 99CDEA
Прозрачность = 40%

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

Тени в Figma

Сохранение тени в Figma

В Фигме доступно сохранение стиля тени для использования его в дальнейших проектах. Нажмите на значок с четырьмя точками рядом с надписью «Effects», после — на плюс. После этого вы можете сохранить её — надо ввести название и выбрать «Create style». Теперь созданный и сохранённый стиль тени появится в правой панели при нажатии на четыре точки, внизу списка.

Тени в Figma

Использовать тень просто и в других проектах. Слева выберите вкладку «Assets» и кликните по значку книги. Дальнейший путь — «Publish» — «Publish style only». При создании нового проекта и нажатии на иконку книги вы сможете активировать сделанные ранее стили.

Плагины для наложения тени в Фигме

Через плагины нарисовать тень для предмета ещё проще. Достаточно запустить его, выделить объект и получить готовый результат. Эти популярные плагины помогут создать красивую и ровную тень как для крупных предметов, так и для небольших деталей:

Beautiful Shadows — подойдёт для плавных и мягких теней:
Shadowkit — инструмент для работы с более сложными, многослойными тенями, удобно использовать для внутренних теней;
SmoothShadow — помогает рисовать глубокие тени, есть специальные кривые линии для более точных настроек размытия, смещения, детализации.

Итоги

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

Анна Уженкова

Копирайтер. Увлекается литературой и любит разбираться в сложных вещах. В работе ценит сам процесс — тексты, это не просто тексты, а возможность на что-то повлиять. Среди тем, которые нравятся, — образование, психология, IT.

Лиза Шарипова

Веб-дизайнер. Занимается дизайном с 2020 года. Училась в Skillbox, BBE, проходила курсы по типографике и композиции. Полностью упаковывала образовательный продукт для IT-компании EPAM и делала лендинг для международного стартапа. Любит путешествовать и находит в этом вдохновение.

Дарим 30+ курсов стоимостью 100.000 ₽ от топовых школ!

Оставьте номер, чтобы получить доступ бесплатно

Получить доступ

Получить в WhatsApp

Нажимая на кнопку, я соглашаюсь с Пользовательским соглашением

�� Спасибо! Открыли вам доступы по ссылке

Отзывы на лучшие школы

В 2004 году я окончила университет по специальности дизайнер интерьера, но жизнь сложилась так, что по этой профессии я не работала ни дня. В силу обстоятельств, возможностей (или их отсутствия) в силу своих собственных состояний я не окунулась в пучину этой профессии, но подсознательно всегда продолжала мечтать быть причастной к дизайну. Жила жизнь, кем только не работала, сменила много разных специальностей и должностей, но всегда меня сопровождало ощущение, что я делаю все неправильно и иду по ложному пути. Иногда себе давала обещание, вот чуть-чуть встану на ноги, подзаработаю и пойду учиться (вспоминать все, что изучала 18 лет назад) для того чтобы начать уже жить так, как я мечтаю. НО этого не происходило. И все таки в апреле 2022 года, я разозлилась на себя и приняла решение менять свою жизнь. Выбрала школу — школу Geometrium, дальше встал вопрос “Где взять деньги на обучение, в кармане ноль”. Появились страхи — “А вдруг не окупиться. А где буду брать деньги на ежемесячную оплату. Я не справлюсь и т.д.” Перешагнула страхи, оформила рассрочку и сказала себе — “Юлечка, прорвемся” Наступил период обучения, по началу все шло хорошо, но потом начался период сложностей с программами SketchUp, Archicad (столкнулась с ними впервые), то там не получалось, то здесь. Плакала, все бросала, делала перерывы, стиснув зубы опять шла напролом к своей мечте. И вот, наконец, я закончила обучение в школе Geometrium и сейчас испытываю такие неописуемые ощущения: — уверенность в себе; — желание жить и развиваться; — пропала депрессия; — руки стали “чесаться” побыстрее хочется начать работать, творить и приносить пользу людям; — ощущение, как будто я возродилась, как птица Феникс вот уже только за это безмерно благодарна основателя школы Павлу Герасимову и Алексею Иванову. Все это произошло, благодаря тому, что школа профессионально выстроена, там дают действительно полезный контент, работают там только доброжелательные и профессиональные люди. Благодарю, Вас и Вселенную, за то, что изменили мою жизнь на 180 градусов.

Как я стал QA инженером

Теперь, когда моя цель достигнута, я готов рассказать, как же я стал QA инженером! Я работал сборщиком мебели и надорвал спину. Врачи сказали — или новая работа, или инвалидность. И вот мне в 36 лет понадобилось заново начинать жить с нуля, искать профессию без физического труда. Долго гуглил, думал, сомневался. В первую очередь хочу сказать спасибо за обратную связь от преподавателей (терпеливо объясняли мне, человеку далекому от IТ, непонятные моменты). Потом стажировка, реальный опыт, с которым легче устроиться. Успешно прошел собеседование и теперь я удаленный тестировщик в большом банке! И всё, чему учили, пригодилось, практика, теория, все задачи, которые я сейчас решаю на работе, отрабатывали вместе с преподавателями.

Школа практического инвестирования (School of Practical Investment)

Тренинг мне очень нравится!

Тренинг мне очень нравится! Материал преподносится в достаточно простой и понятной форме, что для меня очень важно, как новичку. Тренинг настолько информативен и полон, что на данном этапе добавлять ничего не надо. Как получаю доход, сразу плачу себе 20%. Составила личный финансовый план на 1, 2 и 3 года. Стала вести доходы и расходы уже целый месяц. Перестала бесконтрольно тратить деньги. Я заметила, что мое мышление и отношение к деньгам стало меняться. Появились деньги для инвестирования, стала читать книги про финансы Бодо Шефер, Робер Кийосаки, фильм «Секрет» (рекомендую к просмотру). Научилась правильно выбирать инструменты для инвестирования, составить свой инвестиционный портфель.

Хочу достичь пассивного дохода 500 000 р/мес

Получите 50 000 ₽ на покупку любого курса

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

Забрать 50 000 ₽

Отправить в WhatsApp

Нажимая на кнопку, я соглашаюсь с Пользовательским соглашением

Спасибо! Менеджер скоро свяжется с вами и расскажет, как воспользоваться промокодом.

7 Figma-плагинов для создания теней

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

Дарья Райт