9 patch Exporter 安卓点九图切图

About this plugin

IntroductionNinePatch Studio is a visual nine-patch (.9.png) editor built right inside Figma. Select any layer, define stretch and content regions interactively on a zoomable canvas, preview how the image scales with real content, then export a ready-to-use Android drawable ZIP in one click.Function DescriptionVisual canvas editor — Drag handles on all four edges of your asset to define stretch lines (top/left) and content padding lines (bottom/right). Only one unique line per edge is allowed, matching the nine-patch spec.Two edit modes — Switch between Stretch region and Content padding mode; each mode only allows editing its own sides to prevent mistakes.Live nine-patch preview — Resize the preview at any target width/height to instantly see how the image stretches. When content padding is set, editable preview text is rendered inside the content rect following real nine-patch rules.Auto-stretch — Automatically detect the opaque region of your asset and set sensible stretch defaults in one click.Zoom & pan canvas — Scroll to zoom, Cmd/Ctrl + scroll for precision zoom around cursor, drag to pan, or click View 100% to reset.Android-standard density export — Export all five Android density folders at once: mdpi (1×), hdpi (1.5×), xhdpi (2×), xxhdpi (3×), xxxhdpi (4×).One-click ZIP download — All density variants are packaged into a single ZIP with the correct drawable-*/name.9.png folder structure ready for direct import into Android Studio.Multi-language UI — Interface available in 21 languages with full RTL support.How to UseOpen the plugin in Figma and select any layer (frame, component, image, etc.).The asset loads automatically into the canvas editor.Choose Stretch region mode and drag the top and left border handles to define which pixels stretch.Switch to Content padding mode and drag the right and bottom border handles to define the content area.Use the Preview tab to set a target size and verify the stretch result. Edit the preview text to simulate content.In the Assets tab, choose which density tiers to export (all five are selected by default).Click Export .9.png — a ZIP file containing all selected densities is downloaded automatically.NotesOnly one stretch line and one content line per edge are supported, matching the Android nine-patch format.Stretch lines must be placed on the top/left edges; content padding lines must be on the right/bottom edges.The exported files are named .9.png without any @2x-style suffix — this is the correct Android convention.The plugin reads the layer at 1× scale as the source image. For best results, use an asset designed at mdpi (1×) baseline, or set the source density chip in the left panel to match your design density.Preview text is only rendered when content padding has been defined.介绍NinePatch Studio 是一款内嵌于 Figma 的可视化点九图（.9.png）编辑与导出工具。选中任意图层，即可在可缩放的画布上交互式地定义拉伸区域和内容边距，实时预览内容填充效果，一键导出符合 Android 规范的 drawable ZIP 包。功能说明可视化画布编辑器 — 拖动资源四边的控制点，分别定义拉伸线（上/左边）和内容边距线（下/右边）。每条边只允许一条唯一的线段，严格遵循点九图规范。双编辑模式 — 可在「拉伸区域」和「内容边距」两种模式间切换，每种模式仅允许编辑对应边，防止误操作。实时点九图预览 — 自由设置目标宽高，即时查看图片拉伸效果。设置内容边距后，预览区会按真实点九图规则在内容矩形内渲染可编辑的预览文字。自动识别拉伸区域 — 一键自动检测资源的不透明区域，智能设置合理的拉伸默认值。缩放与平移画布 — 滚轮缩放，Cmd/Ctrl + 滚轮以光标为中心精细缩放，拖拽平移，或点击「View 100%」快速复位。Android 标准密度导出 — 一次性导出全部五个 Android 密度目录：mdpi（1×）、hdpi（1.5×）、xhdpi（2×）、xxhdpi（3×）、xxxhdpi（4×）。一键 ZIP 下载 — 所有密度变体打包为一个 ZIP 文件，内部已按 drawable-*/name.9.png 目录结构组织，可直接导入 Android Studio。多语言界面 — 支持 21 种语言，完整支持 RTL 布局。使用方法在 Figma 中打开插件，并选中任意图层（Frame、组件、图片等均可）。资源会自动加载到画布编辑区。选择拉伸区域模式，拖动上边和左边的控制点，定义哪些像素参与拉伸。切换至内容边距模式，拖动右边和下边的控制点，定义内容区域。在 Preview 标签页设置目标尺寸，验证拉伸效果；编辑预览文字，模拟实际内容填充。切换到 Assets 标签页，按需勾选要导出的密度档位（默认全选）。点击导出 .9.png，ZIP 文件将自动下载，内含所选全部密度的点九图文件。注意事项每条边只支持一条拉伸线或内容边距线，符合 Android 点九图格式规范，不可重复添加。拉伸线只能在上/左边设置，内容边距线只能在右/下边设置。导出文件名为 .9.png，不带 @2x 等后缀——这是 Android 的标准命名规范。插件以 1× 倍率读取图层作为源图。建议以 mdpi（1×）基准设计资源，或在左侧面板选择与设计稿匹配的源密度档位，以确保导出结果精度最佳。预览文字仅在已设置内容边距时才会显示