FigmaExport 命令行实用程序，可将Figma中的颜色，版式，图标和图像导出到Xcode / Android Studio项目中。 颜色-Figma的颜色样式 排版-Figma的文字样式 图标— Figma的组件，带有小的黑色矢量图像 图像—带有彩色图像（浅色/深色）的Figma组件 该实用程序支持黑暗模式和SwiftUI。 为什么我们开发此实用程序： Figma不支持将颜色和图像导出到Xcode / Android Studio。手动导出需要很长时间。 使组件库与代码轻松同步 文章： 目录： 特征 将明暗调色板直接导出到Xcode / Android Studio项目 将图标导出到Xcode / Android Studio项目 将图像导出到Xcode / Android Studio项目 将文本样式导出到Xcode项目 支持暗模式 支持SwiftUI和UIKit 导出图标和图

批处理样式器 开始 npm install npm run build 在Figma中，选择New Plugin ， Link existing from manifest.json选择Link existing from manifest.json然后选择public/manifest.json 请注意，您将需要安装

设计到Jetpack Compose转换器 轻松将设计直接转换为代码。 （不属于任何一个） 该项目包含一个将选定的Figma json发送到localhost：9020的插件，以及一个将此json转换为Jetpack Compose并将剪贴板设置为它的kotlin后端。 在观看视频并缺少CSS 版本兼容性 即使当几个版本与最新的JetPack Compose过时时，此效果也出奇的好。可能不建议使用某些修饰符，但是您可以使用Android Studio自动替换它们。 我个人使用过的最新Compose版本是：Jetpack Compose：Alpha 06 用法： 安装，通过克隆此存储库，将其cd-cd并运行，来启动服务器： 对于Linux或./gradlew run --args="-config=application.conf" 对于Windows wsl bash dos2unix g

Figma插件TypeScript样板可立即开始开发。 快速开始 选择以下方法之一来获得样板： 分叉此仓库。 在终端中执行以下命令： mkdir my-plugin cd my-plugin npx degit https://github.com/aarongarciah/figma-plugin-typescript-boilerplate 并将其解压缩到您的空插件文件夹中。 安装依赖 npm install 开发 :grinning_face_with_smiling_eyes: npm run dev 您需要安装Node和npm才能使用此样板。 它已在节点10、11、12和13中进行了测试。 发展历程 要开发Figma插件，您需要安装F

镀Chrome 将Figma页面的原型从浏览器中打开的当前文件导出为使用图像映射链接的静态html文件。 重要提示：请首先在扩展选项页面中设置您的Figma个人访问令牌。 笔记： 为了模拟Figma的“后退”交互，您可以在元素名称中使用字符串__back__ （该元素尚未过渡到另一个元素），并且该元素将使用[removed]history.back();导出到链接[removed]history.back(); 。 假定您已经将帧导出到文件夹中的* .png图像文件中。 然后，将导出的* .html文件复制到同一文件夹中，然后打开其中一个。 如何使用 在本地硬盘驱动器的./unpacked文件夹中下载存档文件并解压缩，在Chrome扩展程序中启用开发人员模式，单击“加载解压缩”，然后选择解压缩的ChromedFigma文件夹。

通过将Figma设计转换为高质量HTML，React，Vue，Svelte，Angular，Solid等代码 它是如何工作的 将设计导出为代码 确保要导入的所有图层均按照所述使用自动布局 单击“获取代码”按钮以启动Builder.io编辑器 进行最后的调整，然后单击Builder顶部的“获取代码”以查看代码输出，或将其复制并粘贴到Builder帐户的内容以实时发布 将网页导入到Figma设计 在Figma中，打开一个新的或现有的文档，然后单击cmd + /并搜索“ html figma”，然后按Enter 输入您要导入的URL 为什么？ 立即将设计转换为实时网页和代码 轻松导入真实的现场样式，以作为设计和原型的起点 快速将实际站点组件转换为设计组件 易于从故事书等导入 Chrome扩展程序 想要捕获身份验证墙后面的页面，还是要导航到的特定状态？ 程序适合您！ 使用图书馆 // npm

Figma 导出 通常应用程序开发人员导出 Figma 组件（图标、装饰等）并手动将它们导入 IDE。 该项目的目标是使这项工作更容易。 从任何 Figma 文档中导出组件并将它们保存到可以轻松导入到其他应用程序的文件中。 允许将您的 Figma 组件导出为： 图像文件（ png ， jpg ， svg ）。 Xcode 资产目录（ imageset文件）。 标志性字体（ otf 、 ttf 、 woff ）。 安装 安装Python >=3.7 。 Mac 用户必须为 ssl 模块安装证书（执行 /Applications/Python 中包含的命令脚本）。 安装 Figma 导出包： $ pip install figma_export 将环境变量FIGMA_ACCESS_TOKEN设置为您的。 （可选） otf 、 ttf和woff命令需要 FontForge 命令

富根 Fugen是用于导出资源并从文件生成代码的命令行工具。 目前，Fugen支持以下实体： :white_heavy_check_mark: 颜色样式 :white_heavy_check_mark: 文字样式 :white_heavy_check_mark: 阴影样式 :white_heavy_check_mark: 图片 观看视频 上下文表 安装： 可可豆 要使用依赖项管理器安装Fugen，请将此行添加到您的Podfile ： pod 'Fugen' , '~> 1.3.0' 然后运行以下命令： $ pod install --repo-update 如果使用CocoaPods安装，则generate命令应包括Pods/Fugen文件夹的相对路径： $ Pods/Fugen/fugen generate 建议通过CocoaPods安装，因为它允许在所有团队成员计算机上使用固定版本并自动执行更新过程。 家酿 对于依赖项管理器安装，运行： $ brew install almazrafi/tap/fugen 通过Homebrew设置特定的软件包版本是不可能

在SwiftUI中内置的Figma macOS Big Sur示例应用程序

Figma插件React模板 该模板包含所示的react示例，并进行了一些结构上的更改和额外的工具。 快速开始 运行yarn安装依赖项。 运行yarn build:watch以监视模式启动webpack。 打开Figma > Plugins > Development > New Plugin...然后从此仓库中选择manifest.json文件。 :star: 要更改插件的UI（React代码），请开始编辑 。 :star: 要与Figma API进行交互，请编辑 。 :star: 阅读有关。 工装 此仓库正在使用： React + Webpack 打字稿 更漂亮的预提交钩子