figma设计_5位来自杂乱无章的设计师的Figma技巧

figma设计

When starting a design project, a fast pace and multiple design iterations can easily lead to a cluttered mess. Taking the time in the beginning to build good organizational habits will save you time later. You’ll thank your past self when you don’t have to rename countless files and do the tidying the day before final handoff.

在开始设计项目时,快速的步伐和多次的设计迭代很容易导致混乱。 花时间开始建立良好的组织习惯将为您节省时间。 当您不必重命名无数文件并整理最后一次交接的前一天时,您将感谢您过去的时光。

Here are five tips that help me keep my files organized and easy to browse. No one likes inheriting a messy design file!

这里有五个提示,可以帮助我使文件井井有条,易于浏览。 没有人喜欢继承凌乱的设计文件!

1.为组件和层提供描述性名称 (1. Give Components & Layers Descriptive Names)

Image for post
Image for post
Image for post
Figma’s layer panel, located on the left side of the screen showcases all of your layers. It’s important to keep these logically ordered and descriptive!
Figma的图层面板位于屏幕左侧,可显示您的所有图层。 保持这些逻辑顺序和描述性很重要!

Keep your layer panel neat and ordered! Each frame, group, and component should have a descriptive name that tells you what it is and what it is for. For complex designs, it’s a real pain when you can’t immediately tell the difference between “Vector 21” and “Vector 22”.

保持图层面板整洁有序! 每个框架,组和组件均应具有描述性名称,以告诉您它的含义和用途。 对于复杂的设计,当您无法立即分辨出“ Vector 21”和“ Vector 22”之间的区别时,这确实是一个痛苦。

If you like making a lot of groups, it can be helpful to order those groups in the order that they appear on your frame. For example, for one of my homepage designs, my largest groups represented large sections on the page, starting with the page’s header, and ending with its footer.

如果您喜欢创建许多组,则按照在框架上显示的顺序对这些组进行排序可能会有所帮助。 例如,对于我的一个首页设计,我最大的组代表页面上的大部分,从页面的页眉开始,以页脚结束。

2.订购相框/画板 (2. Order Your Frames/Artboards)

A Figma file showing mock screens in a numerical order. The screens follow a logical and predictable progression.
Make sure your screens follow a logical progression! Especially if you are prototyping a user flow!
确保您的屏幕遵循逻辑顺序! 尤其是在制作用户流程原型时!

If you’ve spent any time on a project involving multiple pages, you know Figma files can get visually cluttered very quickly! If you are creating a user-flow for a prototype, ensure that your naming and numbering conventions are consistent.

如果您在涉及多个页面的项目上花费了任何时间,就会知道Figma文件很快就会变得视觉混乱! 如果要为原型创建用户流,请确保命名和编号约定一致。

For prototypes with multiple flows, it can be helpful to separate each user-flow into its own group. From there, consistently follow a right-to-left or top-to-bottom ordering convention.

对于具有多个流程的原型,将每个用户流程分成自己的组可能会有帮助。 从那里开始,始终遵循从右到左或从上到下的排序约定。

3.使用页面保持整洁 (3. Use Pages to Keep Things Tidy)

Image for post
Image for post
Figma’s pages panel, located above the later panel helps group relevant screens together in named categories.
Figma的页面面板位于后面的面板上方,可帮助将相关屏幕按命名类别分组。

There’s no need to crowd a single page of your Figma file. If you can group user-flows, iteration, or components on separate pages it’s incredibly useful to do so. You can add or duplicate pages via the menus above the layer panel.

无需占用您的Figma文件的单个页面。 如果您可以在单独的页面上对用户流,迭代或组件进行分组,那么这样做非常有用。 您可以通过图层面板上方的菜单添加或复制页面。

4.使用组件/符号 (4. Use Components/Symbols)

A Figma screen showcasing components and their repeated use in a design.
Figma.comFigma.com

If you have any repeatable elements in your design, like icons or buttons, build them out as components first! Rather than painstakingly tweaking every single copy of a design element, using symbols ensures that any change to your original element will be transferred to all copies of it. This is a tremendous time-saver and the organized use of components is crucial for any kind of handoff.

如果设计中有任何可重复的元素(例如图标或按钮),请首先将它们构建为组件! 使用符号可以确保对原始元素的任何更改都将转移到设计元素的所有副本中,而不用费力地调整设计元素的每个副本。 这可以节省大量时间,并且有组织地使用组件对于任何类型的切换都是至关重要的。

5.利用样式 (5. Make Use of Styles)

Image for post
Image for post
Figma’s style panel is located on the right side of your screen, under the “Design Tab”
Figma的样式面板位于屏幕的右侧,“设计选项卡”下

Much like components, text, color, and effect styles are crucial time-savers that are worth every second it takes to set up. Styles are standard configurations for your elements and will save you from having to manually select the details for each element you make.

与组件,文本,颜色和效果样式非常相似,它们是至关重要的节省时间,值得花费每一秒钟来进行设置。 样式是元素的标准配置,它将使您不必手动选择制作的每个元素的详细信息。

What’s also special about styles is that like components, changing the core style will affect all instances of the style. If you need a deeper blue for your pressed button state, changing your “Button Pressed” color style will save you the trouble of manually updating it throughout your whole design.

样式的特殊之处还在于,与组件一样,更改核心样式将影响样式的所有实例。 如果您需要更深的蓝色来表示按下的按钮状态,则更改“ Button Pressed”的颜色样式将避免在整个设计中手动更新它的麻烦。

These are the quickest and most useful tips I’ve learned throughout my time as a designer. Putting in the effort early exponentially saves you time near the end of your project!

这些是我在作为设计师的整个过程中学到的最快,最有用的技巧。 尽早投入大量精力可以节省您接近项目结束的时间!

You can learn more and read more in-depth organizational advice from Figma’s Guides & Practices section on their website.

您可以从Figma网站上的“指南和实践”部分了解更多信息并深入的组织建议。

Image for post
UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women),这是一个巴西组织,致力于通过采取行动,赋权和知识共享的举措来促进科技行业中的黑人女性平等。 对系统性种族主义保持沉默是不可行的。 建立您相信的设计社区。

翻译自: https://uxdesign.cc/5-figma-tips-from-a-reformed-messy-designer-95b232bd58d4

figma设计

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275164.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计和实现一个 Chrome 插件提升登录效率

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 进群参与,每周大家一起学习200行左右的源码,共同进步。已进行4个月了,很多小伙伴表示收获颇丰。前言在我们的工作过程中,每当…

qq空间网页设计_网页设计中的负空间

qq空间网页设计重点 (Top highlight)Because screens are limited, web design is also limited. It can be said that in the small box of the screen, each pixel is a piece of real estate.由于屏幕有限,因此网页设计也受到限制。 可以说,在屏幕的小…

时隔一年半,我,一个卑微的前端菜鸡,又来写面经了

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 进群参与,每周大家一起学习200行左右的源码,共同进步。已进行4个月了,很多小伙伴表示收获颇丰。作者:刮涂层_赢大奖原文地址…

用户体验与可用性测试_可用性作为用户体验的原则

用户体验与可用性测试Every UX Designer has his views and best practices. We all have a guide book created through time and experience. I want to share mine with you.每个UX设计器都有他的观点和最佳实践。 我们都有一本通过时间和经验编写的指南。 我想和你分享我的…

Jenkins插件之Deploy

deploy插件: Deploy Plugindeploy插件支持将War/Jar部署到远程的应用服务器上,例如Tomcat,JBoss,Glassfish。正在寻找或开发.NET web 应用的自动发布插件。如何回滚或重新部署先前的build:0) 需要被deploy的job的结果要存档&#…

受美国法律保护美国妞_为什么美国法律有效地要求所有软件设计都要响应

受美国法律保护美国妞Smashing Magazine defines “responsive design” as an approach where design responds to the user’s behavior and environment based on screen size, platform, and orientation. In responsive design, a breakpoint is the “point” at which a…

源码群友问:你这么多项目是怎么进行技术选型的?

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 进群参与,每周大家一起学习200行左右的源码,共同进步。已进行4个月了,很多小伙伴表示收获颇丰。源码群有群友提问我是怎么找到那么多npm…

iOS开发之打包上传报错: ERROR ITMS-90087/ERROR ITMS-90125

制作好的framework在打包上传至AppStore如果出现以下错误,则说明这个SDK里面包含了x86_64, i386 架构,当然这个AppStore是不允许的,所以会在上传的时候报错,解决办法就是要这个SDK剔除掉x86_64, i386这两个架构 解决办法&#xff…

ios 动画设计_动画和讲故事在设计中的力量

ios 动画设计As human beings, we’ve always been fond of storytelling. Just think of campfire stories, Santa Claus, or that thrilling book you just finished. Here’s how you can use the power of storytelling to make your designs better.作为人类,我…

poj 2696 A Mysterious Function

A Mysterious FunctionTime Limit: 1000MS Memory Limit: 65536KTotal Submissions: 3517 Accepted: 2398Description For any integers p and q with q > 0, define p mod q to be the integer r with 0 < r < q −1 such that p−r is divisible by q. For example,…

面试官:能不能手写一个 Promise?

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以点此加我微信ruochuan12 进群参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。已进行4个月了&#xff0c;很多小伙伴表示收获颇丰。以下问题你是不是在哪里听过&#xff1f…

设计图像素和开发像素_游戏开发的像素艺术设计

设计图像素和开发像素Pixel art is a large part of the legacy of game development. Every Pokemon game up until their X/Y series was rendered entirely with pixel art, Ragnarok Online (2000) was one of the first commercial works to feature 3D rendering along s…

深入浅出Nintex——更新PeopleandGroup类型的Field

转载于:https://www.cnblogs.com/mingle/archive/2011/11/25/2263199.html

从 vue-cli 源码中,我发现了27行读取 json 文件有趣的 npm 包

1. 前言大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。已进行四个月了&#xff0c;很多小伙伴表示收获颇丰。想学源码&#xff0c;极力推荐订阅我写…

自定义view示例_自定义404页的10个示例(从最佳到最差)

自定义view示例自定义404页面 (Custom 404 pages) To customize or not to customize your 404 page? I hope by now you know the answer is that, yes, under essentially all circumstances you should customize your 404 page. 404 errors occur when someone attempts t…

BTF:实践指南

本文地址&#xff1a;BTF&#xff1a;实践指南 | 深入浅出 eBPF 1. BPF 的常见限制 1.1 调试限制1.2 可移植性2. BTF 是什么&#xff1f;3. BTF 快速入门 3.1 BPF 快速入门3.1 BTF 和 CO-RE4. 结论 BPF 是 Linux 内核中基于寄存器的虚拟机&#xff0c;可安全、高效和事件驱动…

python 混入类MixIn

写在前面 能把一件事情说的那么清楚明白&#xff0c;感谢廖雪峰的官方网站。 1.为什么要用混入类&#xff1f;&#xff08;小白入门&#xff09; 继承是面向对象编程的一个重要的方式&#xff0c;因为通过继承&#xff0c;子类就可以扩展父类的功能。 step1: 回忆一下Animal类层…

估计很多前端都没学过单元测试~

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。已进行四个月了&#xff0c;很多小伙伴表示收获颇丰。想学源码&#xff0c;极力推荐订阅我写的《学习…

xd可以用ui动效效果吗_通过动画使UI设计栩栩如生:Adobe XD和After Effects

xd可以用ui动效效果吗Note — If you don’t fancy splashing out on an Adobe license, you can trial their products for 14 days each. That should give you more than enough time to play, check it out.注意—如果您不愿意花钱购买Adobe许可证&#xff0c;则可以分别试…

第十二周编程总结

这个作业属于那个课程C语言程序设计II这个作业要求在哪里https://pintia.cn/problem-sets/1127748174659035136/problems/1127749414029729792我在这个课程的目标是更好的学习函数这个作业在那个具体方面帮助我实现目锻炼了我的编程能力参考文献c语言程序设计26-1 计算最长的字…