ボタンの見た目を比較し、Figmaの画面デザインで検討するための素材パックを無料配布しています。この記事には、既存のボタン素材35種類の見本を掲載しています。
配布形式は .fig です。画像の見本と、編集用のFigmaファイルを区別してください。更新履歴に記録されている収録数は、2024年3月25日時点の35種類です。
ボタン35種類の見本
文字量、背景色、輪郭、装飾を見比べて、作る画面の用途に合う候補を選びます。見本画像は外観の参考であり、クリック時の動作やHTML・CSSの実装を提供するものではありません。
.figファイルの入手先
ボタン素材の配布フォルダーで、ファイル名と拡張子を確認してダウンロードしてください。2026年10月3日から無料配布とし、codocでの購入は不要です。商用利用・加工・再配布・顧客への納品の条件が不明な場合は、使用前に運営者へ問い合わせてください。
Googleドライブのプレビュー表示と、Figmaへ読み込む操作は別です。「プレビューできません」と出た場合も、まず配布ファイルをダウンロードしてFigma側の手順を確認します。
Figmaへ読み込み、作業用のコピーで編集する
Figmaのファイルブラウザーで Create new → Import → Import from computer を選び、取得した .fig を読み込みます。原本を残し、作業用のコピーで必要な部品を扱ってください。
詳しい権限・フォントの確認は.figの読み込み方にまとめています。この読み込み手順はFigma公式の案内に基づきます。
ボタンを編集するときの確認点
- ラベルを実際の文章へ変更し、短い文言と長い文言で収まりを確認する。
- 使用するフォントと太さを確認し、置き換えた場合の文字幅を確認する。
- 背景色と文字色を変更した後、画面の背景上で読めるか確認する。
- 部品がインスタンスの場合は、個別の変更と元コンポーネントの変更を区別する。
- PC・スマホの画面幅で、余白や近くの部品との間隔を確認する。
再利用の操作はアセットとライブラリの使い方を参照してください。画像で共有する場合は書き出し倍率の設定も確認できます。
関連する素材
見出し素材40種類／SWELL向けFigmaテンプレート／Figmaの使い方まとめ
button_all.figの読み込み確認
2026年10月3日、ブラウザー版Figma Designの日本語UIで、配布ファイルをドラフトへインポートして確認しました。これは今回の読み込み・表示の確認で、すべての文字の編集、フォントの充足、利用環境での再現を保証するものではありません。
Page 1にbutton_000001〜button_000035のフレームを確認しました。button_000004を選択すると、右側に幅300・高さ300が表示されました。この300×300は見本全体のフレーム寸法で、内側のボタンだけの寸法ではありません。
選択したフレームに2x・PNGの書き出し設定がありましたが、今回の検証では出力ファイルを取得していないため、書き出し後のピクセル寸法は未確認です。