Every text style is a component現在，在屏幕中添加文本的時候，必須從UI組件庫中調取相關的文本。為什麼？因為當你進行到設計階段的時候，如果你想要修改所有界面的文本效果，你就可以一次性在組件庫中修改，然後所有內容就都會跟著變化了。這個概念適用於所有組件。
My Airbnb UI library用這個方法建立所有的組件，比如：Buttons, Inputs, Dropdowns, Navbars, Cards, Labels, Footers等等。我一般先在屏幕中設計這些組件，用頁面需要的內容來創建，然後再拖進UI庫中，將其變為組件，最後再拷貝回頁面中。
My Airbnb wireframes在項目結尾時，所有在你設計稿中的元素都應該是一個個Component，這不僅是為了節省工作時間，更是為了保持產品的一致性，這在UI/UX設計中是非常重要的一點。2.為線框圖添加交互在你做好線框圖，創建好UI組件庫之後，現在應該為線框圖添加交互了。幸運的是，Figma可以非常輕鬆的做到這一點。你只需要在Prototype模式下，將元素拖動到它需要鏈接的頁面中就可以了。記住如果鏈接到一個原始組件下，那麼所有的拷貝項都會應用同樣的鏈接，示例如下。
Making the wireframes interactive下一步就是將可交互的線框圖拿給老闆們看，在prototype上直接獲取反饋和意見。3.設計體系風格化一旦你的可交互的線框圖被確認後，現在可以創建風格化的設計體係了。在這一步中，你向UI組件庫中建立的Component加入品牌設計原則、顏色和設計細節等等，然後就可以將你的線框圖轉變為一個高質量的設計原型了。
A style change on a component applies on all its instances我喜歡提前向老闆們展示一些設計規範，在給他們看所有的設計圖之前就針對設計風格來獲取反饋，我還喜歡添加一些UI組件在上面，讓他們看看這些組件是怎麼組合設計的。
A basic UI library for Airbnb4.精打細磨一旦設計風格和規範被確認了，就剩下更精確的打磨UI交互了。接下來需要確認每個元素都在相應的位置，每個交互都鏈接到正確的頁面。而且有些元素可能不是組件，也同樣需要精細化設計，或者需要補充到組件中。確保原型可以正常交互，並且確保所有的鏈接都正常運轉。
My Airbnb prototype最終的原型完成！現在你可以發送鏈接給老闆得到最終的確認了，然後，將其交付給開發人員，告訴他們如何從Figma下載圖片，同時告訴他們還可以直接在原型上標註問題。
