Пробую в Figma работать с эффектами слоя

Решил поэкспериментировать с «эффектами» в Figma. Попробую помучить объект «Text».

Существует множество вариантов стилевого оформления в CorelDraw, огромное множество в Adobe Illustrator (основная программа для выдумывания логотипов), масса стилевых оформлений для Adobe Photoshop. Для Figma мне что-то ничего особенного не попадалось. Либо не там искал, либо… Скажем так, Figma, на сегодняшний день, имеет узкую направленность – сайты, интерфейсы программ. Это сфера, где текст должен быть просто текстом, его задача – передача информации. Любое его декорирование, любое украшательство всегда ведёт к осложнению восприятия информационной составляющей. Но всё ж любопытно, чего могут эффекты и стили в Figma…

Итак, редактор векторной графики Figma позволяет мне создавать для контура:

• Заливку (Fill) хоть сплошную одноцветную (Solid), хоть градиентную (Linear), хоть картинкой (Image);
• Обводку (Stroke) разной толщины в трёх вариантах: снаружи контура (Outside), внутри (Inside) и из центра линии контура (Center), и двух видов: сплошную (Solid) и пунктирную (Dash);
• Эффекты – они же, по сути, стили (Effects), 4 вида, из которых здесь мне наиболее интересны 3: отбрасываемая контуром тень (Drop Shadow), внутренняя тень (Inner Shadow) и эффект размытия (Layer blur). (Четвёртый эффект – размытие нижележащего объекта, на мой взгляд, не относится к собственному оформлению контура.)

Вот так, не густо…

Обводка (Stroke)

Может располагаться относительно линии контура внутри, по центру и снаружи. Имеет произвольно задаваемую толщину в пикселях. Может окрашиваться монохромно, градиентом и даже рисунком. Возможна прозрачность. Может осуществляться сплошной линией, пунктирной с задаваемыми свойствами (длина штриха и длина пробела), иметь варианты прорисовки на углах и концах.

Неожиданный вариант обводки.

Увы, не может иметь разной толщины в разных участках. Есть любопытная программная фишка – возможность создать для одного контура несколько обводок, но не реализована на полную мощь! Обводки могут иметь только разный окрас, но их толщина, положение, вид – только один для всех. То есть, вышележащая линия полностью скрывает нижележащие, что обессмысливает эту возможность. Единственно для чего это можно было бы использовать – задать для нижней обводки вместо цвета картинку, а для верхней цвет с прозрачностью. Это затонировало бы цветом нижележащую картинку. Больше ничего придумать не могу.

Такой объект можно было бы создать, применяя к объекту обводки разной толщины. Но в данный момент я смог создать такое, только последовательно накладывая друг на друга 4 копии «Текста». У каждой нижележащей копии ширина обводки на 2 пикселя больше и на 20% меняется яркость.

А может проблема в бесплатной версии? Было бы интересно узнать у обладателей платной версии Figma, у вас тоже самое? Может ответите в комментариях?

Внутренняя тень (Inner Shadow)

Тени тенями зовутся скорее по традиции. Ничего же не мешает наложить «тень» какого угодно цвета, да хоть белого. При этом на объекте создаётся эффект блика. При заметной обводке блик будет хорошо читаться. При наложении с тёмным цветом – это будет смотреться действительно тенью от той же обводки, создаст эффект вогнутости.

Один и тот же «Текст» с Inner Shadow разного цвета.

Неплохой вариант для псевдо-3D.

Падающая тень (Drop Shadow)

Как нам становится понятно из названия, это тень, которая падает… Хотя зависит это исключительно от того какие цвета вы зададите для этой «тени» и какую степень размытия (Blur).

Падающая тень может быть применена несколько раз. Например, в четвёртом варианте использовано две тени – «верхняя» белая и под ней чёрная.

За объектом формируется его «тень», а вернее его копия, с учётом наружной обводки, если таковая есть. В случае нулевого размытия и 100% непрозрачности, эта копия уже не смотрится как тень, а воспринимается, как элемент декорирования. Она может быть смещена относительно исходного объекта на заданное количество пикселей по осям X и Y (в положительных значениях – вниз и/или вправо, в отрицательных вверх и/или влево).

А вот теперь, печаль моя… Разработчики Figma добавили важное свойство для тени – расползание (Spread), увеличение этой тени, как от точечного источника света. Но работает это свойство исключительно с родными фигмовскими примитивами! Для всяческих кружочков, прямоугольничков и прочих звёздочек, созданных в Figma расползание тени срабатывает. А вот для всего прочего: текст, кривые, объединённые объекты, группы – свойство тени «Spread» остаётся не активным. Даже если взять родной фигмовский примитив, сделать ему расширяющуюся тень, а потом перевести его в кривые, тень автоматически теряет своё расползание, а программа грустно информирует на английском языке, что данное свойство не поддерживается для векторов…

Тень можно имитировать подложив под объект его копию, добавив ей размера наружной обводкой и размыв.

Или это опять издержки бесплатного сыра бесплатной версии? Снова обращаюсь к обладателям платной версии, у вас также? Не активно Spread хоть для внутренней, хоть для внешней тени на кривых? И вы за это безобразие ещё и заплатили?

Размытие слоя (Layer blur)

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

Результат интенсивного применения Layer blur к группе эллипсов.

Вот несколько вариантов оформления текстового объекта «Текст», полученных мной в результате смешивания всех стилевых свойств.

P.S. Единственно, прошу учесть, тех кто вдохновится возможностями Figma, вся эта красота пригодна только для редактора Figma. При передаче их в другой редактор или для вёрстки веб-страницы, эти картинки должны быть растрированы. То есть даже в векторном формате SVG их не следует сохранять, результат будет не предсказуем. Только растр!