本文將帶妳近距離了解Figma的用途,並提供給妳20個實用技巧,讓妳更快更好的使用這個著名的協作交互設計工具進行工作。
本文中大多數快捷鍵都提供Windows和Mac兩個版本,Windows上的Ctrl鍵對應Mac上的Cmd鍵,Alt鍵在Windows和Mac上(Option/Alt)通用。
例如:Ctrl/Cmd+Alt+C對應Windows上的Ctrl+Alt+C以及Mac上的Cmd+Alt/Option+C。
我們做設計的時候無時無刻不在使用圖片,如果我們能夠更輕松、更直接地改變單個和多個圖像,那將非常有用。
Figma可以導入多張圖片(使用快捷鍵Ctrl/Cmd+Shift+K),並將其壹壹對應到妳希望它們出現的圖層(對象)上。這個功能非常方便,妳可以看到導入的圖像然後進行實時放置。
[圖片上傳失敗...(image-2c49fe-1568608600577)]
很多時候,我們在準備導出設計(如icon或者壹組圖片)的時候,或是當我們對設計文件需要執行“深度整理”的時候,都需要重命名壹組圖層。
Figma可以讓妳批量重命名圖層(以及frame),這個功能非常方便。妳可以重命名整個圖層的名字,也可以只是圖層名字中的壹部分。妳也可以查找重命名壹個圖層的某個字符,添加不同的數字到圖層以方便導出到獨立的文件。妳也可以通過在“Match”字段裏面輸入關鍵字後執行查找替換。
[圖片上傳失敗...(image-17f202-1568608600577)]
在設計團隊中使用Figma會讓工作更加具有協作性。但是通常需要在同壹個設計文件上進行工作,而且有時還是同時展開的。
為了知道哪個Frame正在工作中,以及哪個已經完成了,我們可以添加emoji表情符號(
Windows快捷鍵:
win+.或者win+;,
Mac快捷鍵:
Cmd+Ctrl+space)在frame名稱的前面,這樣,每壹個人就可以知道當前frame的工作狀態了。
[圖片上傳失敗...(image-915a3d-1568608600577)]
Figma最偉大的功能之壹就是可以在Frame中重組物件。特別是在使用icon,列表以及標簽組的時候非常有用。
[圖片上傳失敗...(image-acf8dd-1568608600577)]
本地樣式(LocalStyles)是Figma最棒的功能之壹。它可以讓妳創建設計系統(designsystem)以方便妳重復使用組件。如果妳修改了母版樣式,它將同時改變所有相關聯的組件。非常強大,對不?但是,如果沒有使用正確的方式進行命名和分組,那麽妳將丟失所有的樣式。下面將分享幾個組織樣式的實用技巧。
妳可以通過添加“/”在子分類來組織妳的文本樣式。例如,在“
Heading
”後面加上“
/
”,這樣所有的標題文本都將在“
Heading
”這個分類下面了。這對於有很多不同尺寸字體的情況非常有用,可以讓妳更快定位到指定的文本。這個方法對於“文本”和“顏色”都適用。
[圖片上傳失敗...(image-37e624-1568608600577)]
對在什麽地方使用不同的組件及如何使用這些組件的樣式添加快速說明是非常有用的,特別是當妳與團隊或者其他設計師***同協作的時候。妳可以在編輯文本樣式,顏色樣式或其他組件的同時添加說明文字。
很多時候我們會遇到大量的組件,圖標等。而通過使用下拉菜單切換實例並不是最好的做法。這裏有個小技巧,就是妳可以按住Alt+Ctrl/Cmd鍵從側欄拖動組件到妳想要替換的組件上。簡單,快速!
[圖片上傳失敗...(image-b5c7ad-1568608600577)]
當復制壹個元素或拷貝壹個元素樣式的時候,可以快速拷貝元素屬性(Ctrl/Cmd+Alt+C),然後粘貼(Ctrl/Cmd+V)到壹個新的元素上。對於具有多屬性的圖像或者樣式元素,這個功能非常有用,例如:填充或者描邊等。
[圖片上傳失敗...(image-c23b37-1568608600577)]
另外壹個有用的快捷方式就是拷貝單壹屬性,也就是說妳可以選擇拷貝哪個屬性。從右側面板選擇屬性,然後使用快捷鍵Ctrl/Cmd+C復制,再用Ctrl/Cmd+V進行粘貼到另外壹個對象上。
[圖片上傳失敗...(image-bdb085-1568608600577)]
當妳的設計文件非常復雜,或者妳想清理妳的設計系統,搜索相同的屬性(例如壹個特定的顏色),然後修改
顏色樣式
中的顏色這個功能將會非常有用。特別是妳正在處理設計系統並且需要更好的組織所有的組件的時候,這個功能異常實用。
[圖片上傳失敗...(image-731ff4-1568608600577)]
縮放元素以及它們的屬性(描邊,對象上的效果等)是非常有用的。在這壹點上,Figma要比Sketch使用起來更簡單,因為妳無需選擇對象的尺寸。當妳縮放對象的時候,對象的尺寸和它的屬性都將按比例調整大小。通過按住Shift鍵,妳可以在放大或縮小物體的同時保持比例。
提示:
如果妳只想改變對象的尺寸而不修改它的屬性(描邊,效果等),使用“Select”工具選擇對象,然後使用屬性面板進行尺寸修改。如果妳使用縮放工具並且調整對象的尺寸,那麽對象的尺寸和屬性都會發生變化。
[圖片上傳失敗...(image-d8cc74-1568608600577)]
當為不同的屏幕分辨率進行設計的時候,妳希望調整的是屏幕frame的尺寸而不調整其內部frame所有元素的尺寸。為了實現這個,當妳執行調整尺寸操作的時候需要按住Ctrl/Cmd鍵。奇跡出現啦!
[圖片上傳失敗...(image-1146b9-1568608600577)]
使用Figma,妳可以快速創建圖表/弧形。無需在圓弧上剪裁路徑來創建自定義的圖形。看看下圖如何創建壹個加載圓弧,並且所有的數值都可以通過右側的屬性面板進行精確的控制。
Figma中改變群組元素邊距的功能很實用。它讓妳在屏幕上布置壹組元素變得垂手可得。該功能不僅適用於多個元素,同時也適用於單個元素。
當妳開始著手大量組件的時候,在妳的庫中查找指定的組件有時會變的非常困難。而
組件關鍵字(componentkeywords)
功能讓搜索變得容易起來。妳可以對任何組件添加關鍵字,即使和組件的名字不同也可以,這些關鍵字讓妳查找組件更加容易。看下圖的示例:
能夠回到文件的之前版本這壹功能非常讓人欣喜。
無論出於什麽原因(妳犯了壹個錯誤,或者客戶需要妳切換回較早的版本等。),能夠返回較早的版本這壹功能都非常有用。不僅如此,Figma還允許妳拷貝
較早版本的鏈接
,這樣妳就不必刪除文件的近期版本了。非常聰明!
[圖片上傳失敗...(image-f59769-1568608600577)]
通常需要使用UI套件庫來開始新的項目。例如,當設計壹些線框模型的時候會使用Wireframy套件。妳只要激活該庫就可以使用了。另外,BootstrapGrid和FigmaRedlines也是會經常用到的套件。妳可以在這裏找到很多免費的資源供妳使用。
[圖片上傳失敗...(image-6bd3d2-1568608600577)]
Figma剛剛增加了將GIF文件添加到原型的功能,從而增加了在原型中添加用戶交互動畫的可能性。以下是ArisAcoba的預覽:
[圖片上傳失敗...(image-dc3953-1568608600577)]
Figma的
整理功能(TidyUp)
非常實用,特別是當妳需要快速重排網格中的元素或者將元素對齊的時候。結合第4條和第14條提到的實用技巧,該功能變得非常強大。此外,另壹個執行整理的方式就是鼠標懸浮在所選元素的右下角,然後點擊藍色的圖標。
[圖片上傳失敗...(image-e269d5-1568608600577)]
Figma的查看功能也非常實用,雖然它比較難找到在哪裏。在窗口右上角的設置(Settings)的下拉菜單中,妳可以看到工作區域的設置。不僅可以顯示標尺(Rulers),網格(Grid),啟用/停用與網格對齊(SnaptoPixelGrid),而且當妳需要專註不想被其他設計師幹擾的時候,還可以隱藏其他參與者的光標。
[圖片上傳失敗...(image-777ec-1568608600577)]
Figma最近發布了它全新的插件功能,允許人們為他們的工作流程創建自定義的插件擴展。
插件對於整個Figma的生態系統來說意義非凡,並且可以提升工作流程,下面推薦幾個常用的插件:
[圖片上傳失敗...(image-81ad97-1568608600577)]
[圖片上傳失敗...(image-9ae8da-1568608600577)]
從PS到Figma壹直使用PS做UI。無意間接觸了Figma,在查找資料對其有了初步了解之後,決定入坑。
首先,PS的知名度不用多說,它是很多人學習的第壹個圖像軟件,功能強大,壹專多能,不可否認,現在用PS做UI的仍不在少數。雖然有關圖像圖形的幾乎任何功能都可以用PS實現,但在很多方面,它並沒有達到極致。矢量圖形是PS的弱項,它並不是壹個forUI設計師的專門軟件,在很多設計上,可以處處體會到它的笨拙。
Sketch的出現讓設計師們可以優雅地工作,但它只能在macos運行,阻斷了大批windows用戶。
而Figma在界面設計上和Sketch極為相似,運行在瀏覽器上,是壹個web應用,不存在跨平臺問題。其次,Figma顛覆了PS的方式,在UI設計上,大大提高了效率。
UI的工作流程:繪制線框圖_交流修改_繪制高保真界面_添加交互
以往完成上述工作需要跨越多個軟件,而Figma則可以獨自完成。
紙上草圖,理清產品邏輯,打開軟件。
在繪制之前,先創建壹個frame,我們給它起名為UIlibrary。我們將把所有的可復用組件和設計規範放在這裏。
我們在裏面先繪制壹些基本的文字樣式(H1,H2,H3,H4,P,Small等)。此時我們可以直接使用默認樣式,而不需要考慮設計。接下來繪制其它的組件,比如按鈕、輸入框、下拉菜單、導航條、卡片、標簽、頁腳等等。推薦順序:先繪制具體頁面,再提取出壹些元素將其轉換為組件,在移動到UIlibrary中。
如此,妳的設計圖中幾乎所有的元素都變成了組件。組件不僅可以為妳節省時間,還可以保持產品壹致性,這對於UI/UX設計來說是很重要的。
當妳繪制完線框圖並創建壹套組件庫之後,我們可以給它添加壹些交互動作,Figma內置很多交互效果可以幫我們做到。
妳所需要做的就是在原型模式下,來連接需要交互的不同元素並設定他們之間的動作。需要註意的是,如果妳連接了壹個master組件,那麽這將對其所有instance都起作用。
下壹步就是分享妳的原型鏈接給其他人,讓他們直接在原型上給予反饋。接下來,根據反饋,修改妳的線框圖,直到最後確定下來。
細化妳的線框圖樣式,將其轉換為高保真設計圖。在這壹步,妳可以直接在每個master組件上來應用品牌的色調和細節,得益於其組件唯壹來源的特性,我們可以很快將線框圖轉換為高保真設計圖。
打磨原型細節。妳可以檢查壹下還有哪些元素可以作為組件,哪些組件可以優化壹下,每個需要交互的元素是否都添加了鏈接,以及交互效果是否正確。
壹切就緒,妳就可以分享出壹個鏈接給開發,並告訴他們如何查看標註,如何導出素材,他們遇到問題也可以直接在原型上評論。
References:
如何使用Figma來完成妳的設計工作流
ui設計都有什麽軟件啊？UI設計(或稱界面設計)是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。UI設計師的日常工作是壹個系統性的工作,所以使用到的軟件各不相同。UI設計所需要的主流軟件為以下:
壹、UI設計視覺設計軟件:PS、Sketch
Photoshop是壹款強大的圖片處理軟件,因此它不只是修修照片、妳用它還能完成UI設計。
二、思維導圖軟件:MindManager或XMind
MindManager或XMind都為思維導圖軟件,主要用來整理產品需求思路、產品架構、產品的交互邏輯等等。
三、快速原型設計工具:AxureRP
AxureRP是壹個專業的快速原型設計工具
四、動效設計:AE軟件
可以讓工程師實際動態效果等。
以上就是ui設計所用的軟件,大家也可以上相關官網查詢有專業的課程學習