Back to Plugins
切图尺寸整合 Image Size Integration

切图尺寸整合 Image Size Integration

Easily integrate and adjust image sizes for frames.

image sizeimage integrationimage previewframe integrationlayout adjustment

Plugin Preview

切图尺寸整合 Image Size Integration preview

About this plugin

介绍

切图尺寸整合插件让 Figma 用户能够高效地管理和整合图像,适用于框架、组、组件等设计元素。通过该插件,您可以调整图像大小,并应用统一的尺寸以确保设计的一致性。


功能说明

  1. 允许用户选择多个元素(框架、组、组件、文本、实例等)。
  2. 自动计算所选元素的最大宽度和最大高度。
  3. 在预览框内显示每个选定的图像,用户可以选择保持原始尺寸或根据最长边进行缩放。
  4. 开关功能:切换保持图像原始尺寸或根据预览框大小调整图像。
  5. 提供灵活的控制选项,用于调整图像在预览框中的显示方式。


使用方法

  1. 选择您想要预览和调整的元素(框架、组、文本、组件、实例等)。
  2. 点击“生成Base64预览图”按钮以生成图像预览。
  3. 使用开关切换,选择是保持图像原始尺寸还是根据预览框尺寸进行缩放。
  4. 在插件界面直接查看调整后的图像及其对应尺寸。


注意事项

  1. 本插件支持栅格图像和矢量元素。
  2. 图像将显示在固定大小的预览框内,缩放设置会根据您的开关选择进行应用。
  3. 插件操作依赖于 Figma 画布上的选中元素,请确保在使用插件前选中正确的元素。


Introduction

Image Size Integration allows Figma users to efficiently manage and integrate images within frames, groups, and components. With this plugin, you can adjust image sizes and apply uniform dimensions for a consistent design output.


Function Description

  1. Allows users to select multiple elements (Frames, Groups, Components, Text, Instances, etc.) in a Figma design.
  2. Automatically calculates the maximum width and height from the selected elements.
  3. Displays each selected image inside a preview box, either maintaining its original size or resizing it based on the longest side, as determined by the user's settings.
  4. A toggle feature to switch between maintaining the image's original size or scaling it to fit the preview box.
  5. Supports flexible control over how images are displayed within their allocated preview space.


How to Use

  1. Select the elements (Frames, Groups, Text, Components, Instances, etc.) you want to preview and adjust.
  2. Click the "Generate Base64 Preview" button to create image previews.
  3. Use the toggle to switch between keeping the image’s original size or scaling it to fit the preview box.
  4. View the adjusted images and their corresponding dimensions directly within the plugin's interface.


Notes

  1. The plugin supports both raster images and vector elements.
  2. Images will be displayed in a fixed-size preview box, and resizing settings apply based on your toggle choice.
  3. The plugin works with selected elements in Figma's canvas, so ensure you have the right items selected before applying the tool.

Plugin Details

Version3
CreatedFebruary 21, 2025
Last UpdatedFebruary 23, 2025
CategoryImport & export plugins
CreatorKingweiCheung
Stats5 installs, 3 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    dev
  • Allowed Domains:
    • https://cdnjs.cloudflare.com/