Как сделать тень в figma

Как сохранить только тень в Фигме

Итак, если у вас стоит задача получить только от объекта, не сохраняя сам объект, вам потребуется применить некоторые «костыли», потому что по умолчанию Figma так не умеет.

В зависимости от того, что вы хотите сохранить в итоге, зависит порядок действий.

Сохранить только тень в PNG/JPG/PDF (Растровое изображение)

Исходный элемент в виде произвольного вектора:

Конвертация в растр

Совмещенные элементы

Логическое вычитание

Растровая тень

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

SVG (Векторное изображение)

С вектором добиться нужного эффекта сложнее.

Исходный вектор

Костыль первый:

Коррекция тени

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

Костыль второй:

Источник

Эффекты в фигме: внешняя и внутренняя тень, размытие слоя и фона

В этом уроке вы узнаете про эффекты в фигме. Если у вас возникали вопросы, как добавить внешнюю или внутреннюю тень, как сделать размытие фона или слоя в Figma, то вы попали по адресу.

Как сделать внешнюю тень в фигме

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

Если хотите изменить параметры тени, то нажмите на иконку солнца. Можно изменять значение тени по оси X и Y. Значение «Blur» означает размытие тени. Значение «Spread» означает распространение. Также можно изменять цвет и прозрачность, как показано на скриншоте выше.

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

Чтобы добавить внутреннюю тень к любому объекту, выберите его и нажмите на «+» напротив надписи «Effects». Вместо значения «Drop shadow» выберите из списка «Inner shadow», что переводится как внутренняя тень. Изменять параметры тени можно также как и у внешней тени, нажав на иконку солнца.

Как сделать размытие слоя в фигме

Чтобы добавить размытие слоя, объекта или изображения в фигме выберите нужный слой. Справа, напротив надписи «Effects» нажмите плюс. Кликните на пиктограмму с солнцем, чтобы увеличить или уменьшить размытие слоя.

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

Чтобы добавить размытие фона в фигме, нажмите на иконку плюса напротив надписи «Effects». Выберите из списка Background blur. После этого внизу надписи Fill уменьшите прозрачность. Например поставьте 10%. В этом случае размытие фона будет работать.

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

Почему у некоторых не работает функция Backround blur? Просто потому, что вместо изменения прозрачности внизу надписи «Fill» они изменяют прозрачность внизу надписи «Layer». Нужно изменить прозрачность именно в заливке, тогда все будет работать отлично.

Заключение

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

Источник

Тени в интерфейсах: зачем они нужны и как их рисовать в Figma

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

Meery Mary для Skillbox Media

Мария Булина

Дизайнер в Wildberries. Работала в «Бюро Горбунова», где участвовала в создании интерфейсов сайта и блога компании Mindbox, веб‑системы Gismeteo, сайта и приложения сервиса «Руки».

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

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

Как понять, нужны ли тени в вашем интерфейсе

Стоит ли использовать тени, зависит от задачи и общей стилистики:

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

Настройки тени в Figma

В Figma, как и в любом другом графическом редакторе, есть два вида теней: внутренняя и внешняя. Их можно настроить в блоке Effects:

Чтобы настроить тень, нажмите на иконку :

X — смещение тени по вертикали.

Y — смещение по горизонтали.

Также у тени можно изменить цвет и непрозрачность.

Тень в интерфейсах

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

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

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

Если источник в верхнем левом углу, X и Y должны быть больше нуля. Если просто сверху — X равен нулю, а Y больше нуля:

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

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

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

Оттенок объекта в тени

В реальном мире тени не бывают чёрными — они всегда содержат оттенки окружающих предметов. Поэтому чтобы тень была более мягкой и естественной, добавляйте в неё оттенок своего элемента:

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

Если элемент жёлтого цвета, в тень стоит добавить оттенок оранжевого. Иначе она будет выглядеть грязно:

С помощью внутренней тени можно показать объём элемента. Например, можно сделать вдавленное поле ввода или дополнительно привлечь внимание к важной кнопке.

Тень в иллюстрации

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

С реалистичными изображениями сложнее. Часто тень на них нужна, чтобы предмет был визуально устойчив.

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

Книги и видео, которые помогут узнать больше о тенях

Источник

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

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

Как сделать красивую тень в фигме

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Источник

«Как сделать в Фигме…?»: отвечаем на популярные вопросы пользователей

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

Я ввела в поисковики Гугл и Яндекс запрос: «Как сделать в Фигме», чтобы понять, какие вопросы интересуют пользователей. Вот, что у меня получилось:

Я взяла из результатов выдачи совпадающие запросы в обеих поисковых системах и несколько рандомно (на свой вкус). Вот, что у меня получилось:

С содержанием публикации определились. Поехали!

Как сделать в Фигме текст полукругом (по кругу)?

Для расположения текстового слоя по кругу в Фигме понадобится специальный плагин arc.

Где искать плагины и как их устанавливать, вы можете прочитать здесь.

Как сделать в Фигме пунктирную линию (пунктир)?

Рассмотрим вопрос, как сделать в Фигме пунктирную линию, на примере фигуры — прямоугольник. Для других фигур (треугольник, круг, линия) алгоритм создания пунктира будет тем же.

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

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

Также вы можете сделать свою кнопку прозрачной (поставьте значение 0 в поле с процентами) или бесцветной (удалите слой с цветом, нажав на «—»).

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

Подробнее о работе с плагинами вы можете узнать здесь.

Также я добавила к своей кнопке тень. Как это сделать, смотрите ниже.

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

Для создания градиента в Фигме нужно поработать с разделом Fill бокового меню.

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

Линейный градиент в Фигме

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

Виды доступных градиентов в Фигме:

Как сделать в Фигме сетку?

Сетка в Фигме — это вспомогательный элемент, который помогает вам структурировать свой макет и выстраивать стройную композицию. В Фигме вы можете создать три вида сетки:

Для создания сетки нажмите «+» в разделе Layout Grid. По умолчанию создастся сетка Grid c квадратиками 10х10 px.

Grid

Кликнув по строке сетки, вы сможете настроить величину клетки, цвет и прозрачность.

Кликнув по типу сетки, вы сможете выбрать другой — колонки или строки.

Columns

В колонках настроек куда больше. Здесь вы можете менять:

Rows

Здесь почти те же настройки, что и у колонок, только:

Можно сделать несколько слоёв сетки из разных видов и с разными настройками и создать свою суперсетку для уникальной композиции.

Ещё раз! Сетка — вспомогательный элемент для выстраивания композиции. Она не является частью макета, поэтому её можно в любое время выключить. Для этого нажмите сочетание клавиш shift + alt + 4. Включается сетка этой же командой.

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

Теперь, как и обещала, рассказываю как сделать тень в Фигме. Всё довольно просто:

Как сделать в Фигме маску?

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

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

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

Надеюсь вам была полезна статья. Если остались вопросы, не стесняйтесь задавать их в комментариях 🙂

Источник