Как вырезать контур в фигме
2 способа как обрезать картинку в Figma
Привет! Это мой урок для начинающих дизайнеров. Возможно будет для кого-то полезным. В этом видео я наглядно покажу как можно обрезать изображение в фигме. Без воды и по делу на обычном языке и на живых рабочих примерах!
Давайте честно: всем надоели корпоративные худи и футболки, у каждого их уже по несколько штук. Мы решили: хватит худи! Вместо них будут кроксы. Такое сложно представить в любой технологический компании, и уж тем более в банке.
Уже 15 лет мы развиваем ВКонтакте в духе времени — и сейчас время требует качественного видео, высоких скоростей и ML-технологий.
Подробнее о конфликте международной школы робототехники «Лига Роботов» и ее бывшим «партнером» — Павлом Баскиром. Какую роль обычный фильм может играть в споре, на что нужно обращать внимание при поиске партнера в бизнесе и к чему может привести отказ вести мирный разговор без вмешательства суда.
И больше выглядят как «бред», который приносит выгоду владельцам. О том, как сторонники децентрализованного интернета Web 3.0 предают его главные принципы — в пересказе колонки разработчика Пола Батлера.
Пилотный проект запустят во второй половине 2022 года.
Это был тяжелый год, было много работы (как обычно), все устали. Желаем, чтобы следующий был полегче — и в нем нашлось место для всяких приятных эмоций и открытий. Чтобы работа приносила радость, но и на остальное хватало времени и сил. Вот бы начать с января новую жизнь: не выгорать, не злиться на коллег, заботиться о себе. И еще — предъявлять к…
Банковские операции для клиентов Банка «Санкт-Петербург» всегда выглядят просто — прикосновение карты к терминалу, ввод пин-кода на кассе, зачисление средств на счет. «Под капотом» же скрывается огромная бэк-офисная работа одного из важнейших банковских подразделений — Операционной дирекции. В ее сферу ответственности входит множество функций от…
Как вырезать в фигме: объект, изображение, картинку, фото, фон
В этом уроке поговорим как вырезать фон вокруг объекта, у изображения, картинки или фото в фигме. По итогам урока вы сможете делать простые изображения с прозрачным фоном. Простыми словами вы сможете удалить не нужный фон на фото.
Прежде всего отмечу, что эта инструкция подойдет для простых объектов. Если вам нужно удалить фон у сложного объекта (например где есть волосы), то это не поможет и лучше воспользоваться фотошопом. Используйте этот приём для простых объектов с прямыми сторонами: коробка, стул, стена и т.д.
Пошаговая инструкция как вырезать объект на фото с помощью пера в фигме
Шаг №1. Выберите инструмент перо (Peen tool) в панели инструментов сверху.
Шаг №2. Увеличьте фотографию нажав на клавиатура на «+». Поставьте точку с помощью пера.
Шаг №3. Обведите объект по контуру рисуя новые линии.
Если на объекте есть скругление, то поставьте точку и потяните в сторону.
Чтобы появилась возможность рисовать прямые линии, нажмите на «Shift» и на точку после скругления.
Шаг №4. После того как вы обведете объект вокруг, сделайте заливку фигуры. Это можно сделать нажав напротив справа надписи Fill на иконку плюса.
Результат после заливки контура вокруг будет таким. На время отключите этот слой нажав в левой панели на иконку глаза.
Шаг №5. При необходимости обведите объект внутри, как показано на скриншоте выше.
Сделайте заливку внутренней обводки.
Шаг №6. Поменяйте цвет у внутренней заливки. Включите отключенный ранее слой с первым контуром.
Шаг №7. Выберите контуры нарисованные пером и нажмите на надпись «Substract selection».
В результате у фигуры вычитается внутренняя заливка. Получается фигура, которая полностью повторяет объект, который нужно вырезать.
Шаг №8. Поместите получившуюся фигуру вниз фото в слоях. Также выделите фото и фигуру и нажмите на иконку маски «Use as mask».
В результате мы получаем объект, без заднего фона сзади.
Шаг №9. При необходимости отредактируйте получившийся объект, выбрав одну из векторных точек. Также можно отредактировать фото, чтобы оно вписывалось в окружающий фон вокруг. Как это сделать, смотрите в видео выше.
Если хотите сохранить изображение к себе на рабочий стол, то выбирайте для этого формат PNG. Это позволит сохранить прозрачный фон у фотографии. Вот инструкция по экспорту изображений из фигмы.
Таким образом вы можете удалять задний фон у фото. Безусловно, это сработает для простых объектов. Если вам нужно вырезать более сложный объект, то лучше воспользуйтесь фотошопом. Почему? Простой потому что фигма подходит больше для работы с векторной графикой.
Как работать с изображениями в Figma
Простая инструкция: как добавить изображение на макет и отредактировать его без «Фотошопа».
Meery Mary для Skillbox
В Figma очень удобно работать с изображениями: быстро обрезать, удалить фон или скорректировать цвет. А ускорить работу над ними помогут встроенные функции и плагин.
Как добавить изображение на макет
Перетащите изображение на макет с рабочего стола или из папки:
Скопируйте изображение сочетанием клавиш Ctrl (⌘) + C и вставьте его в макет, нажав Ctrl (⌘) + V:
Также можно копировать изображения из интернета: нажмите правой кнопкой мыши на любую иллюстрацию в браузере, выберите «Копировать изображение», затем перейдите в Figma и нажмите Ctrl (⌘) + V:
Функцией Place Image можно автоматически поставить изображение сразу туда, где оно должно находиться:
С помощью заливки можно использовать изображение в качестве фона фрейма или фигуры:
Аналогично можно использовать изображение как заливку обводки. Только вместо блока Fill нужно заходить в блок Stroke.
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Настройки изображения
В Figma у любого изображения можно изменить свойства заливки и сделать минимальную коррекцию цвета. Чтобы открыть эти настройки, выделите любую иллюстрацию на макете, затем в блоке Fill нажмите на её миниатюру.
Fill — изображение полностью заполняет собой доступное пространство, в котором находится.
Fit — изображение заполняет пространство так, чтобы его было видно целиком.
Crop — обрезает изображение и фиксирует его видимую часть. При изменении размера оно может растянуться.
Tile — всё свободное пространство заполняется копиями изображения. Это свойство очень удобно использовать с паттернами.
Хотя в Figma можно сделать минимальную цветокоррекцию, качественно отредактировать фотографию не получится — для этого лучше идти в Photoshop.
Настройки цветокоррекции в Figma:
Маска слоя
С помощью маски слоя можно придать изображению нестандартную для Figma форму:
Таким же образом изображением можно заполнить что угодно: от нескольких фигур до текста.
Полезные приёмы
Отразить изображение по вертикали можно с помощью горячих клавиш Shift + H. По горизонтали — Shift + V.
Скопировать SVG-иконку с любого сайта в Figma можно через браузер:
Быстро вырезать объект поможет плагин Remove BG, который автоматически удаляет фон.
Как установить плагин Remove BG:
Учтите, что этот способ не подойдёт для финального удаления фона, так как плагин работает не идеально. Но если вам нужно просто показать идею, то Remove BG поможет сэкономить кучу времени.
Горячие клавиши в Figma
Ниже я привел скриншоты с разделами, а также с переводом.
Вкладка №1 (Основные параметры)
Вкладка №2 (Инструменты)
Вкладка №3 (Просмотр):
Вкладка №4 (Масштабирование):
Вкладка №5 (Инструмент “Текст”):
Вкладка №6 (Векторные изображения):
Работа с точками векторных изображений (Эти функции я не использую)
Вкладка №7 (Выделение):
Вкладка №9 (Редактирование):
Вкладка №10 (Трансформирование):
Вкладка №11 (Выравнивание):
Вкладка №12 (Компоненты):
Как сделать обводку в Фигме. Сплошную или пунктирную.
Как создать пунктирную или сплошную обводку в Figma? Инструкция для начинающих пользователей программы.
Инструкция как сделать сплошную или пунктирную обводку вокруг фигуры, фрейма, текста или любого другого объекта в Фигме.
Чтобы сделать обводку в Figma нужно:
Как сделать пунктирную обводку в Фигме?
Пунктирную обводку можно создать после добавления обычной. Нажмите внизу надписи «Stroke» (в правой панели) на иконку с тремя точками. Перед вами появится окно с заголовком «Advanced stroke». Это расширенные настройки обводки. Измените значение параметра «Dashes». Например можно поставить 50, 40. Первая цифра (50) — это размер пунктирных линий. Вторая цифра (40) — размер разрыва между пунктирными линиями.
Параметры обводки в Figma
Рассмотрим основные параметры обводки, которые вы можете изменять.
Такие как: цвет, прозрачность, видимость, удаление, толщина обводки, тип, преобразование сплошной линии обводки в пунктирную.
1. Цвет
Чтобы изменить цвет обводки нажмите на цвет внизу надписи «Stroke» или введите код какого-либо цвета (например FF2A54).
Также вы можете изменять тип обводки. Если откроете панель цвета, то сверху по умолчанию стоит надпись «Solid» — это сплошная обводка. В списке есть другие типы обводки.
Linear — линейный градиент.
Radial — радиальный градиент.
Angular — угловой градиент.
Diamond — градиент в виде кристала.
Image — изображение.
2. Добавление нового стиля цвета
Напротив надписи «Stroke» есть иконка с 4 точками в виде квадрата. Если на неё нажать, то появится возможность выбирать цвет из цветовой палитры. Если вы хотите создать новый цвет в вашей палитре и использовать его повторно, то нажмите на плюсик (как показано на картинке выше).
Дайте имя новому цвету и нажмите на кнопку «Create style». После этого вы сможете исползовать этот цвет повторно и он появится в панели справа.
3.Видимость
Можно временно отключить видимость обводки. Для этого нажмите иконку глаза с правой стороны.
4. Как сделать обводку в фигме более прозрачной
Изменение прозрачности обводки в Figma
Чтобы изменить прозрачность обводки, измените цифры с процентами. Изначально по умолчанию стоит 100%. Если поставить 50%, то прозрачность измениться.
5. Как удалить обводку в фигме
Чтобы удалить обводку в фигме, нажмите на иконку минуса.
6. Толщина.
Толщина обводки в фигме
Изменение толщины обводки интуитивно понятно. Для того, чтобы это сделать нужно изменить цифру под цветом, напротив иконки с 3 линиями разной толщины. Изначально создается обводка толщиной 1 px.
7. Выбор типа обводки
Можно сделать обводку внутри (Inside), по центру (Center), снаружи (Outside).
Хотите лучше освоить программу Figma? Получите бонусный урок в подарок + материалы для создания дизайна сайта (Landing Page) по этой ссылке.