Advertisement

通过CLI从Figma项目中导出SVG (export-figma-svg)

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

简介：
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了。

全部评论 (0)

还没有任何评论哟~
客服
客服
客服关闭
  • 通过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了。
     
  • 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 } ``` 脚本的主要特征包括向导生成配置，如果存在缺失的密钥信息，系统将提示用户输入。
     
  • 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-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文件作为清单。
     
  • FigmaConvertXib: 一个将Figma设计元素导出并生成至项目的工具
    优质
    FigmaConvertXib是一款高效的开发辅助工具，能够自动将Figma中的设计元素导出，并直接集成到项目中，简化工作流程。 FigmaConvertXib 是一款工具，用于从导出的设计元素生成文件并将其添加到项目中。它可以将设计元素转换为iOS项目的 .xib 文件或Android Studio 项目的 .xml 文件。 使用前请观看带有示例的视频教程。 - 添加 Figma 项目 - 设置页面类型 安装： 基本参数 在每个步骤生成时，会用到以下基本参数： accessToken：用于执行Figma API请求的访问令牌字符串（详情见Figma访问令牌）。 projectId：将要使用的Figma文件URL以生成代码（详见Figma文件）。 获取 Figma 访问令牌 为了接收 Figma 文件，需要授权。通过转移个人访问令牌来实现此目的。可以通过几个简单的步骤创建该令牌： - 在 Figma 中打开账户设置页面。 - 转到“个人访问令牌”部分并点击“创建新的个人访问令牌”按钮。 - 输入描述信息（例如，“FigmaConvert”）。
     
  • 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中的平滑渐变制作：figma-easing-gradient图解教程
    优质
    本教程详细讲解了如何在Figma设计软件中创建平滑渐变效果，通过直观的图解帮助设计师轻松掌握easing gradient技巧。 :rocket: 入门在Figma文档上选择带有渐变的形状转到插件>缓和渐变看着你的渐变变得光滑美丽 :wrench: 发展安装依赖项npm install 编译插件npm run dev 在Figma中，转到“插件”>“管理插件” 点击“开发”旁边的+图标在仓库的根目录为Figma提供manifest.json :thought_balloon: 灵感来自一些以前启发了figma-easing-gradient创作的作品。 :folded_hands: -安德烈亚斯·拉尔森（Andreas Larsen）关于缓和渐变的精彩文章。 一个类似Sketch的插件。 用于实现类似渐变的PostCSS插件。 :memo: 执照版权所有:copyright:2019-至今，该项目获得许可。
     
  • 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` 创建一个新的基于此模板的仓库。
     
  • gitlab-project-export：简洁的Python工具，用于通过GitLab API导出项目...
    优质
    gitlab-project-export是一款简明的Python工具，专为通过GitLab API高效导出项目设计。它帮助用户轻松管理并备份GitLab上的多个项目。 使用GitLab API中的Export Project功能可以导出简单的Python项目，并将这些项目从GitLab.com远程备份到私有存储服务器。此代码已更新至2020年5月，以支持Python3的兼容性。 要开始使用，请先配置好Gitlab API令牌（详情参见官方文档）。安装方法有两种：一是通过pip命令直接安装： ``` pip install git+https://github.com/rvojcik/gitlab-project-export ``` 二是手动克隆项目并进行本地安装： ```shell git clone https://github.com/rvojcik/gitlab-project-export cd gitlab-project-export ```
     
  • Fugen：一款命令行工具，帮助从Figma文件中导出资源和生成代码
    优质
    Fugen是一款强大的命令行工具，专为开发者设计，能够直接从Figma文件中高效地导出资源并自动生成代码，大幅提升开发效率。 Fugen 是一个用于从文件生成代码并导出资源的命令行工具。当前支持以下实体： - 颜色样式 - 文字样式 - 阴影样式 安装方法： 使用 CocoaPods 安装 Fugen，请在 Podfile 中添加一行：`pod Fugen, ~> 1.3.0` 然后运行命令 `$ pod install --repo-update` 如果通过 Homebrew 安装，执行以下操作： ``` $ brew install almazrafi/tap/fugen ``` 建议使用 CocoaPods 进行安装，因为它可以在所有团队成员的计算机上设定固定版本并自动完成更新过程。