FigMarkDoc is a Figma plugin that helps product managers or marketers easily add requirement documents to Figma, simplifying the collaboration process between designers and themselves.
Why develop FigMarkDoc?
In many teams, whether using Notion, PowerPoint, or Confluence, "writing documents" remains the preferred method for freezing requirements. However, issues and requirements are often discovered, proposed, and modified during the design or development process, and these discussions more frequently occur in Figma design files rather than in PRDs.
Figma's product lead, Mihika, also mentioned that when developing Figma Slides, she doesn't write PRDs because they are always outdated, preferring instead to annotate all product requirements directly in the design files.
— Mihika Kapoor, Product Lead at Figma
As a growth product manager and UX designer, I also enjoy annotating design requirements on design files and discussing design solutions with others through comments. However, I believe that using documents to clearly describe the requirement background, solution decision-making process, key user flows, and feature descriptions to a certain extent is still more readable than directly browsing design files.
So, why not write documents directly in Figma?
I found that mainstream documentation tools or current plugins in the Figma Community haven't effectively solved this collaborative workflow, thus, the FigMarkDoc plugin was born.
How to use FigMarkDoc?
When you open the FigMarkDoc plugin, from top to bottom, you'll see simple instructions, a Markdown text input box, a preview button, and a button to create/update documents.
Inputting Text
You can start writing documents directly in the input box using Markdown syntax. Currently, this plugin supports the following styles:
- Headings (H1 - H4)
- Lists (bullet points, numbered)
- Bold, italic (only supported for Western fonts)
Creating and Updating Documents
After writing the document, click "Create/Update Doc", and FigMarkDoc will create a frame named "Markdown Text" for you, arranging your input content in Auto Layout within the Markdown Text, allowing you to freely adjust the frame size.
When you want to update the document content, you can select the Markdown Text and open FigMarkDoc again, then you can continue writing or modifying text content in the editing box. If you have created multiple documents through FigMarkDoc, selecting different Markdown Text will display their respective contents for you to edit.
When editing is complete, just press "Create/Update Doc" again, and the content of the Markdown Text will be updated, marking the time of the last update.
Conclusion
This plugin is still under development, but I have already used it in my actual workflow and have employed it in nearly 10 tasks. I create documents in Figma using FigMarkDoc during task execution, and after confirming that the requirements are unlikely to change further (usually when development is complete and about to enter testing and acceptance), I synchronize the content to another internal knowledge management platform.
If you think this plugin would be helpful for you and you'd like to use it in your own work, feel free to contact me!
FigMarkDoc 是一個 Figma 外掛，幫助產品經理或者行銷人員輕鬆將需求文件加入到 Figma 中，簡化設計師與自己的協作流程。
為什麼開發 FigMarkDoc？
在很多團隊中，無論使用 Notion、PPT、或者 Confluence，「寫文件」始終是作為凍結需求的首選方案。但是大大小小的問題或需求，常在設計或開發的過程中被發現、提出、修改，而發生這些討論的地方，更常是 Figma 中的設計稿而非 PRD 中。
Figma 的產品主管 Mihika 也提出，她在開發 Figma Slides 時不寫 PRD，因為 PRD 永遠是過時的，因此傾向直接把所有產品需求標注在設計稿之中。
另一方面，設計檔作為開發人員開發時的參照物，永遠是最新的... 設計實際上成為了專案中的最終依據，而不是 PRD 文件
— Mihika Kapoor，Figma 產品主管
作為產品增長經理與 UX 設計師，我也很喜歡在設計稿上標註設計需求、透過評論與其他人討論設計方案，但我也認為一定程度的使用文件把需求背景、方案決策思路、關鍵的使用流程和功能描述清楚，還是會比直接瀏覽設計文件來得更易讀。
那麼，為什麼不直接在 Figma 裡寫文件呢？
我發現主流的文件工具或者現在 Figma Community 裡的外掛並沒有很好的解決這種協作流程，因此，FigMarkDoc 外掛應運而生。
FigMarkDoc 怎麼用？
當開啟了 FigMarkDoc 外掛，由上到下你會看到簡單的指引、Markdown 文字輸入框、預覽按鈕，以及建立/更新文件的按鈕。
輸入文字
你可以在輸入框中直接開始使用 Markdown 語法撰寫文件，目前這個外掛支援以下幾種樣式：
- 標題（H1 - H4）
- 列表（列點、數字）
- 粗體、斜體（僅歐文字體支援）
建立與更新文件
當寫完文件後，點擊「Create/Update Doc」，FigMarkDoc 就會幫你建立一個名為「Markdown Text」的 Frame，並將你輸入的內容以 Auto Layout 的方式在 Markdown Text 中排列，以便你自由的調整 Frame 的尺寸。
當想要更新文件內容時，你可以選取 Markdown Text 並再次開啟 FigMarkDoc，接著就可以在編輯框內繼續撰寫或修改文字內容。如果你透過 FigMarkDoc 建立了多個文件，選取不同的 Markdown Text 就會出現各自的內容讓你編輯。
當編輯完成，只要再次按下「Create/Update Doc」，Markdown Text 的內容就會更新，並且標記最後一次更新的時間。
總結
這個外掛目前還在開發中，不過我已經將它用於我實際的工作流程中，並已經在近 10 個任務中使用。我會在任務進行時在 Figma 中以 FigMarkDoc 建立文件，並在確定需求幾乎不會再變動之後（通常是開發完成要進入測試驗收了）把內容同步到內部使用的另一個知識管理平台中。
如果你覺得這個外掛對你來說會有幫助並且也想使用到自己的工作中，歡迎與我聯繫！