The Think Blog

Transitioning a Fortune 100 company to Figma

一个Figma标志环绕着一个Sketch标志的插图, InVision logo, Zeplin loigi, and Abstract logo
Sarah Kula营销设计师的插图

The Problem

A few years ago, we had a problem. 这是当时世界上大多数UI和产品设计师共同面临的问题. 我们的团队为一家财富100强公司提供咨询服务, 我们刚刚用我们通常的设计应用程序结束了一年, Abstract and Sketch. 在此期间,我们的设计系统文件变得一团糟. As an early new year’s resolution, 我们制定了雄心勃勃的重建和清理计划,这些计划将在即将到来的假期期间持续下去. 

We were aware of Figma这款游戏已经问世好几年了,但我们听说它存在bug,缺少核心功能. 我们也没有把Figma太当回事,因为似乎每个月都会有一个新的设计工具发布, all promising the same thing—a collaborative, cohesive, 对于设计师来说,这是一个高效的博彩网站评级空间,但交付的东西却少得多.

与此同时,我们使用四种工具来完成一项博彩网站评级. Sketch was our primary design tool, 抽象作为我们的协作和版本控制应用程序. 我们使用Craft插件将我们的作品上传到 Invision for high-fidelity prototyping and review. 然后,当我们将博彩网站评级交给开发人员时,我们会通过Zeplin交付博彩网站评级.

Four applications for one process.

回想起来,我们花了大量的时间来管理这个复杂的舞蹈. Sketch was a fine UI design tool, but it only runs on macOS, 排除了我们客户团队中很大一部分潜在的贡献者. 在Abstract和Invision中协作和审查博彩网站评级从来都不适合我们的博彩网站评级流程. 

当需要与开发人员共享UI组件时,我们使用了Zeplin. 但是更新这些文件时经常会出现延迟问题, 在真相的源头制造混乱. 在多个应用中保持一个整洁有序的设计资产存储库会导致整个团队的误解和挫败感.

Cohesion was a major headache. 我们有多个产品,每个产品都有自己的团队 product design 在一家拥有许多其他设计部门的公司,每个设计部门都有自己的团队. 我们被孤立在私人的抽象项目中, 迫使团队进入具有不同结构的不同过程, assets, and general working methods. 

我们的设计系统更像是一个灾难系统. 一个拥有迅速发展的数字足迹的大公司将需要一个同样巨大的 design system. 但是我们已经孤立的设计博彩网站评级区使得构建和管理资产变得很麻烦. 

The Solution

2020年对几乎所有人来说都是充满挑战的一年,但Figma正在取得强劲进展. 他们刚刚发布了几个突破性的功能,比如自动布局和组件变体. 我们的产品团队听说了这个工具很棒的东西,我们开始考虑这个想法 Figma可能会改变和整合我们的设计过程. 我们整个行业似乎也在为变革做准备, and we wanted to be at the forefront of that. 因此,我们与设计其他产品的邻居和产品UX领导坐下来,提出了测试这个新应用程序的想法. 

作为第一批采用Abstract的团队之一, 我们的领导层对改变持开放态度,并热衷于在用户体验环境中保持领先地位. 随着越来越多的博彩网站评级转向远程优先,协作成为每个人的首要任务. 我们很快就得到了Figma试运行的批准.

Lesson 1: Elect Figma leadership 

当我们开始执行Figma时,我们的第一个障碍是缺乏经验. 不像我们参与过的其他工具迁移, 这款游戏没有任何有经验的设计师来指导制作过程. We elected an initial, 指定小组尽快学习Figma, 然后他们会把这些知识传递给团队的其他成员.

Figma的员工非常热心地举办了研讨会和培训课程, and we scoured the internet, 吸收了我们能找到的所有YouTube教程和Medium文章. 我们从海量的内容中挖掘 Figma Community从Spotify和Intuit等知名用户那里获取有见地的材料.

在这一切的背后是一种自我施加的压力,我们想要尽快展示结果. 如果这个庞大的组织要考虑颠覆他们几十个设计团队的合作方式, 我们需要收集数据和经验,让人们相信这是正确的举措.

教训2:为Figma设计系统奠定坚实的基础

我们需要将UI套件(由特定产品和全局资产组成)转换为Figma. 这迫使我们尽早做出决定,是否应该将整个UI kit Sketch文件直接导入Figma,还是从头开始重建.

After experimenting, it became clear that in Figma, 手动重建我们的UI工具包要好得多. 我们浪费了很多时间和精力将Sketch文件直接导入到工具中, 但当我们承诺在Figma重建时,事情就开始变得顺利了. 在Sketch导入之后访问组件是可以的, 但如果这些组件没有正确构建, 无论如何,您都需要在屏幕中打破并重建它们. 

从长远来看,从头开始重建可以节省大量时间. It also gets you closer to a Figma design kit.

Lesson 3: Build something

当我们开始在Figma中进行设计时,我们开始看到真正的进步. 在了解到UI工具包应该在屏幕构建之后出现,而不是其他方式之后,我们决定采取一些我们在Sketch和Abstract中博彩网站评级过的功能,并探索Figma的端到端设计过程. 这也将帮助我们以更切实的方式衡量Figma的成功. 

Schedule a call

看看Figma转换对你的业务意味着什么.

结果是立竿见影的,我们的生产力和速度显著提高. 根据实际的产品屏幕构建组件,效果非常好. And prototyping straight from the designs-任何更改都是实时应用的,允许我们与我们的 prototype—felt like a revolutionary change. 

Lesson 4: Share the win

We invited stakeholders, project managers, content writers, 开发人员查看我们的文件来展示这个工具是如何博彩网站评级的. Admittedly, this was scary at first. But the Figma Community was a huge help here, 提供免费的材料,帮助我们指导我们的同事如何根据他们的具体情况在Figma取得成功, role-based needs. 

几乎立刻,来自产品团队各个角落的人都喜欢上了这些变化. Our previously siloed, slow, 非合作的设计过程变成了一个开放的, expansive, and transparent world. 设计师们肩并肩,实时地处理着相同的文件. 产品所有者和内容作者使用评论功能直接在屏幕上留下上下文反馈. 开发者们的博彩网站评级都是基于我们的主要资产, 消除了跨不同工具进行持续组织协调的需要. 

Official adoption: Becoming a Figma company

The positive changes were evident. 我们完成Figma过渡所需的时间几乎立即被设计师突然能够博彩网站评级的速度和效率所补偿. It was a new world, with new possibilities. 组织的每个角落都取得了成功, and new ones every day, 我们被允许正式采用Figma作为我们的主要设计工具. 

Since then, 我们继续学习更有效的建设和合作方式, 我们将继续促进更有凝聚力的端到端设计流程. 我们创建了一个每周研讨会,致力于向其他人教授Figma, sharing new ideas and discoveries, 将我们的集体专业知识推向新的高度.

Key takeaways:

  1. 在Figma中启动一个项目比将一个现有项目转换到Figma中要容易得多——尤其是在您不熟悉这个工具的情况下. Build from scratch if/when you can.
  2. 在构建屏幕之前,不要在Figma中构建UI库. 作为设计师,我们通过屏幕构建开发了所有最有效的实践. UI库应该围绕这些效率来构建,而不是相反. 当您不熟悉新工具所能提供的所有潜在效率时,使用新工具可能是一个艰巨而艰巨的过程.
  3. 常驻Figma专家在学习如何使用该工具时要走很长的路. 如果你还没有一个Figma专家,创建一个——组织一个Figma领导团队. 有些设计师在学习新工具时是天生的,而有些人可能会有点犹豫. 找到你的强学习者,把他们变成专家,他们可以训练其他人.
  4. Figma入职对于非设计师也同样重要. 大多数人在无限的画布上迷失了方向,并且很难知道如何在上面移动. 以下是一些很棒的Figma入职资源: 
    1. Spotify Ways of Working
    2. Figma onboarding for developers
    3. Shopify Figma Onboarding
  5. 文档和文件卫生总是很重要的, but it’s crucial in Figma, 非设计人员可以看到文件中的所有内容. 
  6. 有很多方法可以组织你的文件, 但作为一个产品团队,我们会不断在路线图上添加新功能, 我们决定根据我们的流程来建模我们的结构. 我们使用项目来组织文件,这取决于它们在过程中的位置:探索, visual design, dev handoff, and master files, 随着文件在整个过程中从一个项目转移到另一个项目.

chart from Figma

交换设计工具是一项巨大的任务,只有当潜在的好处值得破坏时才应该考虑. We didn’t take this Figma transition lightly. 但有了其他设计师的支持和有远见的领导,我们做到了 将此转换到Figma,并看到很棒的结果 on the other side. We think you can, too.

 

你是否对产品设计团队的Figma过渡感兴趣? Let’s chat!


Stay in the know

接收博客文章,有用的工具和公司更新直接到你的收件箱.

我们保持简短,让它很容易退订,从不分享你的信息.

本网站是由reCAPTCHA和谷歌保护 Privacy Policy and Terms of Service apply.

想了解更多关于最新的设计和技术领导? Sign up for the 十大正规博彩网站排名 newsletter.