Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。11:00フロントエンド技術解説アプリケーション開発デザインポスト本連載では、ソフトウェアエンジニアがFigmaというデザインツールを通してデザインのことを学んでみたくなる、Figmaを使って日々業務の効率化や、楽しくするきっかけを得られるものとなっています。第4回では、プログラミングでFigmaを操作する方法を解説していきます。3ウィジェットについておわりにはじめに本連載最後である第4回では、プログラミングでFigmaをあれこれ操作する方法を解説していきます。プログラミングでFigmaを操作できるようになると、エンジニア自身の生産性アップに活用できますし、デザイナーの作業効率化やできることを増やすことにも貢献できて感謝されること間違いなしです。Figmaに対してプログラミングを実行する3つの方法Figmaに対してプログラミングを実行する形は大きく次の3つがあります。APIプラグインウィジェットざっくりと次のようなメリット・デメリットがあるので、やりたいことに応じて適切な手段を選んでいきましょう。APIは、UIを通さず実行できるのでCIに組み込む時などに重宝します。実行するためにはFigmaのアクセストークンを取得する必要があるので、まずFigmaを開いて右上のアイコンを押し「設定」を押します。スクロールすると「個人アクセストークン」というセクションがあるので、ここにトークンの名前をつけて「Enter」を押すと新しいトークンが発行されます。後ほど使うので大事にコピーして保存しておいてください。※自分に権限があるFigmaファイルの読み書きができてしまうので外部には漏れないように注意しましょう!続いてAPIを実行したい対象のファイルIDを取得します。ファイルIDはURLにIDが使われているのでそれをコピーするだけです。https://www.figma.com/file/ZgWqWx2XXXXXXXXXXXXXX/このURLのfile/より後ろの部分です。デスクトップアプリとしてFigmaを開いている場合はタブの部分を右クリックして「リンクをコピー」を押せばURLがコピーされます。準備ができたので、早速APIを叩いてみましょう。適当なJSファイルを作って下記のコードを書いてください。サンプルとしてスタイルを取得するAPIを呼び出しています。res.json();};fetchStylesData().then(console.log);このように、APIはトークンやファイルIDなどを取得したら簡単に利用できます。Resourcesなどの情報も取得することができます。詳しくはドキュメントを読んでみてください。APIを操作できるfimga-jsというライブラリがあります。APIを操作できる&型もつくのでぜひ試してみてください。詳しいフロントエンドエンジニア。科卒業後、ソフトウェアエンジニアとして働き始める。魅せられ、エンジニア目線でデザインプロセスの改善やデザインからコードへの自動化などを手がける。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。