快速上手极狐GitLab设计管理功能

什么是设计管理功能

设计管理是 极狐GitLab 议题功能内的一个模块,在这里设计师可以上传议题相关的设计资产,包括线框图、原型图等。

与议题相关的研发、产品等职能的同事可以在议题内对设计进行浏览及协作,可以通过这种方式将设计也提供了单一可信源(SSOT)上的协作设计方法。

您可以与您的团队共享设计原型,或者可以轻松的查看和解决设计评审。

如何使用设计管理

首先要求启用 Large File Storage(LFS):

  • 对于自助管理实例,管理员必须全局启用LFS。
  • 对于使用极狐GitLab SaaS的用户是默认开启的。
  • 必须为项目本身启用 LFS。如果全局启用,默认情况下所有项目都启用 LFS。 要在项目级别启用 LFS,请导航到项目的 设置 > 通用,展开 可见性,项目功能,权限 并启用 Git 大文件存储 (LFS)

目前设计管理支持上传的文件类型有png、jpg、jpeg、GIF、bmp、tiff、ico、webp 或 svg 格式的文件。

用户可以先打开 jihulab.com 创建一个项目,之后进入左侧面板中的议题列表页面新建一个议题,创建完成后点击议题界面中的点击上传,或将图片拖拽至虚线框内完成上传。

上传完成的设计文件会在议题页面显示,我们在上传同名文件时会生成一个新的版本,但如果是同名文件但内容没有更改过时则会跳过且不会更新版本。

所有拥有议题访问权限的用户都可以看到上传的文件,用户可以点击图像进行放大,上传多张设计图时也可以使用键盘的左/右键来切换。

如果用户希望对图片进行评审,可以通过鼠标点击图片中需要评论的部分来进行留言,这与我们在Figma或是同类产品的操作逻辑类似。

在设计评审时我们可以@项目中的相关人员,与他们进行交流和反馈,如果一些交流和反馈得到了解决,也可以将这些评审标记为已解决。

通过点击右上角的【添加待办事项】也可以将设计评审添加到自己的todo list,避免因为议题过多而遗漏。

我们在设计管理中所生成的用户活动事件都会由极狐GitLab跟踪并显示在用户配置文件、群组和项目活动页面。

GitLab Figma插件

因为我们大多数的设计都会在其他的工具上完成,如Figma等,所以如果想要将我们设计好的文件上传至极狐GitLab那么会经历以下步骤:

  1. 在figma完成设计
  2. 从Figma导出设计
  3. 在极狐GitLab找到对应的议题
  4. 将设计上传至议题中的设计管理中

GitLab的Figma插件就是通过API token的方式将Figma中的设计稿无需下载直接同步至极狐GitLab的议题中。

下面我们来看一下如何去使用这样一款插件,去更好的自动化我们的一些工作。

安装插件

通过这个链接跳转到GItLab Figma插件页面,可以点击右上角的install按钮进行安装。

创建极狐GitLab个人access token

  • 点击创建完成后会生成一个个人访问令牌,记得复制并保存好。

从Figma上传一个设计

GitLab Figma插件可以让您将Figma中的设计上传到极狐GitLab的议题中

  • 从Figma的菜单栏中打开插件:插件→GitLab→将设计上传到GitLab
  • 输入您的极狐GitLab个人访问令牌,您只需要执行一次操作,或者在您设置的访问令牌到期以及删除令牌后重新执行一次。
  • 勾选 I am using a self-management GitLab instance。 输入jihulab.com。如果您是使用其他自部署版本且有公网域名,则填入相对应的链接地址。之后点击保存设置。
  • 将您希望上传设计稿的议题链接粘贴至插件的输入框中,或者选择插件中显示的最近议题。
  • 选择设计内容(最多10个),点击插件中的upload按钮,提示上传成功。

重置插件

如果您希望删除 极狐GitLab 个人访问令牌并将插件重置为默认状态,请导航到“重置为默认”菜单项:
插件GitLab重置为默认值

最后

设计管理可以让我们在整个产品开发流程中将设计和研发流程结合的更加紧密,能够让设计师的产出也可以通过议题进行记录和归档,让议题不仅关联代码修改的MR、产品经理的PRD,也可以关联项目中的设计部分,这为日后所有其他同事了解项目背景提供了更直观的展现,所有负责人都在这个议题中,任何人如果想看设计变更,代码变更,需求变更都是可追溯的,可以看到这个项目的所有进行过程。

这种协作方式就像DevOps让研发和运维能够紧密协作一样。能够让不同职能之间消除一个又一个的孤岛和墙,加速沟通和研发效率。

但产品也是在一个不断迭代和优化的过程中,在使用中还是有一些值得优化的空间:

  • 比如设计管理目前还不支持PDF等格式的文件上传
  • 比如Figma的插件上传设计至设计管理中后,还不支持通过上传的文件追溯到Figma的源文件
  • 比如上传不同版本的同名文件后也没有一个前后版本变更对照的功能。

所有的这些优化可以通过不断的迭代进行优化,因为这些产品都是开源,大家可以通过访问项目地址进行议题贡献或者代码贡献。

相关链接

https://docs.gitlab.cn/ee/user/project/issues/design_management.html

https://gitlab.com/gitlab-org/gitlab-figma-plugin

https://www.figma.com/community/plugin/860845891704482356/GitLab