【2025年更新/UI3解説追加】WebデザインツールFigmaの準備・使い方の基礎から、実際の制作方法まで丁寧に解説！

【2025_追加情報】動画内で、「FigmaがAdobeに買収された」と言及している件について、動画撮影時ではそのように話が進んでいましたが、その後、買収は白紙となっております。

ここからは、実際にFigmaの画面も使いながらご説明していきます。

講座内で使用しているFigmaファイルをこのレクチャーに添付していますので、ダウンロード＆インポートしてご利用いただけます。

Figmaファイルをインポートせず、ご自身で新しくファイルを作成いただいても問題ありません。Figmaファイルのインポートには少し時間がかかりますので、通信環境の良いところで行ってください。

⚠️ Figmaファイルを使う際の注意点

• Figmaのファイルは「.fig」形式となっています。

• 普通の写真などのようにファイルを開くことはできず、Figmaへのインポートのみ可能です。

• そのため「.fig」ファイルを開こうとすると「書類“Figma WorkShop.fig”を開くために設定されているアプリケーションがありません。」のようなエラーが表示されますが、ファイルに問題はありません。

• Figmaへのインポート方法は動画内の説明をご覧いただくか、以下の手順を参考にしてください。

  • https://help.figma.com/hc/ja/articles/360041003114-Figma%E3%81%B8%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88

アップデート情報

• 新しいUIでは [Appearance（外見）] エリアが追加されました。不透明度・角丸・要素の表示/非表示・ブレンドモードがまとめて表示されています。

• それぞれの機能は、以前のUIから変更はありません。