惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

The GitHub Blog
The GitHub Blog
Martin Fowler
Martin Fowler
Vercel News
Vercel News
U
Unit 42
Engineering at Meta
Engineering at Meta
aimingoo的专栏
aimingoo的专栏
MyScale Blog
MyScale Blog
Y
Y Combinator Blog
阮一峰的网络日志
阮一峰的网络日志
爱范儿
爱范儿
Apple Machine Learning Research
Apple Machine Learning Research
博客园_首页
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
B
Blog RSS Feed
N
Netflix TechBlog - Medium
GbyAI
GbyAI
F
Fortinet All Blogs
MongoDB | Blog
MongoDB | Blog
大猫的无限游戏
大猫的无限游戏
C
Check Point Blog
M
MIT News - Artificial intelligence
D
Docker
IT之家
IT之家
Stack Overflow Blog
Stack Overflow Blog

Figma

figma 更新后自动化通知前端开发如何实现? 代验证 figma 教育版本一年 公司用 Figma 是否有必要付费订阅? 各位大佬, figma 导出 png 的时候怎么加入空白/透明背景啊 分享解决 macOS 15 beta 和 Figma 的字体兼容问题的办法 订阅了 figma 开发者模式,需要设计稿转代码的可以留言,免费帮转 Figma 用户操作界面 简体中文 汉化语言包 免费发布 效果演示 - 界面翻译 关于 Figma 如何绘制一个等腰梯形 figma 脱机(offline)使用的办法 Figma 终止了和 Adobe 的合并 figma 画原型怎么使用 antd 组件? 标记狮 Figma 插件正式上线!支持导出标记到本地/私有云及局域网快速实时预览画板 用 Figma 可以设计微信推文排版吗 为什么 figma 设计 UI 的时候,大家都把 app 的多个界面(都是以 Frame 形式一个个呈现)放在一个 Page 里 figma 使用的开发技术? 国内首家支持 figma 的在线协作平台,真香! 如何正确学习 UI 设计? Figma 现在比 Sketch 强很多吗? V2 的设计师们能评价一下吗? 造了个 Axure 原型在线分享平台(Beta) [Figma 资源] 快速预览 Logo/分享图/品宣图 在微信场景的效果 想找一款"设计界的 Github",不知道有没有这样的网站 Figma 中输入中文的一个巨蛋疼的问题 蓝湖开始收费了 除了 VS Code, Figma 是不是第二个能称得上桌面级体验的 Electron 案例? 我给开发朋友们做了一个 Figma 的交付工具 Figma 版的 Ant Design 组件库 大佬们,有啥原型图的软件比较好用啊,可否推荐一下下 (2018 年小调查) 设计师们的工作流(workflow)是怎样的?(网站设计和 App 设计) Figma —— Sketch 的 Web 版替代品
Figma 2.0: Now with Prototyping and Developer Handoff
geektony · 2017-07-30 · via Figma

类型:翻译

来源: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 的看法!


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