當前位置:吉日网官网 - 紀念幣收藏 - 在Figma在線工作-從PS到figma

在Figma在線工作-從PS到figma

Figma設計流程實用技巧本文將帶妳走近Figma的宗旨,為妳提供20個實用技巧,讓妳更快更好地使用這個著名的協同交互設計工具。

本文中的大多數快捷鍵在Windows和Mac版本中都可用。Windows上的Ctrl鍵對應Mac上的Cmd鍵,Alt鍵在Windows和Mac上是通用的(Option/Alt)。

比如Windows上的Ctrl/Cmd+Alt+C對應於Ctrl+Alt+C,Mac上的Cmd+Alt/Option+C。

我們在設計時壹直使用圖片。如果我們能更容易和直接地改變單個和多個圖像,這將是非常有用的。

Figma可以導入多個圖像(使用快捷鍵Ctrl/Cmd+Shift+K)並將它們對應到您希望它們出現的層(對象)。這個功能很方便,可以看到導入的圖像,實時放置。

[圖像上傳失敗...(圖片-2c49fe-1568608600577)]

很多時候,我們在準備導出壹個設計(比如壹個圖標或者壹組圖片)的時候,或者需要對設計文件進行“深度整理”的時候,都需要對壹組圖層進行重命名。

Figma允許妳批量重命名圖層(和幀),非常方便。您可以重命名整個層,或僅重命名層名稱的壹部分。您還可以在層中查找和重命名角色,並向層中添加不同的數字,以便於導出到單獨的文件。您也可以通過在“匹配”欄中輸入關鍵詞來執行搜索和替換。

[圖像上傳失敗...(圖片-17f 202-1568608600577)]

在設計團隊中使用Figma將使工作更具協作性。但是通常需要在同壹個設計文檔上工作,有時同時進行。

為了知道哪個框架正在工作,哪個已經完成,我們可以添加表情符號·顏文字(

Windows快捷鍵:

Win+。或者win+;,

Mac快捷鍵:

Cmd+Ctrl+space)放在框架名稱的前面,這樣大家就可以知道框架當前的工作狀態。

[圖像上傳失敗...(圖片-915A 3D-1568608600577)]

Figma最大的功能之壹就是可以重組框架內的對象。這在使用圖標、列表和標簽組時特別有用。

[圖像上傳失敗...(圖片-acf8dd-1568608600577)]

LocalStyles是Figma最好的功能之壹。它允許您創建壹個設計系統,以便您可以重用組件。如果修改主樣式,它將同時更改所有關聯的組件。很厲害吧?但是,如果妳沒有用正確的方式命名和分組,妳將失去所有的風格。下面將分享幾種組織風格的實用技巧。

您可以通過在子類別中添加“/”來組織您的文本樣式。例如,在“

標題

加上“之後”。

/

",這樣所有的標題文本都將在"

標題

“下面這個分類。當有許多不同大小的字體時,這非常有用,可以幫助您更快地找到指定的文本。這個方法對“文字”和“顏色”都適用。

[圖像上傳失敗...(圖片-37E624-1568608600577)]

添加關於在哪裏使用不同組件以及如何使用這些組件的樣式的快速說明是非常有用的,尤其是當您與團隊或其他設計人員壹起工作時。您可以在編輯文本樣式、顏色樣式或其他組件時添加說明性文本。

很多時候我們會遇到大量的組件,圖標等等。使用下拉菜單切換實例不是最佳做法。這裏有個小技巧,就是妳可以按住Alt+Ctrl/Cmd,把組件從側邊欄拖到妳想要替換的組件上。簡單,快速!

[圖像上傳失敗...(圖片-b5c7ad-1568608600577)]

復制元素或元素樣式時,可以快速復制元素屬性(Ctrl/Cmd+Alt+C),然後粘貼(Ctrl/Cmd+V)到新元素中。這個函數對於具有多個屬性的圖像或樣式元素非常有用,比如填充或描邊。

[圖像上傳失敗...(圖片-C23B37-1568608600577)]

另壹個有用的快捷方式是復制單個屬性,這意味著您可以選擇復制哪個屬性。從右側面板中選擇屬性,然後使用快捷鍵Ctrl/Cmd+C復制它,再使用Ctrl/Cmd+V將其粘貼到另壹個對象中。

[圖像上傳失敗...(圖片-BDB 085-1568608600577)]

當您的設計文件非常復雜,或者您想要清理您的設計系統時,請搜索相同的屬性(例如特定的顏色),然後修改它。

顏色樣式

這個功能會很有用。當妳設計壹個系統,需要更好地組織所有組件時,這個函數特別有用。

[圖像上傳失敗...(圖片-731 F4-1568608600577)]

縮放元素及其屬性(筆畫、對對象的影響等。)都很有用。在這壹點上,Figma比Sketch更容易使用,因為妳不必選擇對象的大小。縮放對象時,對象的大小及其屬性將按比例調整。通過按住Shift鍵,可以在保持比例的同時放大或縮小對象。

提示:

如果您只想改變對象的大小而不修改其屬性(筆畫、效果等)。),使用“選擇”工具選擇對象,然後使用屬性面板修改大小。如果使用縮放工具並調整對象的大小,對象的大小和屬性將會改變。

[圖像上傳失敗...(圖片-D8cc74-1568608600577)]

當設計不同的屏幕分辨率時,您希望調整屏幕框架的大小,而不調整其內部框架中所有元素的大小。要實現這壹點,您需要在執行調整大小操作時按住Ctrl/Cmd鍵。奇跡發生了!

[圖像上傳失敗...(圖片-1146 B9-1568608600577)]

使用Figma,您可以快速創建圖表/弧線。您不需要在弧上剪切路徑來創建自定義繪圖。見下圖如何創建加載弧,所有的值都可以通過右邊的屬性面板精確控制。

Figma中改變組元素邊距的功能非常實用。它使妳很容易在屏幕上排列壹組元素。該功能不僅適用於多個元素,也適用於單個元素。

當您開始處理大量組件時,有時會很難在庫中找到指定的組件。但是

Componentkeywords(組件關鍵字)

功能使搜索變得容易。您可以向任何組件添加關鍵字,即使它不同於組件的名稱。這些關鍵字使您更容易找到組件。請看下面的例子:

能夠回到以前版本的文件是非常令人滿意的。

不管什麽原因(妳犯了壹個錯誤,或者客戶需要妳切換回早期版本,等等。).),能夠回到更早的版本是非常有用的。不僅如此,Figma還允許妳復制。

鏈接到早期版本

,因此您不必刪除文件的最新版本。非常聰明!

[圖像上傳失敗...(圖片-f59769-1568608600577)]

妳通常需要使用UI套件庫來啟動壹個新項目。例如,線框套件在設計壹些線框模型時使用。妳只需要激活這個庫就可以使用了。此外,BootstrapGrid和FigmaRedlines也是經常使用的套件。妳可以在這裏找到許多免費資源供妳使用。

[圖像上傳失敗...(圖片-6bd3d2-1568608600577)]

Figma剛剛在原型中增加了添加GIF文件的功能,從而增加了在原型中添加用戶交互動畫的可能性。以下是阿裏薩科巴的預告:

[圖像上傳失敗...(圖片-DC 3953-1568608600577)]

菲格瑪的

TidyUp函數

非常實用,尤其是當妳需要快速重新排列網格中的元素或者對齊它們的時候。結合第四條和第14條提到的實用技巧,這個功能就變得非常強大了。此外,執行排序的另壹種方法是將鼠標懸停在所選元素的右下角,然後單擊藍色圖標。

[圖像上傳失敗...(圖片-E269D5-1568608600577)]

Figma的查看功能也很實用,雖然很難找到在哪裏。在窗口右上角的設置下拉菜單中,可以看到工作區的設置。不僅可以顯示標尺和網格,啟用/禁用SnaptoPixelGrid,還可以在需要集中註意力、不想被其他設計者打擾時隱藏其他參與者的光標。

[圖像上傳失敗...(圖片-777EC-1568608600577)]

Figma最近發布了其全新的插件功能,允許人們為自己的工作流創建定制的插件擴展。

插件對整個Figma生態系統意義重大,可以改善工作流程。以下是壹些常用的插件:

[圖像上傳失敗...(圖片-81ad 97-1568608600577)]

[圖像上傳失敗...(圖片-9AE8DA-1568608600577)]

從PS到Figma壹直用PS做UI。偶然接觸到了Figma,在搜索資料並對其有了初步了解後,決定入坑。

首先,PS的受歡迎程度不言而喻。是很多人學習的第壹個圖像軟件。它功能強大,有很多功能。不可否認,現在還是有很多人用PS做UI。雖然幾乎任何與圖像圖形相關的功能都可以用PS實現,但在很多方面,還沒有達到極致。矢量圖形是PS的軟肋。它並不是forUI設計師的專用軟件,在很多設計中處處可以感受到它的笨拙。

Sketch可以讓設計師優雅地工作,但它只能在macos上運行,阻擋了大量windows用戶。

Figma在界面設計上很像素描。它運行在瀏覽器上,是壹個web應用,所以不存在跨平臺的問題。其次,Figma顛覆了PS的方式,在UI設計上大大提高了效率。

UI的工作流程:繪制線框_通信修改_繪制高保真界面_添加交互。

以前上述工作需要跨越多個軟件,而Figma可以單獨完成。

紙上素描,理清產品邏輯,打開軟件。

在畫圖之前,先創建壹個框架,我們稱之為UIlibrary。我們將把所有可重用的組件和設計規範放在這裏。

我們來畫壹些基本的文字樣式(H1,H2,H3,H4,P,小號等。).在這壹點上,我們可以直接使用默認的樣式,而不用考慮設計。然後再畫其他組件,比如按鈕、輸入框、下拉菜單、導航欄、卡片、標簽、頁腳等等。推薦順序:先畫出具體的頁面,然後提取壹些元素轉換成組件,再移動到UIlibrary。

這樣,妳的設計中幾乎所有的元素都變成了組件。組件不僅可以節省妳的時間,還可以保持產品的壹致性,這對UI/UX設計非常重要。

在妳畫出線框並創建壹個組件庫之後,我們可以向它添加壹些交互動作。Figma內置了許多互動效果來幫助我們做到這壹點。

妳所需要做的就是連接需要交互的不同元素,並在原型模式下設置它們的動作。應該註意的是,如果妳連接壹個主組件,它將為它的所有實例工作。

下壹步是與他人分享妳的原型鏈接,讓他們直接在原型上給出反饋。接下來,根據反饋,修改妳的線框,直到最終確定。

完善妳的線框風格,並將其轉換為高保真設計。在這壹步中,您可以直接將品牌色調和細節應用於每個主組件。由於其組件的獨特來源,我們可以快速將線框轉換為高保真設計。

打磨原型細節。可以檢查哪些元素可以作為組件,哪些組件可以優化,每個需要交互的元素是否添加了鏈接,交互效果是否正確。

壹切準備就緒後,可以和開發人員分享壹個鏈接,告訴他們如何查看標註,如何導出素材,遇到問題可以直接評論原型。

參考資料:

如何使用Figma來完成妳的設計工作流程?

ui設計有哪些軟件?UI設計(或稱界面設計)是指軟件的人機交互、操作邏輯、界面美觀的整體設計。UI設計師的日常工作是壹個系統的工作,所以用的軟件是不壹樣的。UI設計需要的主流軟件如下:

壹、UI設計視覺設計軟件:PS、素描

Photoshop是壹個強大的圖像處理軟件,所以它不僅僅是修圖照片,還可以用它來完成UI設計。

二、MindManager: MindManager或XMind

MindManager和XMind都是mindmanager,主要用來梳理產品需求思路、產品架構、產品交互邏輯等等。

三、快速原型設計工具:AxureRP

AxureRP是壹款專業的快速原型制作工具。

四、動態效果設計:AE軟件

實際上可以讓工程師產生動態效果等。

以上是ui設計使用的軟件。也可以去相關官網查詢專業課程。

  • 上一篇:哪裏可以下載調酒師英漢發音教學?
  • 下一篇:小清新之選:碧浪之家(Bronica)相機的低調與內涵
  • copyright 2024吉日网官网