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

Figmaのはじめ方

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

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つのオプションが表示される場合があります。その違いは以下の通りです:

  • Use UI Kit in a new file:Figmaは、そのファイルに含まれるすべてのアセット、アイコン、コンポーネントを新しいプロジェクトで利用しますが、すべてのフレームやページをコピーするわけではありません。
  • Make a copy of this file:Figmaは、フレーム、ページ、アセットなど、ファイル全体をそのままコピーします。

すべて明確でしたか?

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

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

セクション 1.  1

AIに質問する

expand

AIに質問する

ChatGPT

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

セクション 1.  1
some-alt