V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
geektony
V2EX  ›  Figma

Figma 2.0: Now with Prototyping and Developer Handoff

  •  
  •   geektony · 2017-07-30 18:40:17 +08:00 · 3995 次点击
    这是一个创建于 2433 天前的主题,其中的信息可能已经有所发展或是发生改变。

    类型:翻译

    来源:Figma on Medium

    作者:Figma

    译者:TOMA Design Studio

    Figma 今天要为大家带来一个大消息 - 我们很高兴终于揭开 Figma 2.0 的面纱。它是你喜欢的产品的扩展版本(或至少像很多,哈哈😉?)具有重要的新特性:Prototyping 和 Developer Handoff。

    在 Figma 1.0 中,我们为云端协同设计奠定了基础,创造出一个不需要任何保存,导出,同步或通过电子邮件传输的产品。我们设计出了帮助设计师更好地工作的特性,如多播放器功能团队组件库

    在公开发布后的几个月里,我们更深入地了解到设计师痛点的深度和广度 - 即它们远远超出与设计师合作的摩擦力。为了真正精简的工作流程,设计师需要能够与营销部门、执行团队和建筑设计人员进行协作。

    If Figma 1.0 focused on making it easier for designers to collaborate, Figma 2.0 is about empowering entire teams.(如果 Figma 1.0 是为了让设计师能更容易地进行协作,那么 2.0 就是为了提高整个团队的作战能力。)

    我们的目的是帮助人们共同建立更好的软件,而 Figma 2.0 将更进一步。

    Prototyping 原型设计

    设计人员需要一个具有表现力,干净直观的作品展示方式。例如向同行展示反馈意见,向高管提出最终批准计划,或查看用户在测试期间如何与界面进行交互,原型在技术设计过程中发挥关键作用。

    几个月来,用户已经要求这种功能,但是我们选择先暂缓他们的请求。我们已经与像 Framer 这样的核心竞争力的优秀产品相结合,希望专注于建立世界一流的设计工具。

    但是当与更多的用户交谈时,我们意识到将无法再继续忽视原型设计。设计师非常渴求一个解决方案,能让他们在同一个设计工具中进行原型设计与展示。由于 Figma 是唯一能在线上运行的设计工具,所以非常适合满足这一需求。

    Fun Figma-fied features 有趣的特性

    虽然 Figma 的原型设功能并不涵盖所有的场景,但它可以满足我们许多用户的需求。在早期的研究过程中,几乎所有的设计师都提到了高级运动图形的幻灯片和热点功能。

    In Figma, the prototype is a living document rather than a dead artifact.(在 Figma 中,原型设计相当于一个动态的设计文档,而非固定不变的摆设品。)

    我们对基于云的技术为 Figma 提供的能力感到非常兴奋。在 Figma 中,原型是一个动态,而不是一个静止不变的文档。当你对原始设计进行更改时,它们将在您的演示文稿中实时反映...不需要输出或同步。

    一些特性:

    • 当进行直播时,你可以调整框架或实时添加屏幕。我们发现在设计讨论中,这个特性发挥了很大的作用。
    • 不需要无尽的版本...或像在其他工具中,你对画板的疯狂命名约定(对画板 1,画板 a1,画板 a1b,画板 a1bcdefgahhhhhfuckthis 说再见吧)。
    • 可以从手机导航演示文稿。任何想要像会议室一样漫步在会议室的设计师都在进行 TED 演讲,都能得到实现。
    • 可以使用带有节点的组件(符号),因此当你从组件中设置导航时,它将填充所有实例,如下面的 gif (组件是左上方的 X 按钮)所示:

    要构建原型,请选择右侧属性面板中的 prototype mode,然后通过节点连接框架。你可以将不同的对象变成热点,当用户与设计的组件交互时,他们会被带到目的页面。 或者,您可以通过在画布上排序框架来创建简单的演示文稿。下面的教程视频可以很好地概述这一过程:

    最终,Figma 的原型是关于在设计和演示之间消除抽象层。为了满足不同设计师在不同工作流程的需求,我们将继续集成其他专用原型设计工具。

    Developer handoff 开发者亲和

    Figma 的第二大变化是新增的 Developer Handoff 特性。设计师现在可以共享具有访问权限的开发文件,在右侧属性面板中看到 code 模式选项卡。

    更高的角度看:

    • 开发者可以选择一个对象并将其悬停在另一个对象上,以查看它们之间的间距
    • 可以获取 CSS,iOS 和 Android 的视图相关数据
    • 我们已将数据分为:
      • 表视图,它们分解属性,以便它们更容易地进行滑动
      • 生成的标记 /代码

    我们相信尽可能使设计变得容易,所以希望这将赋予你的团队更多的能力。你不再需要为工程师编辑能力买单 - 相反,他们仅仅需要“查看”就可以了。请查看我们的教程视频中的更多信息:

    The next chapter 下一步

    我们很高兴提供一个一体的工具,帮助团队更好地合作。也就是说,我们知道设计师和技术公司有各种各样的工作流程和要求。

    Figma 在更广泛,充满活力的生态系统中发挥作用,对于下一步,我们期待与该领域的其他工具集成。我们正在为更广泛的平台建立我们的第一个合作伙伴关系,所以如果你有兴趣与我们合作,请给告诉我们。

    同时,让我们知道你对 Figma 2.0 的看法!


    关注更多有趣的文章,支持我翻译和分享更多优秀知识:

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2990 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 14:50 · PVG 22:50 · LAX 07:50 · JFK 10:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.