UI/UX 新手30天的自學實錄 :: 2024 iThome 鐵人賽

alpachennnnn (alpachennnnn)

iT邦見習生 ‧ 點數 122

1129

累計瀏覽數

站內簡訊追蹤

鐵人檔案

2024 iThome 鐵人賽

回列表

自我挑戰組

UI/UX 新手30天的自學實錄系列

參賽內容皆圍繞UI/UX做展開，會由淺入深的去了解UI/UX，最後達成實作

參賽天數 3 天｜共 30 篇文章｜ 0 人訂閱訂閱系列文 RSS系列文

0 Like 0 留言 124 瀏覽

DAY 3

Figma實作(15) - 程式碼導出

經由多次嘗試，找到一個能夠相對完整轉換程式碼的外掛，操作如下: 1.首先在Figma下載外掛程式 - DhiWise2.註冊登入後畫面如下3.將所有元素整合...

2024-10-14 ‧ 由 alpachennnnn 分享

0 Like 0 留言 136 瀏覽

DAY 3

Figma實作(16) - html解析首頁

這部分設定了背景圖片以及畫面上的字體呈現 <div class="home"> <div class="hom...

2024-10-14 ‧ 由 alpachennnnn 分享

0 Like 0 留言 113 瀏覽

DAY 3

Figma實作(17) - html解析登入頁

這段JavaScript代碼主要在處理輸入框的開啟、關閉以及切換功能 function open() { target.showModal();...

2024-10-14 ‧ 由 alpachennnnn 分享

0 Like 0 留言 112 瀏覽

DAY 3

Figma實作(18) - html解析註冊頁

跟登入頁面的程式碼大同小異顯示Xplore Logo以及勾選同意條款框提供登入提示「Already have an account?」並顯示「Login」連...

2024-10-14 ‧ 由 alpachennnnn 分享

0 Like 0 留言 121 瀏覽

DAY 3

Figma實作(19) - css解析首頁

畫面上方Logo、Home及頭像位子大小參數調整

2024-10-14 ‧ 由 alpachennnnn 分享

0 Like 0 留言 116 瀏覽

DAY 3

Figma實作(20) - css解析登入頁

登入頁整體面板設置背景圖像設置登入表單設置

2024-10-14 ‧ 由 alpachennnnn 分享

0 Like 0 留言 120 瀏覽

DAY 3

Figma實作(21) - css解析註冊頁

註冊面板設置勾選框設置輸入框及註冊按鈕設置

2024-10-14 ‧ 由 alpachennnnn 分享

0 Like 0 留言 117 瀏覽

DAY 3

Figma實作(22) - css解析

其餘還有一些配件的設置勾選框輸入框文字字體樣式色彩、字體大小、文字間格等設定

2024-10-14 ‧ 由 alpachennnnn 分享

0 Like 0 留言 142 瀏覽

DAY 3

Figma實作(22) - 成品

Log in/Sign up網址:https://www.figma.com/proto/lMWQpJ2tPJ5HsIKRSHCpr6/Untitled?no...

2024-10-14 ‧ 由 alpachennnnn 分享

0 Like 0 留言 90 瀏覽

DAY 3

整體心得分享

這30天來真的不算輕鬆，但真的讓我得到了很多，很久以前就想學習Figma，礙於嚴重的拖延症，根本是空口白話，若是沒有這次鐵人賽，我大概還是停留在原地吧~製作過程...

2024-10-14 ‧ 由 alpachennnnn 分享

alpachennnnn的鐵人檔案

alpachennnnn的收藏

alpachennnnn的追蹤

alpachennnnn的Like

alpachennnnn的紀錄

alpachennnnn的訂閱列表