iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
IT 管理

前端工程師&UI 的30天約會:教會猴子用Figma! 系列

在這個系列中,將會深入探討如何透過 Figma 實現設計與開發的協作。我們將從淺至深,從小元件到最終實現完稿,一步步地演示如何利用 Figma 工具,促進設計師與工程師們的合作。

參賽天數 14 天 | 共 14 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文 團隊擁有夢想的鐵人猴子隊
DAY 1

[Day01] 前言:設計師的溝通工具

在設計與前端開發的協作過程中,常常會面臨諸多挑戰,像是如何確保設計師與工程師之間的理解一致、設計交付的準確性以及在開發過程中發現問題時的及時應對。隨著市面上出現...

2024-09-13 ‧ 由 percev_shih 分享
DAY 2

[Day02] 1. 初探 Figma

Figma 是由 Dylan Field 和 Evan Wallace 在解決設計師日常痛點的想法下創立的。原因是 Dylan 在實習時覺得常用的設計工具 Ad...

2024-09-14 ‧ 由 percev_shih 分享
DAY 3

[Day03] 2. 如何開始 Figma

首先,Figma 帳號可免費取得! 《取得帳號》進入 https://www.figma.com/ 後,點擊右上角的 ”Get Started for free...

2024-09-15 ‧ 由 percev_shih 分享
DAY 4

[Day04] 3. 認識 Figma 介面

讓我們開始來認識 Figma 的介面吧! 介面認識 註冊完帳號後,便可以開始使用 Figma 了!,網頁版(圖一)和 App 版(圖二)長的基本一樣(圖一:Fi...

2024-09-16 ‧ 由 percev_shih 分享
DAY 5

[Day05] 4. Figma 首頁有些什麼?

上一章節先簡單介紹過開始新檔案的操作介面,今天來瞧瞧 Figma 首頁有些什麼功能吧! 首頁 左側區域的功能區(如下圖): (由上至下介紹) 點擊最上方 “...

2024-09-17 ‧ 由 percev_shih 分享
DAY 6

[Day06] 5. Figma 基本操作(一):分享的檔案

在過去合作的經驗中,發現到對於從來沒有接觸過電腦繪圖軟體的工程師們來說,第一次使用 Figma 其實會滿不知所措的。接下來將會講解一些基本操作和觀念,有興趣的讀...

2024-09-18 ‧ 由 percev_shih 分享
DAY 7

[Day07] 6. Figma 基本操作(二):頂部標籤列

介紹完首頁和(分享的)檔案管理規則後,接下來將進入 Figma 基礎介面的介紹,其實 Figma 的介面和常見的設計軟體介面差異不大,若是有 Sketch 或...

2024-09-19 ‧ 由 percev_shih 分享
DAY 8

[Day08] 7. Figma 基本操作(三):工具列 -上篇

工具列(上) 這一列有許多重要的基礎工具和功能按鈕,本章將依序介紹左側工具區: 移動工具 (Move Tools):包含 Move 移動工具和 Scale...

2024-09-20 ‧ 由 percev_shih 分享
DAY 9

[Day09] 8. Figma 基本操作(四): 工具列 - 下篇

昨天介紹了基本工具欄,接下來將聊聊中間和右側的一些按鈕中間的部分的工具需要先在畫布區產生任一個物件(可以是 Frame、Text、Group或插入的圖片等)並選...

2024-09-21 ‧ 由 percev_shih 分享
DAY 10

[Day10] 9. Figma 基本操作(五): 頁面選單和圖層區

今天要介紹滿重要的頁面選單和圖層區,我們通常會運用這個部分來管理設計畫面和資產。 圖層 Layers 和資產 Assets 圖層 Layers 頂部可以切換圖...

2024-09-22 ‧ 由 percev_shih 分享