Figma:在整個企業中進行設計,原型設計和協作

菲格瑪

在過去的幾個月中,我一直在為客戶開發和集成高度定制的WordPress實例。 這是樣式的平衡,可以通過自定義字段,自定義帖子類型,設計框架,子主題和自定義插件擴展WordPress。

困難的部分是我是通過專有原型平台的簡單模型來實現的。 雖然它是可視化和設計的可靠平台,但它並不容易轉換為HTML5和CSS3。 加上所有其他迭代,我的日子變得非常沮喪,進度非常緩慢。

令人困惑的一個問題是,設計機構只是交出了原型,而沒有提供任何類型的主樣式表……因此,我們正在通過將原型導出到其中來實現這一目標。 飛艇,然後將CSS轉換為WordPress。 所需的步驟數量以及平台之間的差距使該過程變得困難。 更不用說試圖簡化速度和可伸縮性的複雜性

菲格瑪

菲格瑪 使用一個平台將所有工作集中在一起,該平台可在團隊的每個成員中進行設計,反饋和協作,其中包括:

  • 設計師 –在上下文中進行實時協作。 永遠不必擔心文件過時或覆蓋彼此的工作。
  • 利益相關者 –發送鏈接以收集反饋,獲取變更請求,並允許涉眾在設計中進行副本更新。
  • 開發人員 –工程師始終可以訪問當前的事實來源,並且可以檢查元素,導出資產和復制代碼。

Figma具有一些獨特的功能:

  • 布爾運算 –使用四個公式:並集,相減,相交和排除,您可以精確地組合任意一組形狀圖層。
  • 組件 –使用跨文件的可重用和可伸縮元素來更快,更一致地構建。 訪問每個實例中的圖層,以便您可以直觀地內聯編輯和覆蓋文本和圖像。
  • 約束 –通過將對象固定到父框架,將對象捕捉到網格或什至通過創建可縮放的組件來縮放設計以適合任何屏幕尺寸。
  • 設備框架 –在正確的環境中展示您的設計。 您甚至可以在縱向和橫向模式之間進行選擇。
  • 相互作用 –通過定義單擊,懸停,按下等時的交互作用,使原型栩栩如生。
  • 覆蓋 –通過相對和手動定位,您可以完全控制疊加層的顯示位置和顯示方式。
  • 像素完美 – 60fps交互式編輯為您帶來超清晰,像素完美的預覽和導出。
  • 原型 –通過連接屏幕並添加交互,過渡,疊加等元素來快速構建流程。 無需同步到其他工具,只需共享一個URL即可接收反饋。
  • 響應式設計 –拉伸您的佈局,看看它們將如何響應屏幕尺寸的變化。

響應式原型

  • 滾動 –在單個形狀或整個父框架中啟用水平,垂直或任何方向的滾動。
  • 樣式 –在所有項目中同步顏色,文本,網格和效果。 保留較少的文本樣式,並使用Figma獨特的網格樣式在不同設備上調整設計。
  • 團隊圖書館 –在Figma中共享組件和样式-無需共享驅動器或其他工具。 您和您的團隊可以通過簡單的發布工作流程來控制更改的發布方式和時間。
  • 矢量網絡 – Figma創建了更直觀的鋼筆工具,可以在直接操作的同時保留與路徑的向後兼容性。

企業 對於客戶而言,Figma可以大規模提高一致性,效率和安全性。 該平台使企業客戶可以通過團隊庫輕鬆管理設計系統,並能夠在整個組織中上載和共享自定義字體。 包括單點登錄,訪問控制和活動日誌。

Figma入門

Figma有大量的教程供他們選擇 Youtube頻道,這是一個入門視頻:

菲格瑪 使開發人員能夠直接從設計文件檢查,複製,導出資產和復制CSS。 您還可以通過集成啟用現有的工作流程,包括 飛艇, 聲碼, 吉拉, Dropbox的, 原型原則 對於Mac。 它們還具有強大的API。

免費試用Figma

你覺得呢?

本網站使用Akismet來減少垃圾郵件。 了解您的評論如何處理.