Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ Figmaのはじめ方 | Figma基本ツール
FigmaによるUI/UXデザイン

bookFigmaのはじめ方

メニューを表示するにはスワイプしてください

Figmaは、ユーザーインターフェース(UI)やユーザーエクスペリエンス(UX)の作成に広く利用されているクラウドベースのデザインおよびプロトタイピングツールです。デザイナー、開発者、その他プロジェクトに関わるすべてのメンバーと簡単にコラボレーションできるのが大きな特徴です。デザイナーであれば、Adobe Illustratorのようなベクター形式のソフトウェアとして親しみやすく、Adobe XDに慣れている方にも使いやすい設計となっています。

Figmaは、モバイルアプリやウェブサイトのワイヤーフレーム、モックアップ、プロトタイプのデザインに最適です。特にリアルタイムでの共同作業機能が魅力で、チーム全員が同じプロジェクトに同時に取り組み、コメントやフィードバックを残したり、作業の進行をライブで確認したりできます。チームワークを円滑かつ楽しく進めるのに最適なツールです。

FigmaにおけるUIとUXの違いは?

**UI(ユーザーインターフェース)**は、製品の見た目やデザイン、ビジュアル面を指します。Figmaでは、ボタン、アイコン、タイポグラフィ、カラースキーム、レイアウトなどの要素をデザインします。

一方、**UX(ユーザーエクスペリエンス)**は、ユーザーが製品をどのように操作し、どれだけ直感的で満足できる体験かという全体的な流れに焦点を当てます。コンテンツやナビゲーションの構造化によって、シームレスな体験を実現します。

要するに、FigmaにおけるUIは「見た目」、UXは「使い勝手」に関するものです。Figmaは両方をスムーズに扱えるツールを提供し、デザイナーが視覚的に魅力的で使いやすい製品を作るのをサポートします。

Figmaへのリンクはこちら: https://www.figma.com/

それでは、Figmaの画面を見てみましょう!

最後にもう一つ、Figma Communityからファイルを選択すると、私の時のように2つのオプションが表示される場合があります。その違いは次の通りです:

  • 新しいファイルでUIキットを使用:Figmaは、そのファイルに含まれるすべてのアセット、アイコン、コンポーネントを新しいプロジェクトで利用しますが、すべてのフレームやページをコピーするわけではありません。
  • このファイルのコピーを作成:Figmaは、フレーム、ページ、アセットなど、ファイル全体をそのままコピーします。

すべて明確でしたか?

どのように改善できますか?

フィードバックありがとうございます!

セクション 1.  1

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 1.  1
some-alt