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,一经查实,立即删除!

相关文章

hello,你知道获取元素有哪几种方式吗?

收下我的小心心!(害羞脸) 根据id属性的值获取元素,返回来的是一个元素对象 document.getElementById("id属性的值") 根据标签名获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 documen…

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

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

[待总结]redmine

先列出来,有空再总结转载于:https://www.cnblogs.com/gracexiao/archive/2011/11/18/2253834.html

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.由于屏幕有限,因此网页设计也受到限制。 可以说,在屏幕的小…

前端组件化-抽象公共组件类

优化上次的组件化小demo 上次的组件化demo只是为了简单的实现前端组件化的思想&#xff0c;这次我们稍微优化一下抽离公共类 下面代码 html <div id"wrapper"></div> 复制代码js /* DOM字符串转DOM节点 */ const createStringToDom str > {const ele…

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

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

javascript模版引擎-tmpl的bug修复与性能优化

http://www.planeart.cn/?p1594 http://ejohn.org/blog/javascript-micro-templating http://bbs.phpchina.com/thread-224712-1-1.html [ Noevil: 下面直接贴出改进好的MicroTemp&#xff0c;但是还是建议看一下原文&#xff0c;里面有详细的改进细节&#xff0c;和改进前后的…

2019.5.8_此书真乃宝书也_从定位参数到仅限关键字参数

《摘自流畅的Python》 此书真乃宝书也,虽说还是有点儿没懂 从定位参数到仅限关键字参数 Python最好的特性之一是提供了极为灵活的参数处理机制&#xff0c;而且Python3进一步提供了仅限关键字参数(keyword-only argument)。与之密切相关的是&#xff0c;调用函数时使用*和**“展…

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

用户体验与可用性测试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插件&#xff1a; Deploy Plugindeploy插件支持将War/Jar部署到远程的应用服务器上&#xff0c;例如Tomcat,JBoss,Glassfish。正在寻找或开发.NET web 应用的自动发布插件。如何回滚或重新部署先前的build&#xff1a;0&#xff09; 需要被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…

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

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

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

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

[转]cocos2d游戏开发,常用工具集合

cocos2d游戏开发&#xff0c;常用工具集合 原文地址&#xff1a;http://www.cocoachina.com/bbs/read.php?tid-68951.html 位图字体工具Bitmap Font ToolsBMFont (Windows)FonteditorGlyph DesignerHieroLabelAtlasCreator粒子编辑工具Particle Editing ToolsParticleCreat…

拓展视野学习前端,我推荐这些

众所周知&#xff0c;关注公众号可以了解学习掌握技术方向&#xff0c;学习优质好文&#xff0c;落实到自己项目中。还可以结交圈内好友&#xff0c;让自己融入到积极上进的技术氛围&#xff0c;促进自己的技术提升。话不多说&#xff0c;推荐这些优质前端公众号前端下午茶拓宽…

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.作为人类&#xff0c;我…

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…

CF1100F Ivan and Burgers

CF1100F Ivan and Burgers 静态区间&#xff0c;选取任意个数使得它们的异或和最大 \(n,\ m\leq5\times10^5,\ a_i\in[0,\ 10^6]\) lxl ST表&#xff0c;线性基 如果暴力维护线性基&#xff0c;线段树时间复杂度为 \(O(n\log^2n)-O(\log^3n)\) 由于重复元素对答案没有影响&…