あやね
デザインファイルの受け渡しから実装までの流れがスムーズかどうかで、プロジェクト全体のスピード感はかなり変わってきます。とくにデザイナーとエンジニアが別チームで動いている現場では、「仕様が伝わらない」「CSSの値がわからない」といったやり取りだけで、思った以上に時間を取られてしまうことも珍しくありません。
そんな中で注目されているのが、Figmaの「Dev Mode（開発者モード）」です。デザインファイルから直接コードを確認できる便利な機能ですが、ベータ期間を終えて有料プランでの提供に切り替わっており、チームの人数やプランによっては月々のコストがそれなりの負担になるケースも出てきています。個人開発者やスタートアップ、予算の決裁に時間がかかる企業のデザイナーからすると、「便利なのはわかるけれど、この機能のためだけに追加費用をかけるのは正直悩ましい」というのが本音のところではないでしょうか。
こうした背景もあり、Figmaと同じような感覚で使える無料の代替ツールを探している方が増えています。今回紹介する Pixso は、Figmaファイルをそのまま読み込める互換性を持ちながら、Dev Modeに相当する開発者向けモードを無料で利用できるオンラインデザインツールです。この記事では、Pixsoの開発者モードでできることと、既存のFigmaファイルをPixsoに移す具体的な手順を、実際の操作画面に沿って解説していきます。
Pixso Dev Modeとは何か
開発者モードでできること
Pixsoの開発者モードは、デザインが完成したあとにエンジニアへ引き渡すためのビューだと考えるとイメージしやすいと思います。デザイナーが作ったフレームやコンポーネントを、コードベースの情報として確認できるようにする仕組みです。主な機能は次の5つです。
1. コードの書き出し 選択した要素のHTML、CSS、JavaScriptを自動で書き出すことができます。ボタンの角丸の数値やドロップシャドウの設定など、見た目だけでは判断しづらい細かい部分も、コードとして確認できるので実装時の認識ずれを減らせます。リモートワークが中心のチームでも、口頭やチャットで数値を確認し合う手間が減るのは地味に助かるポイントです。
2. カスタムCSSの追加 自動生成されたコードに対して、独自のCSSスタイルを追加で当てることができます。デザインシステム側で細かいルールを持っているチームでも、そのルールに合わせて調整しやすくなっています。
3. レスポンシブデザインの確認 画面サイズやデバイスを切り替えながら、レイアウトが崩れていないかをその場でチェックできます。スマートフォン向けのUIを別画面で作り込む必要がなく、同じ画面内で確認と調整が完結するのは作業効率の面でもメリットがあります。
4. インタラクション・アニメーションの確認 画面遷移のアニメーションや、ボタンを押したときの動きなど、インタラクションデザインの部分もプロトタイプとして確認できます。仕様書だけでは伝わりにくい「どういう動きになるか」を、実際に触りながら共有できるのは、エンジニア側にとってもありがたい機能だと思います。
5. チームでの共同作業 デザインファイルのコードをチームメンバーと共有し、リアルタイムで更新内容を反映できます。デザインとエンジニアリングの担当者が別々の場所で作業していても、常に最新の状態を見ながらすり合わせができるため、伝達のタイムラグによる手戻りを防ぎやすくなります。
こうして見ていくと、Pixsoの開発者モードは単なる「コードを見るための画面」というより、デザインと実装のあいだをつなぐ橋渡し役として設計されていることがわかります。特別な有料プランに入らなくても、こうした機能が標準で使えるのはPixsoの大きな特徴です。
開発者モードの使い方
実際の操作は、大きく分けて3つのステップで完結します。
ステップ1：開発者モードに入る
画面右側のパネルにあるボタンをクリックすると、開発者モードに切り替わります。切り替えた直後は、まず最上位のフレーム（トップフレーム）だけが一覧として表示される仕組みになっています。右側のパネルからは、各スライスの詳細情報を確認したり、デザイナーが作成したスライス画像をまとめてダウンロードしたりすることも可能です。
このとき注意しておきたいのが、テキストレイヤーやベクター図形、コンポーネントといった個別の要素は、初期状態では表示されないという点です。もしこれらの要素を開発者モード上で確認したい場合は、対象の要素を選択したうえで親フレームを作成してあげる必要があります。ショートカットはCommand（Mac）またはCtrl（Windows）＋Option（Mac）またはShift（Windows）＋Gなので、覚えておくと作業がスムーズになります。
ステップ2：開発者モードを共有する
Pixsoでは、開発者モードの画面をそのまま他のメンバーに共有することができます。画面上部のシェアボタンをクリックすれば共有用のリンクがコピーされる仕組みで、閲覧権限は元のデザインファイルの権限設定がそのまま引き継がれます。つまり、あらためて権限を設定し直す手間がかからないということです。エンジニア側に「このリンクを見てもらえれば実装に必要な情報が全部わかる」という状態を、URLひとつで作れるのは実務上かなり便利です。
ステップ3：スライドショーモードで確認する
キャンバス上でフレームを一つひとつドラッグしたり拡大縮小したりしながら確認するのは、地味に手間がかかる作業です。Pixsoにはこの手間を減らすための「スライドショーモード」が用意されています。確認したいフレームをダブルクリックするか、ロケートボタンをクリックすると、そのフレームが画面の中央に自動的に表示され、集中して内容を確認できる状態になります。
このシングルフレーム表示の状態でも、要素を選択してコードやスライス情報を確認したり、ダウンロードしたりすることは引き続き可能です。ほかのフレームに切り替えたい場合は、画面下部の切り替えボタンを使うか、左側のパネルにあるフレーム一覧から選択します。シングルフレームモードを終了したいときは、画面左上の終了ボタンをクリックすれば、通常のキャンバス表示に戻ります。
FigmaファイルをPixsoにインポートする方法
すでにFigmaで作業を進めているデザインファイルがある場合、それを一からPixsoで作り直す必要はありません。Pixsoは現在、Figmaファイルを取り込むための方法を2つ用意しています。ネットワーク環境や作業の状況に応じて、どちらか都合の良い方を選んでください。
- 方法1：Figmaファイルをローカルに保存してからPixsoにアップロードする
- 方法2：Figmaファイルの共有リンクをコピーして、PixsoのURLインポート機能に貼り付ける
結論から言うと、方法1のほうが安定して読み込めることが多いのでおすすめです。方法2はインターネット環境の影響を受けやすく、社内ネットワークの制限がある環境や回線が不安定な場合に、読み込みに時間がかかったり途中で止まってしまったりすることがあります。急ぎでない場合を除いては、まず方法1を試してみるのがよいでしょう。
方法1：ローカルに保存したFigmaファイルをインポートする
1. Figma側でファイルをローカルに書き出す
まずFigma上で、対象のファイルをローカル環境に書き出します。
2. Pixsoのワークスペースでインポート機能を探す
Pixsoのワークスペース画面から、ファイルをインポートするための項目を探します。
3. Figma形式（.fig）のファイルを選択してインポートする
該当するファイルを選択します。1つのファイルだけでなく、複数のファイルをまとめて一括インポートすることも可能です。プロジェクトの規模が大きく、複数のFigmaファイルを一度に移行したい場合には、この一括インポート機能が役に立ちます。
4. インポート完了後の操作
インポートが終わると、続けて別のファイルをアップロードするか、そのまま取り込んだファイルを開くかを選べます。
なお、Figmaファイルはワークスペース画面に直接ドラッグ＆ドロップするだけでもインポートできます。ボタンを探して操作する手間を省きたい場合は、この方法のほうが早いかもしれません。
方法2：リンクを使ってFigmaファイルをインポートする
1. Figmaファイルのリンクを取得する
アドレスバーに表示されているURL、共有メニューのポップアップ、またはファイル一覧の各ファイルから、リンクを取得します。
ここで一つ注意点があります。Pixsoは非公開設定（プライベート）のファイルリンクには対応していません。インポートする前に、Figma側でファイルの共有設定を「リンクを知っている全員が閲覧できる」状態に変更しておく必要があります。社内の情報管理ルールでリンク共有の範囲が決まっている場合は、事前にルールを確認したうえで設定を変更するようにしてください。
2. Pixsoのワークスペースでインポート機能を探す
こちらは方法1と同じ手順です。
3. Figma（.fig）を選択し、URLインポートを選ぶ
インポート方法の選択画面で、URLインポートの項目を選びます。
4. Figmaアカウントとの連携を許可する
インポートを実行する前に、認可のためのボタンをクリックする必要があります。Figmaのログイン画面が表示されるので、自分のアカウントでログインし、アクセスを許可する操作を行います。この連携は初回だけ必要になることが多く、一度許可しておけば、次回以降は同じ手順を繰り返さずに済むケースがほとんどです。
5. リンクを貼り付けてインポートを実行する
取得しておいたファイルリンクを入力欄に貼り付け、インポートボタンをクリックします。処理が完了すると、そのままPixsoのワークスペース上でファイルを閲覧・編集できるようになります。
よくある質問
Q. Figmaの有料プランを解約しても、これまで作ったファイルをPixsoで編集できますか？
はい、可能です。Figma上でファイルをローカルに書き出しておけば、有料プランを解約したあとでもそのファイルをPixsoにインポートして、引き続き編集や開発者モードでの確認を行うことができます。プランの見直しを検討している場合は、解約前に必要なファイルを一通り書き出しておくと安心です。
Q. チームメンバー全員がPixsoのアカウントを持っていないと、共同で作業できませんか？
閲覧だけであれば、共有リンクを送ることでアカウントを持っていないメンバーにも内容を確認してもらえます。ただし、コメントの追加や編集など、より踏み込んだ作業をしてもらいたい場合は、それぞれがアカウントを作成しておくほうがスムーズです。特にエンジニアとデザイナーが別部署にまたがるプロジェクトでは、開発者モードの共有リンクを送るだけでも、認識合わせの手間はかなり軽減されます。
Q. 大きめのFigmaファイルでも問題なくインポートできますか？
基本的には対応していますが、ファイルの容量が大きい場合や、コンポーネントの数が非常に多い場合は、インポートに通常より時間がかかることがあります。急いでいるときは、ネットワーク環境が安定しているローカルインポートの方法を選んでおくと、失敗のリスクを減らせます。
Q. FigmaとPixsoを行き来しながら使い続けることはできますか？
現状の運用としては、Figma側で編集を続けたファイルを都度Pixsoに再インポートする形になります。自動で同期される仕組みではないため、どちらかのツールを「本番」として決めておき、必要なタイミングで書き出し・取り込みを行う運用にしておくと、バージョンの混乱を防ぎやすくなります。
まとめ
Figma Dev Modeの有料化をきっかけに、デザインと実装のあいだをつなぐ工程を見直したいと考えている方にとって、Pixsoの開発者モードは十分に検討する価値のある選択肢だと思います。コード書き出しやレスポンシブ確認といった基本的な機能を無料で使えるうえ、既存のFigmaファイルもそのまま移行できるため、今のワークフローを大きく変えずに乗り換えられる点は安心材料になるはずです。
もちろん、チームの規模や既存の運用ルールによっては、そのままFigmaを使い続けたほうが合っているケースもあるでしょう。まずは手元にあるFigmaファイルを一つ Pixso にインポートしてみて、開発者モードの使い勝手を実際に確かめてみるのがおすすめです。使ってみたうえで、自分たちのチームに合うかどうかを判断するのが一番確実な方法だと思います。
