Figmaの神プラグイン、Google sheets syncはGASと一緒に使え！

こんにちは、いとうです。最近のデザインツールの進化はすごいですね。Figmaのプラグインはサードパーティ製のものが最初はあり、一度脆弱性の問題から消えかけていたのをFigma公式が実装してしまったという過去があります。

壮絶な過去があるFigmaのプラグインの中でも私が一番推してるのは、この「Google sheets sync」!! Google spreadsheetのセルのデータをFigmaのモックに反映させることができます。すごいですね。

Figma - Google Sheets Sync | Sync content from Google Sheets directly into your Figma file. // This is not an official plugin...

使い方は割愛しますが、上の動画を見ただけでなんとなくすごいというのが伝わると思います。

さて、このGoogle sheets syncですが前提としてGoogleスプレッドシートを使います。Googleのアプリケーションの多数はGoogleが提供しているGoogleAppsScriptというものが使えます。
例えばGoogleドライブの階層を読み取って、それをGoogleスプレッドシートに反映...なんてすればチーム内のドライブの階層を共有してどこに何があるかがわかるなんてこともできます。

そのことを含めて今回このようなスプレッドシートを作成しました。

linker_sheeds

スクリプトエディタにはWebサイトの情報を取得してセルに反映させるコードが書かれています。それぞれFavicon、サムネイル、タイトルに、カスタムで誰が追加したのか、いつ追加したのかなんて情報を書き込みます。

コードはこんな感じでQiitaや様々なサイトから拝借させていただきました。

function getTitle(url) {
 var response = UrlFetchApp.fetch(url);
 var myRegexp = /<title>([\s\S]*?)<\/title>/i;
 var match = myRegexp.exec(response.getContentText());
 var title = match[1];
 return title.replace(/(^\s+)|(\s+$)/g, "");
}

function getfavi(url){
 var favicon = "https://www.google.com/s2/favicons?domain_url=" + url
 return favicon
}

function getPhoto(url){
 var si = SiteInfo.getInfo(url);
 if(si.photo === ""){
   return "https://wired.jp/wp-content/uploads/2018/01/GettyImages-522585140.jpg"
 }
 else{
   return si.photo
 }
 
}

function getData(id, sheetName) {
 var sheet = SpreadsheetApp.openById(id).getSheetByName(sheetName);
 var rows = sheet.getDataRange().getValues();
 var keys = rows.splice(0, 1)[0];
 return rows.map(function(row) {
   var obj = {}
   row.map(function(item, index) {
     obj[keys[index]] = item;
   });
   return obj;
 });
}

function doGet(request) {
 var func = 'jsondata';
 var data = getData('xxx_スプレッドシートのURL_xxx', 'Sheet1');
 return ContentService.createTextOutput(func + '(' + JSON.stringify(data, null, 2) + ')')
 .setMimeType(ContentService.MimeType.JAVASCRIPT);
}

上のコードを実行させて実際にFigmaの方でGoogleSheetsSyncを使って読み込んでみたものが下の動画です。

上手くいってますね。

最後に

いよいよデザイナーもプログラミングができないといけない時代になってきましたね...。私の場合はProgateで基礎を覚えて応用は独自で学んできました。でも意外とできるのでこれくらいのプログラミングだったら誰でもすぐにできるようになります！

Progate(プロゲート) | Learn to code, learn to be creative.

それではまた👋👋