![[UI3アップデート] Figma変数を利用したデザインシステムを構築する講義サムネイル](https://cdn.inflearn.com/public/courses/332289/cover/5b65a944-ebb3-44a7-96b2-60ca5b0cd0ea/332289-eng.png?w=420)
[UI3アップデート] Figma変数を利用したデザインシステムを構築する
bolduxlab
最新のUI3インターフェースでFigmaの変数(バリアブル)を活用して、一緒にデザインシステムを作りましょう🔥 変数は一貫したユーザーエクスペリエンスを提供し、デザインプロセスを革新的に改善できる鍵🔑です。
初級
figma variable, Figma, Figma Tokens
基礎から実務まで、Figma一つで完結するUIデザインオールインワンクラス! オートレイアウト・コンポーネントの核心機能から、レスポンシブデザイン、効率的なハンドオフ、コラボレーションまで実務スキルを完璧にマスターします。今すぐ始めて、あなたのデザイン力をワンランクアップグレードしましょう!
受講生 321名
難易度 入門
受講期間 無制限
学習した受講者のレビュー
5.0
ksrtt
デザインシステムに続いて受講しています。 基礎から全体的な内容を扱う講義を望んでいましたが まさに私が望んでいた講義を制作してくださったようです。 他のFigma講義を聞かずにこの講義を聞くことができて幸いだと思います。 今後も継続的にアップデートまでしてくださるということで、さらに期待が高まります。 強力推薦します!!!
5.0
동팔이
久しぶりにFigmaに触れるユーザーとして、復習したかった内容が充実しており、とても良かったです。実務のフローや、チーム・開発者との協業プロセスを簡潔に説明してくださった点も興味深く、役に立ちました。ただ、無料版を使用しているため、一部の機能が見つからず迷ってしまい、結局動画で見るしかなかった点や、セキュリティ上共有されない資料が実習領域に含まれている点、そして共有されたサンプルファイルがすでに完成されているため、実習の際に一つひとつ消しながら進めなければならなかった点が少し不便でした。これらの点が改善されれば、より充実した講義になると思います。
5.0
pyo1748
Figmaについて多くのことを学べる講義です。ありがとうございます。
UI デザインの基礎理論と必須知識を学び、様々な実習例題を通じて直接身につける
オートレイアウト、コンポーネントなど核心実務機能を集中的に学習する
ワイヤーフレーム制作からUIデザイン、プロトタイピング、レスポンシブデザインまで全過程を経験する
効率的なハンドオフ方法、コラボレーションなど、実務にすぐ適用できるFigma活用法を学ぶ
YouTubeにもFigmaの無料講座は多くありますが、「なぜわざわざこの講座を受講すべきなのか?」という疑問が生じるかもしれません。単にツールの使い方だけ知っていれば画面を描くことには支障ありませんが、効率的な構造設計とコラボレーションを考慮したデザインプロセスが不足していればすぐに壁にぶつかることになります。
この講座は、Figmaを初めて触れる方、すでに学んだものの十分に活用できていない方、そして実務への適用に悩んでいる方のために、基礎から丁寧にご案内します。単に機能を習得するだけでなく、デザイン基礎理論 → 実習課題 → 実務適用へとつながる段階別カリキュラムを通じて、実際に活用できる実力を身につけることができます。
デザイナーボルドを紹介します 😀
現在プロダクトデザイナーとして働きながら、InstagramとBrunchを通じて実務経験とデザインの話を共有しています。
2023年にはFigma Variablesを活用したデザインシステム講座をリリースし、これまで多くの方々から大きな支持をいただきました。ただ、講座を進める中でFigmaの基礎で困難を感じる方が多いことに気づき、その経験をもとに誰でもより簡単に始められるFigma UIデザイン入門講座を新たに準備することになりました。
本講座では、入門者のための基礎デザイン理論と、実務ですぐに適用可能なデザインプロセス全過程を扱います。これを通じて、皆さんが現場で実際に活用できる実用的なスキルとインサイトを得て、UIデザイン力を開発できるよう、私がサポートいたします!
一緒に学び成長する楽しい旅に今すぐ参加してみてください!
よく作られたデザインシステムやUIデザインをクローンしてみることは、私もやったことがあります。しかし、これはまるで穴の開いた瓶に水を注ぐことと同じです。なぜそのようにデザインされたのか、その原理と意図を理解しないまま見た目だけを真似ても、実力は足踏み状態にならざるを得ません。
すべてのデザインの根源はしっかりとした基礎から来ます。
基礎なく積み上げたデザインは結局砂上の楼閣のようなものです。
🌱全ての職種のためのFigma UIデザイン講座
この講義はプロダクトデザイナーだけのためのものではありません。
企画者、開発者、マーケター全員がUIの構造と原理を理解すれば、サービス改善の方向性を明確にし、協業効率を高め、成果物のクオリティを向上させることができます。
この講義で学ぶ核心機能だけでも画面設計の見識を広げ、実質的な改善アイデアを実行に移すことができます。
本講義はUIデザインプロセスの4つの核心プロセスを含め、全7つのセクションで構成されています。
初めてFigmaに触れる入門者のための講義で、基本要素を学びながらプロダクトデザインプロセスの中でワイヤーフレームを一緒に制作します。この過程を終えると、Adobe Illustratorなしでもデザインが可能になります。
スタイルガイドライン制作
HSL色相、タイポグラフィ、グリッドシステム、アクセシビリティなど基礎理論を学び、ブランドに合ったスタイルガイドラインを簡単に制作します。
オートレイアウトとレスポンシブデザイン
比喩を通じてオートレイアウトの原理を理解し、コンストレイントとリサイジング、最新アップデートされたグリッドの活用法を学び、レスポンシブデザインの基礎を固めます。
コンポーネントをマスターする
コンポーネントとバリアントの基礎を理解し、ボタン・アコーディオン・カルーセル・ナビゲーションなど再利用可能なコンポーネントを構築します。
プロトタイピング基本・応用
基本的なプロトタイプ制作からインタラクティブコンポーネントとアニメーションを活用した中級レベルのプロトタイプ制作まで扱います。
レスポンシブWebページデザイン
ページ制作に役立つTipsを学び、レスポンシブWebデザインを作りながら、これまで学んだ内容を総合的に適用してみます。
開発連携とハンドオフ
デザインからコードまでつなぐ開発協業プロセスを実習し、開発者に効率的にデザインを伝達する方法を身につけます。
追加カリキュラム
受講生のフィードバックを反映し、継続的にカリキュラムを拡張していく予定です。
学習対象は
誰でしょう?
Figmaを初めて始める方や、他のツールから移行しようとする初心者
コンポーネント、オートレイアウトなど、実務必須機能を適切に活用できていない実務者
デザイナーとの円滑な協業のためにFigmaの理解が必要な開発者、PMなど
前提知識、
必要でしょうか?
Figmaのインストール(詳しくご案内する予定です)
インフラン認証
5,572
受講生
318
受講レビュー
271
回答
4.9
講座評価
7
講座
私たちはプロダクトデザイナーの成長を支援するBold UX Labのメインチューター、Boldです。私のキャリアはリサーチャーから始まり、プロダクトデザイナーへ転向した後、フィンテック、クラウドテック、マーケティングなど様々な分野で経験を積んでいます。国内の修士出身で、海外教育を受けることなく海外で就職し、多様な実務経験を重ねており、実務では以下の内容を行ってきました。
ユーザーリサーチシステムの構築、管理
デザインシステムの構築・管理、FigmaでのUI/プロトタイピングデザインスキルのコーチング、メンタリング。Inflearnを通じて、私が培ってきた実務ノウハウを共有し、それを通じて私自身も
デザインシステムの構築、管理、
Figma UI/プロトタイピング
デザインスキルのコーチング、メンタリング
Inflearnを通じて私が持っている実務のノウハウを共有し、それを通じて私も多くのことを学びたいと思っています。
ありがとうございます。
経験および経歴
(現) データソリューション企業 ・ シニアプロダクトデザイナー
(前) グローバルリサーチ、フィンテック、クラウドコンピューティングなど、多様な分野でプロダクトデザイナーとして活動
延世大学 認知工学ラボ リサーチャー
全体
55件 ∙ (11時間 4分)
講座資料(こうぎしりょう):
全体
23件
4.8
23件の受講レビュー
受講レビュー 3
∙
平均評価 5.0
受講レビュー 12
∙
平均評価 5.0
修正済み
受講レビュー 1
∙
平均評価 5.0
受講レビュー 3
∙
平均評価 5.0
受講レビュー 3
∙
平均評価 5.0
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!