次世代プロトタイピングツール Figmaで実践するUI/UXデザイン

本講座は、「MdNの教室 MdN × Bau-ya」で2021年9月30日にオンラインセミナーとして開催された
「次世代プロトタイピングツールFigmaで実践するUI/UXデザイン」（講師：こもりまさあき）
https://www.street-academy.com/myclass/120138
を収録したものを、オンデマンド講座として再編集してご提供するものです。

※本講座は2021年9月当時の情報を元に講座としてご提供しているものです。これ以降になされた事実および情報の変更によっては、講座の中で取り上げた内容と異なる場合があります。登壇者、および株式会社エムディエヌコーポレーションは、本動画の中で紹介した内容によって生じたいかなる損害に一切の責任を負いかねますので、あらかじめご了承ください。

現在、WebサイトやスマートフォンアプリのUIデザインをするためのプロトタイピングツールは多種多様な選択肢がありますが、Adobe社のAdobe XDと人気を二分している『Figma』は、多人数で行う大規模プロジェクトや大手企業のWebデザインの現場で採用されています。

2016年に登場したプロトタイピングツールFigmaですが、macOSとWindowsの両プラットフォーム対応のほか、Webブラウザ上でも同時に複数のメンバーでリアルタイムに作業することが可能です。
ワイヤフレームの設計やプロトタイプの制作、ビジュアルデザインのサンプルなど、それぞれの作業をシームレスに行うことができるほか、ファイルのバージョン管理や異なる会社／職種のメンバー間でのコミュニケーションもFigma上で可能なため、大幅な作業効率アップにつながることから導入する制作会社が増え続けている世界ではスタンダードなプロトタイピングツールなのです。

Figma オフィシャルウェブサイト
https://www.figma.com/

本講座では、Web構築の実務やコンサルティングのほか多数の書籍執筆ほか、Web関係のみにとどまらない領域で縦横無尽で活躍する、こもりまさあき氏を招聘。
Figmaをいち早く現場で起用してきたこもり氏に、WebサイトやアプリのデザインでFigmaを使うためのインターフェイスと基礎知識、さらに実際にUIデザインをしてプロトタイプとして書き出すワークフローまで実践的に解説していただく「応用編」となります。

「基礎編」ではFigmaの概要、サービス構造、画面構成、基本操作、簡単なUIの実践、ファイルの読み込み、書き出しの概要などを解説しました。
https://www.street-academy.com/myclass/113101

今回の「応用編」では、実際にFigmaでスタイルを設定し、さらにコンポーネントを使ったUI設計や管理、プロトタイプの作成・書き出しでチームメンバーに共有するまでの効率的な開発ワークフローを解説していきます。

本講座で解説する内容は以下になります。

◯ 基礎編の復習
◯ Figmaを拡張する
◯ Figmaのスタイルを管理する
◯ Figmaのコンポーネントの作成
◯ コンポーネントを使いこなそう
◯ コンポーネントで状態を管理する
◯ コンポーネントを使ったUI制作の実践
◯ Figmaのプロトタイピング
◯ Figmaの書き出しと共有

Adobe XDやSketch、Figmaを仕事で使ったことがないデザイナーや、ワイヤーフレームを描く必要のあるWebディレクターなどを対象に、多様で複雑化する閲覧環境に対応する、次世代の効率的なUI設計や開発のワークフローを理解し実務に活かす講座です。

本講座をきっかけに、従来のカンプ制作から解き放たれた次世代プロトタイピングツール「Figma」の素晴らしい世界を体験してください。


こもりまさあき氏 執筆実績
「プロとして恥ずかしくない 新・WEBデザインの大原則」監修
「Webデザインの新しい教科書 基礎から覚える、深く理解できる。〈HTML5、CSS3、レスポンシブWebデザイン〉」
（以上、すべてエムディエヌコーポレーション）など


● 協賛企業・ブランド
フォントワークス株式会社
https://fontworks.co.jp
フォントワークス LETS
https://lets.fontworks.co.jp/fontworks

#mdnbauya40

Keywords: プロトタイピング, プロトタイプ, ワイヤーフレーム, コレボレーション, 共同作業, レスポンシブ, Webアプリケーション, スマホアプリケーション, Webデザイン

●講座を受講する前に
・受講に際しての要件
・参考資料
・著作権および本講座提供のプログラムについて
●本編動画
・前編（50分55秒）
・後編（49分19秒）
●講師から受講者のみなさまへ

□ オンラインで受講いただく場合は、インターネット環境とコンピュータなどのデバイスおよびウェブブラウザ。
□ ハンズオンスタイルで受講の方は、以下のアプリケーションがインストールされたコンピュータ。
・Figmaの無料アカウント
※ OSやウェブブラウザー、各種アプリケーションなどは、最新のバージョンのものをご使用ください。
※ コンピュータの動作やソフトウェアなどの動作不良に関するサポートは行いません。