Advertisement

Figma中的平滑渐变制作：figma-easing-gradient图解教程

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

简介：
本教程详细讲解了如何在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-至今，该项目获得许可。

全部评论 (0)

还没有任何评论哟~
客服
客服
客服关闭
  • 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-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了。
     
  • 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-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` 创建一个新的基于此模板的仓库。
     
  • CSS 渐变效果总结（linear-gradient 线性渐变与 radial-gradient 径向渐变）
    优质
    本文详细介绍了CSS中线性渐变和径向渐变的效果及使用方法，帮助读者掌握如何在网页设计中运用这两种渐变技术。 线性渐变（linear-gradient）的语法是：`background-image: linear-gradient(to 方向, 开始颜色, 中间颜色1, 中间颜色2,... , 结束颜色);` 四个基本方向可以组合成八个方向，包括top、right、bottom和left。角度也可以指定为90deg。 径向渐变（radial-gradient）的语法是：`background-image: radial-gradient(大小 形状 at 方向, 开始颜色, 中间颜色1, 中间颜色2,... , 结束颜色);` 其中，大小可以是一个值表示圆或两个值表示椭圆半长轴和短轴。这些尺寸可以用百分比或像素来指定。“形状”通常为circle。
     
  • 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 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.
     
  • 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文件作为清单。
     
  • to-path-figma：将对象和文本转换为路径的Figma插件
    优质
    To-path-Figma是一款实用的插件，专门用于将Figma设计中的对象和文本直接转化为矢量路径，极大地提升了设计师的工作效率与创意发挥空间。 到路径：Figma插件 :sparkles: