figma設(shè)計(jì)

Putting together a design system may seem like an unnecessary hassle. It’s often easier to jump straight into designing things without having to worry about styles, components, or libraries. Some might even argue that when it comes to smaller projects, creating a design system takes nearly as much time as designing the entire project, so why bother?

組合設(shè)計(jì)系統(tǒng)似乎是不必要的麻煩。 直接進(jìn)入設(shè)計(jì)事物通常更容易，而不必?fù)?dān)心樣式，組件或庫。 甚至有人可能會(huì)爭(zhēng)辯說，當(dāng)涉及到較小的項(xiàng)目時(shí)，創(chuàng)建設(shè)計(jì)系統(tǒng)所花費(fèi)的時(shí)間幾乎與設(shè)計(jì)整個(gè)項(xiàng)目所花費(fèi)的時(shí)間一樣多，那么為什么要打擾？

While it’s true creating a design system is an additional step in the design process, what’s also true is that, regardless of the size of the project, the first version of your project rarely gets accepted by the client. Depending on the size of the project as well as the severity of the changes, introducing them could take a lot of time.

創(chuàng)建設(shè)計(jì)系統(tǒng)確實(shí)是設(shè)計(jì)過程中的附加步驟，但同樣重要的是，無論項(xiàng)目大小如何，客戶都很少接受項(xiàng)目的第一個(gè)版本。 根據(jù)項(xiàng)目的大小以及變更的嚴(yán)重性，引入這些變更可能會(huì)花費(fèi)很多時(shí)間。

So whether you’re designing huge platforms or small e-commerce websites, design systems could save you a lot of time in the long run. Instead of going through each and every view making sure that you’ve applied the new colors or fonts, you could just take a look at your styles and components, introduce all the necessary changes in a few clicks and automatically populate them to the entire project.

因此，無論您是設(shè)計(jì)大型平臺(tái)還是小型電子商務(wù)網(wǎng)站，從長遠(yuǎn)來看，設(shè)計(jì)系統(tǒng)都可以為您節(jié)省大量時(shí)間。 無需遍歷每個(gè)視圖來確保已應(yīng)用新的顏色或字體，而只需查看樣式和組件，單擊幾下即可進(jìn)行所有必要的更改，然后自動(dòng)將其填充到整個(gè)項(xiàng)目中。

Not only does this save you time, but it also allows for more coherent design practices as you limit yourself to only using predefined styles and components.

這不僅可以節(jié)省您的時(shí)間，而且由于您僅使用預(yù)定義的樣式和組件，因此還可以實(shí)現(xiàn)更一致的設(shè)計(jì)實(shí)踐。

Figma gives you the tools to create a simple, easily reusable design system. There are a few ways you could approach this, and I’m going to try and cover all of them. I’d also like to take you through the list of things you’ll need to build your very own basic design system, which you can then modify and grow to best suit your project’s needs.

Figma為您提供了創(chuàng)建簡(jiǎn)單，易于重用的設(shè)計(jì)系統(tǒng)的工具。 您可以通過幾種方法來解決這個(gè)問題，我將嘗試涵蓋所有這些方法。 我還要向您介紹構(gòu)建自己的基本設(shè)計(jì)系統(tǒng)所需的事項(xiàng)，然后可以對(duì)其進(jìn)行修改和擴(kuò)展，使其最適合您的項(xiàng)目需求。

Technically you could use one of the available ready-made design systems for Figma, but I’d argue this is not a very good idea unless you’re trying to create something in a hurry. I believe it’s always best to put in the time to build your project from the ground up. This will allow you to better understand how each component is created and solve any issues that may arise while working with the design system.

從技術(shù)上講，您可以使用Figma可用的現(xiàn)成的設(shè)計(jì)系統(tǒng)之一，但是我認(rèn)為這不是一個(gè)好主意，除非您要急著創(chuàng)建一些東西。 我認(rèn)為，最好花時(shí)間從頭開始構(gòu)建您的項(xiàng)目。 這將使您更好地了解如何創(chuàng)建每個(gè)組件并解決在使用設(shè)計(jì)系統(tǒng)時(shí)可能出現(xiàn)的任何問題。

Sometimes it can be hard to create a design system without seeing the bigger picture. It’s a good idea to base your design system around an already finished project.

有時(shí)，如果不看大圖就很難創(chuàng)建設(shè)計(jì)系統(tǒng)。 將您的設(shè)計(jì)系統(tǒng)基于已經(jīng)完成的項(xiàng)目是一個(gè)好主意。

The first and most important thing is creating a proper grid for your design system. Depending on what kind of framework you’ll be working with, you could be using different types of grids. The one I personally use most often is the Bootstrap grid. I like to set up my grid to not only help me space around objects horizontally but also vertically. I’m not going to go into why you should be using a grid, as that’s a subject for another article.

首先也是最重要的事情是為您的設(shè)計(jì)系統(tǒng)創(chuàng)建適當(dāng)?shù)木W(wǎng)格。 根據(jù)您將使用的框架類型，可能會(huì)使用不同類型的網(wǎng)格。 我個(gè)人最常使用的一個(gè)是Bootstrap網(wǎng)格。 我喜歡設(shè)置網(wǎng)格，不僅可以幫助我水平放置對(duì)象，而且可以垂直放置對(duì)象。 我不會(huì)討論為什么要使用網(wǎng)格，因?yàn)檫@是另一篇文章的主題。

Your grid for Macbook Pro sized screen or similar should look something like this.Macbook Pro尺寸屏幕或類似屏幕的網(wǎng)格應(yīng)如下所示。

You should turn thus created grid into a style. Now if you haven’t done that already, it’s also a good idea to go into the Figma hamburger menu > Preferences > Nudge Amount and set the values to 1 and 8. This way your keyboard arrow keys in combination with the shift key will allow you to move the objects around while sticking to the grid you’ve just created.

您應(yīng)該將這樣創(chuàng)建的網(wǎng)格轉(zhuǎn)換為樣式。 現(xiàn)在，如果您還沒有這樣做，那么進(jìn)入Figma漢堡菜單>“偏好設(shè)置”>“微移數(shù)量”并將值設(shè)置為1和8也是一個(gè)好主意。這樣，您的鍵盤箭頭鍵與Shift鍵的組合將允許您可以在移動(dòng)對(duì)象的同時(shí)保持剛創(chuàng)建的網(wǎng)格的位置。

Figma lets you decide the exact amount of pixels for the shift+arrow combination.Figma可讓您確定shift + arrow組合的確切像素?cái)?shù)量。

The next step is to create a bunch of font styles that we’re going to be using in our project. It’s important to remember to cover all the basics such as several styles for headlines, paragraph texts, hints, captions, and such. Do as many as the kind of projects you’re involved with may necessitate. You might think to yourself: “Hey, why not have the same style for buttons and menus since they use the same font?” Well, you might find yourself in a bit of a pickle if it turns out that you only need to change the font size for your menu elements at a later stage of your project.

下一步是創(chuàng)建將在項(xiàng)目中使用的一堆字體樣式。 重要的是要記住涵蓋所有基礎(chǔ)知識(shí)，例如標(biāo)題的多種樣式，段落文本，提示，標(biāo)題等。 盡可能多地參與您需要參與的項(xiàng)目。 您可能會(huì)想：“嘿，為什么按鈕和菜單使用相同的字體卻沒有相同的樣式？” 好吧，如果事實(shí)證明您只需要在項(xiàng)目的稍后階段更改菜單元素的字體大小，您可能會(huì)感到有點(diǎn)煩。

This is what your font setup should look like.這是您的字體設(shè)置應(yīng)具有的外觀。

I like to keep all my font styles displayed in a frame, so I know whether they play well together or not. This kind of setup will be necessary if you decide to duplicate your design system instead of using it as a library for your project, but I’ll get back to that later. Generally this amount of styles should be enough for any kind of average-sized website with a decent amount of text in it.

我喜歡將所有字體樣式都顯示在一個(gè)框架中，因此我知道它們是否可以很好地協(xié)同工作。 如果您決定復(fù)制設(shè)計(jì)系統(tǒng)而不是將其用作項(xiàng)目的庫，則必須進(jìn)行這種設(shè)置，但是稍后再講。 通常，對(duì)于任何類型的帶有中等數(shù)量文本的中等大小的網(wǎng)站，此樣式數(shù)量應(yīng)足夠。

When it comes to colors I usually define styles for the brand colors, the action color, and some grays. You might want to define styles for important, warning, success, error messages, and such as well. Dealing with a strictly defined palette makes not only the design process but also the hand-off much easier.

當(dāng)談到顏色時(shí)，我通常會(huì)為品牌顏色，動(dòng)作顏色和一些灰色定義樣式。 您可能想為重要，警告，成功，錯(cuò)誤消息等定義樣式。 處理嚴(yán)格定義的調(diào)色板不僅使設(shè)計(jì)過程變得容易，而且使交接變得更加容易。

Color setup for the simple, reusable design system.簡(jiǎn)單，可重復(fù)使用的設(shè)計(jì)系統(tǒng)的顏色設(shè)置。

A basic set of often-used icons is also a good idea. I’ve used Google’s Material icons for this example. Even if you‘re tasked with designing your own set you can use these as placeholders in early mockups that are easy to replace at a later time.

一組基本的常用圖標(biāo)也是一個(gè)好主意。 在此示例中，我使用了Google的“材質(zhì)”圖標(biāo)。 即使您要設(shè)計(jì)自己的集合，也可以在早期的模型中將它們用作占位符，以便以后替換。

Set of icons for the design system.套設(shè)計(jì)系統(tǒng)的象。

Even though there’s a variety of plugins that can automatically generate content for you such as avatars or images, I prefer to create a predefined set of images or avatars as styles, to retain coherence in case I decide to use them as placeholders.

即使有多種插件可以自動(dòng)為您生成內(nèi)容(例如頭像或圖像)，我還是希望創(chuàng)建一組預(yù)定義的圖像或頭像作為樣式，以保持連貫性，以防萬一我決定將它們用作占位符。

It’s not very intuitive, but Figma lets you set up images as color styles that you can later use like any normal color style — to fill a given object using a predefined set of characteristics. What’s even more interesting is that objects can have a lot of fill layers within themselves that interact with each other (this also applies to strokes, effects and so on) and so a group of fill layers all within a single object could be defined as an easily modifiable style. Fill layers can also be moved to front or back and copied between objects. This is an awesome feature that not a lot of people know about.

它不是很直觀，但是Figma允許您將圖像設(shè)置為顏色樣式，以后可以像任何常規(guī)顏色樣式一樣使用-使用一組預(yù)定義的特征填充給定的對(duì)象。 更有意思的是，對(duì)象內(nèi)部可以具有很多相互交互的填充層(這也適用于筆觸，效果等)，因此可以將單個(gè)對(duì)象內(nèi)的一組填充層定義為易于修改的樣式。 填充層也可以移到前面或后面，并在對(duì)象之間復(fù)制。 這是一個(gè)很棒的功能，鮮為人??知。

The magic of Figma, turn images into color styles.Figma的魔力，將圖像變成彩色樣式。

You can of course achieve similar effects by setting up images as components, but you can’t use components as fills.

通過將圖像設(shè)置為組件，您當(dāng)然可以達(dá)到類似的效果，但是不能將組件用作填充。

The last step is to create some shadows for your project. For a small design system I wouldn’t bother with an entire complex elevation system, just a couple of different shadow styles should be enough.

最后一步是為您的項(xiàng)目創(chuàng)建一些陰影。 對(duì)于小型設(shè)計(jì)系統(tǒng)，我不會(huì)理會(huì)整個(gè)復(fù)雜的高程系統(tǒng)，只需幾個(gè)不同的陰影樣式就足夠了。

Just a couple of shadow styles. It ain’t much, but it’s honest work.只是幾個(gè)陰影樣式。 雖然不多，但這是誠實(shí)的工作。

Once you have all the styles set up this way it’s time to start putting together some components.

一旦以這種方式設(shè)置了所有樣式，就可以開始組合一些組件了。

Before Auto Layout there was a whole different approach to creating buttons. You’d start with defining shape components that would then serve as button backgrounds through using appropriate constraints. You’d use these shapes across all your components so that if you decided to change your corner-radius, this change would affect all your buttons, images, input fields, and so on. While this technique still has its merits and can still be used in some situations, it won’t work with Figma’s Auto Layout feature.

在“自動(dòng)布局”之前，有一種完全不同的方法來創(chuàng)建按鈕。 您將從定義形狀組件開始，然后通過使用適當(dāng)?shù)募s束將其用作按鈕背景。 您將在所有組件中使用這些形狀，以便如果決定更改角半徑，則此更改將影響所有按鈕，圖像，輸入字段等。 盡管此技術(shù)仍然有其優(yōu)點(diǎn)，并且仍可以在某些情況下使用，但它不適用于Figma的“自動(dòng)布局”功能。

Auto Layout is an amazing feature, but in the case of buttons it’s not always the best solution. Sometimes you need to size your buttons according to a grid. Some of the projects I’ve worked on necessitated both, standard and Auto Layout buttons. Some of them could do without Auto Layout at all. Not one could do without the standard, non-Auto Layout buttons. When creating a small design system such as this one I’d stick with non-Auto Layout buttons.

自動(dòng)布局是一個(gè)了不起的功能，但是對(duì)于按鈕而言，它并不總是最好的解決方案。 有時(shí)您需要根據(jù)網(wǎng)格調(diào)整按鈕的大小。 我從事的一些項(xiàng)目需要標(biāo)準(zhǔn)按鈕和自動(dòng)布局按鈕。 他們中的一些人根本不需要自動(dòng)版圖。 沒有標(biāo)準(zhǔn)的非自動(dòng)布局按鈕，誰也做不到。 在創(chuàng)建這樣的小型設(shè)計(jì)系統(tǒng)時(shí)，我會(huì)堅(jiān)持使用非自動(dòng)布局按鈕。

At this point you actually start using your styles. You can use your Button font style, put it in a frame, fill it with the Action Default style, slap the Button Default effect on it and you’ve got yourself a button. Do this a couple more times to create appropriate styles for different styles.

至此，您實(shí)際上開始使用樣式了。 您可以使用Button字體樣式，將其放在框架中，并用Action Default樣式填充，在其上拍上Button Default效果，您便會(huì)自己擁有一個(gè)按鈕。 多做幾次，為不同的樣式創(chuàng)建合適的樣式。

You don’t have to go crazy with the buttons. This is a good starter for smaller projects.您不必為按鈕而瘋狂。 對(duì)于較小的項(xiàng)目，這是一個(gè)很好的起點(diǎn)。

In the case of a simple design system like this one I’d finish up with a set of inputs in different states. Again, you should base their design on the styles you’ve already created.

對(duì)于像這樣的簡(jiǎn)單設(shè)計(jì)系統(tǒng)，我將完成一組處于不同狀態(tài)的輸入。 同樣，您應(yīng)該基于已經(jīng)創(chuàng)建的樣式來設(shè)計(jì)它們。

At this point you’ve got all the basic ingredients to start working on a new design. Where you go from here should depend on what kind of projects you do most often and what other patterns could be turned into reusable components that often appear in your projects. Often work with e-commerce websites? It’d probably be a good idea to create some product card components, maybe a checkout form.

至此，您已經(jīng)具備了開始進(jìn)行新設(shè)計(jì)的所有基本要素。 您從這里去的位置應(yīng)取決于您最常執(zhí)行的項(xiàng)目類型以及哪些其他模式可以轉(zhuǎn)換為經(jīng)常出現(xiàn)在項(xiàng)目中的可重用組件。 經(jīng)常與電子商務(wù)網(wǎng)站合作嗎？ 創(chuàng)建一些產(chǎn)品卡組件(可能是結(jié)帳表格)可能是一個(gè)好主意。

Now there are two ways you can go about reusing your design system for new projects. As with most things in life, each has its pros and cons. Go with whatever is best for your design practices and the type of projects you deal with.

現(xiàn)在，您可以通過兩種方法將設(shè)計(jì)系統(tǒng)重新用于新項(xiàng)目。 與生活中的大多數(shù)事物一樣，每種事物都有其優(yōu)點(diǎn)和缺點(diǎn)。 選擇最適合您的設(shè)計(jì)實(shí)踐和所處理項(xiàng)目類型的項(xiàng)目。

You can do it the way it was intended by Figma. Use the design system you’ve created as a library. This way you get access to the entire design system right away, but any heavy modifications of the components are out of the question obviously. You can only modify the colors and hide their elements. Other than that you’re stuck with what’s in the design system. The same thing goes for all styles. You can add new ones, but can’t modify the originals. It’d actually be a better idea to split the design systems into separate libraries and so you could, for example, use a button library, a gray color library, an elevation library, etc.

您可以按照Figma的預(yù)期方式進(jìn)行操作。 使用您創(chuàng)建為庫的設(shè)計(jì)系統(tǒng)。 通過這種方式，您可以立即訪問整個(gè)設(shè)計(jì)系統(tǒng)，但是顯然不需要對(duì)組件進(jìn)行任何重大修改。 您只能修改顏色并隱藏其元素。 除此之外，您還無法使用設(shè)計(jì)系統(tǒng)中的內(nèi)容。 所有樣式都一樣。 您可以添加新的，但不能修改原始的。 將設(shè)計(jì)系統(tǒng)分成單獨(dú)的庫實(shí)際上是一個(gè)更好的主意，因此您可以使用例如按鈕庫，灰色庫，高程庫等。

The second approach and the way I do it is to simply duplicate the entire design system. This way there’s nothing stopping you from modifying all your components. The bad thing about duplicating design systems is the fact that it makes you lose all your styles. You basically need to go through all your fonts, colors, fills, and whatever else you might’ve set up and turn them into styles once again. This isn’t so bad however as it only takes a few minutes and still makes you save a lot of time in the long run.

第二種方法和我做的方法是簡(jiǎn)單地復(fù)制整個(gè)設(shè)計(jì)系統(tǒng)。 這樣，您就無法阻止您修改所有組件。 復(fù)制設(shè)計(jì)系統(tǒng)的壞事是它使您失去所有樣式的事實(shí)。 基本上，您需要遍歷所有字體，顏色，填充以及您可能要設(shè)置的其他內(nèi)容，然后再次將它們轉(zhuǎn)換為樣式。 但這還算不錯(cuò)，因?yàn)樗恍枰獛追昼?#xff0c;從長遠(yuǎn)來看仍然可以節(jié)省很多時(shí)間。

Technically a design system is a much more complex structure than what we’ve created so far. But while a complete design system is supposed to include all reusable characteristics and patterns of a design, our basic design system’s goal is to help you kick start your designs.

從技術(shù)上講，設(shè)計(jì)系統(tǒng)的結(jié)構(gòu)要比我們到目前為止創(chuàng)建的結(jié)構(gòu)復(fù)雜得多。 但是，盡管完整的設(shè)計(jì)系統(tǒng)應(yīng)該包含設(shè)計(jì)的所有可重用特征和樣式，但我們的基本設(shè)計(jì)系統(tǒng)的目標(biāo)是幫助您啟動(dòng)設(shè)計(jì)。

翻譯自: https://uxdesign.cc/simple-reusable-design-system-in-figma-a3a01236a7e3

figma設(shè)計(jì)

總結(jié)

以上是生活随笔為你收集整理的figma设计_Figma中简单，可重复使用的设计系统的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。