figma button
Imagine a world where designers can’t gather around a whiteboard and sketch together—now we’re living in it. While you and your team scramble to get ready for the remote design challenge, Figma might be a tool that’s already on your radar.
想象一下一个世界，那里的设计师无法聚集在白板上并一起画草图—现在我们生活在其中。 当您和您的团队为远程设计挑战做准备时，Figma可能已经成为您的工具。
Figma has gained much traction in the design community since its launch in 2015. Our team switched to Figma in the past year (from our old favorite, Sketch), and now we’re glad we made the decision. So I decided to put together some resources that helped us during the migration, hoping they’ll speed things up for you, too.
自2015年成立以来，Figma在设计界就获得了很大的关注。过去一年，我们的团队改用了Figma(从我们以前的最爱Sketch中选择)，现在我们很高兴自己做出了决定。 因此，我决定汇总一些在迁移过程中对我们有帮助的资源，希望它们也能为您加快速度。
在你开始前… (Before you start…)
This article may not be a good beginner’s tutorial. If you’re new to UI design tools, I recommend spending 30 minutes to go through Figma’s Getting Started playlist on YouTube, or follow this Figma tutorial on LinkedIn Learning.
本文可能不是一个好的初学者教程。 如果您不熟悉UI设计工具，建议您花30分钟浏览YouTube上Figma的入门播放列表，或按照LinkedIn学习上的Figma教程进行操作 。
As someone who’s interested in migrating to Figma or adopting it as your primary design tool, here are a few questions you may want to ask:
作为有兴趣迁移到Figma或将其用作您的主要设计工具的人，您可能要问以下几个问题：
Figma有什么好处？ (What’s so good about Figma?)
- With a full-featured web app supporting most modern browsers, Figma doesn’t ask for a Mac 借助支持大多数现代浏览器的全功能Web应用程序，Figma不需要Mac。
- Teamwork happen in real-time — it’s just like Google Docs for design 团队合作是实时发生的-就像Google文档用于设计一样
- Sharing made easy with files and edits saved to the cloud 通过保存到云中的文件和编辑轻松进行共享
Figma replaces both Sketch and Zeplin with built-in design handoff features
Figma用内置的设计切换功能取代了 Sketch 和 Zeplin
Figma found the final piece of the UI design puzzle: Auto Layout
Figma找到了UI设计难题的最后一部分： 自动布局
我需要付钱吗？ (Do I have to pay?)
Figma offers a free Starter plan that meets the needs of many. If you’re a student, verify your student status and get a free upgrade to the Professional plan that unlocks unlimited projects and more control over your work.
Figma提供了一个免费的入门计划，可以满足许多人的需求。 如果您是学生，请验证学生身份并免费升级到Professional计划，以解锁无限的项目并更好地控制您的工作。
我可以从Sketch或Adobe XD迁移文件吗？ (Can I migrate my files from Sketch or Adobe XD?)
Yes, you can! Figma officially supports importing from Sketch files. Simply drag and drop Sketch files into your workspace or follow this guide. For now, Adobe XD files cannot be imported directly, but here’s a workaround suggested by a Reddit user.
是的你可以！ Figma正式支持从Sketch文件导入。 只需将Sketch文件拖放到您的工作区中或按照本指南进行操作 。 目前，不能直接导入Adobe XD文件，但这是Reddit用户建议的解决方法 。
Figma中的文件结构 (File structure in Figma)
Figma’s file browser can look different from similar tools. Since everyone has unlimited storage in the cloud, normally files won’t be saved locally. And as a collaborative tool, Figma encourages you to set up teams and invite others to work together. Having separate team spaces helps you jumping between different groups you’re working with, or utilize that to set up a personal space.
Figma的文件浏览器看起来与同类工具不同。 由于每个人都在云中拥有无限的存储空间，因此通常不会在本地保存文件。 作为协作工具，Figma鼓励您建立团队并邀请其他人一起工作。 拥有独立的团队空间可帮助您在正在使用的不同组之间切换，或利用它们来建立个人空间。
Under a team space you may create multiple projects, and inside each project are files. Simply put: Figma’s 3 levels of file structure are team > project > file. Each team, project, and file can have different sharing permissions.
在团队空间下，您可以创建多个项目，并且在每个项目内都有文件。 简而言之：Figma的文件结构的3个层次是团队>项目>文件。 每个团队，项目和文件可以具有不同的共享权限。
Here’s a video from Figma that walks through the process of creating a new document under this structure:
这是来自Figma的视频，其中介绍了在此结构下创建新文档的过程：
框架与画板 (Frames vs. artboards)
You’ll easily feel at home with Figma’s user interface if you’ve used other design tools like Sketch, InVision, or Adobe XD before. Pages, layers, and constraints all work as you’d expect, with frames being the only thing that stands out immediately.
如果您以前使用过其他设计工具(例如Sketch，InVision或Adobe XD)，则可以轻松使用Figma的用户界面。 页面，图层和约束都可以按您期望的那样工作，而框架是唯一可以立即脱颖而出的东西。
Figma explains a frame as “a foundational element for your designs that can act as a top-level container, and represent areas or components”. Unlike an artboard in other design tools, frames can be nested.
Figma将框架解释为“设计的基础元素，可以充当顶层容器，并代表区域或组件”。 与其他设计工具中的画板不同，框架可以嵌套。
You can define constraints for elements in frames, so when the frame is resized, the elements inside will move relatively. This is different from a group which resizes with its child elements. To learn more about when to use groups versus frames, check out this article.
您可以为框架中的元素定义约束，因此，当调整框架的大小时，内部的元素将相对移动。 这与使用其子元素调整大小的组不同。 要了解有关何时使用组和框架的更多信息，请参阅本文 。
If the terms mentioned above don’t sound familiar to you, here’s a 6-minute tutorial from Figma that explains what’s going on in the editor.
协作与设计交接 (Collaboration and design handoff)
You’ve heard so much about this—Figma’s multiplayer magic lets everyone design at the same time. Each player sees others’ edits in real-time, and knows where others are in the project by tracking their cursors. (In fact, our dev friends said they like Figma largely because they had fun stalking us when we were working 😄)
您已经听到了很多有关此信息的信息-Figma的多人魔术使每个人都可以同时进行设计。 每个玩家都可以实时查看其他人的编辑，并通过跟踪他们的光标知道其他人在项目中的位置。 (实际上，我们的开发者朋友表示，他们之所以喜欢Figma，主要是因为他们在我们工作时乐于跟踪我们😄)
Built-in features such as commenting and code preview made design handoff much simpler. In the past we had to rely on the combination of Sketch and Zeplin (some also added Abstract to the combo), and now Figma replaces them all!
注释和代码预览等内置功能使设计移交更加简单。 过去，我们不得不依靠Sketch和Zeplin的组合(有些还向组合中添加了Abstract)，现在Figma取代了它们！
使用库，样式和组件 (Using libraries, styles, and components)
We all like the idea of “design once, use everywhere”, and many of us have been working hard on a scalable design system that follows the Atomic Design principles. However, the truth is design assets and code have different personalities, so it can be challenging to try to organize vector graphics in the same way as JavaScript snippets. And limitations of design tools often forces us to adopt cumbersome workarounds.
我们都喜欢“一次设计，随处使用”的想法，我们中的许多人一直在努力开发可扩展的设计系统，该系统应遵循原子设计原则。 但是，事实是设计资产和代码具有不同的个性，因此尝试以与JavaScript代码段相同的方式组织矢量图形可能具有挑战性。 设计工具的局限性经常迫使我们采用繁琐的解决方法。
Figma streamlines the process and gives more control back to you. Unlike symbols in Sketch, components don’t have to live in a separate page. The master component stay where it is, and you can always find it through its instances.
Figma简化了流程，并为您提供了更多控制权。 与Sketch中的符号不同，组件不必位于单独的页面中。 主组件保持原样，您始终可以通过其实例找到它。
And not only components can be reused—so can styles! Colors, text, effects (shadow & blur), and layout grids can all become reusable styles.
而且不仅组件可以重复使用，样式也可以重复使用！ 颜色，文本，效果(阴影和模糊)和布局网格都可以成为可重用的样式。
Styles and components created in one file aren’t limited to that file. They can be published as a shared library, and then be reused in other files or projects. And if a file has access to more than one shared libraries, you have the control of turning individual ones on or off.
在一个文件中创建的样式和组件不限于该文件。 它们可以作为共享库发布，然后在其他文件或项目中重用。 而且，如果一个文件可以访问多个共享库，则可以控制打开或关闭单个共享库。
Changes to components and styles can be synced across files, too. Edit a master component, and the next time you open another file that contains its instances, Figma will prompt you and ask if these instances need to be updated. Here’s a visual from Figma that explains the process:
组件和样式的更改也可以跨文件同步。 编辑一个主组件，下次打开另一个包含其实例的文件时，Figma将提示您并询问是否需要更新这些实例。 这是来自Figma的视频，解释了该过程：
… 和更多 (… And more)
There’s so much to learn about Figma, so create or import a project and get started! After you start to get along with it, don’t forget to take a look at Figma’s advice of best practices that helped us establish a handoff workflow.
关于Figma，有很多东西要学习，因此创建或导入项目并开始吧！ 在您开始相处之后，别忘了看一下Figma的最佳实践建议，这些建议可以帮助我们建立移交工作流程。
Or at least try the Auto Layout magic!
或者至少尝试使用“自动布局”魔术！
Good luck, and have a good time designing in the cloud!
祝您好运，并在云端进行设计愉快！
翻译自: https://medium.com/ux-ed/a-newcomers-guide-to-figma-a9d993157794
figma button
1576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
