UX-UI Design | IF

Плагин Color Overlay позволяет перекрашивать PNG прямо в Фигме Как пользоваться: 1. вставьте png 2. запустите плагин 3. обновите шестнадцатеричный код цвета или просто укажите подходящий в палитре 4. выберите свое изображение и нажмите «Перекрасить» #Figma_Plugin

Плагин Avocode экспортирует фреймы Фигмы в Avacode. Как пользоваться: 1. Зайдите в свою учетную запись Avocode 2. В Figma, перейдите в Плагины и выберите Авокод. Появится новое окно экспорта 3. Выберите любое количество фреймов и нажмите EXPORT Avocode откроется в новой вкладке браузера. Выберите проект или папку, где хотите синхронизировать свои проекты, и все #Figma_Plugin

#Todays_Inspiration

Плагин Radium генерирует повернутых копий выбранного объекта. Идеально подходит для проектирования часов и других радиальных интерфейсов. #Figma_Plugin

Плагин Freepik позволяет искать изображения с сайта freepik.com. Как пользоваться: 1. Запустите плагин Freepik 2. Используйте строку поиска, чтобы найти фотографию или просмотреть по предпочитаемой категории 3. Нажмите на нужную фотографию, чтобы добавить ее в свой проект и начать редактирование #Figma_Plugin

#Todays_Inspiration

Плагин Amplitude Event Planner позволяет быстро создавать метки событий поверх дизайнов для наглядного отображения, какие действия или события пользователя следует отслеживать. Как создать метку: ● Выберите фрейм или слой, на котором должна быть выделена метка события. ● Выберите «Создать метку события» в плагине Amplitude Event Planner. ● Опишите свое мероприятие: Вы можете легко редактировать метки, просматривать / скрывать метки и экспортировать все события в виде файла CSV или напрямую в планировщик схемы амплитуды одним щелчком мыши. #Figma_Plugin

Плагин Angle Mockups подставляет макет в изометрические мокапы. Чтобы этот плагин работал, нужно создать векторную форму экрана, в которой хотите применить дизайн своего приложения. Это можно нарисовать с помощью инструмента «Перо» (P) с четырьмя углами (не обязательно прямоугольник). #Figma_Plugin

#Todays_Inspiration

Плагин Avatars добавляет случайные пользовательские аватарки. Выбираем любой тип элемента и запускаем плагин. Он вставит изображение аватара в качестве заливки для выбранного элемента. Можно запустить плагин ничего не выбирая и он добавит элемент с аватаром. Изображения собираются из различных источников, включая randomuser.me, tinyfac.es, imdb.com, пожертвованные изображения и другие источники. #Figma_Plugin

Плагин API Sync синхронизирует дизайн с данными API Особенности: ● Загрузить JSON из API URL или вставить как текст ● Перейдите в JSON в простом интерфейсе и выберите путь ● Заполните, подключите и синхронизируйте свои слои с текстом и изображениями Форматирование: Поскольку данные не всегда соответствуют тому, как мы хотим их визуализировать, вы можете отформатировать текстовые результаты перед их заполнением. Для гибкости форматирование выполняется с использованием кода js, где можете использовать $ value в качестве переменной, исходящей из JSON. Вот несколько примеров: ● John-follower -> $value.split(‘-‘)[0] -> John ● 224.50 -> ‘€ ‘ + Math.round($value) -> € 225 ● true -> $value ? ‘available’ : ‘occupied’ -> available ● 1 -> [‘Clear’, ‘Rain’, ‘Snow’][$value] -> Rain ● 1988 -> «‘» + ($value).toString().substring(2,4) -> ’88 #Figma_Plugin

#Todays_Inspiration

Плагин Bannerify анимирует и экспортирует готовые HTML-баннеры. Как пользоваться: 1. Установите Bannerify и создайте новый проект Figma. 2. Создайте столько фреймов разных размеров, сколько вам нужно для ваших баннеров. 3. Добавьте любые изображения, текстовые и кнопочные слои в ваши фреймы. 4. Запустите Bannerify на странице, содержащей фреймы вашего баннера. 5. Примените некоторые анимации и время для слоев внутри каждого кадра. 6. Нажмите кнопку «Экспорт баннеров в HTML», чтобы открыть панель экспорта. 7. Выберите формат / параметры экспорта и нажмите «Экспорт баннеров». 8. Скачивайте и наслаждайтесь вашими HTML баннерами! #Figma_Plugin

Плагин Automatic Style Guides подготовит презентабельное руководство по стилю для клиентов и разработчиков одним нажатием кнопки. Как пользоваться: 1. Создайте несколько локальных текстовых и цветовых стилей 2. Нажмите Automatic Style Guides > Создать руководство по стилю 3. Новая страница под названием «Руководство по стилю» была добавлена в ваш документ Доступные теги текста: {{}} MyTextStyle.id {{}} MyTextStyle.type {{}} MyTextStyle.name {{}} MyTextStyle.fontFamily {{}} MyTextStyle.fontStyle {{}} MyTextStyle.fontSize {{}} MyTextStyle.letterSpacing {{}} MyTextStyle.lineHeight {{}} MyTextStyle.textCase {{}} MyTextStyle.textDecoration {{}} MyTextStyle.paragraphSpacing Цветовые стили: {{}} MyColorStyle.id {{}} MyColorStyle.type {{}} MyColorStyle.name {{}} MyColorStyle.key {{}} myColorStyle.paints {{}} MyColorStyle.r {{}} MyColorStyle.g {{}} MyColorStyle.b {{}} MyColorStyle.a {{}} MyColorStyle.rgba {{}} MyColorStyle.remote {{}} MyColorStyle.description #Figma_Plugin

#Todays_Inspiration

Плагин Attention Insight проверяет с помощью искусственного интеллекта как будут пользователи реагировать на макет. Как пользоваться: 1. Выберите кадр, который вы хотите проверить 2. Go: плагины> Внимание Insight> Analyzy Design 3. Подождите 30 секунд 🕓 и проверьте результаты #Figma_Plugin

Плагин Anima преобразует ваш дизайн Figma в код. Anima позволяет создавать прототипы за считанные минуты, публиковать и экспортируйте HTML. #Figma_Plugin

#Todays_Inspiration

Плагин Autocrop автоматически обрезает дополнительное пространство вокруг изображения. Изображение в Фигме на самом деле представляет собой форму (обычно прямоугольник) с заливкой изображения. Этот плагин поддерживает обрезку 1 или более прямоугольных изображений. #Figma_Plugin

С плагином Arrow Auto не нужно рисовать стрелки между интерфейсами для потоковых диаграмм пользовательского интерфейса. Просто одним щелчком мыши, чистая и гладкая стрелка будет нарисована между двумя выбранными элементами, с изменяемыми направлениями. Отрегулируйте цвет всех стрелок одновременно. Блокируйте / разблокируйте, скройте / покажите все стрелки вместе, чтобы они не мешали вашей работе. Всегда двигать элементы вокруг? Не волнуйтесь! Просто нажмите «Обновить», и все стрелки будут автоматически отслеживать положение элементов и переподключаться. Легко! #Figma_Plugin