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

Обновлено: 19.04.2024

В Фигме присутствует ряд инструментов, позволяющий создавать красивые дизайны. Если вы умеете использовать встроенные возможности системы, то сможете создать прототипы веб-сайтов и приложений, нарисовать иллюстрацию и векторную графику. Но сначала потребуется освоить базовое устройство сервиса figma. С чего же начать?

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

Базовые фигуры, Boolean Groups и Маски

Когда дело доходит до разработки, то нужно продумать план – как будет выглядеть будущий проект. Где будет находиться меню навигации, логотип, кнопки и так далее. После добавляем примитивы, их еще называют Shape Tools “Базовые фигуры”. Находятся они в верхней панели.

Опишем пункты, входящие в меню:

После этого появится еще три точки.

Start – устанавливает угол поворота объекта.

Sweep – делает разрез, прибавляя параметр Sweep, площадь становится больше. Пригодится, когда требуется создать круговую диаграмму.

Ratio – увеличивает объем в центре, создавая пустоту.

Polygon – создает треугольник, есть два дополнительных свойства:

Radius – делает углы круглыми

Count – прибавляет и уменьшает углы.

Star – звезда состоит из пяти острых углов, присутствуют три свойства: Radius, Count и Ratio (уменьшает или увеличивает площадь внутри Star).

Place Image – добавляет иллюстрацию в сервис. При нажатии открывается всплывающее окно, где выбираем одну или несколько картинок, удерживая клавишу ctrl.

В Figma присутствует такой инструмент, как Boolean Groups. В него входит группа из четырех пунктов, где доступно объединение объектов и вычитание одного блока из другого. Сделаем простой пример и покажем, как работает “Subtract Selection”. Нарисуем несколько иконок, которые находятся в верхней части мобильного устройства. В начале добавим “звуковой сигнал” (как у смартфона):

Сначала нарисуем один прямоугольник, его ширина 80 и высота 200, развернем его под углом 45 градусов и добавим окружность. Убедитесь, что она пересекает rectangle, как показано на картинке:

Также объект Rect должен находиться поверх Ellipse. Это легко сделать с помощью вкладки Layers. Выделим оба объекта и применим Subtract Selection, это значит, что мы хотим вычесть нижнюю часть от круга в пересеченной области.

В результате у нас получится половина Эллипса, а в слоях (Layers) образовалась группа с названием Subtract. Откройте её и сделайте копию Rect1. Дальше разверните скопированный Rect1, для этого в настройках установите угол 135 градусов, и переместите в положение пересечения круга. Последовательность действий показано на картинке:

Что осталось сделать, так это щелкнуть по всем элементам и повторно выполнить действия. Удаляем пересеченную область:

Если все правильно сделали, то получится вот что:

Создавая дизайн для смартфонов, вам потребуется некоторые объекты отмасштабировать. Чтобы с этим не возникло проблем, рекомендуем преобразовать полученный результат в растровую графику. Делается это кликом правой кнопкой по группе, затем выбирается Outline stroke.

После этого все слои объединяться и можно масштабировать объект. Мы реализовали тестовый пример, но для полноценного дизайна под смартфоны нам понадобится отдельный фрейм, для этого нажмем Frame и выберем iPhone 11.

Теперь прикрепим небольшую полоску высотой в 35 пикселей, чтобы она покрывала по ширине всю рабочую область айфона. Перенесем туда наш Subtract, предварительно сделав заливку (Fill) и добавив контур (Stroke).

Создадим второй ярлык, для этих целей применим еще один frame, переименуем его в template. Ширина и высота будет 200 пикселей. Отметим центр с помощью линейки. Делается это так: переходим в меню и выбираем View->Rulers. Появится линейка, нажимаем на Rulers и, удерживая кнопку мышки, перетаскиваем курсор на template. Добавляем треугольник, так, чтобы он располагался точно по центру. Полностью это выглядит так:

Откроем редактирование двойным щелчком. На углах появятся три точки, выполним перенос позиций точек и изменим координаты X и Y. Пример показан на скриншоте:

Стоит также изменить свойства, а именно установить значение Fill белого цвета, а Stroke черного. Скопируем получившийся результат и назовём PolygonBg. Его следует расположить ниже оригинального полигона, теперь захватим края копии и перетащим, увеличив размер.

Сгруппируем два слоя Ctrl+G и назовём Network. В группе нужно поменять цвет у PolygonBg на серый. В итоге мы получим готовую иконку. С помощью базовых фигур можно создавать набор новых иконок и применять их в своих проектах.

В завершение уменьшим размер новой иконки и перенесём на frame iPhone. Теперь приступим к созданию батарейки. Она будет состоять из двух квадратов, в центре которых молния. В прошлый раз, когда создавали треугольник, у нас сохранился frame template. Теперь мы используем его для рисования новых примитивов. Добавим два прямоугольника, один большой, другой поменьше. Сначала размещаем один, второй дублируем, перетаскиваем мышкой, удерживая клавишу alt.

После того, как готовы два блока, один уменьшаем и размещаем вплотную ко второму, потом выделяем их, а дальше нужно применить объединение. За это отвечает команда “Union Selection”:

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

Как видно на картинке, одна из частей выступает. Её нужно убрать. Сначала закроем её с помощью квадрата, и применим команду “Subtract Selection”.

Чтобы все части смотрелись как единое целое, нужно их выбрать и применить “Union Selection”. В итоге примитивы соединятся. Назовём группу “lightning”. Если присмотреться, то у горизонтального блока прямой край, а нужен угол. Дважды щелкаем по lighting, переходим внутрь контейнера и выбираем прямоугольник, открываем режим редактирования и делаем захват правого верхнего угла и вытягиваем его.

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

Осталось уменьшить размер и перенести к остальным ярлыкам на смартфоне. При изменении высоты и ширины в меньшую сторону, могут произойти дефекты, например, линии сохранят толщину, из-за этого качество изображения пострадает. Чтобы этого избежать, нужно перевести все в растровую графику. Для этого следует щёлкнуть правой кнопкой по объектам и выбрать “Outline Stroke”. После этого появится два слоя – один, Stroke (контур), второй – Fill (заполнение). Нам понадобятся оба. Выделяем, делаем resize, чтобы они подходили по размеру и перемещаем на фрейм смартфона.

Маски

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

Разрабатывая дизайн проекта, иногда появляется задача, добавить элемент поверх графики и сделать его прозрачным. Сначала рисуем rectangle и придумываем название, к примеру, RectBg. Сверху добавляем object, например, круг. Выбираем задний фон недавно созданного квадрата и нажимаем mask. Дальше в свойствах RectBg вместо цвета устанавливаем Gradient. Образец на скриншоте:

Когда требуется украсить дизайн, где часть фотографии выступает из-за границ, тогда используется и jpg, и png файлы. Сначала переместим изображение с рабочего стола и сверху наложим квадрат, который назовем FonRect, дальше применяем градиент radial и получаем:

Как видите, по бокам получился эффект туманности, сгруппируем наши слои и сверху разместим png файл лодки, которая была заранее вырезана из фото. Рисунок завершён:

Когда вам необходимо оформить логотип компании, где из круглого окна появляется представитель магазина, предлагающий оформить покупку. Для этих целей используют дубликаты. В начале нужно разместить человека в рабочую область. В интернете был подобран вариант рисованного персонажа с гаечным ключом. С помощью другого графического редактора мы превратили рисунок в png файл. Чтобы оформить холст иллюстрацией, нужно: нарисовать круг, задать ему цвет и разместить снизу картинки. Выбрав Ellipse, применяем маску.

Ранее заданный цвет исчез, а некоторые части изображения скрылись за границами. Чтобы вернуть color, нужно сдублировать маску и убрать её из дубликата, нажав повторно на инструмент. Дальше слегка расширяем границы у копии.

Теперь возьмём слой people 1 и тоже создадим дубликат. Изменения пользователь не увидит, все изображения по-прежнему будет скрыты, чтобы увидеть скопированный рисунок, нужно последние три слоя сгруппировать.

Механик полностью показан, делаем эффект будто он выглядывает из круга. Обрезаем картинку, для этого есть специальный инструмент, “crop image”.

По мере надобности в Ellipse 2 можно делать все, что угодно — менять цвета фона окружности, накладывать градиенты и так далее.

Перо: учимся работать с кривыми Безье и создаем серию иконок

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

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

Приведём простой пример и нарисуем фрукт “грушу”. Растительный продукт в основном состоит из изгибов поэтому “перо” будет кстати. Первым делом, создадим контур, добавив, точки. Когда делаешь зарисовку предмета, нужно, придерживаться натуры и ставить аккуратно “поинты”, чтобы в итоге получилось схожесть с оригиналом.

Ставим point, потом второй, третий и так далее в итоге у нас получится.

Теперь щелкаем по вектору, который у нас получился, чтобы перейти в режим редактирования и была бы возможность работать с точками. При редактировании появятся новые кнопки, одна из них “Bend Tool”. С помощью неё можно делать изгибы для этого выбираем точку и удерживаем клавишу Ctrl, чтобы активировать Bend Tool начинаем мышкой вести в любое направления.

Делаем закругленные края с каждой точкой. Верхнюю позицию, следует вогнуть внутрь груши, там будет кисточка. Чтобы некоторые маркеры переместить внутрь, при этом получив сгиб, нужно воспользоваться ”Бендом”. Создать изгиб, потом взять главный маркер и переместить на нужную позицию и выйдет необходимый результат. Для большей реалистичности следует придать цвет, это делается легко с помощью свойство Fill, выбираем объект и накладываем color.

Заключительный образец ниже, плюс кисточка.

Кривые бизье подходят для зарисовки иконок. Разумеется, чтобы вставить ярлык в свой макет достаточно запустить plugin “Font Awesome Icons” и выбрать подходящую шрифтовую иконку, но иногда может потребоваться создать что-нибудь оригинальное, отсутствующее в стандартном наборе. Инструмент перо отлично для этого подойдет.

Первым делом, создадим холст для рисования. Размер проставим 200 на 200 пикселей.

На холсте можно создать модели, к примеру, машинки и кружки.

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

Последнее действие, чтобы рисунок был похож на icons, требуется “Frame 1” полностью покрыть rectangle. У квадрата установить параметры fill белого цвета и stroke черного, после этого выполнить группировку и уменьшить размер 50×50.

Как работать с изображениями?

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

Png – с изначально удаленным фоном будет просвечиваться и показывать те блоки, которые при других форматах были бы скрыты.
Jpg – обычная картинка маленького размера, существенный недостаток — теряется качество при сохранении.
Gif – анимированная гифка. Проигрывает анимацию. Можно создать два фрейма первый будет главная страница, во второй вставить гифку. Установить связь между кадрами и при щелчке будет происходить событие, где во втором кадре начинает проигрываться анимация.

У image есть специальные параметры – ползунки, меняющие свойства: контрастность, тени и так далее. Данные пункты доступны только для jpg и png форматов у gif, откроется окно с ползунком, как у видео проигрывания анимации.

Список всех настроек:

Exposure – устанавливает яркость, плюс – светло, минус – темно.
Contrast – контрастность
Saturation – насыщенность, плюс – цвета более насыщенные, минус – пейзаж становится блеклым и даже черно-белым.
Temperature – плюс — эффект солнце желтоватый оттенок по всему фото, минус – зимний эффект, фото становится синим под цвет зимней стужи.
Tint – предлагается отрегулировать оттенок за основу взяв цветовую модель RGB. При плюсе пользователь получит красноватый оттенок, ближе к вишнёвому, при минусе — color станет зеленым.
Нighlights – выделяет подсветкой важные части фото.
Shadows – накладывает тени темные или серые.

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

Fill – изображение покрывает фигуру полностью, но при масштабирования часть файла обрезается.
Fit – картинка покрывает фигуру, при этом она отображается полностью во время масштабирования.
Crop – обрезание, иногда может потребоваться уменьшить размер передвинув границы, об этом написано в разделе “маски”.
Tile – покрывает фигуру одинаковыми снимками, Уменьшая первый кадр, количество копий увеличивается.

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

Эффекты Фигма для создания кнопок

Кнопки в программе делаются с помощью фрейма или примитивов. Существует цветовая палитра, которая накладывается поверх “button”. Параметр Fill умеет придавать объектам цвет и градиент. Для эффекта присутствует вкладка prototype, с её помощью устанавливается связь. Настроив свойства в сплывающем окне, при тестировании будет происходить плавный переход. Вот окна с реализацией прототипа.

Если посмотреть на скриншот выше, то здесь событие onTap, это связано с тем, что в настройках установлено iPhone 11. Если нужно изменить на событие onClick, для этого переходим в прототип и нажимаем “Show prototype settings”, после этого в разделе device выбираем в раскрывающемся списке устройство, можно установить “None” и тогда действия у связи прототипа сменится с onTap на onClick.

Дизайн-система: стили цвета

По умолчанию уже в программе заложен набор цветов, однако пользователь может добавить ряд новых. Заходим в свойство Fill, в боковой панели настраиваем нужные цвета, градиент и другую стилизацию, потом щелкаем по ярлыку “Style” и придумываем название, сохраняем. Если требуется создать раздел — прописываем название, косую черту и имя цвета.

Дизайн-система: стили текста

Создаем текст. Настраиваем размер шрифта, тип, стиль потом сохраняем и можно вызывать в любой момент, когда нужно произвести быструю стилизацию текста. Чтобы перенастроить уже созданные шрифты в разделе Text Style, щелкаем по соответствующей иконке и меняем опции.

Дизайн-система: компоненты

В figme присутствует возможность создать целые коллекции, и менять части интерфейса по мере надобности. Для этих целей есть компоненты. Чтобы сделать из блока компонент нажмите “Create Component”. Блок необходимо скопировать и вставить, копия является привязкой к основному компоненту. Дальше рисуем еще четыре элемента и превращаем их в компоненты, после выполненной работы у копии появится раскрывающийся список “Swap Instance”, там выбираем любой component.

Если посмотреть на картинку выше, то в Swap Instance помимо кнопок присутствуют “перо, шестерёнка и корзина”, это связано с тем, что ранее были добавлены иконки из “Font Awesome Icons” и преобразованы в компоненты. Иногда перед разработчиками стоит цель разбить на группы части интерфейса, чтобы например button и icons существовали отдельно друг от друга, для этого есть функция вложения, чтобы выглядело как папки с файлами. Выбираем компонент в слоях и правой кнопкой мыши переименовать “Rename”, а дальше придумываем название раздела, где будут содержаться части интерфейса. Существует быстрый способ это сделать, выбрать группу, удерживая клавишу shift, а потом “rename”. Дальше вписываем название, косую черту и добавляем два символа как показано на картинке.

Примерно, то же самое делаем и с метками. В итоге при очередном открытии “Swap Instance” будут отображены два раздела buttons и icons.

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

Привет! Меня зовут Евгений Шевцов, я руковожу UX-направлением в Usetech и на досуге веду телеграм канал "Мамкин Дизайнер", где рассказываю о жизни дизайнера и о фишечках в Figma.

Мы в компании ценим быстроту и оптимизацию процессов. Когда для продукта необходимо разработать UI Kit в Figma со всеми ее возможностями – работа может превратиться в рутину.

Сегодня расскажу, как с помощью стилей и дублирования компонентов создать 120 вариантов кнопок за минимальное количество времени.

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

Я ожидаю, что вы уже знакомы с функционалом Variants, если нет, то самое время узнать.

Документация и плейграунд:

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

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

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

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

Важно: собирайте компоненты на Auto Layout, чтобы все компоненты были «резиновыми»

Если вы используете Pro план и пользуетесь публикацией библиотек, то я рекомендую в названии главного компонента добавлять точку «.» или нижнее подчеркивание «_». Таким образом мы говорим figma проигнорировать компонент, чтобы в последующем избавиться от дублей.

Теперь необходимо сделать дубликат главного компонента и обернуть его еще раз в компонент. Называем компонент как нам необходимо и получаем вложенность.

Такая вложенность позволяет централизованно управлять всеми вариантами, например, если потребуется добавить иконку в кнопку, то добавить ее в главный компонент быстрее и проще, чем добавлять во все варианты.

Из-за блокировки Canva для российских пользователей за последние несколько дней мои знакомые из сферы маркетинга (и не только) не один раз задавали мне вопрос: «Не знаешь простого сервиса, чтобы быстро оформить пост, карточки для Телеграм, кейсы и т.д.».

Я никогда не пользовалась Канвой, не знаю никаких подобных сервисов, поэтому отправляю всех в Figma. Для меня это самый удобный инструмент.

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

Но проблема в том, что все очень занятые. Посмотреть любую обучалку по Фигме около 45 минут и потыкать нет времени. Да и, будем честны, многим просто лень разбираться с новым инструментом.

Поэтому я решила помочь не дизайнерам в создании простых постов-карточек и иных штук в Фигма без изучения редактора.

Делайте все по инструкции, и будут вам карточки / шаблоны / обложки / слайды — крч, что хотите.

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

Переходим на официальный сайт и регистрируемся. Здесь все, как и везде: нажимаем на кнопку Sign Up в правом верхнем углу, вводим email и пароль и создаем аккаунт. Можно поступить еще проще и войти через Google-аккаунт.
Далее создаем новый дизайн-файл, в котором и будем работать. Для этого нажимаем на «Newdesign file».

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

РАБОТА С ФРЕЙМОМ

РАБОТА С ТЕКСТОВЫМ СЛОЕМ

РАБОТА С ПЛАШКОЙ (ГЕОМЕТРИЧЕСКОЙ ФИГУРОЙ)

ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ

Фигма сама подсказывает, как правильно расположить элементы (где середина, когда элементы стоят на одном уровне). Можете облегчить себе задачу, добавив направляющие, на которые будете ориентироваться.

Чтобы включить линейки, нажмите вверху View — Rulers. Они появятся сверху и слева. Дальше с помощью зажатия мыши вытащите из них направляющие и установите на нужное место.

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

ПАНЕЛЬ СЛОЕВ

Слева вы увидите панель слоев. Там отображаются все элементы, с которыми вы работаете.

Новичку в Фигме достаточно знать следующее:

все элементы должны быть внутри фрейма;
слои можно менять местами путем перетаскивания мышью;
верхний слой перекрывает нижний (например, если вы хотите, чтобы плашка была под текстом, перетащите слой с фигурой под слой с текстом).

1. Включаем инструмент Frame с помощью горячей клавиши F или, кликнув, по значку с клеткой в левом верхнем углу. Сбоку видим уже заранее созданные фреймы (рабочие области) популярных разрешений. Выберем для примера Social media — I******** Post.

3. Еще у карточки можно поменять цвет. Для этого нужно нажать в разделе Fill в панели справа на слой с цветом и выбрать нужный из палитры.

4. Теперь добавим текст. Для этого выбираем инструмент Text с помощью горячей клавиши T или кнопки с иконкой T в верхней панели. Далее кликаем на экране и пишем текст или вставляем заранее скопированный текст из буфера обмена.

5. С текстом можно делать все, что угодно: менять размер, шрифт, цвет, начертание (жирность, курсив и т.д.), выравнивание, длину и высоту текстового слоя. Все инструменты для этого в панели справа (см. скриншот по работе с текстовым слоем).

Можете разбить свой текст на несколько текстовых слоев и размещать их, как вам нужно.

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

Градиент – заметный «долгоиграющий» тренд в веб-дизайне. Его активно используют «Яндекс» (на скриншотах выше) и другие компании – Instagram, Wildberries и пр.

Создаем простой градиент в «Фигме»

Логинимся или создаем новый аккаунт в «Фигме». Затем выбираем или создаем объект – фрейм, фигуру или текст, к которому мы хотим добавить градиент.

Для примера создадим новый фрейм: жмем кнопку с решеткой или букву F и растягиваем фрейм до нужной величины (как альтернатива – выбираем необходимый размер фрейма в боковом меню).

Для управления цветовым фоном любого объекта необходимо кликнуть на него, тогда в боковом меню появится строка Fill. Она содержит информацию о текущем цвете фона и его прозрачности. Чтобы изменить фон, необходимо щелкнуть на иконку цвета.

Варианты заливки в «Фигме»:

Solid – сплошная заливка;
Linear – линейный градиент;
Radial – радиальный градиент;
Angular – угловой градиент;
Diamond – градиент в виде кристалла;
Image – вставка картинки.

По сплошной заливке и вставке картинки и так всё понятно. Рассмотрим каждый вариант по созданию градиента.

Линейный градиент

Выбираем в списке Linear – линейный градиент. На объекте появляются две точки, которые можно перемещать для создания более плавного или резкого перехода. Можно выбрать любое нужное количество цветов для градиента. Для добавления еще одного цвета просто щелкаем на градиентной линии. Чем больше точек, тем более плавным будет переход.

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

Радиальный (круговой) градиент

Не меняя оттенки, посмотрим, как будет выглядеть градиент Radial из списка.

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

Угловой градиент

Градиент Angular создает острый угол, вокруг которого образуется градиент. С помощью круга в центре можно управлять расположением угла и цветов вокруг него.

Градиент в виде кристалла

Diamond создает в центре распыление одного из выбранных цветов в виде кристалла. С помощью направляющих внутри него можно изменять его размеры.

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

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

Нажать на кнопку меню сверху слева, как показано на скриншоте. Выбрать File -> Place Image и в появившемся окошке найти на вашем компьютере нужную картинку.
Воспользоваться сочетанием клавиш Ctrl+Shift+K и точно так же выбрать в окошке вашу картинку.
Перетащить картинку из папки прямиком в рабочую область «Фигмы».

После того, как картинка появилась в рабочей области «Фигмы», мы можем перетащить ее внутрь созданного фрейма. Если разрешение картинки больше разрешения фрейма, то она будет выглядеть обрезанной. Чтобы подогнать размеры под фрейм, достаточно потянуть за уголки картинки и дотянуть их до уголков фрейма. Для удобства можно тянуть уголки, зажав кнопку Shift, тогда сохранятся пропорции и не нужно будет тянуть каждый уголок по отдельности.

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

Приступаем к наложению градиента. Для этого создаем новую фигуру «Rectangle» с помощью горячей клавиши R или нажав на квадрат в меню сверху.

Выбрав Rectangle, мы добавляем его на наш фрейм. Можно сделать эту фигуру любых размеров, растянув его затем до размеров фрейма.

У созданной фигуры меняем описанным уже способом заливку с Solid на любой из понравившихся градиентов. Стандартное решение у дизайнеров и создателей контента – вариант Linear. Он подходит практически для любых макетов. Выбираем у него цвета, их прозрачность и направления градиента, как нам покажется нужным.

Сложные градиенты в «Фигме»

Для создания более сложного градиента можно воспользоваться бесплатным плагином Mesh Gradient для «Фигмы». Установите его, нажав «Install» в правом верхнем углу, а затем выберите фигуру и запустите плагин в меню.

Плагин имеет различные настройки для создания градиентов. При открытии вы увидите градиент и четыре точки на нем, так называемые «Mesh points». Эти точки позволяют выбрать дополнительные цвета и направления для градиента. Плагин позволяет разместить на поле до 16 точек. Чтобы добавить дополнительный цвет, нужно нажать на точку и выбрать цвет.

Ниже слева располагаются основные цвета градиента — по одному на каждый угол.

При перетаскивании Mesh points создаются более сложные направления цветов в градиенте (по сравнению с возможностями встроенных инструментов).

Кнопки в пункте «Control Visibility» управляют появлением Mesh points и направляющих линий. Это сделано для удобства создания новых направлений в градиенте. Выбрав параметр «None», можно посмотреть на готовый градиент прежде, чем сформировать его.

После создания нужного эффекта нажимаем «Generate». Таким образом вы сформируете готовый объект в виде квадрата с созданным градиентом. Остается только переместить его на картинку и уменьшить прозрачность для красивого эффекта или использовать как самостоятельный дизайн.

Webgradients для подбора идеальных сочетаний цветов градиента

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

Полагаю, статья помогла вам не только открыть новый инструмент для работы с креативом, но и добавила несколько идей в «копилку».

В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров

Эффект матового стекла в «Фигме» – это тренд. Для наглядности сделаем такой эффект на примере простой фигуры. Создадим новый фрейм и поместим на него какую-нибудь картинку или иконку, чтобы эффект стекла был заметен.

Создаем новый фрейм в «Фигме»

Добавляем во фрейм любую фоновую картинку

Задаем параметр Background blur фигуре, которая будет с эффектом стекла

Затем накладываем тени на наш объект в том же разделе Effects – жмем плюсик и добавляем Inner Shadow три раза с разными параметрами.

Задаем три раза эффект Inner Shadow с разными параметрами

С тенями можно «играться» по-разному, в зависимости от того, какой эффект нужен. В данном случае получается такой результат:

Как сделать эффект стекла в «Фигме»

Как сделать эффект неонового стекла

Добавляем эффект Background blur

Теперь задаем внутреннюю тень (Inner Shadow) три раза с разными параметрами.

Добавление внутренних теней на фигуру

Затем добавляем еще три параметра Inner Shadow.

Добавляем 7 эффектов с внутренней тенью на фигуру с разными параметрами

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

Красиво и современно

Как сделать голографический эффект

Создаем новый фрейм, на нем располагаем любую фигуру. Справа в блоке Fill заполняем фигуру радиальным градиентом – выбираем Radial.

Заполняем фигуру радиальным градиентом

Добавляем цвета в градиент

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

Затем в блоке Fill жмем плюс и создаем еще одну заливку цветом. Способ заливки выбираем Angular, затем жмем на капельку рядом (Blend mode) и выбираем Difference.

Измененяем метод наложения (blend mode)

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

Меняем метод наложения (blend mode) на Difference

Затем дублируем предыдущий шаг, только в Blend Mode ставим Screen. В результате у нас получится 3 разных цветовых слоя в блоке Fill.

Заполняем фигуру тремя разными градиентами в блоке Fill

В целом мы уже получили голографический эффект, но можно добавить немного шума с помощью плагина Noise. Он устанавливается бесплатно из Community «Фигмы».

Выбираем из списка плагинов Noise, подбираем необходимые для себя параметры, жмем галочку и получаем готовый слой с шумом.

Добавление шума на фигуру

Накладываем его на наш эффект, уменьшаем прозрачность до 50 %.

Итоговый результат – голографический эффект с шумом

Как сделать анимацию в Фигме – простая инструкция

Готовые текстуры для «Фигмы»

Toptal – сервис с готовыми паттернами для «Фигмы»

Также Community «Фигмы» предлагает для установки плагин Pattern Hero, в котором можно создать разнообразные текстуры самостоятельно.

Для этого достаточно на фрейме создать любую фигуру – квадрат, круг, треугольник или что-то другое, добавить ей заливку, градиент и тени, если необходимо. Затем открыть в меню Plugins -> Pattern Hero.

Открытие плагина Pattern Hero в «Фигме»

Откроется окошко с созданием паттерна из созданной нами фигуры. Нам предлагается на выбор пункты: Rows (Строки), Columns (Столбцы), Padding (Отступ), Repeat Nodes (Повторение фигуры), Shuffle Nodes (Расположение фигур вразброс, если используем для создания паттерна несколько фигур), Group Nodes (Сгруппировать фигуры).

Плагин Pattern Hero для «Фигмы» в работе

После выставления необходимых параметров жмем Create Pattern. В данном случае у нас создалась группа из кружочков с 10 строками, 10 столбцами и расстоянием 5.

Создание повторяющихся фигур с помощью Pattern Hero

Затем у этой фигуры можно изменить размер, положение, поворот, цвет в зависимости от того, какого эффекта хочется достичь.

Автор статьи

Куприянов Денис Юрьевич

Юрист частного права

Страница автора

Читайте также: