天天看點

文本工具的使用-靜電的Figma完全學習日記-Day.04

靜電說:首先說一句,我不想對軟體中英文有太多的讨論,如果軟體是英文阻礙了你的學習請另行選擇其它适合你的,我不想在這問題上去扛。求漢化,有沒有中文這些問題本人恕不回複,感謝了解。我隻想安安靜靜的讨論軟體功能本身的内容,如果大家有這方面的問題,歡迎留言提問,非常樂意回答。

今天咱們來說說Figma的文本工具,對于任意一款設計工具來說,文本工具都是老大難問題。文本工具需要支援多國語言,多國字型,開發起來難度不小,支援不好的話,軟體就是殘疾,畢竟設計工具不能隻有英文字型可以用啊。那麼今天咱們就來看看Figma的文本工具表現如何?

文本工具的使用-靜電的Figma完全學習日記-Day.04

課程總目錄(更新中)

Sketch颠覆者!靜電的Figma完全學習日記-Day.01

Sketch颠覆者!靜電的Figma完全學習日記-Day.02

圖形工具解析-靜電的Figma完全學習日記-Day.03

.......(連載中)

Day.04-學習目錄

04-1.建立文本圖層并調整屬性

04-2.讓Figma支援更多字型

04-3.建立和複用文本樣式

04-4.使用Emoji表情圖示

04-5.靜電的Q&A時間

04-1.建立文本圖層/調整屬性

要建立一個文本圖層,很簡單,隻需點選工具欄上的T按鈕。或者,你也可以使用快捷鍵T來代替。

文本工具的使用-靜電的Figma完全學習日記-Day.04

随後你可以使用滑鼠劃定一個區域來放置文字,也可以直接在工作區域點選來打字。

文本工具的使用-靜電的Figma完全學習日記-Day.04

需要注意的是,Figma預設的文字是Google的Roboto,這會導緻你在打中文的時候出現缺字等問題。後邊會講到如何解決這個問題。接下來,咱們來看看文本屬性面闆。

文本工具的使用-靜電的Figma完全學習日記-Day.04

相信這些正常的文本屬性大家都不會陌生了,從上到下,依次是字型,字型粗細,字型字号,行高,字間距,段間距,文本縮進,居左中右對齊,居上中下對齊。以及Fill中的字型顔色選項。下面我們用動畫來快速為大家示範。

文本工具的使用-靜電的Figma完全學習日記-Day.04

當然,文本選項還不止這些,你還可以在文本屬性框右下角找到“...”的圖示,點選它就會打開新世界的大門。我們可以為文本設定對齊,劃線,大小寫,簡體,繁體等多種可控的屬性。是不是非常靈活呢?

文本工具的使用-靜電的Figma完全學習日記-Day.04

填充屬性大家再熟悉不過了,Figma的填充非常靈活,可以為字型添加各種實心,漸變等效果。

文本工具的使用-靜電的Figma完全學習日記-Day.04

你也可以為文本添加描邊及各種陰影效果。描邊同樣有多種效果,實心漸變任君選擇。

文本工具的使用-靜電的Figma完全學習日記-Day.04

04-2.讓Figma支援更多字型

衆所周知,Figma是一款基于Web的設計工具,這就導緻在預設情況下,我們隻能選擇一些浏覽器支援的内置字型(主要是Google Web Fonts),但是,這種情況下中文要怎麼辦?我們總不能不用中文吧?沒關系,Figma的開發者想到了這一點,隻需要安裝一款名為Figma Font Helper的工具,如果不想安裝也可以,直接下載下傳Figma的桌面版本APP,這個時候應用就會預設支援系統的所有字型顯示啦。

建議所有使用Figma的小夥伴都安裝上Figma Font Helper,下載下傳位址如下:

https://font-daemon.figma.com/win/FigmaFontHelperSetup.exe

https://font-daemon.figma.com/FigmaInstaller.pkg

大家根據自己的系統下載下傳,大家如果不友善在上面的位址下載下傳,靜電也為大家準備了百度網盤位址下載下傳哦。

隻需要在靜design公衆号(jingdesign91)

聊天視窗回複關鍵字“字型支援”,

即可下載下傳到Mac或者Win版本的

Figma Font Helper啦

安裝完成後,你的浏覽器中的Figma就可以讀取你電腦上安裝的所有字型咯。目前來說,Figma對于中文字型還是有一些小瑕疵,希望後續能更好的優化調整。

文本工具的使用-靜電的Figma完全學習日記-Day.04

04-3.建立和複用文本樣式

文本樣式現在已經成為設計軟體不可或缺的功能,快速複用文本樣式可以大幅度提升設計效率,實乃居家設計必備功能啊。如圖,點選右上角的四個點圖示,建立樣式并将這個樣式賦予到新的文本上。

文本工具的使用-靜電的Figma完全學習日記-Day.04

你也可以編輯已有樣式,或者删除它,或者更新它,當你更新它後,所有使用這個樣式的文本都會發生變化。請注意,文本樣式主要可以調整文本的字型,格式等内容,但是并不會改變文本的顔色和填充,要更改填充顔色,你需要設定填充樣式,這一點請務必注意。

文本工具的使用-靜電的Figma完全學習日記-Day.04

填充樣式的設定,請找到填充面闆來進行建立編輯操作。其實你可以發現,文本,填充,描邊,效果都有自己獨自的樣式,這是Figma與其它工具不太一樣的一點。如下圖所示:

文本工具的使用-靜電的Figma完全學習日記-Day.04

04-4.在Figma中使用Emoji圖示

Figma中可以直接插入Emoji圖示,為設計師帶來了很多友善,在文本模式下即可輕松搞定。在文本編輯模式下,Mac使用者使用Ctrl+Commond+空格就可以調出Emoji面闆。Win使用者右鍵選擇Windows工作列,打開軟鍵盤,即可找到Emoji圖示鍵盤。

文本工具的使用-靜電的Figma完全學習日記-Day.04

04-5.靜電的Q&A時間

Q:Figma中的文本和Sketch一樣,文本框不貼邊嗎?

A:是的。不貼邊。但是你可以把字段的行高設定為和字型字号一樣,這樣就貼邊了。但是,真的不要再糾結這個了。Figma中的文本就是浏覽器中文本的真實樣子,你平時看到的網頁,裡邊的字型也是不可能貼邊的。不要再糾結這些了。如果你覺得開發複現有問題,可以采用視覺走查的方式二次調整。讓開發100%像素級還原設計稿是不可能的,這是技術問題和字型處理問題。

文本工具的使用-靜電的Figma完全學習日記-Day.04

Q:如果我的Figma設計稿使用了某種字型,交給其他人打開後,對方電腦沒有這個字型,那會怎樣呢?

A:Figma會提示字型缺失。并提示你哪種字型缺失,讓你選擇替換。

Q:安裝Figma Font Helper後,電腦上的文本不顯示或全是英文(或亂碼)?

A:安裝完成後,請重新開機下浏覽器。另外,Figma Font Helper對文本的支援程度和你的電腦是一樣的,如果你電腦裡的字型冊也是英文,那就說明是系統本身的問題。至少我的電腦上,很多中文字型都是現實的英文名(哭),嘗試記住幾個常用字型的英文名吧!比如蘋方:pingfang;思源黑體:Noto Sans或Source han;宋體:simsong,黑體:ST heiti等。