Figma

Figmaとは

Figmaはブラウザで動くAI デザインツールだ。手作業でキャンバスを触る時間が中心にあることは変わらない。画面を描き、プロトタイプを組み、共通のデザインシステムを保ち、開発側へ渡すまでを一つの場所で済ませられる。ファイルを書き出して受け渡す作業が要らない。

守備範囲はインターフェース設計にとどまらない。1つのファイルにFigJamのホワイトボード、プレゼン、Figma Drawのイラスト、Figma Buzzの販促素材、Figma Sitesで公開したページを同居させられる。Figma Makeは指示文や既存のフレームから、実際に動くアプリを作る。Figmaエージェントはこれらの道具を横断し、レイヤーの編集、シェーダーの生成、小さな自作ツールの組み立てまでこなす。

全体をつなぐのはファイルそのものだ。デザイナー、ライター、エンジニアが同じキャンバスを開き、コメントを該当レイヤーに残し、変更をその場で見る。開発側はDev Modeで寸法、素材、コード片を取得し、Figma MCP サーバーが同じ文脈を外部のコーディングエージェントへ渡す。

制約は主に料金と実務の側にある。料金は席単位で、席の種類によって使える機能が変わる。AI機能は月ごとのクレジットを食うため、毎日エージェントを走らせるとプラン料金を超える。SitesやBuzzを含む新しい道具はベータ版のままで、画面も上限もリリースごとに動く。

はじめかた

1. figma.comで無料アカウントを作る。メール、Googleアカウント、企業のSSOのいずれかを使う。Starterプランはカード登録が不要だ。
2. デザインファイルを開き、作業する画面に合うフレームサイズを選ぶ。完成したファイルの構成を知りたいならCommunityのテンプレートから始める。
3. フレーム、オートレイアウト、コンポーネントで組み立てる。色、テキストスタイル、コンポーネントの方針が固まったらライブラリとして公開する。
4. プレビューでプロトタイプを動かす。別案を見たいときはFigma Makeを開き、動かしたいアプリを言葉で説明する。
5. リンクかメールでチームを招き、席種を割り当てる。実装に入る段階でDev Modeを開く。