iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 24598 瀏覽

鐵人賽 Modern Web DAY 24

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 24 篇

技術 Day 24. 打造可重覆使用的設計－Figma 的 Component 元件解析

在一個網站中，常常會在不同的頁面之間看到許多相同共用的元素，比如說按鈕、導覽列。而在同一個網頁中，也經常會看到有些一再重覆出現的元素，比如說卡片、列表等。我們...

Rson ‧ 2021-10-09

0 Like 0 留言 10286 瀏覽

鐵人賽 Modern Web DAY 22

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 22 篇

技術 Day 22. RWD 響應式設計的利器- 理解 Figma 的 Constraints 機制

Constraints 是 Figma 中一個很重要的功能，它可以讓我們的設計在做拉伸的時候，變的更加彈性，當你需要做 RWD (Responsive Web...

Rson ‧ 2021-10-07

0 Like 0 留言 10048 瀏覽

鐵人賽 Modern Web DAY 7

從零開始學 - Side Project專題開發及切版實作技巧系列第 7 篇

技術 Day 7 - 動手繪製 Wireframe 線框稿(Figma教學)

Day 7 - 動手繪製 Wireframe 線框稿(Figma教學) 每日一談嗨 ! 大家好，我是阿蘇今天是Day 7 ，今天會分享 Wireframe...

阿蘇蘇 ‧ 2022-09-22 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 10020 瀏覽

鐵人賽 Modern Web DAY 25

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 25 篇

技術 Day 25 Figma 設計檔的多啦時光機－檔案歷史紀錄與版本控制

大家應該都有這樣的經驗：辛辛苦苦做了一、二個小時的進度，因為沒有養成隨時存檔的好習慣，當突然遇到軟體或作業系統當機而欲哭無淚。Figma 考量到了這點，預設大約...

Rson ‧ 2021-10-10

0 Like 0 留言 9077 瀏覽

鐵人賽 Modern Web DAY 20

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 20 篇

技術 Day 20. 用 Figma 來設計基本 icon 吧！

Figma 的介面佈局與一般的設計軟體很類似，上方(1)為工具列，左方(2)可切換 Layer, Page ，右方 (3) 有三個面版，當目前為 Design...

Rson ‧ 2021-10-05

0 Like 0 留言 7155 瀏覽

鐵人賽 Modern Web DAY 21

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 21 篇

技術 Day 21. 透過實作設計一個登入頁面，掌握 Figma 基本工具

今天來設計每個網頁幾乎都會有的登入頁面吧！跟著 Rson 一起實作完，就能做出下面這張設計稿：分二塊來實作，首先先繪製容器及左半部 Sign-up 的部份，再...

Rson ‧ 2021-10-06

0 Like 0 留言 6070 瀏覽

鐵人賽 Modern Web DAY 26

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 26 篇

技術 Day 26. 我要準時下班- Figma Plugin (上)

Figma 的功能已經相當強大，但多少還是會缺乏一些功能，當我們有需要的時候，便可到社群裡用關鍵字查找，看看有沒有開發者已經開發出可以擴充的插件 (Plugin...

Rson ‧ 2021-10-11

0 Like 0 留言 6070 瀏覽

鐵人賽 Modern Web DAY 27

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 27 篇

技術 Day 27. 我要準時下班- Figma Plugin (下)

上一篇介紹了 plugin 是什麼、如何安裝使用，以及推薦的插件。今天我們實際透過這些插件實作一個簡單版的po文牆網頁UI。最後會完成的結果如下：首先，使用形...

Rson ‧ 2021-10-12

0 Like 0 留言 5649 瀏覽

鐵人賽 Modern Web DAY 19

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 19 篇

技術 Day 19. UI 設計軟體- Figma 簡介與優勢

前二篇解釋了 GUI Design 階段的重點，也提到此時花費設計師的工時相當可觀。功欲善其事，必先利其器，挑選一個稱手、效率高的設計軟體就很重要。目前 GUI...

Rson ‧ 2021-10-04

0 Like 0 留言 5039 瀏覽

鐵人賽 Modern Web DAY 23

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 23 篇

技術 Day 23. 透過 Constraints 機制，實作出能夠拉伸的響應式卡片設計

前一篇我們實驗 Constraints 各種設定會造成的影響後，相信大家已經對於 Constraints 有所理解了。今天我們來將昨天學到的，實際應用在真實的...

Rson ‧ 2021-10-08

0 Like 1 留言 4606 瀏覽

鐵人賽 Modern Web DAY 28

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 28 篇

技術 Day 28. Hi-Fi Prototype－以 Figma 製作高精度原型 (上)

終於，我們要進入 UX/UI 設計中的最後一個流程－高精度原型 Hi-Fi Prototype，這也是交付所有能夠設計的細節，給工程師進入開發前的最後一個階段...

Rson ‧ 2021-10-13

0 Like 0 留言 4207 瀏覽

鐵人賽 Modern Web DAY 20

1995到2021，php到react網站開發歷程系列第 20 篇

技術 DAY20-網站構思之進階figma

前言：昨天我們使用了幾個基本的方法設計了網頁的首頁，今天阿森要來進一步介紹一些figma prototype的功能，讓我們最佳化figma預覽的效果，也就是...

Cooksuhr ‧ 2021-10-02 ‧團隊Obit0 Studio

1 Like 0 留言 3685 瀏覽

技術新手指南：快速掌握UI/UX設計及實用工具推薦

在當今這個數位化的時代，UI/UX設計的重要性日益凸顯，它不僅關乎產品的視覺呈現，更影響著用戶體驗的質量。因此，許多設計新手都積極尋找能快速上手並提升設計效率的...

jasminecheng ‧ 2024-01-30

0 Like 0 留言 3637 瀏覽

鐵人賽 Modern Web DAY 19

1995到2021，php到react網站開發歷程系列第 19 篇

技術 DAY19-網站構思之figma(一)

前言：接下來就要進入網頁構思的階段了，在開始寫網站之前，如同畫畫一樣，一定都需要先打一個草稿，除了讓之後寫code可以有一個方向，也可以先預覽看看之後網站的...

Cooksuhr ‧ 2021-10-01 ‧團隊Obit0 Studio

1 Like 1 留言 3478 瀏覽

鐵人賽 Modern Web DAY 29

網頁 UX / UI 攻心術｜30天練成 Figma、Axure RP 以及 UX 心法系列第 29 篇

技術 Day 29. Hi-Fi Prototype－以 Figma 製作高精度原型 (下)

由於 Figma 的核心是 GUI 設計工具，附帶原型製作能力，所以一般來說我們都會使用它來進行高精度原型設計，說到這裡，你會不會想問，有高精度，那是不是也有低...

Rson ‧ 2021-10-14

0 Like 1 留言 3423 瀏覽

鐵人賽 Mobile Development DAY 7

今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列第 7 篇

技術 Day 7 Figma x Material Theme Builder x Material Design 3

前言前2天用了 Web版 Material Theme Builder，快速方便。但想要看渲染過的元件長什麼樣的話就要到 Figma 版的 Material...

ChuLin ‧ 2022-09-13 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們

0 Like 0 留言 2945 瀏覽

鐵人賽自我挑戰組 DAY 10

UI/UX設計的初心者冒險之旅系列第 10 篇

技術 DAY10＃Figma的Component功能認識

講完了Auto layout能做到的幾個功能，接下來換針對Figma的Component來學習，希望之後要實作的話，回來都能看得懂 :D 那就， Compon...

Chloe ‧ 2024-08-21 ‧團隊iT 貓貓教

0 Like 0 留言 2824 瀏覽

鐵人賽自我挑戰組 DAY 17

UI/UX設計的初心者冒險之旅系列第 17 篇

技術 DAY17＃Prototype常見互動製作

透過Prototype的呈現可以讓團隊清楚了解版面設計與呈現方式，但要怎麼讓效果照預期的呈現，就需要應用學過的各種功能了，所以今天就來紀錄幾個常見的互動方式。...

Chloe ‧ 2024-08-28 ‧團隊iT 貓貓教

0 Like 0 留言 2791 瀏覽

鐵人賽 Modern Web DAY 21

手把手web初學者系列第 21 篇

技術來用Figma做出高擬真的使用介面

網頁需要做下滑只要把Figma的 Frame 再拉長接著我們要來做一點元件的變化水平滾動圖片先拉出你需要放進圖片的圖形置入圖片到 □選取點選要放入的圖形...

我是誰我在哪... ‧ 2022-10-04

0 Like 0 留言 2741 瀏覽

鐵人賽 Modern Web DAY 2

從零開始的寫web app 30天生活系列第 2 篇

技術 Day 2 - 原型: Figma

前言我先建立一個原型(Prototype), 用來釐清這個WebApp的功能跟UI界面。建立原型所用到的工具是Figma, 它有免費版本, 功能應該足以應付...

tlyau62 ‧ 2021-09-14 ‧團隊ㄟˊ~這是幹嘛的？

0 Like 0 留言 2485 瀏覽

鐵人賽 Modern Web DAY 9

從零開始學 - Side Project專題開發及切版實作技巧系列第 9 篇

技術 Day 9 - Figma 繪製精美 Mockup (二)

Day 9 - Figma 繪製精美 Mockup (二) 每日一談嗨! 大家好，我是阿蘇又是新的一天開始了，今天是Day 9來繼續昨天的分享，今天主要是...

阿蘇蘇 ‧ 2022-09-24 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 2442 瀏覽

鐵人賽 WordPress DAY 11

【輕鬆學習，輕鬆教學】跟著我的步驟，輕鬆架設屬於你的學習管理平台！系列第 11 篇

技術 Day11 網站設計工具 - Figma 設計師都在用的工具

網站設計工具 - Figma Figma是一個非常流行的設計和協作工具，特別適用於設計師和團隊。它允許使用者創建、共享、評論和協作設計項目。以下是對Figma...

pellok ‧ 2023-09-22

0 Like 0 留言 2363 瀏覽

鐵人賽 Modern Web DAY 6

從零開始學 - Side Project專題開發及切版實作技巧系列第 6 篇

技術 Day 6 - Wireframe 線框稿

Day 6 - Wireframe 線框稿每日一談嗨 ! 大家好，我是阿蘇不知不覺就來到了 Day 6 ，有沒有開始對 Side Project 有些靈...

阿蘇蘇 ‧ 2022-09-21 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 2243 瀏覽

鐵人賽 Software Development DAY 2

台南不需要米其林系列第 2 篇

技術 Day02 首頁UI設計圖 ft. Figma

摘要在第一階段中我們先畫出第一版的UI設計圖，作為後續開發時的參考圖片。這邊會使用到Figma這項工具來繪製UI，參考了Papaya教室的教學影片，從手繪的草...

yenshaoting ‧ 2022-09-17 ‧團隊台南巷弄美食獵人

0 Like 0 留言 2216 瀏覽

鐵人賽自我挑戰組 DAY 8

30天的Figma學習筆記系列第 8 篇

技術 Day8 Figma基礎3_文字

哈囉，大家你們好，今天要介紹的是文字工具，在一個設計裡面，文字是佔據設計裡面非常重要的角色，我們首先從工具列裡面的大寫T按鈕中創建文字，或是使用快捷鍵T也可以快...

沒有坐車車的天竺鼠 ‧ 2023-09-22

0 Like 0 留言 2111 瀏覽

鐵人賽 Modern Web DAY 8

從零開始學 - Side Project專題開發及切版實作技巧系列第 8 篇

技術 Day 8 - Figma 繪製精美 Mockup (一)

Day 8 - Figma 繪製精美 Mockup (一) 每日一談嗨，大家好 ! 我是阿蘇今天是Day7 我們即將進入設計階段，這邊一樣也是使用 F...

阿蘇蘇 ‧ 2022-09-23 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 2067 瀏覽

鐵人賽 IT 管理 DAY 28

【前端工程師＆UI 的 30 天約會】戰勝猴子！：Figma 交付實戰篇系列第 28 篇

技術 [Day28-總結] 猴子翻過高牆！工程師也懂的設計交付之旅🔥

Figma 讓合作更緊密藉由 Figma 即時同步，團隊成員可以共同參與，隨時跟進進度與提供回饋。一個健康的產品團隊需要設計與開發緊密協作，互相理解與回饋。合...

TC ‧ 2024-10-10 ‧團隊擁有夢想的鐵人猴子隊

0 Like 0 留言 1961 瀏覽

鐵人賽自我挑戰組 DAY 28

30天的Figma學習筆記系列第 28 篇

技術 Day28 Figma強大的Prototype

今天要來介紹的是Figma裡面非常方便的原型工具—Prototype。那它的位置在屬性面板的上方，一般我們平常在畫設計圖時都是在Design，但是我們要切換到P...

沒有坐車車的天竺鼠 ‧ 2023-10-12

0 Like 0 留言 1897 瀏覽

鐵人賽 Modern Web DAY 10

從零開始學 - Side Project專題開發及切版實作技巧系列第 10 篇

技術 Day 10 - Prototype 原型互動 / 產品模擬

Day 10 - Prototype 原型互動 / 產品模擬 (Figma 教學) 每日一談嗨，大家好 ! 我是阿蘇今天是Day10 ，今天來跟大家談談 P...

阿蘇蘇 ‧ 2022-09-25 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 1861 瀏覽

鐵人賽 SideProject30 DAY 8

30天製作RWD個人品牌網站系列第 8 篇

技術 Day8. Figma(3) 製作Mockup視覺稿

第八天！今天要繼續Figma教學，接下來會先設定好視覺稿尺寸，再依據前面繪製的Wirefame並結合在Day4確定下來的網站風格、用色，忘記的可以回去複習。Da...

luna0228 ‧ 2023-09-23