新UI設計神器Figma到底有何亮點?

作者：李啟宏   精誠資訊恆逸教育訓練中心 資深講師

異軍突起的專業UI設計整合工具-Figma，不但是免費使用，而且是只要連上網就可以隨時設計UI的工具。

Figma以瀏覽器為載體，依靠網路，全程在網頁瀏覽器線上操作，並且Figma 可將所有設計檔案儲存在雲端隨開隨用，透過 Figma 的線上協作功能，隨時皆可讓團隊成員都能參與設計流程，在國內外已是非常熱門的介面設計工具，許多大公司的設計團隊皆已正式採用 Figma 為主力設計工具。

請至Figma首頁（https://www.figma.com/）按下右上角的Sign up註冊按鈕。可以選擇google帳戶登入，或填寫E-mail，接著填入暱稱及選擇常使用類別，建立Figma帳戶，即可開始免費使用。

那在具體功能使用上，Figma到底有何亮點? 

n   快速上手的設計繪圖工具

為了要讓所有使用者均可完成UI設計，因此在繪圖工具與編排功能上，均以直覺方式操作，絕對可以讓非設計相關使用者也可以輕鬆開始繪圖與設計，而對於專業設計師更可以與其他設計軟體完整整合。

n   超有效率的編排工具

Figma在編排上，提供了【對齊Align】、【編排框架Frame】、【群組Group】、【遮罩Mask】、【樣式style】，善用這些編排功能就更能仔細做好UI設計的精準對齊與編排設計。

而進一步的響應式約束（Constraints）內容定位、自動佈局（Auto layout）物件編排，各個都是讓你眼睛為之一亮的功能，讓繁瑣的UI畫面設計編排超有效率快速完成。

響應式約束功能以建立編排框架Frame為前提，即當設計師將編排框架Frame尺寸進行變更時，編排框架Frame內的元素會自動按照預先設定的規則固定位置，另外還可同時進行拉伸與縮放物件。

自動化佈局工具是製作複雜元件的核心技巧，可隨時由物件、群組、畫框建立自動佈局，即可構建出高自由度，且能夠根據真實填充資料自動佈局的超級元件，這樣構建的元件一方面還原了真實場景下的設計效果，一方面大大減少了設計師重複性工作。

自動佈局按照常規佈局空隙規則劃分為三個屬性，分別是【元素間空隙】、【左右空隙】、【上下空隙】。調整大小包括【適應內容Hug Contents】【填充容器Fill Container】【固定寬度Fixed Width】等。

n   全域性組件管理

設計組件化的概念是從程式的開發模式中演變而來，是將介面拆分成更小部分組件使之易於管理的方式，是為【組件（Components）】。原始定義的組件是【父組件】，複製出來的組件是【子組件】。以父子關係比喻是因為，在組件邏輯中，【父組件】有變化，【子組件】們會繼承，同步變化，這絕對是在設計UI時必須要的設計內容物件管理方式。

組件（Components）是Figma在UI編排提供的進階功能，可以重複利用設計中的現有部分，從而節省了其他重複而繁瑣的工作。

n   高保真可互動原型設計

開發者對於產品一定有各式各樣的想法，並盡力讓使用者覺得產品「好用」。但開發者該如何確定目前產品設計走向能讓使用者覺得好用？ 我們可以透過【可互動原型設計 Prototype】測試使用者想透過產品完成某項任務時，需經過哪些頁面的切換流程；觀察使用者在操作過程中是否有感到任何不順或遲疑的地方等等。透過實際操作介面給其他人具體了解你的想法。跟工程師溝通時可以展示轉場效果細節、操作邏輯，有了實際討論的素材，工程師可以在可行性評估上做出更好的判斷。

Figma可製作高保真的互動原型，無縫完成從設計到原型演示的切換。包括【互動操控方式】、【畫面切換方式】、【動畫類型】、【滾動時固定位置】、【區域內容捲動】、【智能動畫切換】、【滑上與疊加】，均能輕鬆完成，完成最完整專業的UI設計與可互動原型。

✅建議學習推薦

📌Figma專業UI設計實作
📌Canva入門到進階零基礎輕鬆做設計
📌最推薦AI圖片生成工具Recraft-功能深度解析
📌Microsoft Designer AI 生成設計應用

【恆逸達人學習故事】鄭煒諺：10年從MCSA、RHCE、Photoshop、Office 365到AWS，在恆逸從助理工程師成長至資深資訊工程師！

 

▍ 恆逸達人學習故事  ▍

資訊技術不斷推陳出新，想讓IT職涯發展更順遂需要不斷的精進技能
但是各種不同的技術課程與學習資源，該如何選擇最適合自己的呢？

本專欄分享來自各行各業IT人在恆逸的學習故事
從初入社會的新鮮人、到專業IT工程師、一路到技術主管或管理職
在職涯的不同階段，仍持續回到恆逸不斷累積他們的技術能量
從他們的經驗分享中，體會他們走過的職涯軌跡、及技術轉變上的心路歷程
看他們如何一步步規劃IT進修藍圖，為職涯做好準備！

【Animate CC與javaScript互動】Animate CC 雨滴滴落倒影波動動畫

作者：李啟宏 恆逸教育訓練中心資深講師  

【檢視範例】【下載範例】

動畫裡最常需要的自然現象即是下雨，為了讓雨滴更寫實，因此使用雨滴元件而非一般的線段，搭配水面水紋漣漪與倒影的波動，來讓整個下雨場景更逼真！ 目標動畫效果:利用影片片段元件安排大量的雨滴落下，加上以圓圈製作的水紋漣漪，以及以形狀補間動畫內容的遮色片表現倒影波動，完成逼真的雨中場景。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片。

【CSS應用】僞元素變動尺寸透明背景圖框

恆逸教育訓練中心  資深講師  李啟宏

表格背景圖為由Photoshop設計並切割成上、中、下，在左右切割成左中右共九張圖，中間部位請設計為單色內容，四邊請設計為可重複延伸內容，並注意每個切片圖寬與圖高，CSS屬性設定時需準確搭配圖尺寸。

四邊與四角共八個背景的設定，需安排三個<div>搭配before、after設定出四邊四角圖框，第四層<div>安排中間背景。

首先第一層<div>設定類別【.full-width】，以安排右上角圖，背景圖不重複、靠右、靠上，並在<div>加上【class=" full -width"】完成套用。

繼續加上【::before】設定右側邊框圖，上下需空出上下邊框圖的高度，背景圖為中間圖框需直向重複repeat-y、背景圖靠右。加上【::after】設定下側邊框圖，需設定準確高度(同下邊圖高)，座標位置為靠下，且須利用座標值空出左下角與右下角圖寬。

第二層 DIV以安排右下角圖、上邊圖框、左邊圖框，設定類別【.inner】安排右下角圖，設定z-index:2以確保覆蓋住上一層DIV，背景圖位置為靠右靠下，並在<div>加上【class=" inner"】完成套用。

【::before】設定上邊圖框，利用座標位置設定空出左上角與右上角圖寬、準確上邊圖高，水平重複出上邊框。

【::after】設定左邊圖框，利用座標位置設定空出左上角與左下角圖高；垂直重複出左邊圖框。

第三層 DIV以安排左上角圖、左下角圖，設定類別【.inner2】安排左上角圖，設定z-index:3以確保覆蓋住上一層DIV，並在<div>加上【class=" inner2"】完成套用。

【::before】設定左下角圖，座標位置為左、上，與準確左下角圖寬、圖高。

第四層 DIV以安排中間背景色，設定類別【.inner3】利用四邊padding均同四邊圖寬、圖高，以及以【background-clip: content-box;】達成只顯示Padding之內的背景色目的，並在<div>加上【class=" inner3"】完成套用，加上段落文字控制即完成。

【檢視範例】【下載範例】

學習資訊推薦📐

精修DIV+CSS網頁排版設計輕鬆做

多媒體網頁與UI設計師就業養成班

【PHP資料庫】在Dreamweaver中連結MySQL資料庫

恆逸教育訓練中心  資深講師  李啟宏

SETP1.
開起Dreamweaver，執行【網站>新增網站】定義使用PHP 的網站，除設定『本機網站資料夾』外，於『伺服器』設定中，設定『伺服器連線方式：本機/ 網路』、『伺服器資料夾』，按下『進階』設定『伺服器式：PHP MySQL』。
STEP2.
連結資料庫，新增空白練習頁面並儲存檔案，另存檔案為test.php(副檔名須為.php)。

STEP3.
於資料控制版上按下『＋』，新增『MySQL 連線』，設定『連線名稱』、『MySQL 伺服器：localhost』、『使用者名稱：root』與密碼，按下『選取』選取所要連接的資料庫（於Apache 中有建立的資料庫），按下『測試』檢查是否連結成功。連結成功後，就可以檢視到所有資料表欄位。

STEP4. 繫結資料集，由資料集控制版上新增繫結資料集，選擇要連線的資料庫與資料表即可。

STEP5. 插入表格，列:2、欄:4、表格寬度:1000像素，加入標題依序為編號、新聞標題、新聞類型、建立日期:

STEP6. 在直接由繫結控制板上依序拉入資料欄位:

儲存檔案預覽，即可檢視文字內容，但只顯示一筆資料。

STEP7.

設定重複區域，請選取到<tr>按下【伺服器行為】【+】【重複區域】，設定顯示所有紀錄:

確認重複區域程式碼位置正確，預設為整個表格重複:

請更改為<tr>重複(重複區域程式碼位置為在<tr>之外)

學習資訊推薦📐
【Dreamweaver PHP Apache商業網站實用範例實作】

【Bootstrap網頁實作PHP Apache商業網站】

【多媒體網頁與UI設計師就業養成班】

【基礎javaScript應用】jQuery Prettyphoto 影像互動瀏覽

恆逸教育訓練中心  資深講師  李啟宏

提供快速建立可自動撥放與 前後切換顯示大圖的瀏覽方式，且大圖周圍將以半透明圓角矩形的效果呈現。

STEP1. 開啟範例練習檔dw12.html與dw12-prettyphoto.html，在dw12.html點取原內容區影像（尺寸為600x410）並直接刪除。

至dw12-prettyphoto.html直接複製所需CSS與Javasccript檔連接，並貼入於dw12.html內</head>之前:

【Dreamweaver網頁編輯應用】為你的網站加上網址列小圖示ICON

恆逸教育訓練中心  資深講師  李啟宏

這樣的小Icon，其是就是所謂的「favicon」，副檔名為「.ico」，如果你有自己架站，想替自己的網站換個屬於自己風格的網站ICON，請先準備好一張64*64的透明背景PNG-24格式小圖。

STEP1. 至https://www.aconvert.com/tw/icon/png-to-ico/網頁，由【選擇檔案】按鈕選擇64*64的透明背景PNG-24格式小圖，圖標尺寸請勾選64X64，按下開始轉換。

前端初階jQuery UI實用教學-基礎篇

 

作者/顏怡宏 Bob Yen
精誠資訊/恆逸教育訓練中心-資深講師

jQuery UI是以 jQuery為基礎的開源JavaScript 網頁用戶界面程式碼，jQuery UI互動元件架構在廣受好評的jQuery之上，因此擁有最佳的效能與相容度，目前也是相關元件開發工具的首選，只要善加使用jQuery UI這個強大又輕巧的工具，就能在開發網站時如虎添翼，輕易完成許多互動的效果、甚至加入動畫，更別說是常見的日期選擇器、表單、滑棒、手風琴與自動填表等網頁中必要的功能。

【最好的投資，就是投資你自己】剛畢業的菜鳥到變成一位專業工程師，該怎麼規劃你的職涯路? ── 看他們的職涯經驗談

▍ 最好的肯定，就是一路上有你  ▍

讓恆逸陪著更多的’’你’’一起走過資訊職涯
在業界創造屬於你自己的故事，你也可以！

恆逸25歲了！

從1996年到現在，在資訊技術這條路上

有越來越多來自不同背景、不同職業的IT人加入我們

每每看到顧客辛苦上了一天班後，仍肯花時間精力上課到晚上10點才回家

甚至利用寶貴的周末假日時間來上課，只為了投資自己學習更多新知

這樣的精神和毅力，著實不容易

也更時時提醒我們，要不斷努力做到更好！

每個人到恆逸都有屬於自己的職場經歷

只要來到這裡，大家就是彼此學習上的夥伴

擁有共同的目標，跟老師一同追求新知、跟同好一起相互成長

不論上課時間長短，都希望這段過程能成為他們的養分

能為他們的工作、人生帶來一點轉變！

 

而最激勵我們的是，二十幾年來看到很多熟悉的面孔，始終一直都在！

更感謝他們的分享，從他們的故事中，可以感受他們走過的職場之路，及技術成長的軌跡！

如果您也對資訊產業工作有興趣，先來看看他們的學習經驗分享！

---

 

曹國輝：

『感謝恆逸一路以來陪伴我成長，開設的課程內容都是時下企業最需要的技能！』

16年前選擇了恆逸的曹國輝
從Windows MCSE課程開始，這些年陸陸續續上了Exchange、CCNA、RHCE、SQL Server、TCSE…
從技術職轉到管理職後，再回來上的PMP專案管理課程
到今年因為想了解企業上雲的效益，又學了熱門的Azure雲端技術
他想要鼓勵年輕人，要保持不斷學習的熱忱，不要讓自己每年都做一樣的事！

【曹國輝：16年前剛畢業時沒有一技之長，自掏腰包到恆逸上了全套的MCSE課程並且考取證照後，一個轉職的機會讓我進入了兩岸三地的上市上櫃公司並且薪水大幅調升…】

回顧我的資訊職涯已經過了16個年頭，記得剛畢業時沒有一技之長，當時的我對微軟的系統很有興趣，經主管介紹下認識了恆逸的業務 Elsa Chang，她當時很細心的跟我解說課程的細節，以及市場上對資訊專業人員的需求程度，現在回想起來仍記憶猶新，感謝Elsa當時詳細的解說讓我踏入資訊這條專業道路。

 

16年前是NT4轉Windows 2000 AD的架構重大變革，我自掏腰包來恆逸上了全套的 MCSE課程並且考取證照後，一個轉職的機會讓我進入了兩岸三地的上市上櫃公司並且薪水大幅調升，當時中國工廠正在快速擴張，珠海、崑山、北京、天津等廠陸續建立，相對的AD / Exchange / 網路架構也需要快速的調整與不斷地做最佳化。

 

 

感念當時公司對教育訓練費用的重視，我在公費的支持下於恆逸又陸續上了 CCNA / Red Hat RHCE等課程，快速建廠的經驗讓我得以學以致用，我的技術經驗在這個階段大幅紮實的累積 (大陸到處跑，還好當時年輕，體力好耐操)。

 

【曹國輝：職涯的前半段都是在做技術磨練，職涯後半段轉管理職後也陸續在恆逸上了PMP等相關管理課程...】

經過這幾年的歷練摧殘，這中間也轉換了幾家公司，我的工作內容每年都不相同，坦白說也很辛苦，因為要一直學習新的資訊專業知識並且與新的同事溝通協調一起完成任務。

 

「在這邊想要特別鼓勵年輕人，不要讓自己每年都做一樣的工作內容，要保持不斷學習的熱忱，否則當機會或危機來臨時，你要跟下一家公司說你有10年工作經驗(每年做的事都一樣)，還是你有10年工作經驗(每年都做不同的專案與不同單位一起協同完成任務)?」

 

 

【曹國輝：感謝恆逸一路以來開設的課程內容都是時下企業最需要的技能，不管是技術面或是管理面的課程！】

近年來伺服器運算資源與網路速度的不斷提升，各家原廠例如Microsoft、Adobe等都改變了營運策略將產品推向雲端，為的是提升用戶體驗、降低企業總體持有成本(TCO)，雲端化已經是現代資訊基礎設施的趨勢。

 

因此今年初我又於恆逸上了一門 『Microsoft Azure基礎知識』的課程，學習完此課程讓我了解Azure對於企業上雲的效益，幾個重點例如：AI、IoT、DevOps、Auto Scaling、OPEX 費用化、Pay As You Go (用多少付多少)等，雲端也提供了各種資安要求例如ISO 27001的合規性自動檢查與弱點建議。

 

令我印象最深刻的是Microsoft不斷的在Azure上推出適合企業用的各種功能與服務，企業除了使用Azure的IaaS、PaaS功能之外也可於Azure 上使用SaaS直接租用需要的應用系統，例如CRM、Service Desk、Workflow 等雲端套裝應用系統。上完這門課後對Azure的功能已有基本的認識，未來在發展資訊系統藍圖或者策略時也將會一併考量Azure。 

 

「在恆逸十幾年上課的經驗，業務人員都很細心、服務人員也都是滿滿的笑容與熱忱，老師授課時非常的專業，每當學員於課堂上提出企業實務的問題時，老師總是能細心且專業的回答。恆逸的上課教室環境這十幾年來也是不斷的精進與維持良好的品質，最令我印象深刻的是吧檯提供無限暢飲的咖啡與茶，每當上課覺得很累時可以立刻補充咖啡因，總是可以給我滿滿的能量。最後期勉同是資訊人的各位，保持熱忱、不斷學習成長才能貢獻所長，有能力回饋社會，共勉之。」

 

 

同場加映➤➤➤

🌟 Azure雲端系列課程

🌟 Windows Server 2016/2019系列課程

🌟 SQL Server資料庫系列課程

🌟 Cisco認證系列課程

🌟 Red Hat認證系列課程

🌟 Exchange Server 2016/2019系列課程

---

鄭煒諺：

『在恆逸從助理工程師成長至資深資訊工程師，恆逸是一個可以讓你從什麼都不懂變成一位專業人才的訓練中心！』

 

2010年剛出社會的鄭煒諺，是位助理工程師
當時自覺是菜鳥的他，擔心從職場上所學有限、不夠完整
偶然接觸到恆逸，開始了10年學習之路
在恆逸上過MCSA、Linux RHCE、Photoshop、Office 365、AWS課程…
他篤定地說，未來也計畫再回恆逸上更多的課程！

 

【鄭煒諺：當時只知道恆逸是間提供專業資訊技術訓練的公司，因當時工作主要以微軟Solution為主，報名了Windows Server 2012課程，對於像我這樣的初階助理工程師非常的適合，課後我很快考取了MCSA、MCSE證照…】

在資訊領域遊走多年，今年剛好滿10年，在2010年1月時，剛出社會的我就決定想往資訊工程師發展，但對此行業完全不熟悉，甚至不知道該走向系統、網路、程式設計師..等方向，一開始從小小的助理工程師做起，簡單的電腦安裝、重灌開始涉及資訊領域，但從職場上所學，始終有限、不夠完整、速度也不夠快。

 

在2012年有幸以長期約聘職進入Acer商軟部門擔任infra工程師，專提供微軟Solution的公司，以當時我會的技術，也僅僅是些電腦的基本安裝、重灌、簡單的檔案權限設定，但身邊的工程師同事，每位皆是資訊技術的資深高手，同事無法理解像我這樣的菜鳥該如何成長、進步，只覺得我應該要多參與專案、多做LAB就會進步了，有時同事甚至會覺得我不夠努力，但並不是同事們的問題，只能說當人們成為專家、高手時，往往會忘記自己當初是如何努力過來的，加上以我當時的技術來說，在此產業接觸2年，還不懂這環境的生態領域，也不知道以資訊工程師在公司立場與角度中，能提供什麼樣的專業技術及未來發展。

 

在一次的機緣巧合下，接觸到恆逸，當時只知道是間提供專業資訊技術訓練的公司，因當時工作主要以微軟Solution為主，故報名了Windows Server 2012 MCSA認證的課程，課程中，對於像我這樣的初階助理工程師非常的適合，老師從最基礎教起，告訴我們如何安裝Windows Server，最後也會深入講到Windows AD、GPO、WSUS、DFS、DNS...等服務如何運作，甚至提及Hyper-V整體運作架構及其優缺點，課程中的LAB環境讓我了解到系統服務如何建置、維運、管理，有時我在公司遇到的問題，會於課程中向老師提出詢問，老師們通常會不遺餘力的與我討論做法與解法，很快的，我最後在課程結束後，花了一段時間唸書準備，並考取了Windows Server 2012 MCSA的證照，後來過一陣子又再考取了MCSE的證照。

 

【鄭煒諺：到今年2020年了，中間我轉換過非常多的公司，很多人會認為我不穩定、喜歡換工作，但中間沒有變的是，這幾年我的技術一直在成長中，至今我的薪水已是我2012年時薪水的兩倍，但我中間做了很多的課程學習…】

 

這幾年來，我上過恆逸所提供的MCSA課程、Linux RHCE課程、Photoshop課程、Office 365課程、AWS課程。前份工作因為公司新系統導入關係，將內部Exchange 2010服務移轉至Office 365上，必須在短時間內掌握其技術，公司毫不猶豫馬上將我派至恆逸進修「Microsoft 365識別與服務」課程，爾後於工作中，主管很放心的將Office 365的技術交由我來負責，維運管理大概500 user以上的環境，也自認自己的技術又再更上一層樓。

 

有考量到未來趨勢會是雲端的天下，所以我也在今年投資自己進修「Systems Operations on AWS」課程，雖說還不是該領域熟手，但至少知道該領域中的技術有哪些？未來在規劃公司內部環境時，也能夠有多一個AWS的選項。

 

此外，自己因多年在Windows領域，認為管理面朝向自動化PowerShell也是一個不可或缺的技術，也能夠將原有掌握的技術透過Shell來將原有日常工作給自動化，將人力降低，管理方便，因此短期內有計畫再到恆逸上「使用Windows PowerShell進行自動化管理」的課程。

 

「很感謝恆逸提供這樣的師資、學習環境，讓我可以從一開始的助理工程師，至今已做到資深資訊工程師，未來我也計畫會再上更多的課程，相信對於還在摸索的朋友們，恆逸是一個可以讓你從什麼都不懂變成一位專業人才的訓練中心！」

 

 

 

同場加映➤➤➤

🌟 AWS雲端系列課程
🌟 Microsoft 365系列課程

🌟 使用Windows PowerShell進行自動化管理課程

🌟 專精Photoshop與Lightroom數位攝影後製與修圖課程

🌟 Windows Server 2016/2019系列課程

🌟 Red Hat認證系列課程

 

 

 ▍你也是恆逸的老朋友嗎?

快來分享你在恆逸的學習故事，可獲得2000元即享券！
(即享券可在家樂福、遠東SOGO百貨、遠東百貨、王品集團、7-ELEVEN 擇一品牌使用)

👉恆逸老朋友回娘家徵稿活動介紹：https://pse.is/3bwn2d

 

▍你也想在資訊業創造屬於你自己的故事嗎?

歡迎一起加入我們的行列！

https://www.uuu.com.tw