不知道會捶心肝的 UI 標註協作神器!省時又不用輸出一堆圖,效率狂飆就靠它

【我們為什麼挑選這篇文章】

這是一個讓團隊能交流的超棒協作平台,而文章作者 Jerry Lin 同時身為網頁設計師和圖像設計師,將會一步步介紹使用方法和特色,相信你也可以超快上手!

(責任編輯:謝秉芸)

 

Sympli 是一套涵括設計端與工程端的協作工具,除了網頁外,還有 Sketch、Xcode、Android Studio 的對應插件,除了設計與工程也有便於和 PM 溝通管理的功能。

Share Project 提供連結邀請與信箱邀請,2 個都會讓被邀請者成為 User,管理者可以把 User 升級為 Power user (讓̶你̶誤̶刪̶檔̶案̶的̶時̶候̶有̶代̶罪̶羔̶羊̶),Power user 賦予和 Project owner 一樣的權限,包含上傳、更新、刪除等,但此功能需要解(ㄈㄨˋ)鎖(ㄑㄧㄢˊ)。

Overview

Dashboard — Design

  1. 由左至右三個小 icon 代表的是
  2. Assets,在 Sketch 裡的 symbol 會被建立為一個 png 格式的 asset,工程端可以直接載來用,雖然工程端快速出圖好用,但對設計端的作業流程來說就需要把所需圖檔全部建立成 symbol 了。
  3. Comments,註記數。
  4. 版本號碼
  5. 下載縮圖:把游標放在縮圖卡上,右下的 icon 可以讓你直接下載這個 Sketch Artboard 的 png 格式的縮圖,你就不必老是麻煩設計師出圖或是歪歪的 sceenshop 啦~
  6. 提醒通知:主要拿來看 comments 的,不必點到檔案內才能知道 有̶被̶嗆̶ 。

Dashboard — Summary

  1. 系統會自己把檔案內的顏色命名,也可把游標放在顏色上選 edit 自己更名,點 brand 則可以註記成主色,被註記的主色會自動排到第一順位。
  2. 字型方面,如果有上傳字型的話則可以直接從這邊下載。
  3. 上傳字型之後,可以建立 Brand Book 供其他專案使用

Design Page

Spec 是最常用的功能,可以看到個元件間的相對位置,右邊欄則是縮圖和更詳細的絕對位置,也支援圖層搜尋和 Ruler 定位,comment 功 能只要點擊拖曳到你想註記的地方即可。

右側欄分別是:

-Assets,可以直接下載 png 檔加速作業

-Colors,除了色碼外,也可以按 copy 直接複製程式碼

-Fonts,除了字型、色碼、還有對齊方式

-Messages,可以依時間順序看到所有註記

 

Xcode & Android Studio

安裝完 plugin 之後會在右上角看到 sympli 的小 icon,使用方法和 Web 端一樣的,同樣的 icon 就對應同樣的功能

也可以直接在 Xcode 裡面註記

更好的是可以直接 import 圖檔、字型

至於 Android…… 等比特幣上 5000 再說 ( ・ω・ )/

好啦~附上慣例的傳送門 er:Sympli.io

祝大家快樂追殺自家設計師~嗚嗚……

作者介紹

Jerry Lin, 目前動態:穩定過勞中……

重陽願望是帶著我的 微小 生物 去誠品擺個攤~

 

(本文經作者 Jerry Lin 授權轉載,並同意 TechOrange 編寫導讀與修訂標題,原文標題為 〈Sympli 追殺設計師的跨平台好物〉。)

 


【TechOrange 徵才:社群編輯+實習編輯】

►你是否常在各類豐富的科技趨勢裡流連忘返?
►你是否常被創業故事弄得熱血沸騰無法成眠?
►你是否喜歡很有挑戰性、嘗試新事物的工作?

我想你大概就是得了 TO 病,不加入不行了。
準備好你的履歷自傳,寄至  jobs@fusionmedium.com
記得標註你要「應徵 TO 社群編輯」,才不會跑錯棚哦!
>>    詳細職缺訊息


延伸閱讀

關於 iOS 切圖那檔事:iOS 工程師和設計師們一定要知道,才能快樂合作不吵架啊!
【設計師必讀的色彩心理學】藍色是 UI 設計中最重要的顏色,為什麼?
產品設計師看 Fintech 金融科技:這行業要的不是跨領域人才,是「跨超多領域」人才


321 倒數 ,2020 只剩 3 年,區塊鏈、5G、AI 技術將成熟到位。
從產業到社會,台灣沒剩多少時間準備。

12/9 TechOrange、BuzzOrange「CONNECT 2020」年度產業論壇,連結未來改革能量

點關鍵字看更多相關文章: