Это мой первый гайд на лолзе, вроде всё объяснил нормально, если нужно что-то дополнить - пишите в комменты. Итак, начнём Часть I. Ресурсы Безусловно, главный плюс Figma - вкладка Commutity. Там можно найти практически любые градиенты/мокапы/ресурсы для вашей графики. для примера, кину несколько ссылок на ресурсы, которыми пользуюсь я: https://www.figma.com/community/file/1073065932329832412 | 300 бомбезных градиентов, также есть несколько примеров использования https://www.figma.com/community/file/1015485067395949509 | много 3d значков различных приложений, достаточно полезно https://www.figma.com/community/file/985826182553055857 | 16 абстрактных фигур, которые смело можно использовать в графике https://www.figma.com/community/file/1075642035644870862 | 16 3d эмодзи и много дополнительных 3d значков https://www.figma.com/community/file/885997973387521809 | смачные паттерны, которые смачно дополнят фон https://www.figma.com/community/file/860753592237372239 | огромная куча паттернов, которые заметно упростят жизнь https://www.figma.com/community/file/992144378612759941 | много ресурсов из дискорда. От значков до цвета и это ещё далеко не всё, можете поискать ещё больше по ключевым словам: free 3d Icons, patterns, gradients, backgrounds Часть II. Создание полотна В главном меню жмём "New Design File" Перед нами появляется интерфейс программы. Всё что нам нужно - выбрать инструмент Frame слева сверху, либо нажать F Далее просто выделяем нужную область (советую выбирать размер 1920x1080, 1000x1500 или 1500x1000) готово, теперь можно создавать шедевры и толкать их по 1 рублю за штуку:) Часть III. Фон Фон рекомендую делать из готовых элементов. Просто совмещаем их и получаем красоту. Для примера я взял 2 файла с вкладочки community. Ctrl+C, Ctrl+V, готово. Главное выделить весь объект. И ещё одно: если он выходит за рамки полотна, переместите его в группу Frame 1, как показано на гифке далее добавляем градиент на задний план я кинул чёрный фон, но вы можете взять абсолютно любой, в том числе второй градиент или просто png картинку К спизженным позаимствованным фигурам можно добавить тень, так они будут выглядеть чуть более уверенно. Или можно вовсе их размылить На этом моменте можно закрыть фигму и пойти апать Мортиса на 25 ранг... А можно продолжить и поднимать хорошие деньги на дизайне. Выбор за вами)) Часть IV. Прямоугольники Тут всё просто. Для начала выбираем инструмент Rectangle и простым движением мыши создаём прямоугольник. Кстати, с зажатым Shift всегда будет получаться идеальный квадрат 1:1 Углы можно скруглить, для этого достаточно потянуть за точку, как показано на гифке. С зажатым Alt скругляться будет только один угол Чтобы получить полу-прозрачный прямоугольник, измените его прозрачность на 40-50% и в панели Effects выберите Background blur. Поставьте его на 10-16. Также не лишним будет слегка поменять его цвет. Хотите скопировать прямоугольник? Ctrl+C Ctrl+V в помощь) Оранжевые полоски показывают совпадения в координатах, что поможет поставить объекты ровно. Для того чтобы сделать полоску с процентами, достаточно взять 2 прямоугольника и на одном из них уменьшить прозрачность Прямоугольники готовы, переходим к тексту и значкам. Часть V. Текст Берём инструмент "Text", рисуем подобие прямоугольника и пишем туда, что захотим. Только про политику ничего не пишите, придут ребята в форме и отправят суток на 15 xD справа есть панель настройки текста. Здесь есть вся библиотека шрифтов Google Fonts. Я обычно пользуюсь шрифтом google sans regular, но как ни странно, его нет в библиотеке Google Fonts. Если надо, ищите данный шрифт в других источниках Если вам кажется что слова расположены слишком свободно, измените цвет на чёрный измените расстояние вертикального отступа, как показано на гифке. Думаю, не стоит объяснять как сделать прозрачный текст, в 3 раз уже скучно Часть VI. Значки Конечно, значки можно искать в фигме, но есть сайт с абсолютно любыми 2d значками. https://icon-icons.com/ru/ Просто скачиваем svg и перетаскиваем в фигму Цвет svg значка можно менять. Можно даже добавить градиент, но я возьму просто белый с прозрачностью 20 Для того чтобы встроить значок в прямоугольник, нужно скопировать его в png, удалить или скрыть оригинал и обрезать изображение во вкладке Fill. Всё есть на гифке Таким образом можно встроить практически любую фигуру Часть VI. Лучики Блики могут слегка улучить ваш баннер и превратить его из ужасного в просто плохой Для того чтобы их создать, жмём пкм по квадрату и выбираем Ellipse. Далее добавляем радиальный градиент, как у меня и делаем переход от цвета баннера 100% до цвета баннера 0%. Также сделайте цвет чуть светлее После этого можете размещать их, главное выше остальных слоёв Также, рекомендую сделать их более прозрачными. Как это делается? Не, в 4 раз говорить не буду Часть VII. Экспорт Тут всё просто. Выделяем Frame 1, жмём справа на вкладку Export и тыкаем на Export Frame 1. Выбираем куда сохранить и готово. Если этот гайд зайдет, я напишу вторую часть где затрону другие фишки данного софта. Благодарю за просмотр)