Skip to content
ABFree Studio

Blog

Recommended Figma Plugins for Developers | Double Efficiency

yakirteng
yakirteng
ExportX 作者

1. Figma to Code

Figma to Code

Currently supports: HTML, Tailwind, Flutter, SwiftUI

Efficiently convert Figma layouts into responsive web pages (HTML or Tailwind) or mobile applications (Flutter or SwiftUI), while maintaining the integrity of the original design. Our innovative approach automatically optimizes and aligns layouts during the conversion process without changing your project, simplifying your workflow. This free (no in-app purchases) and open-source plugin allows you to generate accurate and clean code that meets the best design and programming practice standards.

2. Design Tokens

Figma to Code

Figma Tokens is a plugin developed for the Figma design platform, mainly to help designers efficiently manage design elements, such as colors, text styles, etc. Designers can easily create and maintain a consistent design system with this plugin.

For developers, Figma Tokens is a valuable tool. It can automatically convert design elements into a JSON file, containing all design variables. Developers only need to copy these variables and they can be directly applied in the code, saving the trouble of checking the design draft one by one, saving time and improving accuracy.

In summary, Figma Tokens opens up the channel between design and development, improving work efficiency. It simplifies design and makes development easier to manage. By using Figma Tokens, designers and developers can focus together on creating outstanding products.

3. ExportX

Figma to Code

ExportX supports more format export capabilities, such as WebP, AVIF, etc., and supports compression during export, which can effectively reduce the volume of pictures and improve page loading speed.

Most importantly, ExportX supports direct upload to CDN, no need to manually upload pictures, saving time and effort.

开发者常用的Figma插件推荐|效率翻倍

yakirteng
yakirteng
ExportX 作者

1. Figma to Code

Figma to Code

目前支持: HTML, Tailwind, Flutter, SwiftUI

高效地将 Figma 布局转换为响应式网页（HTML 或 Tailwind）或移动应用程序（Flutter 或 SwiftUI），同时保持原始设计的完整性。我们的创新方法在转换过程中自动优化和对齐布局，而不会改变您的项目，简化您的工作流程。

这款免费（无内购）且开源插件使您能够生成符合最佳设计和编程实践标准的准确干净代码。

2. Design Tokens

Figma to Code

Figma Tokens是一款为Figma设计平台开发的插件，主要作用是帮助设计师高效管理设计元素，如颜色、文本样式等。设计师可用此插件轻松创建并维护一致的设计系统。

对于开发者，Figma Tokens更是宝贵的工具。它能将设计元素自动转换为JSON文件，包含所有设计变量。开发者只需复制这些变量，便可在代码中直接应用，省去逐一检查设计稿的麻烦，节省时间并提升准确性。

总而言之，Figma Tokens打通了设计与开发的通道，提升了工作效率。它使设计简单化，使开发更易于管理。通过使用Figma Tokens，设计师和开发者可共同专注于创造杰出的产品。

3. ExportX

Figma to Code

ExportX支持更多的格式导出能力，比如WebP、AVIF等，同时支持导出时的压缩功能，可以有效减少图片的体积，提高页面加载速度。

最重要的是，ExportX支持直接上传到CDN，无需再手动上传图片，省时省力。

Xcode集成ChatGPT、Github Copilot

yakirteng
yakirteng
ExportX 作者

✏️ Copilot与GPT能够很好的帮助我们在开发中遇到的困难，提高我们的效率。 这次我记录一下接入GPT与Copilot的过程。这个插件支持OpenAI、Azure的接口

安装copilot-for-xcode

这里是使用copilot-for-xcode，里面也有详细的介绍和安装方法。

https://github.com/intitni/CopilotForXcode

记得提前按转刚好homebrew

Terminal window
brew install --cask copilot-for-xcode

集成到Xcode

在设置-》隐私与安全性-》扩展-》Xcode Source Editor中选择Copilot

配置OpenAI、Azure OpenAI、Github Copilot

Github Copilot接入

Copilot的安装需要依赖Node，安装完node后，可以使用which获取路径填入

Terminal window
which node

然后点击install，安装后refresh一下。

这样就可以在Xcode中看到右下角有个小圆点了

GPT接入

这里没啥好说的，就填入你的API key就好了。

结语

插件同样支持快捷键，这个可以去文档中阅览啦！

Xcode保存自动格式化

yakirteng
yakirteng
ExportX 作者

✏️ 不像JetBrain或者VS Code，Xcode本身没有保存自动格式化的能力，因此记录一下实现自动化的过程。

img_1.png

安装swiftformat-for-xcode

如果没有brew，需要提前homebrew

Terminal window
brew install --cask swiftformat-for-xcode

安装后在App目录会有对应图标

根据上面的提示，需要先在设置中开启

在设置中开启保存运行格式化

打开 设置-》键盘-》键盘快捷键-》App快捷键

选择Xcode，菜单标题输入 Editor->SwiftFormat->Format File

快捷键选择 Command+S

完成后重启Xcode就能实现自动保存啦～

参考

Format On Save — Xcode / Swift

Swift接入Apollo GraphQL并使用CLI生成代码

yakirteng
yakirteng
ExportX 作者

✏️ 笔者是GraphQL深度爱好者，在学习Swift开发过程中也希望能够将其引入，过程中也遇到一些包管理问题，参阅了官网文档后成功接入，下面是整个过程。

设备信息： Xcode版本：Version 14.3.1 (14E300c) Mac OS ：13.4

开始

安装Apollo IOS Client

这里包管理使用了**SPM(Swift Package Manager)**，之前使用Cocoapods，没能正常跑起来，而且感觉这种方式对项目的侵入性比较强，开发体验不好。

在Xcode中，File→Add Packages，然后填入https://github.com/apollographql/apollo-ios

按需选择你需要的库，比如你想用到WebSocket就可以一起加入

安装CLI工具

我们需要用apollo-ios-cli来下载GraphQL的Schema，并且用他来来生成业务所需要的查询代码。

在项目根目录上右键，选择Install CLI。

此时，项目中已经接入了Apollo Client，不过为了更方便业务使用，我们还需要讲我们自己的查询语句生成更易使用的Swift代码。

代码生成

下载GraphQL Schem

下载我们GraphQL Server的GraphQL，可以使用CLI去生成这份文件，这里推荐直接复制下面的文件，然后自己在Xcode里面创建apollo-codegen-config.json并粘贴。

需要注意几个点：

  • operationSearchPaths 这里说的是你需要需要查询的GraphQL DSL
  • schemaSearchPaths 你的GraphQL所有的DSL描述
  • endpointURL GraphQL Server地址
  • schemaTypes.path CLI生成Swift的代码目录
  • outputPath 下载后的文件放在哪里，这里推荐放在项目目录下的./graphql
{
  "schemaNamespace": "RocketReserverAPI",
  "input": {
    "operationSearchPaths": ["**/*.graphql"],
    "schemaSearchPaths": ["**/*.graphqls"]
  },
  "output": {
    "testMocks": {
      "none": {}
    },
    "schemaTypes": {
      "path": "./RocketReserverAPI",
      "moduleType": {
        "swiftPackageManager": {}
      }
    },
    "operations": {
      "inSchemaModule": {}
    }
  },
  "schemaDownloadConfiguration": {
    "downloadMethod": {
      "introspection": {
        "endpointURL": "https://api.xxxx.com/graphql",
        "httpMethod": {
          "POST": {}
        },
        "includeDeprecatedInputValues": false,
        "outputFormat": "SDL"
      }
    },
    "downloadTimeout": 60,
    "headers": [],
    "outputPath": "./graphql/schema.graphqls"
  }
}

文件配置好之后，在终端进入项目根目录，执行下面代码

Terminal window
./apollo-ios-cli fetch-schema

执行后，你的项目目录会多出一个目录，里面包含你GraphQL Server提供的DSL

编写业务gql查询语句

这这里我随便写了一个查询语句，这里的目的主要是让CLI根据查询语句生成对应的Swift的查询对象，下面这段语句最后会生成public class GetPromptQuery: GraphQLQuery 等等，可以继续往下看

生成对应定义

编写完就运行下面代码

./apollo-ios-cli generate

将生成的代码加入Swift 项目

同样在刚才 File→Add Packages 选择本地包

选择刚才生成的

链接二进制包

我在初次调试的时候一直提示我Cannot find 'GetPromptQuery' in scope 是因为没有将Apollo生成的代码加入项目。

此时，项目就已经接入了CLI生成业务代码，可以直接在Swift文件中使用。

下一篇文章我们讲如何将请求与我们的UI结合起来。

参考

Introduction

© 2024 ABFree Co. All rights reserved.