[筆記] MarkMan 跨平台 設計稿標註與量測工具

Posted onAuthorANDY LIEN

章節連結

前幾週在六角學院的線上課程看到有個好用的 MarkMan 線上平台工具可以使用，讓你可以輕鬆的讀取和量測圖片上的顏色、大小。雖說不能夠讀取圖片上的字體，但在不開啟如 Photoshop 之類的軟體就能達到工作需求，算是很實用了。
markman logo

下載並安裝

1. 登入 MarkMan 官網後，點選左方的下載按鈕開始安裝
markman official website2. 此安裝包是利用 Adobe AIR，如果沒有這個軟體的，要先上 Adobe 的官網下載，才能成功開啟安裝檔
markman website download

如何使用

1. 開啟程式後，就將要用來分析的圖片運用”拖拉放”的技巧到程式畫面中央。
markman screen 2. 完成了。你可以運用下方的滴管和量測尺，就可以得知色碼(Hex)和距離像素。
markman demo markman logo demo2

技術筆記相關文章

  • [筆記] 在一台電腦上 操作多個 Git Config
  • [筆記] HTML5 InnerHTML InnerText 的差異
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 21
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 30 – 佈署發佈
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 29 – Toast
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 28 – Modal
  • [面試] 2024 前端工程師面試心得
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 27 – Progress Circle
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 26 – Progress Bar
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 25 – Skeleton
  • [筆記] HTML z-index 父層 子層 和 Stacking Context
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 24 – Spin
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 23 – Pagination
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 22 – Tabs
  • [筆記] Vue3 Teleport Drawer 抽屜實作心得
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 21 – Drawer
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 6
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 20 – Select
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 19 – Dropdown
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 18 – Breadcrumbs
  • [筆記] Ultimate AWS Certified Developer Associate (178)
  • [筆記] Ultimate AWS Certified Developer Associate (177)
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 17 – Infitite Scroll
  • [筆記] Ultimate AWS Certified Developer Associate (176)
  • [筆記] Ultimate AWS Certified Developer Associate (175)
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 16 – Table
  • [筆記] 使用 Vite TypeScript 模版開發一個 npm 套件
  • [筆記] Ultimate AWS Certified Developer Associate (174)
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 15 – Carousel
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 14 – Card
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 13 – Accordion/Collapse
  • [筆記] Ultimate AWS Certified Developer Associate (173)
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 12 – Tooltip
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 11 – Badge
  • [筆記] Vue3 + Vite 與 Bootstrap5 合用 Unocss
  • [筆記] Ultimate AWS Certified Developer Associate (172)
  • [筆記] Vue 2 升級 Vue 3 + Vite 心得 – 2
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 10 – Chip/Tag
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 9 – Upload
  • [筆記] Vue 2 升級 Vue 3 + Vite 心得 – 1
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 8 – Rate
  • [筆記] Ultimate AWS Certified Developer Associate (171)
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 7 – Slider
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 6 – Form Control
  • [筆記] Ultimate AWS Certified Developer Associate (170)
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 5 – Input
  • [筆記] Ultimate AWS Certified Developer Associate (169)
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 4 – Checkbox
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 3 – Radio
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 2 – Switch
  • [筆記] Ultimate AWS Certified Developer Associate (168)
  • [筆記] 哎呀！不小心刻了一套 React UI 元件庫 1 – 開發環境和 Button
  • [筆記] Ultimate AWS Certified Developer Associate (167)
  • [筆記] Ultimate AWS Certified Developer Associate (166)
  • [筆記] Ultimate AWS Certified Developer Associate (165)
  • [筆記] Ultimate AWS Certified Developer Associate (164)
  • [筆記] XState React 設計登入模式筆記
  • [筆記] React 自製 Provider 的基礎知識
  • [筆記] Ultimate AWS Certified Developer Associate (162)
  • [筆記] React Select 搭配 Testing Library 進行單元測試
  • [筆記] Ultimate AWS Certified Developer Associate (161)
  • [筆記] XState React 狀態管理初探
  • [筆記] Ultimate AWS Certified Developer Associate (160)
  • [筆記] Ultimate AWS Certified Developer Associate (159)
  • [筆記] React Unit Test 關於路由和套件的模擬 By Jest
  • [筆記] Ultimate AWS Certified Developer Associate (158)
  • [指南] 用 Vite 開發一個 NPM 套件 ( 以 Parse Localized Number 為例 )
  • [筆記] Ultimate AWS Certified Developer Associate (157)
  • [筆記] Ultimate AWS Certified Developer Associate (156)
  • [筆記] React 撰寫元件時 如何保留留下客製化區塊 ( Vue )
  • [筆記] Ultimate AWS Certified Developer Associate (155)
  • [筆記] HTML 巢狀 div 所造成的縮排效果
  • [筆記] React Unit Testing 測試心法
  • [筆記] Ultimate AWS Certified Developer Associate (154)
  • [筆記] React 與 Vue 的實作思維轉換筆記
  • [筆記] 直接用 pre-commit 來檢查 commit 並驅動自動格式檢查
  • [筆記] Ultimate AWS Certified Developer Associate (153)
  • [筆記] Create-React-App TypeScript 加入 webpack alias 別名方法
  • [筆記] React Router DOM Flick 延遲載入元件搭配切換頁面閃爍問題
  • [筆記] Ultimate AWS Certified Developer Associate (152)
  • [筆記] Chakra UI v2 的夜間模式 Dark Mode 的思維模式
  • [筆記] Ultimate AWS Certified Developer Associate (151)
  • [筆記] Google JavaScript Style Guide 閱讀筆記 – 變數命名
  • [筆記] 安裝 react-router-dom v6.4 以後版本出現的路由切換閃爍問題
  • [筆記] 初始化 create-react-app 搭配 pnpm 出現錯誤的解方
  • [筆記] 解決 Delete ‘CR’ eslint (prettier/prettier) 的錯誤
  • [筆記] Github 更新 Personal Access Token
  • [筆記] Ultimate AWS Certified Developer Associate (150)
  • [筆記] React Router DOM 切換頁面短暫出現 Fallback 404 error 的解決方法
  • [筆記] React Hooks 起來 – Ch7 – Vite 佈署到 Github Pages 的注意事項
  • [筆記] Ultimate AWS Certified Developer Associate (149)
  • [筆記] React Hooks 起來 – Ch7 – 切換畫面元件
  • [筆記] Ultimate AWS Certified Developer Associate (148)
  • [筆記] React Hooks 起來 – Ch6 – 建立自己的 Hook
  • [筆記] React Hooks 起來 – Ch6 – useMemo 的使用
  • [筆記] React Hooks 起來 – Ch5 – useCallback 和 TypeScript 注意事項
  • [筆記] Ultimate AWS Certified Developer Associate (147)
  • [筆記] React Hooks 起來 – Ch5 – useState 和 useEffect
  • [筆記] 如何在 Vite 中取得 Github Action 的變數
  • [筆記] React Hooks 起來 – Ch4 – 增加狀態管理
    • 按讚加入粉絲團

    延伸閱讀