Что такое slice в figma
Как вырезать в фигме: объект, изображение, картинку, фото, фон
В этом уроке поговорим как вырезать фон вокруг объекта, у изображения, картинки или фото в фигме. По итогам урока вы сможете делать простые изображения с прозрачным фоном. Простыми словами вы сможете удалить не нужный фон на фото.
Прежде всего отмечу, что эта инструкция подойдет для простых объектов. Если вам нужно удалить фон у сложного объекта (например где есть волосы), то это не поможет и лучше воспользоваться фотошопом. Используйте этот приём для простых объектов с прямыми сторонами: коробка, стул, стена и т.д.
Пошаговая инструкция как вырезать объект на фото с помощью пера в фигме
Шаг №1. Выберите инструмент перо (Peen tool) в панели инструментов сверху.
Шаг №2. Увеличьте фотографию нажав на клавиатура на «+». Поставьте точку с помощью пера.
Шаг №3. Обведите объект по контуру рисуя новые линии.
Если на объекте есть скругление, то поставьте точку и потяните в сторону.
Чтобы появилась возможность рисовать прямые линии, нажмите на «Shift» и на точку после скругления.
Шаг №4. После того как вы обведете объект вокруг, сделайте заливку фигуры. Это можно сделать нажав напротив справа надписи Fill на иконку плюса.
Результат после заливки контура вокруг будет таким. На время отключите этот слой нажав в левой панели на иконку глаза.
Шаг №5. При необходимости обведите объект внутри, как показано на скриншоте выше.
Сделайте заливку внутренней обводки.
Шаг №6. Поменяйте цвет у внутренней заливки. Включите отключенный ранее слой с первым контуром.
Шаг №7. Выберите контуры нарисованные пером и нажмите на надпись «Substract selection».
В результате у фигуры вычитается внутренняя заливка. Получается фигура, которая полностью повторяет объект, который нужно вырезать.
Шаг №8. Поместите получившуюся фигуру вниз фото в слоях. Также выделите фото и фигуру и нажмите на иконку маски «Use as mask».
В результате мы получаем объект, без заднего фона сзади.
Шаг №9. При необходимости отредактируйте получившийся объект, выбрав одну из векторных точек. Также можно отредактировать фото, чтобы оно вписывалось в окружающий фон вокруг. Как это сделать, смотрите в видео выше.
Если хотите сохранить изображение к себе на рабочий стол, то выбирайте для этого формат PNG. Это позволит сохранить прозрачный фон у фотографии. Вот инструкция по экспорту изображений из фигмы.
Таким образом вы можете удалять задний фон у фото. Безусловно, это сработает для простых объектов. Если вам нужно вырезать более сложный объект, то лучше воспользуйтесь фотошопом. Почему? Простой потому что фигма подходит больше для работы с векторной графикой.
Срез (Slice) в Figma
Инструмент «Срез» (Slice) (горячая клавиша S) создан для экспорта произвольной прямоугольной области. Создайте срез и экспортируйте его — на выходе вы получите прямоугольник, содержащий только части элементов, охваченные срезом.
Древо слоев примера
Срез внутри группы квадратов (Content Only включен)
Срез вне группы
Настройка Content Only
Чекбокс Content Only устанавливает, что в экспорт попадет только содержимое, находящееся на одном уровне со срезом и ниже. Если чекбокс не установлен, в экспорт попадет все фоновое содержимое, не находящееся в группе или фрейме, в котором содержится срез. Если установлен — только содержимое, находящиеся в группе или фрейме со срезом.
Срез вне группы: будут экспортированы части эллипса, треугольника и содержимого группы
Срез в группе: будут экспортированы части содержимого группы, если установлено Content Only. Иначе в экспорт попадут и другие элементы.
Настройка Contents Only
Настройка Contents Only
Учтите, что срез экспортирует все содержимое своей группы, независимо от того, выше или ниже оно располагается в древе слоев.
Играй бесплатно в браузере!
Заполните форму, мы сделаем иконку
и добави ее в коллекцию
Фреймы и слайсы в Figma
В этом уроке мы рассмотрим, что такое фреймы и слайсы. Находятся эти функции в верхней панели меню. В прошлом уроке вкратце упоминалось о фрейме, но сейчас мы рассмотрим эту тему более подробно. Работая в других программах, например, в Photoshop вам скорее всего знакома функция Artboard (монтажная область). В Figma эта функция представлена в виде Frame (фрейма), что означает рамка или кадр. Отличие в том, что, создавая монтажную область, вся работа осуществляется в ней за счет создания разных групп. Отличие возможностей Figma в том, что создается фрейм, внутри которого можно добавлять другие фреймы, за счет своей системы координат. Это дает возможность создавать адаптивный дизайн под разные устройства.
Итак, для создания фрейма можно воспользоваться вкладкой в меню. В таком случае вы можете сами задать размеры фрейма в правой части меню.
Если вы хотите адаптировать фрейм под определенное устройство, например, айфон или планшет, то нажмите горячую клавишу «F». В левой части появится список разрешений, которые используются в разных устройствах. Здесь также содержатся шаблоны фреймов для постов в социальных сетях.
После выбора подходящего размера фрейма, вы можете менять его формат в левой части переключая между Portrait и Landscape. То есть это поможет вам при создании дизайна сайта, делать его адаптивным. Например, первый фрейм может быть для компьютерной версии сайта. Затем как мы рассмотрели в предыдущем уроке при помощи клавиши «Alt» можно сделать точную копию фрейма и изменить его формат под мобильное устройство. Удобство в том, что одновременно можно создавать сразу несколько версий сайта.
Если что-то создать в рабочей области фрейма, то есть несколько вариантов это объединить, создав одну группу. Используя горячую клавишу «F» можно создавать дополнительные фреймы внутри фрейма. Горячая клавиша для создания группы ⌘ + G (Mac) или Ctrl + G (Win).
В левой части интерфейса можно увидеть, что внутри основного фрейма у вас находятся дополнительные рамки. Вы можете выделить необходимые вам элементы при помощи мыши, или выбрав в левой части меню рамки при помощи клавиши «Ctrl». Выделив интересующие вас объекты, вы можете создать группу. Это делается комбинацией ⌘ + Opt + G (Mac) или Ctrl + Alt + G (Win).
Основное отличие фрейма от группы – то что при смене размеров фрейма, размер находящихся внутри объектов меняться не будет, если конечно вы не редактировали настройки в параметрах содержания. Если фрейм станет меньше размеров объекта, то они попадут под обрезку. На макете их видно не будет.
Что касается группы, то меняя ее размер, будет меняться размер всего содержимого в ней. Так как границы группы зависят от содержания, то они упираются в крайние точки, в то время как границы фрейма могут находиться где угодно.
Для чего создавать группы объектов? Это полезно в том случае, если вы хотите объединить похожие элементы для управления ими. Это могут быть логотипы компании, которые должны быть вместе. Поэтому группировка этих элементов позволит по одному щелчку на один из логотипов выделить все сразу и перемещать их на холсте. Для выбора конкретного элемента из группы, необходимо кликнуть по нему двойным щелчком мыши.
Slice (слайсы) – переводятся как срезы, и имеют горячую клавишу «S». Данный инструмент позволяет выделять произвольную область фрейма и экспортировать ее как изображение в форматах JPG, PNG или SVG.
Эта функция используется нечасто, тем не менее стоит рассмотреть, как она работает. Выделяя какой-нибудь объект в фрейме при помощи Slice, появится срез, размер которого вы сможете регулировать. В левой панели слоев вам будет доступен список этих срезов.
В левой части настроек будет функция экспорта, радом с которой есть вкладка в виде плюсика. Нажмите на него, и вы загрузите то, что выделено слайсом.
Итак, из этого урока вы узнали, что такое фреймы и слайсы, а также как используются эти инструменты на практике.
Полезные ссылки:
SliceNode
type: «SLICE» [readonly]
The type of this node, represented by the string literal «SLICE»
Base node properties
An internal identifier for a node. Plugins typically don’t need to use this since you can usually just access a node directly. [Read more]
The name of the layer that appears in the layers panel. This may update automatically for text layers. Returns the name of the current file on figma.root (read-only). [Read more]
Returns true if this node has been removed since it was first accessed. If your plugin stays open for a while and stores references to nodes, you should write your code defensively and check that the nodes haven’t been removed by the user. [Read more]
Returns a string representation of the node. For debugging purposes only, do not rely on the exact output of this string in production code. [Read more]
Removes this node and all of its children from the document. [Read more]
getPluginData(key: string): string
setPluginData(key: string, value: string): void
Lets you store custom information on any node, private to your plugin. [Read more]
getSharedPluginData(namespace: string, key: string): string
setSharedPluginData(namespace: string, key: string, value: string): void
Lets you store custom information on any node, public to all plugins. [Read more]
In Figma, this shows up in the properties panel. In FigJam, this shows up in the property menu. See here for examples. [Read more]
Scene node properties
Whether the node is visible or not. Does not affect a plugin’s ability to access the node. [Read more]
Whether the node is locked or not, preventing certain user interactions on the canvas such as selecting and dragging. Does not affect a plugin’s ability to write to those properties. [Read more]
The position of a node relative to its containing page as a Transform matrix.
The position of a node relative to its containing parent as a Transform matrix. Not used for scaling, see width and height instead. Read the details page to understand the nuances of this property. [Read more]
width: number [readonly]
The width of the node. Use a resizing method to change this value.
height: number [readonly]
The height of the node. Use a resizing method to change this value.
absoluteRenderBounds: Rect | null [readonly]
When toggled, causes the layer to keep its proportions when the user resizes it via the properties panel.
layoutAlign: «MIN» | «CENTER» | «MAX» | «STRETCH» | «INHERIT»
This property is applicable only for direct children of auto-layout frames, ignored otherwise. Determines whether a layer should stretch along the parent’s primary axis. 0 corresponds to a fixed size and 1 corresponds to stretch. [Read more]
resize(width: number, height: number): void
Resizes the node. If the node contains children with constraints, it applies those constraints during resizing. If the parent has auto-layout, causes the parent to be resized. [Read more]
Resizes the node. Children of the node are never resized, even if those children have constraints. If the parent has auto-layout, causes the parent to be resized (this constraint cannot be ignored). [Read more]
Rescales the node. This API function is the equivalent of using the Scale Tool from the toolbar. [Read more]
List of export settings stored on the node. For help on how to change this value, see Editing Properties.
Exports the node as an encoded image. [Read more]
2 способа как обрезать картинку в Figma
Привет! Это мой урок для начинающих дизайнеров. Возможно будет для кого-то полезным. В этом видео я наглядно покажу как можно обрезать изображение в фигме. Без воды и по делу на обычном языке и на живых рабочих примерах!
Никакие документы при этом оформлять не нужно.
В декабре сооснователь Signal раскритиковал уровень безопасности данных в Telegram — в ответ Дуров написал о проблемах с безопасностью в других мессенджерах.
В 2015 году корпорация Безоса продала Shopify свой конструктор сайтов, поскольку сочла бизнес неприбыльным. Теперь жалеет и собирается запускать новый. Как Shopify смогла демократизировать рынок онлайн-торговли и почему только рада конкуренции — в пересказе Bloomberg.
В декабре 2021 года «Выберу.ру» запустил на платформе финансового супермаркета новое направление — «Выберу образование» — большой раздел сайта, где собраны популярные онлайн-курсы для обучения digital-профессиям и гибким компетенциям в ведущих онлайн-школах страны.
Всем привет! В течение 2020 и 2021 годов я периодически разрождался на VC.ru постами про электронные книги – ридеры. Был у меня пост про цветные читалки, потом про большие читалки, затем снова про цветные. «О чем бы следующий пост написать?» – подумал я однажды декабрьским утром. Логика подсказывала, что надо писать про большие ридеры. Вот и…
PocketBook X и PocketBook 970 (фото из интернетов)
Как мы сделали онлайн-сервис из пасеки.
Меня зовут Ильшат Газизов, я инвестор — сооснователь глемпинга Best Glamp «Лесная Поляна» в Казани. О том, как мы открыли этот проект в пандемийный год, расскажу ниже.
Привет! Меня зовут Вера Белова, старший спец по адаптации и развитию в СберЗдоровье.
В сфере разработки и IT-проектов ответственность за формирование крутой команды лежит не только и не столько на HR-службе. Прежде всего, команду мечты формирует ее лидер: тимлид. Кирилл Зуев из компании ЦФТ провел 200+ собеседований и в итоге сформировал отдел из 400 разработчиков. Как ему это удалось и почему он не полагался во всем на HR —…