設計師與開發者的溝通工具

# 設計師與開發者的溝通工具 ### 常用的社群討論工具 - Slack - Teams - Telegram - Trello - ToDoList - AirTable - zoom - Meet - ~~沒有Line~~ [勾✅]Also send to can-share-anything ![](https://i.imgur.com/NP8Bu9E.png) ### 設計師的原型工具 ###### 主要用於繪製 UI 與 prototype #### Sketch http://www.Sketch.com/ ![](https://i.imgur.com/8nFB1sA.jpg) #### Adobe XD https://www.adobe.com/tw/products/xd/compare-plans.html ![](https://i.imgur.com/28IcGoS.png) #### Figma (Sketch+Zeplin) ###### 協作與線上檢視是ㄧ大優點，Figma 的最大亮點就是協作功能，它能同時讓許多人在單一檔案內工作，當需要跟其他人溝通時，就可以看到你的即時畫面，還能直接畫圖給他看。 https://www.figma.com/ ![](https://i.imgur.com/royndAi.png) ### 設計師與前端的溝通工具 ###### 主要用於讓前端理解版面 #### Markman ###### 適合工程師＆ＱＡ提出截圖時搭配使用 http://www.getmarkman.com/ ![](https://i.imgur.com/VeZ5kjm.png) #### Zeplin ![](https://i.imgur.com/QmwzR7T.png) # !!PDF ＆ PNG !! ### !!注意!! !!注意!! !!注意!! ### 非設計人員可能沒有以上任何可以開啟你檔案的軟體！! 關懷 RD 與 PM 從你我做起！ PDF 可以於每告一段落(UI Release)時產出，在討倫中建議任何問題都使用截圖，或是匯出該元件完整PNG/SVG 檔案，這可以讓RD快速掌握需求範圍也方便比較差異，PM/market 也可以做素材圖使用不用一直找你要XD

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.