Advertisement

Figma-Export-Zip：便捷地将Figma资产打包成.zip文件

  •  5星
  •     浏览量: 0
  •     大小:None
  •      文件类型：ZIP

简介：
Figma-Export-Zip是一款工具插件，旨在帮助用户轻松快捷地将Figma设计项目中的各类资源导出为统一的.zip格式文件，极大提升了团队协作和设计交付效率。 Figma导出.zip :package: 轻松将Figma中的资产直接导出到.zip文件中。 用法： 在Figma中选择任何东西。 按Command键然后搜索“导出.zip”。 运行插件，您的选择和所有导出设置将被使用。 通过按下 Command + Shift + P 立即重新运行插件。 安装和贡献： 克隆存储库：git clone https://github.com/brianlovin/figma-export-zip.git 转到目录：cd figma-export-zip 安装figplug：npm i -g figplug 安装软件包：npm install 构建插件：figplug build -w -o=build 向Figma添加一个新的开发插件，选择figma-export-zip/build/manifest.json文件作为清单。

全部评论 (0)

还没有任何评论哟~
客服
客服
客服关闭
  • Figma-Export-Zip：便捷地将Figma资产打包成.zip文件
    优质
    Figma-Export-Zip是一款工具插件，旨在帮助用户轻松快捷地将Figma设计项目中的各类资源导出为统一的.zip格式文件，极大提升了团队协作和设计交付效率。 Figma导出.zip :package: 轻松将Figma中的资产直接导出到.zip文件中。 用法： 在Figma中选择任何东西。 按Command键然后搜索“导出.zip”。 运行插件，您的选择和所有导出设置将被使用。 通过按下 Command + Shift + P 立即重新运行插件。 安装和贡献： 克隆存储库：git clone https://github.com/brianlovin/figma-export-zip.git 转到目录：cd figma-export-zip 安装figplug：npm i -g figplug 安装软件包：npm install 构建插件：figplug build -w -o=build 向Figma添加一个新的开发插件，选择figma-export-zip/build/manifest.json文件作为清单。
     
  • Figma-Export-Icons：利用Figma REST API将SVG图标导入项目中
    优质
    Figma-Export-Icons是一款工具，它通过使用Figma的REST API自动将SVG格式的图标文件直接集成到设计项目中，简化了工作流程。 Figma-export-icons 是一个命令行脚本工具，用于通过 Figma REST API 从 Figma 文件导出并下载图标。运行该脚本会弹出向导以填写获取资产所需的配置信息。您也可以提供自己的 `icons-config.json` 配置文件来跳过这个向导步骤。 在完成配置后，系统将解析 Figma 文件找到图标框架，并根据提供的目录路径进行本地保存。示例配置如下： ```json { figmaPersonalToken: YOUR_PERSONAL_TOKEN, fileId: FILE_ID, page: Identity, frame: Icons, iconsPath: ./assets/svg/icons } ``` 脚本的主要特征包括向导生成配置，如果存在缺失的密钥信息，系统将提示用户输入。
     
  • 通过CLI从Figma项目中导出SVG (export-figma-svg)
    优质
    export-figma-svg是一款用于通过命令行接口（CLI）直接从Figma设计项目中高效提取SVG文件的工具。它简化了设计师和开发人员之间的协作流程，使得资源管理更加便捷。 通过CLI从Figma导出SVG入门 使用命令行接口（CLI）可以轻松地将Figma项目中的SVG文件导出出来。 前提条件： 您需要一个DEV_TOKEN（请参阅设置的第5步） 图标管理： 每个图标都是一个Figma组件。选择对应的图标并使用快捷键⌥⌘K来应用。 输出目录： 生成的SVG文件将会保存在src/svg文件夹中 步骤说明： 1. 安装依赖：运行 `yarn install` 2. 选择包含图标的框架，并复制该框架的URL 3. 运行命令`node src/setupEnv.js`，当提示时粘贴从第2步获取到的URL。这一步会生成一个.env文件。 4. 在Figma中通过“帮助和帐户”>“账户设置”>“个人访问令牌”的路径来创建DEV_TOKEN（也称为个人访问令牌）。 5. 将刚刚创建好的DEV_TOKEN添加至步骤3自动生成的.env文件里。 完成以上步骤后，就可以使用CLI从Figma导出SVG了。
     
  • to-path-figma：将对象和文本转换为路径的Figma插件
    优质
    To-path-Figma是一款实用的插件，专门用于将Figma设计中的对象和文本直接转化为矢量路径，极大地提升了设计师的工作效率与创意发挥空间。 到路径：Figma插件 :sparkles:
     
  • HTML-Figma：一款可将HTML导入Figma图层的插件-源码
    优质
    HTML-Figma是一款专为设计师打造的插件，它能够轻松地将HTML代码转换并导入至Figma的设计文件中，极大地方便了前端开发与设计工作的衔接。该插件提供完整的源代码，便于用户进行二次开发和定制。 HTML <-> Figma插件可以将网页上的HTML内容转换为Figma设计文件或从Figma设计生成代码。 使用方法如下： 在Figma中打开一个新文档或者现有文档，然后按下 `cmd + /` 并搜索“html figma”，接着点击Enter键。输入您要导入的URL地址即可轻松获取现场样式的实际效果作为设计和原型的基础。 该插件的优点包括： - 轻松将真实网站样式导入Figma - 快速地把网页组件转化为设计元素，便于使用故事书等工具进行后续开发工作。 - 支持捕获需要身份验证或者特定状态下的页面内容 此外，还可以通过Node.js安装@builder.io/html-to-figma插件来实现从HTML到Figma的转换。例如： ```javascript import { htmlToFigma } from @builder.io/html-to-figma; const layers = htmlToFigma(document.body); ``` 以上代码可以将网页元素转为适合上传至Figma的设计图层，或者通过REST API发送给服务器端以生成.figman.json文件形式。
     
  • Figma Batch Styler：批量编辑文本样式的Figma插件
    优质
    Figma Batch Styler是一款专为设计师打造的Figma插件，能够高效地进行文本样式的批量编辑和管理，极大提升设计工作的效率与灵活性。 在批处理样式器中运行 `npm install` 和 `npm run build` 命令后，在 Figma 中选择 New Plugin 并通过 Link existing from manifest.json 选项链接现有的插件文件，然后从 public/manifest.json 文件进行选择。
     
  • Figma-Vue3-模板：基于Vue3的Figma插件模板
    优质
    本项目提供一个基于Vue3框架的Figma插件开发模板，旨在帮助开发者快速搭建和扩展功能丰富的Figma插件应用。 Vue公司3插件模板FIGMA 这个模板可以让你在很短的时间内使用Vue3框架来构建Figma插件。特点包括： Vue 打字稿集成消息处理的辅助功能，以简化主代码与UI代码之间的通信。直播服务器预览使构建UI更快。 要开始，请安装依赖项通过运行 `npm i` 。然后执行命令 `npm run dev` ，这将创建一个名为dist的文件夹。在Figma桌面应用程序中，点击新建插件按钮，并使用此模板来快速搭建和开发你的Vue3 Figma插件项目。 如果您想要为自己的GitHub仓库克隆这个模板，请按照以下步骤操作：使用该命令 `gh repo create --template https://github.com/LukeFinch/Figma-Vue3-Template` 创建一个新的基于此模板的仓库。
     
  • Figma Table Creator：一款简洁的Figma插件，用于生成灵活可编辑的表格
    优质
    Figma Table Creator是一款专为设计师打造的高效插件，可在Figma中轻松创建和编辑灵活多变的表格，极大提升工作效率。 表创建者可以灵活地创建和管理表格。要开始，请进入Plugins > Table Creator > Create Table，并点击Create Components。然后输入所需的列数与行数（最多50列及行），并单击“创建表”按钮。 编辑单元格文本时，只需按住CMD/CTRL键并在单元格中心双击即可。选择多个单元格的方法是：先用鼠标选中一个或几个单元格，再按住SHIFT + CMD/CTRL，并继续拖动以扩大选择范围；或者使用Plugins > Table Creator > Select Column 或 Select Row 插件来快速选择整列或整行。 调整表格大小和重新排列内容时，请首先通过上述方法选定要修改的列或行。然后运行相应的插件命令，即可对选中部分进行操作，如改变宽度、移动位置等。 此外，“Select Column” 和 “Select Row” 插件还支持整个表格尺寸的一键调节功能。
     
  • Figma-Export：一款用于从Figma导出颜色、版式、图标和图片至Xcode及Android Studio的命令行工具
    优质
    Figma-Export是一款便捷的命令行工具，专为设计师与开发者设计。它能轻松地将Figma中的颜色、字体样式、图标和图片等资源导出到Xcode和Android Studio中，极大提高了开发效率。 FigmaExport是一款命令行实用程序，能够将Figma中的颜色、排版、图标及图像导出到Xcode或Android Studio项目中。 - 颜色：从Figma的颜色样式导出。 - 排版：支持从Figma的文字样式进行导出。 - 图标：可以导出带有小黑色矢量图的Figma组件。 - 图像：能够将包含浅色和深色模式下的彩色图像的Figma组件导出。 该实用程序适用于暗模式，并且兼容SwiftUI。开发这款工具的原因是，目前Figma不支持直接向Xcode或Android Studio项目中导出色彩与图片信息，手动导出会耗费大量时间。此外，它可以帮助保持组件库和代码之间的同步性。
     
  • Figma to Unity Converter 1.2.6
    优质
    Figma到Unity转换器1.2.6版提供了一站式的解决方案，帮助设计师和开发者无缝地将设计文件从Figma导出至Unity，极大地提高了跨平台开发的工作效率。 This asset allows you to transfer your layout from Figma to Unity with just one click. Thanks to its unique tagging system, the asset can identify and recreate the components in your project scene accurately. The package comes with a comprehensive guide that explains how the tagging system works (specific layout rules) and provides instructions on using the asset effectively.