Что такое slice в фигме

Как вырезать в фигме: объект, изображение, картинку, фото, фон

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

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

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Пошаговая инструкция как вырезать объект на фото с помощью пера в фигме

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Шаг №1. Выберите инструмент перо (Peen tool) в панели инструментов сверху.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Шаг №2. Увеличьте фотографию нажав на клавиатура на «+». Поставьте точку с помощью пера.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Шаг №3. Обведите объект по контуру рисуя новые линии.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Если на объекте есть скругление, то поставьте точку и потяните в сторону.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Чтобы появилась возможность рисовать прямые линии, нажмите на «Shift» и на точку после скругления.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Шаг №4. После того как вы обведете объект вокруг, сделайте заливку фигуры. Это можно сделать нажав напротив справа надписи Fill на иконку плюса.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Результат после заливки контура вокруг будет таким. На время отключите этот слой нажав в левой панели на иконку глаза.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Шаг №5. При необходимости обведите объект внутри, как показано на скриншоте выше.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Сделайте заливку внутренней обводки.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Шаг №6. Поменяйте цвет у внутренней заливки. Включите отключенный ранее слой с первым контуром.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Шаг №7. Выберите контуры нарисованные пером и нажмите на надпись «Substract selection».

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

В результате у фигуры вычитается внутренняя заливка. Получается фигура, которая полностью повторяет объект, который нужно вырезать.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Шаг №8. Поместите получившуюся фигуру вниз фото в слоях. Также выделите фото и фигуру и нажмите на иконку маски «Use as mask».

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

В результате мы получаем объект, без заднего фона сзади.

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

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

Таким образом вы можете удалять задний фон у фото. Безусловно, это сработает для простых объектов. Если вам нужно вырезать более сложный объект, то лучше воспользуйтесь фотошопом. Почему? Простой потому что фигма подходит больше для работы с векторной графикой.

Источник

Срез (Slice) в Figma

Инструмент «Срез» (Slice) (горячая клавиша S) создан для экспорта произвольной прямоугольной области. Создайте срез и экспортируйте его — на выходе вы получите прямоугольник, содержащий только части элементов, охваченные срезом.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигмеДрево слоев примера

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигмеСрез внутри группы квадратов (Content Only включен)

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигмеСрез вне группы

Настройка Content Only

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

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигмеСрез вне группы: будут экспортированы части эллипса, треугольника и содержимого группы

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигмеСрез в группе: будут экспортированы части содержимого группы, если установлено Content Only. Иначе в экспорт попадут и другие элементы.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигмеНастройка Contents Only

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигмеНастройка Contents Only

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

Играй бесплатно в браузере!

Заполните форму, мы сделаем иконку
и добави ее в коллекцию

Источник

Фреймы и слайсы в Figma

В этом уроке мы рассмотрим, что такое фреймы и слайсы. Находятся эти функции в верхней панели меню. В прошлом уроке вкратце упоминалось о фрейме, но сейчас мы рассмотрим эту тему более подробно. Работая в других программах, например, в Photoshop вам скорее всего знакома функция Artboard (монтажная область). В Figma эта функция представлена в виде Frame (фрейма), что означает рамка или кадр. Отличие в том, что, создавая монтажную область, вся работа осуществляется в ней за счет создания разных групп. Отличие возможностей Figma в том, что создается фрейм, внутри которого можно добавлять другие фреймы, за счет своей системы координат. Это дает возможность создавать адаптивный дизайн под разные устройства.

Итак, для создания фрейма можно воспользоваться вкладкой в меню. В таком случае вы можете сами задать размеры фрейма в правой части меню.

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

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигмеПосле выбора подходящего размера фрейма, вы можете менять его формат в левой части переключая между Portrait и Landscape. То есть это поможет вам при создании дизайна сайта, делать его адаптивным. Например, первый фрейм может быть для компьютерной версии сайта. Затем как мы рассмотрели в предыдущем уроке при помощи клавиши «Alt» можно сделать точную копию фрейма и изменить его формат под мобильное устройство. Удобство в том, что одновременно можно создавать сразу несколько версий сайта.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигмеЕсли что-то создать в рабочей области фрейма, то есть несколько вариантов это объединить, создав одну группу. Используя горячую клавишу «F» можно создавать дополнительные фреймы внутри фрейма. Горячая клавиша для создания группы ⌘ + G (Mac) или Ctrl + G (Win).

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигмеВ левой части интерфейса можно увидеть, что внутри основного фрейма у вас находятся дополнительные рамки. Вы можете выделить необходимые вам элементы при помощи мыши, или выбрав в левой части меню рамки при помощи клавиши «Ctrl». Выделив интересующие вас объекты, вы можете создать группу. Это делается комбинацией ⌘ + Opt + G (Mac) или Ctrl + Alt + G (Win).

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

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

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

Slice (слайсы) – переводятся как срезы, и имеют горячую клавишу «S». Данный инструмент позволяет выделять произвольную область фрейма и экспортировать ее как изображение в форматах JPG, PNG или SVG.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигмеЭта функция используется нечасто, тем не менее стоит рассмотреть, как она работает. Выделяя какой-нибудь объект в фрейме при помощи Slice, появится срез, размер которого вы сможете регулировать. В левой панели слоев вам будет доступен список этих срезов.

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

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигмеИтак, из этого урока вы узнали, что такое фреймы и слайсы, а также как используются эти инструменты на практике.

Полезные ссылки:

Источник

2 способа как обрезать картинку в Figma

Привет! Это мой урок для начинающих дизайнеров. Возможно будет для кого-то полезным. В этом видео я наглядно покажу как можно обрезать изображение в фигме. Без воды и по делу на обычном языке и на живых рабочих примерах!

Ровно год назад, 28 декабря 2020 года, курьеры «Прямиком» доставили первые заказы в Ханты-Мансийске. О том, как прошел этот год, рассказывает Игорь Шиянов, генеральный директор Master Delivery.

Никакие документы при этом оформлять не нужно.

В 2015 году корпорация Безоса продала Shopify свой конструктор сайтов, поскольку сочла бизнес неприбыльным. Теперь жалеет и собирается запускать новый. Как Shopify смогла демократизировать рынок онлайн-торговли и почему только рада конкуренции — в пересказе Bloomberg.

Привет! Меня зовут Вера Белова, старший спец по адаптации и развитию в СберЗдоровье.

Уволиться и начать своё дело решается не каждый. Но героине нашей статьи удалось даже больше — успешно стартовать и выйти на рынок, продавая товары по всей стране.

В декабре сооснователь Signal раскритиковал уровень безопасности данных в Telegram — в ответ Дуров написал о проблемах с безопасностью в других мессенджерах.

Как мы сделали онлайн-сервис из пасеки.

В сфере разработки и IT-проектов ответственность за формирование крутой команды лежит не только и не столько на HR-службе. Прежде всего, команду мечты формирует ее лидер: тимлид. Кирилл Зуев из компании ЦФТ провел 200+ собеседований и в итоге сформировал отдел из 400 разработчиков. Как ему это удалось и почему он не полагался во всем на HR —…

Источник

Как пользоваться Figma? Обзор программы за 20 минут

Краткий обзор программы Figma, её функций, инструментов и интерфейса. 20-минутный видео урок. Инструкция как работать. Быстрый старт.

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

В этом уроке кратко разберем интерфейс программы за 20 минут. Это поможет вам быстро стартовать. Вы можете посмотреть видео или воспользоваться текстовой версией урока.

Мы рассмотрим десктопную версию программы. Чтобы узнать, как её скачать и установить на компьютер, посмотрите урок №1.

Чтобы понять как пользоваться Figma рассмотрим её интерфейс. В этом уроке мы кратко изучим основные возможности и инструменты программы. Это пошаговая инструкция как работать в фигме.

Настройки профиля в Figma

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Вкладка «Settings» (настройки)

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

По умолчанию вас перенаправит во вкладку «Settings». Здесь вы можете делать следующие операции:

Управление плагинами в Figma. Вкладка «Plagins»

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Во вкладке «Plagins» вы можете видеть установленные вами плагины. Также плагины, которые находятся в разработке (если вы занимаетесь разработкой плагинов) и опубликованные. Если у вас установлен какой-либо плагин и вы хотите его удалить, то нажмите напротив этого плагина иконку минуса.

Вкладка «Teams» (Команды)

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Во вкладке «Teams» вы можете видеть членов вашей команды, а также те команды в которых вы состоите.

Поиск (вкладка Search). Как пользоваться в Figma?

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Если вы нажмете на надпись «Search», то сверху по центру поле, где вы можете осуществлять поиск.

Здесь можно осуществлять поиск по следующим вкладкам:

Поиск файлов в сообществе

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Если вы введете в поисковую строку какой-либо запрос (например Icons), то по умолчанию поиск осуществляется по вашим проектам. Если перейдете во вкладку Commynity (сверху справа или кнопка внизу), то увидите файлы, которыми делятся другие пользователи. Чтобы скопировать файл и редактировать его, нажмите на специальную иконку со стрелкой вниз.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Чтобы посмотреть проект более подробно, нажмите на его превью (изображение). Здесь вы можете сделать дубликат этого файла или посмотреть его более подробно.

Вкладка «Recent» в Figma (недавние файлы)

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Во вкладке «Recent» вы можете видеть все файлы, которые вы просматривали или редактировали за последнее время.

Community (сообщество)

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Во вкладке commynity (сообщество) вы можете найти файлы и плагины, которыми поделились другие пользователи. Вы также можете делиться с другими людьми своими файлами. Плагины — это специальные дополнения для Figma, которые помогут ускорить вашу работу.

Файлы могут быть самые разные. Например есть следующие категории:

Drafts (черновики или проекты)

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Drafts можно перевести как черновики, проекты, наброски и т.д. Здесь будут располагаться те файлы, которые у вас есть. Чтобы добавить новый проект вы можете нажать на одну из 3 иконок плюса. Первая иконка расположена напротив надписи Drafts, вторая сверху (если у вас десктопное приложение), третья сверху и справа.

Команды

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Снизу слева располагаются команды. Здесь вы можете создавать новые проекты (это своего рода папки) а также редактировать ваши файлы совместно с другими людьми. В бесплатной версии программы можно работать вдвоем. Даже если вы работаете в одиночку, то создание новых команд поможет вам структурировать ваши файлы из вкладки «Drafts» и избавиться от хаоса.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Для примера создам новую команду и перемещу туда файл. Чтобы создать новую команду нажмите на надпись «Create new team».

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Дайте название вашей команде. Для примера назову команду «Полезные файлы».

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Вам предложат пригласить людей в команду для совместной работы. Этот шаг можно пропустить или добавить email адреса других людей.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Если у вас бесплатный тариф, то вам предложат выбрать тариф. Можно выбрать бесплатный или платный.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

После того как команда создана она будет отображаться слева снизу в интерфейсе Figma. Справа отображаются члены вашей команды. Чтобы пригласить нового человека нажмите на надпись «Invite members» или на плюсик напротив надписи «1. Editor left»

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Чтобы добавить новый проект (папку) в вашу команду, нажмите на плюсик напротив надписи «2. Editor left».

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Создам новую папку (project) и назову её «Иконки»

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

В команде появится созданный вами проект.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Вы можете перемещать туда файлы из других команд и проектов, а также из вкладке «Drafts».

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Размещая файлы таким образом вы сможете структурировать хаос.

Создание нового проекта, основные инструменты Figma

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Панель слоев (Layers)

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Вкладка «Assets» с компонентами

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Во вкладке «Assets» размещаются компоненты. Компоненты — это элементы, которые можно редактировать в массовом порядке.

Создание нового компонента (кнопки)

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Поверх прямоугольника наложим текст.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Выделим прямоугольник и текст и в панели справа и напротив надписи «Auto Layout» нажмем на плюс.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Цвет кнопки можно изменять в панели справа, напротив надписи «Fill» и «Seleciton colors». Сделаем кнопку желтым цветом.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

В панели слоев переименуем кнопку и назовем её «Button».

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Чтобы создать из кнопки компонент, выделим её и сверху нажмем на иконку из 4 ромбов (create component).

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

В панели «Assets» появилась кнопка. Теперь мы можем имеем к этой кнопке быстрый доступ и можем использовать её снова в нашем проекте. Просто берем и перетаскиваем кнопку из панели слева.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Если посмотреть в панель слоёв, то там есть 4 слоя. 1 слой — главный компонент и 3 копии.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Если мы выберем главный компонент и произведем в нем какие-то изменения (например изменим цвет), то копии тоже будут меняться.

Добавление новых страниц

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Чтобы добавить новую страницу в ваш проект, нажмите слева на «Page». Перед вами появится список всех страниц. Если нажать на плюс, то появиться новая страница.

Меню «гамбургер»

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Слева сверху есть меню «гамбургер». Здесь можно производить различные манипуляции с файлами и объектами в вашем проекте. Ещё можно настраивать режим просмотра и т.д.

Панель инструментов Figma. Как пользоваться в Figma?

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Сверху представлена панель инструментов Figma, которая состоит из следующих элементов:

Move и Scale в Figma

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Move позволяет перемещать любые элементы в вашем проекте. Scale нужен для масштабирования элементов. Чтобы понять как работают инструменты move и scale при масштабировании элементов создадим 2 прямоугольника с обводкой 100px.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Масштабирование прямоугольника при выбранном инструменте «Move» происходит с сохранением обводки со значением 100px.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Выбираем инструмент «Scale». Увеличиваем правый прямоугольник и смотрим на обводку. Значение увеличивается пропорционально. Тоже самое происходит, если мы будем масштабировать фреймы, группы и компоненты.

Frame — рабочая область в Figma. Как использовать?

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

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

При выборе инструмента «Frame» в правой панели появляются популярные разрешения устройств и их размеры, которые вы можете использовать.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Если выбрать шаблон, появляется новый frame (рабочая область).

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Также можно рисовать произвольные размеры фрейма.

Slice

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Инструмент «Slice» позволяет экспортировать фрагменты вашего проекта в формате PNG, JPG, SVG, PDF.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Просто выберите нужную область, которую хотите сохранить и нажмите в правой панели напротив надписи Export на иконку плюсика.

Инструменты создания векторных фигур. Как пользоваться в figma?

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Для примера создадим простой прямоугольник.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

В панели справа появляется возможность для изменения цвета.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Если добавить плюс напротив надписи «Stroke», то появится обводка.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Можно добавлять эффекты нажав на плюс напротив надписи «Effects».

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Есть следующие эффекты :

Экспорт в figma

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Можно экспортировать элемент в формате: png, jpg, svg, PDF. Чтобы экспортировать элемент нажмите на плюс напротив надписи Export и выберите нужный формат из списка. Нажав на надпись «Prewie» вы можете включить предварительный просмотр и увидеть как будет выглядеть экспортируемый элемент.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Вставка изображений. Инструмент «Place image»

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

В созданные фигуры можно быстро и массово вставить изображения. Создайте несколько прямоугольников или других фигур. Затем выберите вкладку « Place image», как показано на изображении выше. Выберите изображения с вашего рабочего стола, наведите курсор на фигуру и вставьте нажатием левой клавишей мыши.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Фигуры будут заполнены вашими фотографиями.

Инструмент перо. Pen.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

С помощью инструмента перо (pen) можно рисовать различные фигуры или иконки.

Инструмент карандаш. Pencil.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Инструмент рука. Move.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Активировав инструмент рука (Move), вы сможете перемещаться в любую сторону по вашему проекту. Удобнее нажимать пробел, чтобы активировать этот инструмент.

Показать или добавить комментарии в Figma. Add/show comments.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Нажав на иконку комментариев, как показано на скриншоте выше, вы сможете просматривать чужие комментарии и добавлять свои. Как пользоваться в Figma функцией комментариев? Чтобы добавить комментарий, просто нажмите на какую-то область левой кнопкой мыши, напишите что-то и нажмите кнопку «Post».

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Все комментарии будут отображаться в проекте, а также в панеле с правой стороны.

Перемещение файла в другую команду или проект

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Изменение названия файла

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

По умолчанию все файлы называются Untilled (без названия). Чтобы это исправить, нажмите на эту надпись (она по центру) и измените на то, которое вам больше нравится.

История версий. Как пользоваться в figma?

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Рядом с названием вашего проекта есть стрелочка, если её нажать, то появится выпадающий список. Чтобы посмотреть историю версий, нужно выбрать пункт «Show version history».

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

История версий отображается справа. Нажав на какую то версию, вы можете её просматривать.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Чтобы вернуться в последнюю версию проекта, нажмите на кнопку слева и сверху «Done».

Как узнать кто просматривает или работает в проекте Figma?

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Сверху и справа есть аватарки тех пользователей, которые просматривают этот проект или работают в нём.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Если хотите поделиться вашим проектом, то нажмите кнопку «Share» сверху, справа. Там есть ссылке, чтобы поделиться «copy link».

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Если вы дадите ссылку другому человеку и он зарегистрирован в figma, то увидите его аватарку сверху и справа в программе.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Если хотите удалить какого-то человека, то нажмите на кнопку «Share», справа сверху. После этого напротив аватарки человека выберите пункт «Remove».

Режим презентации

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Чтобы перейти в режим презентации, нажмите на иконку треугольника сверху и справа. Иконка похожа на play.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

В этом режиме будут отображаться созданные вами фреймы. Можно переключаться между ними нажимая на стрелки внизу.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Вы можете поделиться презентацией с заказчиком или другим человеком, нажав на синюю кнопку сверху «Share prototype». После этого скопируйте ссылку нажав на copy link. Эту ссылку можно открыть в любом браузере.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

В этом режиме также можно добавлять комментарии, нажав на иконку слева и сверху. Пример на скриншоте выше.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

После публикации комментариев, вы увидите уведомление на главном экране фигмы.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Также уведомление появится в проекте в инструментах.

Масштабирование и параметры просмотра. Как пользоваться в Figma?

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Как уменьшить или увеличить масштаб?

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

Параметры просмотра

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

Отображение пикселей (pixel prewie)

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Если вы включите функцию «Pixel prewie» и выберете 1x или 2x, то содержимое вашего проекта будет отображаться в виде пикселей при увеличении. Если отключите эту функцию нажав на надпись «Disabled», то все будет выглядеть более четко.

Пиксельная сетка (Pixel grid)

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

При сильном увеличении порой удобно пользоваться пиксельной сеткой. Её можно включить или отключить с помощью надписи «Pixel greed».

Привязка элементов к пиксельной сетке (Snap to pixel grid)

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Чтобы включить привязку элементов к пиксельной сетке нужно, чтобы галочка напротив надписи «Snap to pixel grid» была включена. Если вы работаете в вебе (делаете сайты или мобильные приложения), то обязательно ставьте эту галочку. Иначе элементы будут иметь нечеткие значения и расположение. Это будет усложнять процесс при верстке и работе с кодом.

Как включить или отключить сетку в макетах (фреймах)?

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Если в ваших макетах (фреймах) есть сетка, то её можно включить или отключить. Для этого нажмите на надпись в выпадающем списке Layout grids.

Линейки и направляющие (Rulers)

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Режим контуров (очертаний) — Outlines.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Режим контуров или очертаний позволяет переключиться в другой режим просмотра. Как пользоваться в Figma контурами? Этот режим может быть иногда полезен, поскольку все элементы отображаются иначе. Чтобы его включить или отключить нажмите на надпись «Outlines».

Режим прототипирования в Figma (Prototype)

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Нажимаю иконку play сверху, чтобы перейти в режим презентации.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

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

Режим Inspect

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Во вкладке «Inspect» будут отображаться куски кода, которые могут быть полезны при верстке.

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Выберите любой элемент и посмотрите на панель справа. Там будет отображаться свойства этого элемента (расположение, высота, ширина и т.д.).

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Вы можете скопировать свойства элемента нажав на надпись «Copy» сверху, справа.

Иконка с вопросом

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

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Чтобы вызвать горячие клавиши в фигме и посмотреть все сокращения, нажмите на иконку вопроса и выберите надпись «Keyboart Shotcuts».

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Здесь есть следующие надписи:

Горячие клавиши

Что такое slice в фигме. Смотреть фото Что такое slice в фигме. Смотреть картинку Что такое slice в фигме. Картинка про Что такое slice в фигме. Фото Что такое slice в фигме

Вы можете переключаться по разным вкладкам и смотреть горячие клавиши. Есть использованные горячие клавиши. Они отображаются с заливкой синим цветом. Горячие клавиши, которые вы не использовали отображаются без заливки.

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *