Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ Figmaのはじめ方 | セクション
Figmaレイアウト&デジタルデザインシステム基礎

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