Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>25 июл 2025</li>

3 <li>0</li>

4 </ul>Рассказываем, как разнообразить вёрстку с помощью стандартных средств графического редактора.

5 Иллюстрация: Полина Честнова для Skillbox Media

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

7 Если вы хотите добиться определённого настроения в вёрстке, стандартных<a>теней и размытия</a>может оказаться недостаточно. В этом вам помогут продвинутые эффекты, которые можно создать в Figma без дополнительных программ.

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

9 Эффект глитча достигается за счёт смещения красного, синего и зелёного каналов<a>RGB</a>. Благодаря этому возникает ощущение, что картинка будто испорчена и её цвета исказились из-за программной ошибки.

10 В Figma этого эффекта можно добиться с помощью режимов наложения: Hue, Screen и Multiply.

11 1. Создайте фрейм и добавьте в него любую фигуру. Например, звезду.

12 2. Внутри фрейма и поверх звезды добавьте прямоугольник. В настройках заливки укажите чёрный цвет, затем нажмите на иконку и укажите Hue.

13 3. Скопируйте этот чёрный квадрат, в настройках заливки укажите красный цвет (FF0000), затем нажмите на иконку и укажите Screen.

14 4. Создайте группу из двух квадратов и фигур и сделайте её копию.

15 5. В копии группы у цветного слоя вместо красного цвета укажите сине-зелёный (00FFFF).

16 6. У обеих групп в настройках Layer укажите Multiply.

17 7. Сместите звёзды в каждой группе, чтобы возник эффект глитча.

18 Чтобы не делать всё каждый раз заново, этот эффект можно превратить в <a>компонент</a>и использовать его с одинаковыми настройками с любыми картинками:

19 1. Создайте пустой фрейм, нажмите на него правой кнопкой мыши и выберите Create component или нажмите сочетание клавиш Ctrl (⌘) + Alt (⌥) + K.

20 2. Выделите любую картинку, в настройках Fill кликните на Image и нажмите Ctrl (⌘) + С. Затем выделите ваш компонент и нажмите Ctrl (⌘) + V.

21 3. Удалите фигуры в группах глитча и вместо них добавьте копии ваших компонентов.

22 4. Сместите копии относительно друг друга, чтобы возник эффект глитча.

23 5. Чтобы заменить картинку, выберите любую другую и сделайте с ней то же самое, что и в пункте 2.

24 6. Если вы хотите изменить видимую область, выберите ваш компонент, в блоке Fill кликните на превью картинки и в появившемся меню вместо Fill выберите Crop. В этом режиме вы можете менять размер и положение картинки внутри фрейма.

25 Если будете использовать Crop, то всегда масштабируйте копии компонента пропорционально, иначе картинка растянется.

26 Если у вас был компьютер или игровая приставка в середине нулевых, вы наверняка застали компакт-диски. Их обратная сторона переливалась от окружающего света, и за счёт этого поверхность выглядела красиво. Тот же эффект можно воспроизвести и в Figma с помощью<a>градиентов</a>и эффектов наложения Difference и Screen.

27 Этот эффект делается в два этапа: круг с цветным градиентом и дополнительные.

28 1. Выпишите по очереди все цвета, которые будут внутри цветного круга. Например, вот эти:2AD0CA,E1F664,EFB0FE,ABB3FC,5DF7A4,58C4F8.

29 2. Создайте круг и в свойствах заливки вместо Solid укажите Radial. Над цветным полотном появится ещё одна цветная полоска - она отражает текущие цвета градиента и позволяет их редактировать.

30 3. По очереди добавьте все цвета, которые вы выписали в документ. На цветной полоске они должны стоять равномерно. Чтобы добавить цвет на градиент, нажмите на любое свободное место между цветами внутри полоски.

31 4. На самой фигуре есть образцы цветов и линия с белыми точками. Зажмите одну из точек и перетащите её на край фигуры - то же самое сделайте с другой. В результате линия должна стоять под углом примерно 45 градусов. При необходимости скорректируйте положение цветов прямо на фигуре.

32 1. В настройках заливки (Fill) нажмите на плюс и у появившегося слоя укажите непрозрачность в 100%.

33 2. Нажмите на образец цвета и в появившемся окне вместо Linear выберите Angular.

34 3. По очереди добавьте на градиент чёрные и белые цвета - их должно быть шесть. Все цвета должны располагаться на градиенте равномерно.

35 4. Нажмите на иконку и укажите Difference.

36 5. Выделите получившуюся чёрно-белую заливку. С помощью команд Ctrl (⌘) + C и Ctrl (⌘) + V и скопируйте её в ту же фигуру, чтобы у неё стало три заливки.

37 6. Нажмите на образец цвета новой заливки, нажмите на иконку и укажите Screen. Эффект готов.

38 Чтобы каждый раз не делать всё это заново, создайте стиль из получившейся заливки - его можно использовать в других фигурах как заливку или обводку.

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

40 Этого эффекта в Figma можно добиться с помощью градиентов, и делается он в три этапа: плашка с рамкой, дополнительный свет и внешнее освещение.

41 <ul><li>Создайте любую фигуру. Лучше всего для неоновой плашки подходит квадрат или прямоугольник со скруглёнными углами.</li>

42 <li>Нажмите на образец цвета заливки этой фигуры и в появившемся окне вместо Solid выберите Linear.</li>

43 <li>Настройте градиент: вместо первого цвета укажите 3A81BF с непрозрачностью 8%, а вместо второго - 261E33 с непрозрачностью 3%. Точки получившегося градиента перетащите на противоположные углы фигуры.</li>

44 <li>В настройках обводки (Stroke) нажмите на плюс и укажите толщину обводки в 35 пикселей.</li>

45 <li>Нажмите на образец цвета обводки и в появившемся окне вместо Solid выберите Linear.</li>

46 <li>Равномерно расположите на градиенте следующие цвета и укажите их непрозрачность: FB37FF - 100%, 9B6FEE - 0%, 7B7FEA - 0%, 18B2DE - 100%.</li>

47 <li>В блоке Effects нажмите на плюсик. У появившегося эффекта вместо Drop shadow укажите Layer blur. Нажмите на иконку рядом с ним и задайте размытие 6.</li>

48 </ul>1. Скопируйте получившуюся фигуру.

49 2. В новой фигуре удалите заливку фона, толщину обводки - 35 пикселей, а в настройках Layer blur вместо 6 укажите 69.

50 3. Скопируйте предыдущую фигуру и в настройках обводки укажите толщину в 1 пиксель, а в блоке Effects в настройках Layer blur вместо 69 укажите 1.

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

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

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

54 1. Создайте на макете фрейм.

55 2. На правой панели нажмите плюс в пункте Effects и вместо Drop Shadow выберите Glass.

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

57 4. Также в эту стеклянную плашку можно поместить неон - для этого выделите плашку, нажмите по ней правой кнопкой и выберите Frame selection (Ctrl (⌘) + Alt (⌥) + G). Добавьте на фрейм эффект стекла и скруглите ему углы.

58 <a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>