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

推荐订阅源

WordPress大学
WordPress大学
T
Threatpost
阮一峰的网络日志
阮一峰的网络日志
美团技术团队
F
Fortinet All Blogs
The GitHub Blog
The GitHub Blog
月光博客
月光博客
V
Visual Studio Blog
T
Tailwind CSS Blog
Stack Overflow Blog
Stack Overflow Blog
博客园 - 聂微东
Jina AI
Jina AI
J
Java Code Geeks
Martin Fowler
Martin Fowler
大猫的无限游戏
大猫的无限游戏
Recorded Future
Recorded Future
C
Check Point Blog
腾讯CDC
N
Netflix TechBlog - Medium
aimingoo的专栏
aimingoo的专栏
罗磊的独立博客
Hacker News: Ask HN
Hacker News: Ask HN
SecWiki News
SecWiki News
博客园 - Franky
Hacker News - Newest:
Hacker News - Newest: "LLM"
N
News | PayPal Newsroom
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
S
Security @ Cisco Blogs
W
WeLiveSecurity
The Last Watchdog
The Last Watchdog
Cloudbric
Cloudbric
F
Full Disclosure
The Cloudflare Blog
Y
Y Combinator Blog
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
Recent Commits to openclaw:main
Recent Commits to openclaw:main
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Google DeepMind News
Google DeepMind News
MongoDB | Blog
MongoDB | Blog
S
Schneier on Security
Schneier on Security
Schneier on Security
Spread Privacy
Spread Privacy
L
LINUX DO - 热门话题
AI
AI
N
News and Events Feed by Topic
T
Tor Project blog
P
Palo Alto Networks Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
H
Hackread – Cybersecurity News, Data Breaches, AI and More
G
Google Developers Blog

Figma

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


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