Маска в фигме как работать
Как в Figma залить текст изображением. Маски
Сделать заливку текста градиентом или картиной в Фигме можно с помощью стандартных настроек, но в этом случае вы столкнетесь с рядом ограничений:
Для создания фонов векторов, в том числе текста, есть смысл использовать маски.
Маска делает прозрачными все области слоев над собой, которые не занимает сама.
Несколько правил работы с масками:
Чтобы назначить вектор маской, выделите его и либо нажмите ctrl+M / cmnd + M, либо нажмите на значок в верхнем баре, либо выберите этот пункт из контекстного меню:
Как сделать маску в Фигме
После этого все слои, которые в навигаторе расположены над маской, станут заливкой для неё:
Работа маски в Фигме
Однако если мы поместим маску в группу, то ее действие будет распространяться только на слои, расположенные над ней:
Маска в группе в Фигме
Заливкой для маски могут выступать изображения и векторы, в том числе и текст:
Как работать с изображениями в 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 залить текст изображением. Маски
Сделать заливку текста градиентом или картиной в Фигме можно с помощью стандартных настроек, но в этом случае вы столкнетесь с рядом ограничений:
Для создания фонов векторов, в том числе текста, есть смысл использовать маски.
Маска делает прозрачными все области слоев над собой, которые не занимает сама.
Несколько правил работы с масками:
Чтобы назначить вектор маской, выделите его и либо нажмите ctrl+M / cmnd + M, либо нажмите на значок в верхнем баре, либо выберите этот пункт из контекстного меню:
Как сделать маску в Фигме
После этого все слои, которые в навигаторе расположены над маской, станут заливкой для неё:
Работа маски в Фигме
Однако если мы поместим маску в группу, то ее действие будет распространяться только на слои, расположенные над ней:
Маска в группе в Фигме
Заливкой для маски могут выступать изображения и векторы, в том числе и текст:
Интерактивные прототипы в Figma
Введение
Прототипы в Figma позволяют создавать имитацию работающего продукта, в котором работают некоторые элементы управления, есть возможность переходить на страницы и взаимодействовать с интерфейсом.
Прототипы позволяют открыть ваш будущий проект в браузере и уже на этапе разработки дизайна оценить пользовательский опыт при работе с ним. Кроме того, это удобный способ демонстрации своей работы коллегам или клиентам.
Если вы копируете элемент, то копируются и связи для прототипирования. Чтобы удалить их, выделите объект и в контекстном меню выберите Remove Connections.
Триггеры
Триггеры взаимодействия в Figma указывают, каким образом пользователь должен воздействовать на элемент интерфейса (кликнуть, навести курсор и так далее), чтобы произошло событие, связанное с этим элементом, например, переход на другую страницу или демонстрация стилей ховера (hover).
Клик или тап (On Click/On Tap)
Наступает, когда пользователь кликает по элементу курсором мышки или, в случае с сенсорными экранами, нажимает (однократно) пальцем.
Применяется для навигации: переход по ссылкам, ввод данных.
Перетаскивание (On Drag)
Наступает, когда пользователь перетаскивает элемент с помощью зажатой кнопки мыши или пальцем (на сенсорный экранах).
Может применяться для перемещения элементов (например, слайдер), и для более сложных манипуляций, напрмиер, для перетаскивания вниз для обновления.
При наведении (While Hovering)
Используется для изменения состояния при наведении (аналог hover в CSS) и демонстрации подсказок. Если убрать курсор с объекта, элемент будет возвращен в исходное состояние.
Клавиатура или геймпад (Keyboard and Gamepad Shortcuts)
Используется для считывания нажатия клавиатуры, в том числе сочетаний.
Мышь в области (Mouse enter)
Показывает фрейм назначения, если мышь наведена в специальную область
Когда мышь покидает область (Mouse Leave)
Показывает целевой кадр, когда курсор покидает специальную область. Может использоваться, например, для демонстрации подсказок, когда пользователь покинул поле, не заполнив его.
Начало касания (Mouse Down (Touch Down))
Событие, когда мышь только была нажата (начало клика), либо, для сенсорных экранов, когда палец только коснулся элемента.
Конец касания (Mouse Up (Touch Up))
Событие, когда мышь больше не нажата, либо, в случае с сенсорным экраном, палец больше не касается точки на экране.
Задержка (After Delay)
Позволяет запускать событие после паузы. Указывается в миллисекундах.
Анимация прототипа
Мгновенно / без анимации (Instant)
Мгновенно отображает фрейм назначения.
Растворение
Фрейм назначения будет плавно показан поверх исходного (Fade in).
Поддерживается настройка длительности и функции перехода.
Smart animate
Фигма сама ищет подходящие кадры и вставляет плавную анимацию перехода.
Поддерживается настройка длительности и функции перехода.
Перемещение, перекрытие (Move In / Move Out)
Фрейм назначения будет выезжать и перекрывать исходный фрейм.
Поддерживается настройка длительности, направления и функции перехода.
Смахивание (Push)
Фрейм назначения будет выталкивать исходный фрейм.
Поддерживается настройка длительности, направления и функции перехода.
Slide In / Slide Out
Перемещение с растворением
Виды взаимодействий
Вид взаимодействия определяет, что именно произойдет после события, вызванного одним из триггеров.
Навигация (Navigate)
Осуществляет переход от одного фрейма к другому.
Наложить поверх текущего фрейма (Open Overlay)
Открывает целевой фрейм над (поверх) исходного. Может использоваться для отображения всплывающих окон.
Пролистать до (Scroll To)
Пролистывает текущую страницу до вложенного элемента или фрейма. Может использоваться для создания меню с якорными ссылками. (Обновление от 8/12/20)
Замена (Swap With)
Заменяет один фрейм другим. При этом, в отличие от перехода «Навигация», в данном случае пользователь не сможет вернуться на предыдущую страницу с помощью команды «назад».
Закрыть наложения (Close Overlay)
Закрывает окно, наложенное поверх фрейма с помощью Open Overlay.
Переход по ссылке (Open URL)
Открывает страницу по ссылке URL за пределами прототипа.
Создание интерактивного прототипа
Ниже мы рассмотрим пример создания прототипа с различными переходами.
Выпадающее меню, открываемое по нажатию на кнопку
Мы будем использовать: триггер On Click со взаимодействием Open Overlay и триггер On Click со взаимодействием Close Overlay.
Итак, для начала мы сделаем два фрейма: первый экран и меню, которое будет открываться по клику на иконку:
Исходные фреймы
Обратите внимание, что фрейм меню мы располагаем обособленно от фрейма экрана — его расположение в прототипе настраивается при создании события.
1. Выделяем иконку меню и переходим во вкладку Prototype в правой панели.
2. Для начала нам надо выбрать триггер в разделе Interaction: вместо None ставим On click (переход при нажатии).
Выбор триггера
3. Теперь надо выбрать вид взаимодействия. Так как задача — показать окно меню поверх экрана, выбираем Open Overlay.
Триггер выбран, Выбор взаимодействия
4. Когда вид взаимодействия выбран, требуется указать целевой фрейм. Выбираем его из списка:
Выбор целевого фрейма
В списке показываются все доступные фреймы. Обратите внимание, что фрейма с экраном в этом списке нет.
Список доступных фреймов
5. На данном этапе нам предлагается выбрать несколько настроек, доступных для данного вида взаимодействия (Overlay) — это расположение, настройка «Закрыть при клике в свободную область» («Close when clicking outside») и фон за всплывающим окном («Add background behind overlay»)
Настройка отображения
6. Выбираем анимацию в интуитивно понятном интерфейсе
Настройка анимации
7. У нас также есть кнопка «Закрыть». Выделим ее и добавим событие, закрывающие окно Close Overlay:
Выбор триггера
Выбор взаимодействия
Событие добавлено
Обратите внимания, что взаимодействие Close Overlay не требует указания целевого фрейма — это и есть наш выбранный фрейм.
Просмотр прототипа (до клика)
Просмотр прототипа (после клика)
Hover с применением анимации Smart animate
Подробное описание работы «умной анимации» читайте в разделе Smart animate в Figma
Особенностью smart animate является то, что она сама находит все свойства, которые изменялись, для всех элементов фрейма. Таким образом вместо настройки анимации каждого элемента вы можете доверить это Figma, выбрав «умную анимацию».
Замена фрейма по нажатию кнопки клавиатуры
Подробное описание работы с клавиатурой читайте в разделе Работа с клавиатурой в прототипах Figma
Интерактивные прототипы Фигмы позволяют настроить взаимодействие не только с курсором (мышью), но и с клавиатурой.
Для настройки взаимодействия с хардварными кнопками в Figma используется триггер Key/Gamepad.
Настройка клавиатуры в прототипе Figma
Играй бесплатно в браузере!
Заполните форму, мы сделаем иконку
и добави ее в коллекцию
9 плагинов Figma, которые облегчат жизнь любого дизайнера
С небольшим запозданием публикую подборку плагинов, без которых вы больше не сможете представить свою работу в Figma. По-крайней мере я — точно! Подготовил для вас не только статью, но и видео, поэтому для тех, кто любит посмотреть — милости прошу ко мне в ютубчик 🙂
Это моя первая статья на vc.ru, поэтому немного расскажу о себе:
Меня зовут Алексей, я UX/UI дизайнер со стажем более 4 лет. Сейчас чуть больше года работаю в супер ламповой студии интерфейсов UXART. До этого тихо и мирно фрилансил:)
Название статьи говорит само за себя. Приятного чтения!
Вам знакома ситуация, когда заказчик предоставляет список сайтов-партнёров, а логотипы приходится искать самостоятельно? Этот плагин избавит нас от рутинного «гуглежа» и копания в «коде страницы», чтобы достать Logo.png или Logo.svg
Достаточно просто ввести домен сайта, чтобы в документ подгрузились нужные логотипы.
Согласитесь, что не всегда хочется рисовать графики и диаграммы на этапе проектирования. Чего лукавить, не всегда хочется или время не всегда позволяет разрабатывать их и на дизайне. Поэтому приходится «воровать» их с других проектов или вовсе вставлять «нагугленные» скриншоты.
Плагины Chart и Charts генерируют отличные диаграммы по заданным значениям
Перспективный, но пока что бесполезный для меня плагин. Периодически в работе я использую эмоджи: где-то блок сообщений со смайликам, где-то они вообще основа фирменного стиля.
В поиске смайликов помогает emojipedia. Надеялся, что плагин заменит этот ресурс, но разработчики не добавили самый популярный набор — от Apple. Просто взяли и не добавили. Благо, в скором времени обещают исправить своё упущение 🙂
Ну а пока довольствуемся «классным» набором от Твиттера.
Любите презентовать клиенту микроанимашки, примеры анимации и в целом работу сайта? Этот плагин позволит «не ходить» в другие приложения и работать прямо в Фигме. Здорово же?
Наконец-то можно удобно добавлять иконки.
Раньше я использовал flaticon и собственные наборы иконок на отдельном артборде и они кочевали от одного проекта к другому. Проблема этого способа в его ограниченности — иконки есть не для всех случаев жизни.
С этим плагином можно забыть про дефицит и долгий поиск иконок. Все они векторные, классные и на любой вкус и цвет. Я доволен 🙂
Название плагина говорит само за себя. Теперь нам не придётся заходить в браузер, чтобы сгенерировать карту.
В этом плагине есть и Google Maps и Mapbox и всевозможные настройки:
В общем всё, что нужно для удобной генерации карт.
Кстати, напишите ваше мнение по поводу того, что у аналогичного Mapsicle при отсутствии гугла в 8 раз больше скачиваний. Я не понимаю.
Снова плагин, название которого говорит само за себя. С этим плагином (как и с многими другими) больше не нужно использовать сторонние сервисы.
QR code generator «в прямом эфире» генерирует любую фразу в виде QR кода.
Плагин, который вряд ли поможет на дизайне, потому что дизайн таблиц как отдельный вид искусства, но точно сэкономит время на проектировании.
Открыли плагин → Задали параметры → Бинго!
Особенно радует то, что если не задать значения ячейкам, они сразу появляются с текстовым слоем. Лайк!
«Вишенка на торте» в нашей подборке. За этот плагин я любил скетч и «ненавидел» фигму.
С помощью него мы можем «оживить» макет существенно быстрее. Теперь не придётся открывать браузер, заходить на сайт, авторизовываться, копировать/скачивать.
Всё это заменяют 2 клика — открыть плагин → Сгенерировать картинку. Так же просто, как 2х2.
Делитесь в комментариях, какими плагинами пользуетесь вы, какие можете посоветовать в дополнение к этой подборке.
Всем — мир, а за удобными интерфейсами — в UXART.
Figmotion — самые примитивные возможности анимирования. Приниплу и другим инструментам это не конкурент.
Brandfetch — дает логотипы только крупных компаний (типа дрибббла и беханса, чтож еще нужно дизайнерам то), которые никому особо не нужны. Маил.ру вообще не дал. Яндекс какой то левый.
Есть интересный плагин Polyglot. Для перевода текстов на разные языки. Тоже пока косячно работает.
Content Reel вставляет заготовки текстов в виде имен, адресов, телефонов и прочего. Хорошая штука. Скоро должны добавить фотки людей.
Почти все восхищения плагинами притянуты за уши. Они все сырые, косячные и с примитивным функционалом. Появление плагинов — это круто, согласен. Сам пользуюсь Фигмой и доволен. Но очевидно, что над этими плагинами еще работать и работать.
Спасибо за ответ, Александр!
Тоже сначала заинтересовал Content Reel, но для меня он бесполезен, потому что 90% наших заказчиков — русскоязычные.
Сырые, косячные — может быть. Но точно не все и точно не всегда так будет. Каждый день добавляют новые, а старые допиливаются.
Для бета версии очень даже неплохой результат по количеству плагинов в целом и качеству отдельных экземпляров.
Из всего перечисленного ничего нет что может использоваться больше одного раза в неделю(если вы не ферма по производству лендингов). Фигма настолько революционный продукт что отстает от adobeXD на пол года или год(не помню когда там плагины появились)
Спасибо за ответ, Сергей!
Если раз в неделю каждый плагин будет ускорять и упрощать мою работу — я буду ему очень благодарен. Это ведь здорово)
Подскажите, а чем конкретно на ваш взгляд XD обгоняет Фигму?
Могу ответить:
— Лучшая производительность за счёт нативного приложения
— Нет лишних функций, работает более интуитивно (на моем опыте)
— Adobe Cloud и хорошая связь с Photoshop, Ai
— Repeat grid (можно заполнять данными из Google Sheets/Json автоматически через плагин)
— Auto animate
+ Пошарю немного плагинов:
—- Подставка аватаров (с фильтром)
—- Lorem ipsum (по комбинации клавиш)
—- Color designer
—- Confetti
—- QR code maker
—- Экспорт в html/css. Quest AI
—- Selection, выделяет элементы в проекте по параметрам
—- Поиск по картинкам Unsplash
—- Плагин для accessibility. (Контраст и т.д.)
—- World Ready. Перевод и локализация
—- Icons (из Font awesome например)
—- Mimic, копирование assets с сайтов
—- Плагины интеграции с сервисами для тестирования прототипов/trello.
мне люто нравится еще возможность быстро записать скринкаст фичи и согласование макетов(комментирование)/передача спеков разрабам (не надо отдельно иметь zeplin итп ). А вот то что они обновили отображение артбордов в шеренной ссылке (таблице) стало очень не удобно
Фигма тоже умеет в комментирование и для неё так же не нужен зеплин) Я вам больше скажу, при работе с фигмой даже исходники скидывать не нужно.
Скопировал ссылку → Выдал доступы → Радуешься
Спасибо за ответ, Макс!
Имхо, но всё это дело вкуса и привычки. У меня был опыт работы с XD на нескольких проектах и знаете, я давно так не плевался от софта..
«Лучшая производительность за счёт нативного приложения»
У фигмы есть десктопное приложение, ни разу не сталкивался с проблемами производительности. На одной странице может быть более 20 итераций десктопного приложения, всё летает отлично)
«Нет лишних функций, работает более интуитивно (на моем опыте)»
О каких лишних функциях фигмы идёт речь?
«Adobe Cloud и хорошая связь с Photoshop, Ai»
Субъективно, но это избыточный функционал)
«Repeat grid (можно заполнять данными из Google Sheets/Json автоматически через плагин)»
Ну а тут снимаю шляпу перед разработчиками. Эта фича действительно классная
Но коллективную работу, возможность сесть и работать с любого устройство прямо из браузера, я не променяю ни на какой XD)
Каждый выбирает тул под свои задачи и для своих условий.
У меня просто немного горит с того что с моей довольно мощной конфигурацией и последним софтом она умудряется подтормаживать уже при добавлении пары картинок, а при такой работе она бесполезна для меня. Думаю это из-за 4к разрешения, но я специально покупал такой монитор для дизайна, а тул для дизайна не адаптирован под него, что вызывает вопросы))
В XD, кстати, функция коллаборации уже на поздних стадиях разработки, видел демку)
+ Документы тоже создаются и хранятся в облаке по дефолту. И чтобы поделиться исходники достаточно написать email получателя
Из плагинов для себя считаю самыми полезными:
1) Unsplash — избавил от их жутко тормозного сайта с рекламой какой-то хрени для кожи (да горит в аду вся реклама).
2) QR-code Generator — теперь QR в несколько кликов, раньше пользовался imgonline.com.ua
3) Lorem Ipsum — особенно помогает заполнение всего текстового блока. Раньше копипастил с разных сайтов.
4) Splitter — помогает копипастнуть список и разделить его на отдельные блоки. Раньше делалось все вручную.
Из тех, что требуют доработки:
1) Figmotion — функционал чуть менее, чем никакой. Есть только простейшая анимация.
2) Brandfetch — чаще всего тянет всякую растровую хрень размером с мышиный пинус.
+ только что нашел PasteSVG, который позволяет поместить изображение в проект, непосредственно скопировав код SVG в Figma. Полезная штука.
Сегодня зашёл в список плагинов и был приятно удивлён — появилось очень много нового)
Касательно Lorem Ipsum — считаю, что в 2019 году контент подобного вида выглядит чужеродно, особенно когда работаешь с русскоязычным сайтом.
ИМХО, но куда лучше использовать релевантный контент. С сайта заказчика, либо из статей.
На худой конец — fishtext.ru
Все эти плагины для тех, кто клепает по паре лендосов в день на скорую руку
Brandfetch, к сожалению выдает далеко не ту интерпритацию, которая нужна. Поверхностный плагин.
Figmotion не позволяет нормально использовать анимацию мелких объектов внутри проекта, в прототипе.
.
Ждем нормальных плагинов для «тяжеловесных» проектов
Спасибо за ответ, Максим!
Мы — не «клепаем» по паре лендосов в день на скорую руку, но при этом плагины действительно помогают в работе с «тяжеловесными проектами». Наверное, тут на вкус и цвет)
Касательно Brandfetch — да, работает не так, как хотелось. Иногда не находит вовсе, иногда подгружает большие SVG. Всё же плагины ещё в beta версии. Надеемся, что допилят 🙂
А я все равно был приятно удивлен, когда увидел такой апдейт по плагинам) Да, что-то криво работает, нужно дорабатывать функционал и т.д. и т.п. Но сам факт наличия плагинов уже говорит о том, что Фигма двигается в правильном направлении. Я думаю, еще пройдет немного времени и будет прям все красиво)
Да, я тоже испытал максимально тёплые чувства, когда анонсировали этот апдейт
Поставить коэффициент при экспорте.
PS. ОЙ, какой же я некропостер. Не заметил дату коммента/поста