请选择 进入手机版 | 继续访问电脑版

产品设计

    今日:9| 主题:19130
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] Figma VS Sketch

[复制链接]
萌面超人 发表于 2016-10-1 17:54:46
254 2

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

Figma VS Sketch

Figma VS Sketch-1-产品设计-experience,designers,interface,following,breaking
        Figma is like Sketch in the browser with real-time collaboration.
   With the limited time I had with it, I can already say with confidence that it’s far more polished and production-ready than in my first experience with Adobe XD . It also has three invaluable features that set it apart: real-time collaboration, vector networks and version history. It can handle dozens of designers working on the same document, at the same time without breaking a sweat. Last but not least, this tool is really fast, easily handling 20+ Artboards in a single document.
   People will inevitably compare Figma to Sketch , so as a long-time user of Sketch, I’d like to share my experience, following a tradition that I started 3 years ago .
  Browser VS Native

         

Figma VS Sketch

Figma VS Sketch-2-产品设计-experience,designers,interface,following,breaking
        I was skeptical at first because Figma is a browser-based user interface design tool, but now I’m convinced that there is a future in this area. Everything is extremely responsive, works as expected and the software is almost every bit as powerful as its native counterpart Sketch, minus features like Symbols, Overrides and Plugins. Every document and version exist on their server, making the task of iterating effortless and worry-free. You can still save your document as .fig to make it downloadable. Like this, you can share your Figma files with others.
         

Figma VS Sketch

Figma VS Sketch-3-产品设计-experience,designers,interface,following,breaking
        By default, Figma uses Google fonts (a free library of 800+ fonts), but you can also add your own by installing an add-on. They even included the hugely popular FontAwesome . I think this is an incredibly smart move, since collaborators won’t need to download extra fonts when they jump in.
  Real-time collaboration

         

Figma VS Sketch

Figma VS Sketch-4-产品设计-experience,designers,interface,following,breaking
       For many teams, this is a game-changer. Being able to design with a fellow designer, engineer or client in real-time will save a ton of time in both execution and communication. Although not every project needs collaboration, it’s good that the possibility is there.
         

Figma VS Sketch

Figma VS Sketch-5-产品设计-experience,designers,interface,following,breaking
       You can quickly work alone, then invite others whether they’re signed up or not to edit or view-only your design in progress. The advantage of a browser-based tool is that the recipients won’t need to install anything at all, or even own a Mac to participate. Figma works on Mac, Windows, Linux and on mobile devices (viewing only). I can’t overstate how this will completely change team dynamics and allow true collaboration between designers and developers. Anyone can just come in and check all the specs: fonts, colors, sizes, distances, etc. Developers can benefit from inspecting the constraints and how the layouts adapt to multiple screens.
         

Figma VS Sketch

Figma VS Sketch-6-产品设计-experience,designers,interface,following,breaking
       Version History

         

Figma VS Sketch

Figma VS Sketch-7-产品设计-experience,designers,interface,following,breaking
       The versioning is much more visual in Figma, allowing you to quickly compare between versions. It’s a lot more pleasing to use than Sketch’s macOS native versioning, which feels slow and over-the-top. While they both have Autosave and version history, their execution is completely different.
         

Figma VS Sketch

Figma VS Sketch-8-产品设计-experience,designers,interface,following,breaking
        In Sketch, it’s slow to navigate between each version. Often times, designers disable this feature because iteats too much of their disk space.
  Comments System

         

Figma VS Sketch

Figma VS Sketch-9-产品设计-experience,designers,interface,following,breaking
       The comments feature is built-in. Team members can pin comments to your designs and you’ll receive notifications when there are new comments or replies. Once you’re done, you can click “Resolve” to hide the thread.
   In Sketch, you can add comments by downloading a plugin or use the excellent Zeplin for a more interactive solution that includes specs and assets delivery.
         

Figma VS Sketch

Figma VS Sketch-10-产品设计-experience,designers,interface,following,breaking
       Zeplin is also browser-based, so it works for Mac/Windows.
   Another Sketch plugin worth noting is Craft from InVision, which allows you to design with real data. You can quickly generate names and photos from presets, Websites or APIs.
         

Figma VS Sketch

Figma VS Sketch-11-产品设计-experience,designers,interface,following,breaking
        If you put Sketch together with Craft, InVision and Zeplin, the package suddenly becomes a lot more attractive for comments and prototyping.
  Vector Networks

  Vector Networks is groundbreaking. You can move the lines instead of the vector points, and all the connected points will automatically follow. That’s because instead of having just a beginning and an end point, you can connect multiple vector lines in Figma, creating a web of vector points. It’s incredibly intuitive once you start using it.
         

Figma VS Sketch

Figma VS Sketch-12-产品设计-experience,designers,interface,following,breaking
         Vector Networks  introduced by Figma.
   Sure, it’s still missing things likeScissors or Rotate Copies , but for most vectors, I believe that Figma is easier to use and Vector Networks can lead to interesting results.
  Import from Sketch

  Figma was able to import Sketch files extremely accurately. Every Artboard, Groups and layers were left intact with their exact names, grouping and properties, including multiple borders, shadows and effects like Blending modes and Background Blur. Because of this, I’m inclined to say that using Figma as an extension of Sketch or vice versa is not a far off idea. You can basically import any existing Sketch work, resource or vector and start from there. The fact that they don’t support Photoshop files (yet) speak volumes of the level of compatibility that it has with Sketch versus Photoshop.
         

Figma VS Sketch

Figma VS Sketch-13-产品设计-experience,designers,interface,following,breaking
       Strangely, I couldn’t copy and paste vectors from Sketch to Figma, but I could drag and drop an SVG file directly into an open document.
         

Figma VS Sketch

Figma VS Sketch-14-产品设计-experience,designers,interface,following,breaking
        I was even able to import the extremely detailed vectors from Angle and got a fairly impressive result. Sure, the gradients and shadows aren’t as good-looking (sometimes even missing), but all the shapes were there. This is a big deal because you can use virtually any Sketch UI Kit in Figma.
  There’s a Desktop-ish app

         

Figma VS Sketch

Figma VS Sketch-15-产品设计-experience,designers,interface,following,breaking
       You can download the desktop version, but don’t expect a native experience. It’s basically just a Web wrapper. Still, unlike the browser version, the keyboard shortcuts won’t interfere with browser’s. For example, CMD + 1–9 switches between browser tabs, but in the Desktop app, it switches between documents. You also get rid of the extra browser chrome.
  Constraints

  Adaptive layout is an indispensable feature for modern design tools. Designers have to deal with an increasing amount of device resolutions. It would be silly not to be able to adapt a design from the iPhone 7 to 7 Plus just by resizing the Artboard.
         

Figma VS Sketch

Figma VS Sketch-16-产品设计-experience,designers,interface,following,breaking
        In Figma, you set up the constraints by pinning against the borders, or setting the element to center. It’s essentially like Sketch’s Pin to corner and Resize object . I have to admit that Figma’s version is more visual and intuitive to use while Sketch has more options like Float in place .
         

Figma VS Sketch

Figma VS Sketch-17-产品设计-experience,designers,interface,following,breaking
       Is Float in place any good? Yes, if you want the elements to keep the same proportional distance and size between each other.
         

Figma VS Sketch

Figma VS Sketch-18-产品设计-experience,designers,interface,following,breaking
       Performance

  Handling dozens of Artboards is a breeze in Figma (but your fan may start kicking though). Those who complain about Sketch’s performance may find better luck here. Seeing that it’s browser-based, the entry point is much lower for practically anyone owning a desktop, laptop or mobile phone. As a matter of fact, those who long wished for Sketch to come out in Windows finally have their answer.
  The User Interface

         

Figma VS Sketch

Figma VS Sketch-19-产品设计-experience,designers,interface,following,breaking
       The user interface is almost an exact replica of Sketch, down to the tiniest details like the names of the tools, keyboard shortcuts, the Artboards and Groups, or the Export tool. Don’t get me wrong, this is a GOOD thing for users. It just means that Sketch has set such a powerful standard that both Adobe XD and Figma have no hesitation following.
   Sketch is like the “iPhone” of design tools, in that most new tools will copy its standards, add a few twists, but years down the line, they’ll mature enough to be truly unique on their own. In the end, users win the most as they get more choices at the highest standard. In other words, they’re no longer stuck with Photoshop for UI design, the same way they were stuck with dumb smart phones with clunky keyboards. Of course, I don’t mean this as an insult to Figma or Adobe. They’re smart to answer the modern designers’ needs in a way that don’t confuse them, making their transition as smoothly as possible. To be fair, a lot of these standards came from the Mac and Adobe’s own Illustrator and Fireworks (RIP).
  Should you use Figma?

  I think the answer is a resounding yes. You don’t need to learn a new tool, because it feels and works like Sketch. For me, switching between these tools felt completely natural.
   Both tools can reinforce each other, meaning that they can fulfill different needs as you switch between Mac and Windows, iOS and Android, home and office. I’d choose Figma for its real-time collaboration, multi-platform support (Windows, Mac, Linux) and Sketch for its platform maturity, true native experience, and its excellent plugins and resources . In term of features, I think both will eventually catch up to each other (Real-time Collaboration, Vector Networks, Comments versus Symbols, Overrides, Plugins).
   Figma is totally free until the end of the year, so give it a try.



上一篇:The Voting Process through a Behavioral Lens
下一篇:Falling back in love with sketching
亚玛网铺 发表于 2016-10-2 05:32:16
顶起顶起顶起
回复 支持 反对

使用道具 举报

mr_no_way 发表于 2016-10-6 00:45:35
时间过的真快,一不留神我也抢了回沙发!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表