# AlfredでFigmaのチーム・プロジェクト・ファイルを素早くの検索ができる「Alfred Figma Workflow」

URL: https://webrandum.net/alfred-figma-workflow/
公開日: 2019-12-18
更新日: 2019-12-18
カテゴリー: 作業効率化
タグ: Alfred, Figma, Workflow
出典: Webrandum（著者: サイトウ マサカズ）

デザインツールのFigmaファイルを検索するWorkflowがFgima公式からリリースされているのに気が付きました。

## Alfred Figma Workflowのインストール

[![](https://www.google.com/s2/favicons?domain=github.com)GitHub![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/e569a26dece1a81b2124756b4b7f913c9cb7de480bc265275264a8bf8cf64262.webp)jonrohan/alfred-figmahttps://github.com/jonrohan/alfred-figmaAlfred workflow to quick link figma projects and files - jonrohan/alfred-figma](https://github.com/jonrohan/alfred-figma)

インストール方法は普通のAlfred Workflowのインストール方法と違って`npm`コマンドでインストールします。

```
$ npm install --global alfred-figma
```

インストール後はFigmaのPersonal Access Tokensを設定します。

Figmaの［Settings］にある「Create a new personal access token」をクリックしてトークンの作成をします（名前は何でもいいのですが、あとで見たときに分かるように「Alfred」としておきました）。

![](https://webrandum.net/mskz/wp-content/uploads/2019/12/image_1-15-1024x646.png)

次に、Alfredの［Workflow］の「Figma Shortcuts」を右クリックして「Open in Finder」でFinderにフォルダを表示させます。

`.env-example`というファイルがあるので、コピーして`.env`にリネーム、このファイルの中にトークンをペーストします。

![](https://webrandum.net/mskz/wp-content/uploads/2019/12/image_2-12.png)

これで最初の設定は完了です。

## Alfred Figma Workflowの使い方

検索するチームを追加したいときは`figma add`のあとにチームのURLをペーストして追加します。

あとはキーワードの`figma`のあとにファイル名を入力してenterを押せばすぐにFigmaでファイルが開けます。

### キーワードの変更

キーワードが`figma`だと、アプリのFigmaを開きたいときに間違えて発火してしまいます。

`fgm`や`fm`など、短縮したキーワードに変更しておくのがオススメです。