亚洲乱伦小说专区,亚洲一级无码毛片,久久久aV片,亚洲高清无码专区,污污网一区二区三区,亚洲欧洲日韩在线蜜桃,国产操视频,婷婷激情丁香五月天

▲點擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識，幫助全球 1 億設(shè)計師成長

轉(zhuǎn)載：光子設(shè)計中心作者：Jeason

編輯：王翎旭

共 2569 字 12 圖預(yù)計閱讀 7 分鐘

導(dǎo)語：

上一期光子設(shè)計師Jeason先帶大家認(rèn)識Figma，介紹了Figma的工具優(yōu)勢、功能特點、以及其極便利使用者的設(shè)計架構(gòu)與理念：

設(shè)計工具｜Figma一站式設(shè)計交付（一）—— 什么是Figma

本期將深入到Figma設(shè)計系統(tǒng)、交互和審查元素的內(nèi)容講解中。

由于大部分的設(shè)計工具都差不多，常用的文本、顏色、形狀的各種操作在此就不在贅述了。Figma 中的設(shè)計主要講其設(shè)計系統(tǒng)。

1. 用Figma構(gòu)建設(shè)計系統(tǒng)

——柵格樣式

Figma 支持建立柵格樣式，現(xiàn)在你可以在 Figma 的每個界面、每個Frame 里，更愉快地自動使用柵格樣式。

完整的設(shè)計系統(tǒng)應(yīng)該包含柵格系統(tǒng)，可以自由組合的水平、垂直、網(wǎng)格這 3 種基本網(wǎng)格。

例如用戶可以根據(jù)兩端的尺寸分別創(chuàng)建 Android 和 iOS 的柵格系統(tǒng)。在圖標(biāo)設(shè)計中可以建立 8x8，24x24，1024x1024的大小，這是都是 Sketch 所沒有的。

2. 用Figma構(gòu)建設(shè)計系統(tǒng)

——文本樣式

Figma 的文本樣式，無需考慮對齊和顏色，這也相對于在 Sketch 里是節(jié)省了很多不必要的樣式，用戶在選擇上會變得更加簡潔高效。

字距和行高可以支持百分比單位，設(shè)定更靈活。在組件的實例中，也能夠自由地更換字體樣式，配合 Auto Layout 能夠做到組件的自適應(yīng)。

在構(gòu)建文本系統(tǒng)的時候，也可以借助如 Font Scale 插件按照 1.2、1.5、1.618 等規(guī)律生成和諧的字體規(guī)范；在 Batch Styler 里可以批量修改字體、顏色規(guī)范。

3. 用Figma構(gòu)建設(shè)計系統(tǒng)

——顏色樣式

Figma 的顏色樣式，可以自由應(yīng)用在顏色、描邊和字色上，描邊屬性還可以在實例上自由地設(shè)定粗細(xì)、類型、線頭線尾的樣式等。

但是圖層樣式 Effect 中的顏色還沒有納入樣式管理體系中，可能是因為單獨有圖層樣式管理，所以就沒有與顏色樣式關(guān)聯(lián)起來，但還是期待 Figma 能完善吧。

在構(gòu)建色彩系統(tǒng)的時候，我們常常需要使用一些規(guī)則方法去生成顏色樣式。在這里可以借助如 Color Kit 插件，能夠生成一組自定義顏色的深淺色階。

4. 用Figma構(gòu)建設(shè)計系統(tǒng)

——圖標(biāo)系統(tǒng)

Figma 在圖標(biāo)繪制的功能上有借助獨有的矢量網(wǎng)格技術(shù)：可以用一筆就畫完整個路徑圖標(biāo)，在不同的方向上分叉，也就不需要創(chuàng)建單獨的路徑對象。

此外還可以使用橢圓工具創(chuàng)建其他形狀，如餅圖、環(huán)狀圖等，極大地提高了圖標(biāo)繪制的效率。

在構(gòu)建圖標(biāo)系統(tǒng)的時候，可以借助如 Iconify、Icon8 等插件。通過直接搜索關(guān)鍵詞，將 SVG 格式直接導(dǎo)入到 Figma 中；當(dāng)然也可以從 iconfinder、iconfont 等網(wǎng)站復(fù)制 SVG 代碼，直接粘貼到 Figma 里。

5. 用Figma構(gòu)建設(shè)計系統(tǒng)

——圖層效果樣式

Figma 可以創(chuàng)建內(nèi)陰影、投影、圖層模糊、背景模糊等效果樣式，能夠比 Sketch 更方便地統(tǒng)一管理圖層效果樣式。Figma 可以渲染每種陰影類型最多有 8 個，每個模糊類型有 1 個。

但請記住，這些效果所使用的模糊效果可能導(dǎo)致性能不佳；背景模糊通常是最耗性能的圖層效果。

圖層效果適用于圖層和組，使用組模糊和陰影可以提高性能。

在構(gòu)建圖層效果樣式的時候，可以借助 Neumorphism 創(chuàng)建漂亮的新擬態(tài)投影、Smooth Shadow 創(chuàng)建平滑的分層陰影、oblique 創(chuàng)建長投影等。

6. Figma中的幾個概念

具體的介紹就不一一贅述了，和 Sketch 最大的區(qū)別主要是 Auto Layout。

可以說是 Smart Layout 的超級升級，無論文本、形狀、畫板等都可以添加 AL 達(dá)到堆疊的效果，自動堆疊、調(diào)整內(nèi)邊距和內(nèi)間距，類似 Css FlexBox（目前 AL 沒有 Margin，但可以通過嵌套 AL 達(dá)到 Margin 的效果）。

使用了 Auto Layout 后，內(nèi)里的元素由 Constraints 變成 Resizing，再使用：Fixed （固定）、Hug Contents （適應(yīng)內(nèi)容）、Fill Container （填充容器）來自由控制約束布局，可以輕松創(chuàng)建響應(yīng)式、等分效果。

其次是 Variants 變體可以把多個組件狀態(tài)歸集為一個組件，通過屬性創(chuàng)建不同的選擇開關(guān)，能讓組件在不同狀態(tài)間自由切換。

7. Figma中強(qiáng)大的Auto Layout

在創(chuàng)建進(jìn)度條組件的時候，一般創(chuàng)建了后就不能控制進(jìn)度的長度。其實可以通過 AL 一個 Frame 填充，在 Instance 實例中可以通過改變 AL 的內(nèi)邊距，從而實現(xiàn)填充的長度（當(dāng)然也可以放一個透明的元素控制間距實現(xiàn)）。如果是有拖拽點，還可以配合 Frame 寬度為 0 的 Hack 方式，保持不裁剪內(nèi)容以顯示拖拽點，實現(xiàn)相對定位的效果。

除了長條進(jìn)度，常用的圓環(huán)進(jìn)度，可以簡單地通過鼠標(biāo)，將橢圓直接變成的扇形工具（4.圖標(biāo)系統(tǒng)配圖），即便是成組件后也能調(diào)節(jié)長度、粗細(xì)（真是強(qiáng)大）。

在創(chuàng)建列表的時候，可以通過調(diào)整 AL 中的內(nèi)邊距，輕松實現(xiàn)縮進(jìn)效果。

在創(chuàng)建按鈕結(jié)構(gòu)時，可以通過 AL 輕松實現(xiàn)隱藏顯示圖標(biāo)，自適應(yīng)寬高達(dá)到自由組合的效果（希望下一代的 Auto Layout 即將支持相對、絕對定位）。

通過設(shè)定為 Spaces Between 可以實現(xiàn) AL 內(nèi)的元素均分排列，還可以通過減少父級 Frame 的寬高來實現(xiàn)重疊的效果（希望下一代的 Auto Layout 即將支持負(fù)間距）。

在表格制作中，通過建立行級、列級 AL，極大方便了調(diào)整不同單元格的位置、排序內(nèi)容。

8. 強(qiáng)大的Component Variants

Component Variants 可以說是對不同的組件狀態(tài)進(jìn)行了一個很好的規(guī)整。組件設(shè)計中的 Property 和 Value 可以和 Web 前端組件的命名對應(yīng)起來，這樣在 Figma 的 Inspect 面板上就可以直接提供復(fù)制，更好地打通前端交付。

例如常用的開關(guān)，可以分成 iOS 和 Android 的兩個樣式，每個樣式里面有開和關(guān)，又包含了：默認(rèn)、按下、禁用三種狀態(tài)，將這（2x2x3=）12 種的狀態(tài)一一羅列，就形成了一個開關(guān)完整的 Component Variants。

9. AL + CV 的強(qiáng)強(qiáng)聯(lián)合

在做 APPUI 的時候經(jīng)常會遇到 Feeds 流設(shè)計。除了使用基礎(chǔ)的 Auto Layout 布局，還可以對不同的內(nèi)容區(qū)域如：橫圖、豎圖、視頻、1-9 圖等進(jìn)行 Component Variants 的組合；這樣就可以既是一個自動布局，又能切換不同的內(nèi)容狀態(tài)，減少生成冗余的組件組合。

Figma 的交互原型除了最最最基礎(chǔ)的水平和垂直滾動，還可以由觸發(fā)器配合響應(yīng)動作。動作可以調(diào)整使用不同的預(yù)設(shè)動畫，動畫可以具體設(shè)定緩動曲線。

組件集內(nèi)部交互:

此外 Figma 加強(qiáng)了組件交互的功能，配合 Component Variant 可以設(shè)置組件集內(nèi)的交互，可以實現(xiàn)例如按鈕常態(tài)、按下、松開等不同的交互狀態(tài)。

子組件繼承交互:

對母組件 Component 添加了交互行為的，對 Instance 同樣也會生效。比如對母組件的返回按鈕，添加了已給的 OnClick = Back ，那只要是在界面中有引用到這個返回組件的界面，點擊返回的時候，都會自動返回上一層界面。

多條交互流：

在此之前的一個頁面只能有一條交互流作為展示，F(xiàn)igma 增強(qiáng)了后可以在原型中添加不同的交互流進(jìn)行切換，比如信息流程和支付流程。

接下來用一些比較有意思的案例和教程講述一下：

Smart Animate:

類似 Keynote 的神奇移動，兩個 Frame 中，命名相同的圖層會生效，命名不同的則通過淡入淡出過渡。通過 Smart Animate 可以實現(xiàn)兩個關(guān)鍵幀之間的位移、旋轉(zhuǎn)、不透明、形狀變化、字號變化等的自動補(bǔ)間動畫設(shè)置。

也類似簡化版 MD 卡片的懸停漣漪效果：通過 Frame + Radius 設(shè)定好兩個關(guān)鍵幀，把淺藍(lán)色的 Frame 層放大填充至整個卡片（卡片打開 Clip Content 內(nèi)容進(jìn)行裁剪），在淺藍(lán)色的同一層級復(fù)制一份作為白色圈圈，從小放大代替原來的淺藍(lán)色圈圈。

（下圖效果的操作）首先設(shè)定好 Frame 內(nèi)元素的約束，把內(nèi)容設(shè)為 Left Top，再把圖標(biāo)設(shè)定為 Bottom Right；縮減成按鈕只需調(diào)整 Frame 的尺寸，將內(nèi)容的透明度調(diào)整為 0。同理，也可以去實現(xiàn)類似于 iOS AppStore 卡片在點擊后的轉(zhuǎn)場。

Open Overlay:

可以很方便地添加彈窗動效，也提供不同位置和手動定位功能，是否啟用蒙層外點擊作為關(guān)閉的選項，以及自動產(chǎn)生的蒙層顏色效果等，還可以通過 Swap Overlay 切換不同的彈窗。

此外在真實的案例中，你可以給X母組件添加一個 Close Overlay 的交互；只要有彈窗層的地方，都可以用X自動關(guān)閉。這也是讓子組件繼承母組件交互的一種高效方式。

Scroll To：

可用于制作簡單實用的滑動動畫，如快速返回頂部、或滑動到指定區(qū)域的動態(tài)效果：

在指定內(nèi)容區(qū)域 Frame 設(shè)置為 Horizontal / Vertical Scrolling （橫向或者豎向）滑動后，給按鈕新增一個 Scroll To 的動作，再直接拖拽到剛才的內(nèi)容區(qū)域 Frame，保持X、Y的偏移量為 0 即可。如果你需要滑動到內(nèi)容區(qū)的第二個區(qū)塊也可以，在此之上還能設(shè)定偏移量，以避開如頂部導(dǎo)航條的遮擋。

在一些橫滑的交互上，一般會對滑動卡片做一層 Auto Layout，左對齊并給一個Padding Left（下圖右側(cè)：綠色左邊的間距），那么在 Scroll To 上需要設(shè)定偏移量以避免貼邊顯示（下圖右側(cè)：如淡紅色塊的間距）。

此外在滑動到最右時，即便 Auto Layout 設(shè)定了 Padding Right ，但 Scroll To 也不會生效，需要添加一個額外的色塊，設(shè)置為0透明度代替右側(cè)邊距。

After Delay:

常用于做一些自動循環(huán)的動畫效果，比如此次封面的彩虹條動畫就是使用了 After Delay 來完成的。原理很簡單想明白了就好，這個可以分兩步實現(xiàn)：

1. 彩虹條的自循環(huán)動畫：創(chuàng)建三個并列的彩虹條（將 Constraints 約束調(diào)整為 Scale 縮放，便于后續(xù)做拉伸變形）；設(shè)定組件 Frame 只顯示一個的寬度，讓這三個彩虹條不斷的發(fā)生位移變化，并且讓位置的變化為一個循環(huán)。

在這個過程中，通過After Delay (1ms，即1毫秒無延遲)，Change To (Frame) 組件集內(nèi)的切換動畫切換不同的關(guān)鍵幀，Smart Animate（Liner，2000ms）通過智能動畫制作自動補(bǔ)間位移動畫。

注意這里使用 Liner 勻速可以有無縫循環(huán)的感覺。如果使用其他緩動曲線也行，但會有一些頓挫感。2000ms 這個可以自行調(diào)試設(shè)定。

2. 變形拉伸或改變角度：得到自循環(huán)的動畫后，其實已經(jīng)能夠隨意拉伸了。此時可以創(chuàng)建一個新的組件 Frame，拉伸填滿并調(diào)整填充，即可得到一個自適應(yīng)帶角度的彩虹條了。如果還需要添加圓角，直接在組件 Frame 層設(shè)置圓角并勾選 Clip Content 即可。

同樣常用的loading，也可以簡單地通過旋轉(zhuǎn)120度來實現(xiàn)。

基本上基礎(chǔ)的交互操作、動效轉(zhuǎn)場在 Figma 里都能輕松制作，但還有一些進(jìn)階的變量如：邏輯判斷、重力感應(yīng)、時間軸動畫等動效還是需要通過專業(yè)的工具去實現(xiàn)。

大家也盡可能預(yù)評估好動畫的制作成本，也不是非得使用 Figma 去硬尬制作不擅長的動效。Figma 同樣也可以用 AEUX 導(dǎo)入到 AE 里去制作。

以上都只是冰山一角，更多需要你真的是去操作和了解 Figma 的交互功能，才能更好地理解它們。

1. 分享鏈接和權(quán)限管理

當(dāng)我們在 Figma 中設(shè)計完成后，可以把 Figma 鏈接分享給上下游的同事，這時候我們就首先需要謹(jǐn)慎地設(shè)置一下 Figma 文件的權(quán)限。Figma 從 Organization（公司組織）>Team（團(tuán)隊）>Project（項目）>File（文件）>Prototype(原型) 都可以獨立設(shè)置權(quán)限邀請。

但是，任何一個編輯者都可以邀請另一個人一起編輯，或者調(diào)整另一個編輯者的權(quán)限，并且無需經(jīng)過管理員的同意。相當(dāng)于一個群聊管理員，能邀請另一個人作為管理員，而不需要經(jīng)過群主一樣。（也許是因為 Figma 多人編輯的理念造成的？）

權(quán)限的設(shè)置主要集中在團(tuán)隊，對于個人草稿 Drafts 和免費團(tuán)隊的設(shè)置則只有更少的選項（也就是付費才有更安全的權(quán)限設(shè)置）。

公司組織 Organization:

獨享最全的管理安全權(quán)限，登錄管理、插件管理、字體管理、組件管理等。

團(tuán)隊 Teams:

團(tuán)隊級別主要管理具體成員權(quán)限，如果處在公司級的團(tuán)隊，可以設(shè)置為需要邀請才可以加入團(tuán)隊，或者設(shè)為私密團(tuán)隊。

項目 Projects:

對項目層級，如果想有某個項目作為保密項目，可以設(shè)置 Remove team Access，這樣團(tuán)隊成員就無法訪問這個項目了，只有受邀請的人可以訪問。

文件 Files:

在文件層面，有一個 Alllow Viewers to Copy、Share、and Export form this File，默認(rèn)是勾選啟用的。

關(guān)閉后可以避免設(shè)計文件被惡意復(fù)制、分享和導(dǎo)出，但是需要注意如果通過 Figma 交付給開發(fā)的話，開發(fā)一般都是 Viewer 權(quán)限，則不能導(dǎo)出切圖了。

原型 Prototypes:

除了常規(guī)的 can view，還有一個更細(xì)致的 can view prototypes only。如果設(shè)置為 can view，是可以從交互原型直接 open in editor ，變相打開了對應(yīng)的文件，也就是 can view 相當(dāng)于是得到了文件的查看權(quán)，不僅僅是可訪問原型權(quán)限。

一般來說，使用付費團(tuán)隊就已經(jīng)夠用了，但是由于付費團(tuán)隊的每個成員都是可以使用個人賬號登錄上項目，也會對管理帶來一定的困難。

因此也建議同步統(tǒng)計好團(tuán)隊成員的賬號，及時警惕移除有問題或臨時協(xié)作的用戶。

在設(shè)置編輯權(quán)限的時候，做到最小化權(quán)限分配；通過及時回收權(quán)限，避免產(chǎn)生權(quán)限問題，做好項目資源的風(fēng)險管理。

2. 審查元素

作為云協(xié)作的 Figma自帶的標(biāo)注功能已經(jīng)蠻完善的了。能夠很直觀地對尺寸、圓角、文字、填充、邊框、效果、動效等進(jìn)行標(biāo)注和注釋：

對組件的解析:

能夠明確顯示組件的名字，和上層組件的名字，并且提供定位源。同時顯示組件的描述和文檔連接（如有的話)，進(jìn)一步對組件的寬高、定位、圓角、混合模式和約束參考進(jìn)行解析。

對文本、顏色的解析:

提供文本的復(fù)制、字體規(guī)范代號、字體、字重、字號、行高的解析，對顏色提供色號、提供不同的色彩模式、線框等（對自定義虛線沒有直接實現(xiàn)的值，但是也能以 SVG 形式解析對應(yīng)的 Join、Cap、Dash pattern）。

對其他資源的解析:

在代碼解析主要提供的 CSS 、iOS 、Android xml 等解析，與同類產(chǎn)品一樣僅作參考。對動效的解析提供觸發(fā)器、目的地、動畫、緩動曲線、時長等描述。最后對切圖資源可以進(jìn)行倍率、格式的導(dǎo)出。

基于 Figma 原生支持的這么多解析，已經(jīng)足夠在開發(fā)階段幫助開發(fā)查看設(shè)計稿中的具體標(biāo)注，而更多的期待可能是對 DSL 的理解和解析。

如果能對字體預(yù)設(shè)和顏色預(yù)設(shè)等 DesignToken 提供一鍵導(dǎo)出到 plist/Xml 的形式（具體類似 Zeplin 的 DSL），那 Figma 要傳達(dá)的整體的原子設(shè)計理念，就有更完善的執(zhí)行落地了。

3. 編輯者和審查者的小差異

編輯者（你的視角）和查看者（開發(fā)視角）的 Inspect 模式有略微區(qū)別：如一個 icon 輸出尺寸 192x192，內(nèi)部路徑可能是 120x120。
編輯者點擊時是 192x192，查看者點擊時會直接穿透，點到了 120x120 的路徑，導(dǎo)致開發(fā)大小不一致。

解決方法：

在圖標(biāo)組件上面設(shè)置：一層黑色0.001% - Screen混合模式
（避免顏色顯示和導(dǎo)出有影響）
在圖標(biāo)組件上面設(shè)置：一層白色0.001% - Dark混合模式
（避免顏色顯示和導(dǎo)出有影響）
和開發(fā)約定切圖都是整數(shù) ，如遇穿透問題，使用按 command+點擊，捕捉顯示 Frame 的大小。

總的來說，就是通過一層障眼法蒙在上面；也可以事先和開發(fā)做約定培訓(xùn)。

4. 切圖輸出交付

雖然市面上的很多交付插件都可以一鍵導(dǎo)出切圖，但是往往實際開發(fā)的時候，不同的開發(fā)對同一個資源的命名方式不同，會導(dǎo)致項目重復(fù)引入不同名字，但缺失相同的資源而造成冗余。

因此這塊建議自行通過 SVN、GIT 等進(jìn)行版本管控資源和命名。比較高級的方法可以參照：

《高效協(xié)作 I 資源庫的協(xié)作方式》
《使用 Figma + GitHub Actions 完成 SVG 圖標(biāo)的完全自動化交付》

下一期，我們進(jìn)入到系列的第三輯。

— The end —

光子原創(chuàng), 歡迎分享 · 轉(zhuǎn)載請留言公眾號授權(quán)

轉(zhuǎn)載：光子設(shè)計中心作者：Jeason

?? 社區(qū)資料??

每日開眼，大廠內(nèi)部資料分享

期待與更多優(yōu)秀用戶體驗設(shè)計師一起成長

?? 我們一起聊設(shè)計 ???♂?

高質(zhì)量，學(xué)設(shè)計行交流微信群

期待與更多優(yōu)秀用戶體驗設(shè)計師一起成長

PS：歡迎大家關(guān)注三分設(shè)，每天早上9點，準(zhǔn)時充電。分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。添加小小蟲微信號【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號三分設(shè)的粉絲）

設(shè)計工具｜Figma一站式設(shè)計交付（二）—— 設(shè)計系統(tǒng)、交互和審查元素