*2D Auto Layout
Автоматически перемещайте элементы в следующую строку (или столбец), если они выходят за пределы рамки.
Style Lens
Плагин отображает все заливки, шрифты, обводки, тени, размытия, радиусы и текст, которые вы используете на своей странице, и позволяет быстро вносить широкие изменения сразу во все слои.
ColCalc
Плагин поможет рассчитать и выбрать правильный размер страницы и отступы, чтобы все колонки макета были одинаковой ширины.
Responsive
Предварительный просмотр ваших адаптивных конструкций внутри Figma!
*Measure Tools
Плагин используется для команды разработчиков для определения линии измерения и добавления значений или стиля идентификатора.
*Autoflow
Позволяет легко рисовать потоки.
Просто выберите 2 объекта, и между ними будет волшебная линия.
Просто выберите 2 объекта, и между ними будет волшебная линия.
Как это работает
Использование:
Дополнительную информацию можно найти по адресу https://github.com/praneshr/guidemate.
Ограничения:
- Выберите фрейм, группу или форму.
- Откройте Guide Mate из меню плагинов.
- Нажмите один из значков на панели ярлыков вверху, чтобы добавить направляющие слева, справа, сверху, снизу или в средней точке.
- Введите данные в форму и нажмите «Add Guides» для создания пользовательских руководств.
Дополнительную информацию можно найти по адресу https://github.com/praneshr/guidemate.
Ограничения:
- При использовании плагина должен быть выбран хотя бы один фрейм, группа или форма.
- Мульти выбор не поддерживается. Вместо этого вы можете сгруппировать элементы и использовать плагин
- Любые выбранные элементы должны быть внутри рамки.
*Nisa Text Splitter
Простой способ разбить ваш текст / список на мелкие текстовые фрагменты.
- Разделите ваш текст с помощью разрывов строк на маленькие кусочки
- Разделить на столбцы (используйте 2 переноса строки для разделения столбцов)
- Разделенное слово
- Сохранить стили после разделения текста
- Присоединяйся обратно
Glyph Picker
Плагин копирует в буфер обмена выбранный глиф, из образцов в один клик.
Как это работает
- Для текста: выберите один или несколько текстовых слоев в дизайне, затем выберите тип текстовой строки на вкладке «Текст» в Reel. Некоторые текстовые строки можно изменить или изменить, щелкнув значок… справа.
- Для изображений: выберите один или несколько слоев изображения в дизайне, затем выберите тип фотографии на вкладке «Люди» в Content Reel.
- Для значков: выберите один или несколько текстовых слоев в дизайне, затем выберите значок на вкладке «Значки» в Reel. Или нажмите значок в Content Reel, чтобы разместить его прямо на вашем дизайне. Убедитесь, что Segoe MDL2 Assets установлен.
- Content Reel можно свернуть в меньший размер, чтобы он не мешал вашему дизайну. Просто нажмите на шеврон в нижней части палитры.
*Text Prettier
Этот плагин улучшает вашу типографику и помогает вам сделать ваши тексты разборчивыми, читаемыми и привлекательными при отображении.
Text Highlighter
Плагин применяет регулярное выражение и изменяет цвет тех частей данных в ваших текстовых слоях, которые соответствуют ему.
Как это работает
- Выберите нужные текстовые слои.
- Запустите расширение
- Скопируйте данные из таблицы Excel или из любого другого документа.
- Нажмите «Вставить данные».
Typescales
Плагин генерирует визуальный ритма в размерах шрифта. Начиная с базового значения, размер шрифта увеличивается и уменьшается от этого размера с установленным вами множителем.
Text Styles Organizer
Плагин генерирует локальные стили текста на основе форматирования обычных текстовых слоев.
*Unsplash
Плагин поможет вставить случайное изображение или искать что-то конкретное.
Лицензия Unsplash позволяет свободно использовать изображения как для коммерческих, так и для личных проектов.
Лицензия Unsplash позволяет свободно использовать изображения как для коммерческих, так и для личных проектов.
Pexels
Pexels — это бесплатное сообщество для обмена фотографиями и видео, состоящее из миллионов высококачественных фотографий и видео. Изображения Pexels щедро пожертвованы растущим сообществом из более чем 100 000 участников со всего мира.
Изображения бесплатны для личного и коммерческого использования.
Изображения бесплатны для личного и коммерческого использования.
*Insert Big Image
Вставьте и сохраните исходное разрешение больших изображений.
— Вставить большое изображение
Открывает диалоговое окно, в котором можно выбрать один или несколько файлов изображений. Интеллектуально разбивает и вставляет каждый файл изображения в виде набора небольших изображений. (Это нужно для обхода ограничения в Figma, когда изображения размером более 4096 пикселей уменьшаются.)
— Вставить большое изображение
Открывает диалоговое окно, в котором можно выбрать один или несколько файлов изображений. Интеллектуально разбивает и вставляет каждый файл изображения в виде набора небольших изображений. (Это нужно для обхода ограничения в Figma, когда изображения размером более 4096 пикселей уменьшаются.)
*Iconify
Импортируйте иконки Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji и многие другие (более 50 наборов, содержащих более 40 000 иконок) в документ Figma в виде векторных фигур.
Figmiro
Экспорт и синхронизация кадров из Figma в Miro позволит вам быстро обновлять макеты и доставлять новые версии.
С Figmiro вы и члены вашей команды сократите объем ручного экспорта кадров.
С Figmiro вы и члены вашей команды сократите объем ручного экспорта кадров.
Duotones
Применить фильтр эффектов Duotone на изображениях.
Mockuuups Studio
Супер-легкий генератор макетов с более чем 500 различными сценами. Плагин содержит все необходимое для создания макетов продуктов, выдающихся маркетинговых материалов, даже визуального контента для социальных сетей или блогов.
Frame Resizer
Изменение размера фрейма и компонента с точки привязки, без изменения размера дочерних слоев и изменения настроек ограничений.
Proportional Scale
Легко изменяйте размеры ваших фреймов, пропорционально изменяя все остальные атрибуты. Этот плагин поддерживает изменение размера в процентах, по ширине или высоте.
Как это работает
- Сделайте выбор
- Запустите плагин, чтобы создать компонент (или несколько)
- Новый мастер-компонент будет создан на странице компонентов, оставив экземпляр на месте
Выбрав несколько элементов, вы также можете превратить все элементы верхнего уровня в выборку сразу в несколько компонентов.
Этот плагин также имеет вторичную функцию под названием «Сбор случайных компонентов». Эта функция найдет все главные компоненты за пределами страницы выделенных компонентов и переместит их на эту страницу, оставив экземпляр на месте.
Figma Nounproject
Плагин позволяет быстро искать иконки и вставлять их в ваш дизайн.
*Figmoji
Добавьте Emojis в ваш проект.
Просто выберите нужный эмодзи, и Figmoji добавит svg выбранного эмодзи.
В настоящее время поддерживается только Twitter Emojis
Просто выберите нужный эмодзи, и Figmoji добавит svg выбранного эмодзи.
В настоящее время поддерживается только Twitter Emojis
Настройки
Это варианты, которые вы должны настроить в своей карте!
[Google Maps]
[MapBox]
[Google Maps]
- Адрес
- Типы карт (включая дорожную карту, спутник, гибрид и местность)
- Уровень масштабирования
- Отображение маркера
- Пользовательский JSON с помощью мастера стилей Google Maps API или Snazzy Maps
[MapBox]
- Адрес
- Стиль
- Уровень масштабирования
- Подшипник
- Шаг
*Mapsicle
С Mapsicle вы можете быстро и без проблем разместить карты в своих макетах.
Интерактивная карта позволяет перемещаться в идеальное место или вы можете искать место в любой точке мира.
После того, как вы разместили карту в своем дизайне, вернитесь в Mapsicle, чтобы настроить местоположение, стиль, уровень масштабирования и многое другое.
Mapsicle использует карты Mapbox, чтобы предоставить вам множество вариантов настройки.
Интерактивная карта позволяет перемещаться в идеальное место или вы можете искать место в любой точке мира.
После того, как вы разместили карту в своем дизайне, вернитесь в Mapsicle, чтобы настроить местоположение, стиль, уровень масштабирования и многое другое.
Mapsicle использует карты Mapbox, чтобы предоставить вам множество вариантов настройки.
QR Code Generator
Плагин поможет быстро создать векторный QR-code. Просто введите свой контент или URL, затем нажмите «Place QR code» или CMD / Control + Enter.
Это также отлично подходит для создания QR-кода, чтобы поделиться ссылкой на файл Figma — или ссылку на ваш прототип.
Совет: на iOS — встроенное приложение камеры может сканировать QR-коды.
Это также отлично подходит для создания QR-кода, чтобы поделиться ссылкой на файл Figma — или ссылку на ваш прототип.
Совет: на iOS — встроенное приложение камеры может сканировать QR-коды.
Как использовать
Последовательность
Последовательно переименовывайте слои в порядке возрастания или убывания.
Текущее имя слоя
Ключевое слово% * скопирует название текущего выбранного слоя (ев).
Имя слоя
Вы можете использовать% * с комбинацией букв для преобразования регистра имени слоя.
Добавить ширину и высоту
Переименуйте слой или слои с шириной % W и высотой % H слоя.
Найти и заменить в выбранных слоях
Замените любое количество слов или символов из выбранных слоев.
Последовательно переименовывайте слои в порядке возрастания или убывания.
- Ключевое слово % n — Последовательность по возрастанию
- Ключевое слово % N — Последовательность по убыванию
- Ключевое слово % A — Алфавитная последовательность
Текущее имя слоя
Ключевое слово% * скопирует название текущего выбранного слоя (ев).
Имя слоя
Вы можете использовать% * с комбинацией букв для преобразования регистра имени слоя.
- Ключевое слово % * u% - конвертировать в верхний регистр
- Ключевое слово % * l% - Преобразовать в нижний регистр
- Ключевое слово % * t% - Преобразовать в титульный регистр
- Ключевое слово % * uf% - Преобразовать в верхнее первое слово
- Ключевое слово % * c% - Преобразовать в camelCase (это удалит пробелы)
Добавить ширину и высоту
Переименуйте слой или слои с шириной % W и высотой % H слоя.
Найти и заменить в выбранных слоях
Замените любое количество слов или символов из выбранных слоев.
*Similayer
Этот плагин выводит встроенную в Figma команду «Выбрать все с помощью …» на следующий уровень.
Выберите похожие слои; на основе целого ряда свойств.
После выбора слоя запустите этот плагин, чтобы выбрать все другие слои на основе определенных свойств. Вы можете выбрать несколько!
Случаи применения:
Выберите похожие слои; на основе целого ряда свойств.
После выбора слоя запустите этот плагин, чтобы выбрать все другие слои на основе определенных свойств. Вы можете выбрать несколько!
Случаи применения:
- Выбор всех экземпляров определенного компонента для замены на другой.
- Замена всех слоев с определенным стилем текста на новый
- Выбор всех «карточек» с одинаковым радиусом угла и цветом заливк
Как использовать
- Выберите несколько кадров или слоев.
- Запустите Sort It и выберите либо алфавитный порядок (A-Z), либо противоположный (Z-A).
(Он будет сортировать только те слои, которые выбраны напрямую, а не слои внутри кадра)
Инструкции по использованию
Выберите несколько текстовых слоев, затем перейдите в меню > «plugins» > «Add numbers to texts».
С выбором:
С выбором:
- Произвольный текст (Суффикс)
- Повторно использовать текущий текст
- Номера
- Римские цифры
- Математические выражени
- Алфавитная нумерация (Прописные буквы)
- Алфавитная нумерация (Строчные буквы)
- Снизу вверх, сверху вниз, слева направо, справа налево
- Формула ${(10 + n) * 2}, где (n-любое число)
Datavizer
С легкостью создавайте гистограмму, точечный график или линейную диаграмму со своими собственными данными! Или используйте случайный набор данных для быстрого создания диаграмм или фиктивных данных (например, спарклайны для макета панели мониторинга).
Когда вы загрузите свои собственные данные (файл CSV или JSON), мы возьмем любые цифровые клавиши и позволим вам выбрать одну для каждого соответствующего измерения.
Когда вы загрузите свои собственные данные (файл CSV или JSON), мы возьмем любые цифровые клавиши и позволим вам выбрать одну для каждого соответствующего измерения.
*Find and Replace
Ищите тексты на своей странице и заменяйте их так же, как текстовый редактор.
Вы можете искать объекты на своей странице либо по текстовому содержимому, либо по имени слоя.
Когда нужно «Найти»:
Enter: перейти к следующему результату.
Shift + Enter: перейти к предыдущему результату.
Когда нужно «Заменить на»:
Enter: заменить, а затем перейти к следующему результату.
Cmd + Enter: заменить все.
Вы можете искать объекты на своей странице либо по текстовому содержимому, либо по имени слоя.
Когда нужно «Найти»:
Enter: перейти к следующему результату.
Shift + Enter: перейти к предыдущему результату.
Когда нужно «Заменить на»:
Enter: заменить, а затем перейти к следующему результату.
Cmd + Enter: заменить все.
Namespaces
Простой плагин для форматирования имен фреймов, компонентов, слоев и т. д. Автоматизирует и объединяет все элементы в одном пространстве имен.
Игнорирует:
01-name
375-frame-name
layer-name
Игнорирует:
01-name
375-frame-name
layer-name
Как это работает
- Выберите слои, к которым вы хотите применить Pixel Perfect.
- Pixel Perfect будет работать на всех дочерних элементах любого выбранного фрейма или группы, так что вы можете просто выбрать кадры верхнего уровня.
- Запустите плагин
- Pixel Perfect изменит положение размера каждого слоя, чтобы его координаты x / y, ширина и высота были на 200 пикселях вместо 200,45
- По умолчанию Pixel Perfect не влияет на точки привязки формы, но вы можете включить эту функцию, и Pixel Perfect также будет перемещать точки привязки любой выбранной траектории формы.
*Instance Finder
Найдите все экземпляры компонента, используемого в вашем файле.
Выберите один экземпляр или компонент, и плагин будет искать все страницы и все фреймы и создавать список всех используемых экземпляров.
Список разбит на отдельные страницы для удобной навигации. Нажатие на любой элемент увеличит Экземпляр.
Совет: используйте клавиши со стрелками влево и вправо для перемещения между экземплярами.
Выберите один экземпляр или компонент, и плагин будет искать все страницы и все фреймы и создавать список всех используемых экземпляров.
Список разбит на отдельные страницы для удобной навигации. Нажатие на любой элемент увеличит Экземпляр.
Совет: используйте клавиши со стрелками влево и вправо для перемещения между экземплярами.
Как это работает
- Выберите слои, которые вы хотите выровнять
- Запустите плагин
- Вы можете выбрать слои, когда плагин уже активен, просто нажмите кнопку «Получить выделение».
- Выберите слой, который вы хотите оставить фиксированным.
- Нажмите на кнопки выравнивания.
Как это работает
- Выберите элемент или группу элементов, которые вы хотите организовать, или поместите их в сетку.
- Откройте Pattern Hero, добавьте соответствующие строки и столбцы.
- Выберите, чтобы повторить или перемешать элементы
- Нажмите Создать шаблон и БАМ!
Дорожная карта:
- Шаблоны — Позволяют вам создавать различные типы шаблонов, такие как размещение элементов в разных положениях и т. д.
Например: Конфетти — Создание элементов сходит с ума.
- Группировка по строкам и столбцам
Как это работает
Выберите один или несколько текстовых слоев и выберите язык, на который вы хотите перевести.
Через мгновение текст выбранных текстовых слоев будет заменен их переводами.
Вы также можете выбрать один или несколько фреймов, или групп, чтобы перевести все текстовые слои внутри них.
Через мгновение текст выбранных текстовых слоев будет заменен их переводами.
Вы также можете выбрать один или несколько фреймов, или групп, чтобы перевести все текстовые слои внутри них.
Как это работает
Копировать текст
Выберите текстовые объекты, которые вы хотите скопировать, и запустите «Copy Text». (Не поддерживает выбранный диапазон текста)
Вставить текст
Поддерживаемый объект
Выберите текстовые объекты, которые вы хотите скопировать, и запустите «Copy Text». (Не поддерживает выбранный диапазон текста)
Вставить текст
- Выберите текстовые объекты, которые вы хотите вставить, и запустите «Paste Text»
- Если вы хотите вставить в позицию курсора, вы должны запустить вставку по умолчанию (⌘V) с неформатированным текстом (вы получите его с помощью команды плагина «Copy Text»).
Поддерживаемый объект
- Text / Текст
- Group / Группа
- Frame / Фрейм
- Component
- Instanc
CSSGen
Генерация CSS препроцессоров SASS / LESS из ваших локальных стилей Figma
Легко генерировать CSS-переменные и миксины из определенных стилей Figma.
Плагин читает все используемые стили в документе Figma и позволяет вам экспортировать их в SASS / LESS
Легко генерировать CSS-переменные и миксины из определенных стилей Figma.
Плагин читает все используемые стили в документе Figma и позволяет вам экспортировать их в SASS / LESS
Wireframe
Плагин лучше всего подходит для создания прекрасных прототипов пользовательского потока и базовой структуры в Figma, поэтому никаких других комплектов или файлов не требуется!
Дизайнеры хотят упростить процесс на ранней стадии планирования проекта и мозгового штурма, чтобы плагин «Wireframe» играл главную роль.
Все файлы являются SVG, следовательно, они легко редактируются, и пользователь может легко управлять всеми действиями по созданию каркасов и созданию прототипов в соответствии со своими потребностями.
Дизайнеры хотят упростить процесс на ранней стадии планирования проекта и мозгового штурма, чтобы плагин «Wireframe» играл главную роль.
Все файлы являются SVG, следовательно, они легко редактируются, и пользователь может легко управлять всеми действиями по созданию каркасов и созданию прототипов в соответствии со своими потребностями.
Как это работает
Идея проекта и мозговой штурм
Wireframe приходит с учетом сотрудничества. Также Вы можете пригласить своего коллегу на figma и вместе в реальном времени спроектировать поток пользователей для вашего следующего проекта.
Пользовательские потоки и каркасная графика
У Wireframe есть более 350 пользовательских графических карт / карт для использования, которые охватывают большинство веб-элементов, взаимодействий и случаев использования.
Никаких других навыков и ресурсов не требуется
Каркас великолепен и прост в использовании, так как вам не нужно загружать или использовать какие-либо другие ресурсы на figma.
Wireframe приходит с учетом сотрудничества. Также Вы можете пригласить своего коллегу на figma и вместе в реальном времени спроектировать поток пользователей для вашего следующего проекта.
Пользовательские потоки и каркасная графика
У Wireframe есть более 350 пользовательских графических карт / карт для использования, которые охватывают большинство веб-элементов, взаимодействий и случаев использования.
Никаких других навыков и ресурсов не требуется
Каркас великолепен и прост в использовании, так как вам не нужно загружать или использовать какие-либо другие ресурсы на figma.
Как это работает
Шаг 1:
Убедитесь, что в вашем файле Google Sheets есть общедоступная ссылка.
Нажмите «Поделиться > Получить общедоступную ссылку».
Шаг 2:
Назовите свои слои figma соответственно:
Шаг 3:
Запустите этот плагин, вставьте свою ссылку и нажмите «Синхронизировать».
УКАЗАНИЕ КОНКРЕТНОГО ЛИСТА В РАБОЧЕМ КНИГЕ
Вы можете выбрать использование определенного листа в книге, назвав страницу в своем файле Figma аналогично тому, как вы называете слой — например, При именовании вашей страницы «Page 1 # Properties» будет использоваться лист «Properties» из вашего Google Листа.
Если вы не назовете свою страницу соответствующим образом, по умолчанию будет использоваться первый лист в вашей книге.
ИСПОЛЬЗОВАНИЕ ИЗОБРАЖЕНИЙ
Чтобы динамически вставить изображения на вашем слое — убедитесь, что значение в вашем Google Sheet для определенного свойства является URL-адресом изображения (оно должно заканчиваться на «.jpg", «.png» или «.gif»). Затем убедитесь, что вы называете слой Vector / Shape с соответствующим именем — например, «#image"
Убедитесь, что в вашем файле Google Sheets есть общедоступная ссылка.
Нажмите «Поделиться > Получить общедоступную ссылку».
Шаг 2:
Назовите свои слои figma соответственно:
- Добавьте «#», а затем имя значения, которое вы хотите синхронизировать
- Например: чтобы получить значение «Title», назовите текстовый слой «Title».
Шаг 3:
Запустите этот плагин, вставьте свою ссылку и нажмите «Синхронизировать».
УКАЗАНИЕ КОНКРЕТНОГО ЛИСТА В РАБОЧЕМ КНИГЕ
Вы можете выбрать использование определенного листа в книге, назвав страницу в своем файле Figma аналогично тому, как вы называете слой — например, При именовании вашей страницы «Page 1 # Properties» будет использоваться лист «Properties» из вашего Google Листа.
Если вы не назовете свою страницу соответствующим образом, по умолчанию будет использоваться первый лист в вашей книге.
ИСПОЛЬЗОВАНИЕ ИЗОБРАЖЕНИЙ
Чтобы динамически вставить изображения на вашем слое — убедитесь, что значение в вашем Google Sheet для определенного свойства является URL-адресом изображения (оно должно заканчиваться на «.jpg", «.png» или «.gif»). Затем убедитесь, что вы называете слой Vector / Shape с соответствующим именем — например, «#image"