デザインを勉強したことがない非専門家の方、UXデザインを勉強し始めたばかりの学生、UXおよびUIデザインの就職準備生のために準備された「FigmaでUIデザインをAからZまで」の授業です。Photoshopなどの他のツールをまったく知らない方でも、Figmaを活用してUIデザインの専門家になることができるよう、基本から上級機能までお教えします。
UI デザインの理論と実践能力を養うことができます。
実務 UI デザイン プロセスを最初から最後まで踏んでみます。
UI デザインを作成するために必要な Figma 機能を習得します。
ローファイからハイファイのプロトタイプまで、制作方法をご紹介します。
ユーザー テストとコミュニケーションのための Figma プロトタイピング機能を習得します。
開発段階の最終成果物であるFigma/Zeplinハンドオフの作成方法をご紹介します。
初心者でも、非専攻者でも着実に
UIデザイン能力を身につけることができます。
私がプロダクトデザイナーとして行っている仕事についてお話しすると、まずユーザーについて学び、彼らのフィードバックを受けるユーザーリサーチ業務から、ユーザーに対する理解に基づいて作成することになるワイヤーフレーム、情報構造設計などのUXデザイン、デザインシステムを制作し、実際にユーザーが使用することになる最終的なUIデザイン成果物を作るUIデザインまで、すべてを担当しています。プロダクトデザイナーとしてこのようにUXとUI、つまりUXプロセスに該当するほぼすべての部分にオーナーシップを持っていますが、最初からそうだったわけではありません。
私はニューヨークに来る前に、ソウルで数年間企画者として働いていました。当時やっていた仕事は主にパワーポイントでワイヤーフレーム、つまりUI企画書を作る仕事とユーザー調査をする仕事でした。パワーポイントでワイヤーフレームを作る仕事は視覚的な完成度を求められなかったので、私が始めるにあたって困難はありませんでした。しかしUIデザインは私にできる分野ではないと思っていました。UIデザイナーと協業することはありましたが、私がUIデザインを直接することはありませんでした。
👉 ソウルで企画の仕事をしていた頃の様子と企画書の一部
UIデザインは生まれつき視覚的な感覚やデザイン能力に優れた人だけができる仕事だと思っていました。私にとってはこの能力を身につけるための壁があまりにも高く見えたんです。ところが、私はキャリアをアップグレードするために、ユーザーリサーチと企画、UIデザインをすべて担当するプロダクトデザイナーになるべきだと考えるようになりました。そのためにはUIデザイン能力を身につける必要があったのですが、これが私にとって最も大きな難関でした。いざ始めようとしても、どこからどのように学べばいいのかも分からなかったんです。それでも目標ができたので方法を探し始めたのですが、方法を探している中で、ありがたいことに良いメンターたちに出会い、良い方法を知ることができました。
そして、このように方法を知ることで、「UIデザイン能力を身につけることは私にとって不可能なことではない」という自信を持つようになりました。そうしてUIデザインの勉強を始めてから3ヶ月で初めてのUIデザインプロジェクトを完了し、これが私がプロダクトデザイナーとして初めての職場を得る上で重要な役割を果たしました。
👉 遅咲きで学んで進めたUIプロジェクト
私はこの学習と訓練の過程を通じて、方法さえよく知っていれば、視覚的な感覚が特別でなかったり、デザインを専攻していない人でも、UIデザイン能力を十分に身につけることができるということを知りました。
私はこの授業を通して、UIデザイン能力を短時間で身につけるために乗り越えなければならなかった山々と、それを克服できた秘訣をお教えします。そのため、私と似たような困難を抱えていらっしゃる方々が、Figmaツールを活用してUIデザイン能力を身につけられるようにご案内いたします。
一つ質問させていただきます。 🙋 今ご覧になっているものは、非常に有名なアプリの代表的な画面なのですが、とても素敵にデザインされた画面です。この画面が出来上がるまで、デザイナーはどのような過程を経たのでしょうか？FigmaやSketchアプリを開いて、一気に描き上げたのでしょうか？
画像出典：Spotify、Airbnb
これについて私の考えを申し上げますと、ほとんどのUX/UIデザインプロジェクトは、このような画面が出来上がるまでに多くのプロセスと検討を重ね、ユーザーにより良いサービスを提供するために継続的にアップデートされるということです。UIデザインはUX/UIデザインという大きな枠組みの中で、問題に対するソリューションを見つけていくプロセスだと言えるでしょう。この授業では、このUIデザインのために踏むべきプロセスと活動についてお教えします。
これらの過程を踏むのには理由があります。UIデザインを上手く行うためには、単純にかっこよくて鮮やかな最終UIデザイン画面をすぐに描くのではなく、それぞれの段階を通してチームメンバーやクライアントと効果的にコミュニケーションを取り、最終的にユーザーに最も良い体験を提供できなければなりません。皆さんは各段階をなぜ踏むのか、その理由を理解し、自分が直接一段階一段階を踏めるようになる必要があります。私はこの講義を通して皆さんがFigmaを活用して各段階を踏める能力を身につけ、このプロセスが皆さんのものになるよう、つまりUIデザインの専門性を身につけられるよう授業を準備しました。
👉 私が仕事をする時に踏むUIデザインプロセス
先ほどUIデザインを上手に行うためには、UIデザインプロセスを踏むと言いましたね。授業を通じてこのプロセスが皆さんのものになるようにすることが、この授業の目的です。そのために何より重要なのは、実習を通じてこの授業の実務各チャプターと実戦例題を真似しながら、実際にUIデザインの段階を踏んでみることです。それでは各段階別に作ることになる成果物はどのようなものなのか、例示を通じてお話しします。
ハンドスケッチは、与えられた問題を解決できるアイデアを考えて、ラフに描いてみることです。スケッチの利点は、短時間でアイデアを簡単に修正できることです。後の段階でアイデアが発展するほど視覚的な完成度が上がり、修正にかかる時間がより多くなるからです。
ワイヤーフレーム（Wireframe）は、スケッチを通じて生まれたアイデアをより高度化し、画面と各画面の機能を定義してくれます。そして画面間の流れを繋げてくれるのです。ワイヤーフレームはUIデザイン段階に進むための骨組みとも言えるでしょう。ワイヤーフレームは、UI企画者とUIデザイナーの業務が完全に分業形態になっている場合、UI企画者が担当することもあります。しかし、プロダクトデザイナーやUX/UIデザイナーの場合、ワイヤーフレームも一緒に作れるようになる必要があります。
👉 足で描いたような😊😊私が描いたスケッチです。しかし実務や現場ではこのようなスケッチは非常に強力になり得ます！
👉 画面、画面フロー図などが定義されたワイヤーフレーム
ハイファイプロトタイプ（Hi-Fi Prototype）とも呼ばれるUIデザインは、先ほど出てきたワイヤーフレームを基に視覚的完成度の高い画面を描いてくれます。この段階では、フォントやカラー、アイコンなど実際のユーザーが使用するレベルのビジュアルが出てくるのですが、この段階でも徹底的にユーザーに最も適した体験が何かを考えることが重要です。この講義では、ユーザーを中心に置くために知っておくべきデザイン原理を一緒に扱います。理論の上に実戦能力を積み上げれば、基本がしっかりしたデザイナーになることができます！👍
プロトタイピングは、このように作られた各画面を互いに接続することで、ユーザーの立場からはまるで動作しているかのように作ってくれます。
👉 視覚的完成度を高める段階、UIデザイン
👉 プロトタイピングを通じてコーディングなしで動作する画面
最終的に作成されたUIデザインを基に、スタイルガイド、コンポーネントなどデザインシステムをどのように作ることができるかをお教えします。デザインシステムがあれば、ユーザーには一貫したユーザーエクスペリエンス、インターフェースを提供し、デザイナーと開発者は効率的にデザインと開発を行うことができ、時間を節約できるため、実務で非常に強力になります。💪
最後に、UIデザインの最終段階と言えるハンドオフ（Hand-Off、HO）は、実際の開発ができるように詳細な要素、例えばテキストやボタンのサイズが何ピクセルかといったことを具体的に定義し、開発者に渡す段階です。
👉 デザインシステムの重要な要素であるコンポーネント
👉 開発のために制作するデザイン成果物、ハンドオフ
デザインを学ぶためのリファレンス資料など、入門される方がより早く簡単に望む能力を身につけられるよう、たくさんの裏技をお教えします。私が数年間UXおよびUIデザインの仕事をしながら得た知識と情報をシェアしますね。そして私にUIデザインを学んだ方々がよく質問される内容についても扱います。もっと気になる部分があれば質問欄にコメントを残してください^^
授業を受けた後、UIデザイン能力を身につけてからUX/UIデザイナーやプロダクトデザイナーになるなど、目標とするキャリアを実現するために次のステップで何をすべきか具体的な計画を立てることができます。私は皆さんが目標を達成するためにどのような活動をするのが良いか、おすすめとコツをお伝えします。
第一に、プロダクトデザイナー、UX/UIデザイナー、UIデザイナーを目指す入門者の方々です。もちろんデザイン非専攻者も含まれます。このキャリア目標を達成するためには、UIデザインができる能力を身につけることが必須なのですが、この授業をしっかりと受講していただければ、基礎的な知識と理論、そして実戦能力まで兼ね備えて、望む目標を前倒しで達成できるでしょう。
先ほど私は視覚的な能力が不足していると感じたと申し上げましたが、これを克服した秘訣をお教えして、皆さんもUIデザイン能力を身につけられるようにします。デザイナーになるためには、UIデザインプロセスをよく理解し、各段階での成果物をどのように作るか、ツールをどのように使うべきかを知る必要があります。この授業を受講すれば、この目的を達成できるでしょう。
この講義では、Figmaの非常に基礎的な機能である図形、テキストを作ることから、高度な機能であるUIデザイン、ハンドオフなどを作ることまで、着実にステップを踏んで進んでいきます。そうして初心者の方々がFigmaをマスターし、最終的にはUIデザインの専門能力を身につけられるよう授業を設計しました。特に私はこの講義を通して多くの実践例を提供しようと思いました。この部分を特により熱心に真似してみていただければ、とても役に立つでしょう。
UX、UIデザインの核心は、ユーザーが満足するまで、またはユーザーが抱える問題を解決するまで、デザインのプロセスを踏んで繰り返し（イテレーション、iteration）することです。先ほどお話ししたプロセスを踏めば、ユーザーのためにはるかに多くの部分を考慮した堅実なアプリまたはサービスを作ることができます。この授業を受講すると、単に美しいアプリをデザインする能力だけでなく、プロセスの各段階をどのように活用するか、そして究極的にユーザーのためにより良い体験をどのように提供できるかを考えるデザイナーになっているでしょう。Figmaを学ぶのは、各段階を踏むことができる技術的な能力、専門性を裏付けるためです。
UIデザインプロセスにおいて、各段階で使用できる様々なツールがあります。Adobe XD、Sketch、Figmaなどですね。その中でも、FigmaほどUIデザインに必要なすべての活動をサポートしてくれるアプリはないようです。一つのアプリでほぼ全工程を完了することができるのです。
スケッチアプリを使用する場合、プロトタイピング段階ではInvisionを一緒に使わなければチームメンバーと効率的に共有することができません。スケッチアプリ自体にプロトタイピング機能はありますが、オフラインベースのツールであるため、チームメンバーやクライアントとオンラインで効果的に共有するには限界があります。そしてハンドオフのためにはZeplinを使わなければなりません。
しかし、Figmaを使えばワイヤーフレームからハンドオフまで全ての過程を一つのアプリで解決できます。私は元々Sketchを使っていましたがFigmaに乗り換えることになり、業務をより効果的に行うことができ、本当に多くの時間を節約することができました。
👉 「Figma = Sketch + InVision + Zeplin」
統計上UIデザインツールの中でよく使われるSketchアプリは、Windowsでは使用することができません。しかしFigmaはオンラインベースのツールなので、Safari、Chromeなどのブラウザさえあれば使用できます。WindowsまたはmacOSなど、どのOSを使っているかに関係なく使用できるのです。
Figmaはオンラインベースのツールであるため、リアルタイムでチームメンバーやクライアントと協業し、コミュニケーションを取るのに本当に良いツールです。デザイナーとはリアルタイムで一緒にデザイン作業ができ、開発者やプロダクトマネージャーなどとデザイン成果物を共有し、またこれについてコメントを作成・共有する機能が便利に備わっています。
.gif)
👉 チームメンバーとのリアルタイム協業が本当に便利です。
Figmaには、サードパーティが制作した多くの無料デザインテンプレートとプラグインがあります。これらをうまく活用すれば、デザインの生産性を数倍から数十倍以上向上させることができます。私はこの講義で、テンプレートとプラグインの活用法、特に活用度の高いテンプレートやプラグインをおすすめして、皆さんがより簡単で素早くUIデザイン能力を身につけられるようお手伝いします。
👉 Figmaのプラグインとテンプレート
Q. この講義を受講する前に、SketchアプリやZeplin、InVisionなどの他のツールを扱えるようになっている必要がありますか？
A. 全く知らなくても大丈夫です。Figmaは、UIデザインに必要なほぼすべての機能を備えています。Sketch、InVision、Zeplinを通じて達成できるすべてのことを、Figmaだけをしっかりと習得すれば行うことができます。つまり、UIデザイン、プロトタイピング、ハンドオフ（開発者のための最終成果物）など、すべての段階をFigmaを通じて踏みながらデザイン成果物を作ることができます。
Q. 非専攻者でも受講できますか？
A. はい、この授業は入門者と非専攻者に合わせて設計された科目です。UIデザインのための基礎知識からFigmaの基本機能、そして高度な知識と高度な機能まで一歩一歩お教えします。ですので、全くデザインとは無関係な仕事をしてきた方や非専攻者の方でも、この授業を受講すればUIデザインの専門能力を身につけることができます。
Q. 事前に受講すべき前提科目はありますか？
A. もしUX、UIデザインについて全く知らない方でしたら、私がInflearnに開設した「初心者のための、UXデザイン概論」の授業を事前に受講されることをお勧めします。この授業を受講すると、UXおよびUIデザイン全般の知識を身につけることができます。何よりも、このUIデザインの授業をなぜ受講すべきなのかをより深く理解できるでしょう。すでにUX、UIデザインに関する基本知識をお持ちでしたら、この授業を直接受講していただいても構いません。
学習対象は
誰でしょう？
製品デザイン、UX/UI デザインの初心者
UX/UIデザイナーになりたいけど、視覚的な能力が足りないと思っている方
Figma をマスターしたい方
UIデザインの基本基をしっかりさせたい方
前提知識、
必要でしょうか？
初心者の方は、Inflearn の UX デザイン入門講座を受講することをお勧めします。講座リンク: https://inf.run/UmHh
Photoshop、Sketch アプリなど、他のツールをまったく知らなくても大丈夫です。😊
5,057
受講生
683
受講レビュー
306
回答
4.8
講座評価
7
講座
현재 뉴욕의 글로벌 테크 회사 The Knot Worldwide에서 시니어 프로덕트 디자이너로 일하고 있습니다.
뉴욕에 오기 전에는 서울에서 UI기획자로 일을 했습니다.
브런치 매거진 "디자인, 그리고 프러덕트"와 UX, UI 지식과 정보를 공유하는 "뉴욕 UX디자이너" 인스타그램과 페이스북을 운영하며 디자이너 및 예비 디자이너들과 소통하고 있습니다.
개인적으로는 세 아이👶의 아빠이며 요리🍲, 교육🏫에 관심이 많습니다.
집필 및 강의
• "뉴욕 프로덕트 디자이너가 알려주는 UX디자인 입문 A to Z" 책 출간 (링크: Yes24, 알라딘, 교보문고)
• 퍼블리 아티클 "서비스의 첫 인상을 결정하는 3초: 랜딩 페이지 UX 4가지 원칙" 발행
• Samsung SW Academy for Youth (SSAFY) UX/UI다자인 및 피그마 강사
• 1:1 멘토링 및 기업 강의 진행 (토픽: UX, UI디자인, UX퍼실리테이션, UX/UI 포트폴리오 제작 및 발행)
경험 및 경력
• (현) 뉴욕 The Knot Worldwide 시니어 프로덕트 디자이너
• (전) 서울 Pantech 모바일 앱 UI기획자
• 뉴욕 기반의 다수 스타트업과 UX/UI 컨설팅 프로젝트 진행
• 뉴욕 School of Visual Arts 디자인 대학원 졸업 / 전공: Interaction Design
• 한동대학교 학부 졸업 / 전공: 산업디자인
全体
78件 ∙ (9時間 5分)
9. デザイン思考とプロトタイプ
07:19
10. ローファイプロトタイプ
03:12
13. 最終デザイン成果物「ハンドオフ」
02:54
14. 視覚階層
05:57
全体
483件
4.9
483件の受講レビュー
受講レビュー 2
∙
平均評価 5.0
5
I am a programmer who mainly works on web backend tasks. I took the course because I was curious about Figma, which is becoming a trend in the UX/UI design work area that can be considered the core of frontend work, and wanted to try it out. After completing the course, I will write an honest review of my personal thoughts. ● What was disappointing - It was a bit disappointing that the practical examples using Figma were only provided as mobile services. I thought it would have been better if there were practical examples for web services. Other than this, I didn't feel any shortcomings in the lecture content itself. - There was one lecture that was too long, exceeding 30 minutes, so I thought it would have been better if it had been divided into 15-minute segments. In the case of online lectures, you have to follow the recorded lecture content and organize the parts you don't understand or want to listen to again, but it seems that it was a bit difficult to follow if one lecture was too long. - It is a very rare occurrence in the entire lecture, but the parts where you stutter or stammer because you have difficulty speaking are quite distracting, so I wonder if those parts could have been edited out. If it were real-time, it would have been unavoidable, but I wish it had been possible if it were an Infraon lecture that plays recorded lectures. ● Good points - First of all, the instructor overcame the frustration he experienced in the past through design and planning work, and is now in charge of and manages the entire product design process including UX/UI, so I think he understands the minds of beginners well and teaches them carefully and carefully. Good lectures come from the success stories of talented people, but from the perspective of a beginner, most good lectures come from experienced people who have experienced many twists and turns and overcome difficulties. - Since the instructor has a calm and warm voice, you get the feeling that he is not teaching from the podium, but sitting in front of the computer with you and teaching right next to you. Since you are abroad, I may not have the opportunity to do so, but based on my experience, I thought it would be nice to work with such a calm and considerate person. - In addition to his extensive knowledge of design itself, there were many instances in the lecture where I felt that the instructor himself enjoyed design work, so as a learner, I was able to receive that joyful energy and follow along happily. - The lecture itself is well-organized with storytelling elements, so I think it naturally helps me learn and gives me strength to complete the course. ● Conclusion - I personally do not feel that this lecture was a waste of money at all. - I think it is a lecture worth more than its price for those who are hoping to enter the industry or are interested in it. - Perhaps due to the popularity of Figma, good lectures, materials, and books for learning Figma will continue to be released in Korea in the future, but I think that Instructor Eric's Figma lecture will remain as a good guide for beginners. Thank you for your hard work in the lecture. It was an honor to take such a great lecture that broadened my horizons as a backend programmer. I hope you stay healthy during these difficult times of Corona, and I hope your family is always healthy and happy. Thank you.
[2021-2-24] Jihoon, thank you for your sincere and detailed review. I will respond to some of your feedback.^^ Regarding regrets/improvement points: I apologize for the inconvenience caused by the stuttering and repetition. Regarding this, we are currently working on improving the overall lecture video, especially the voice, by reflecting your feedback (for example, editing the parts where you stutter, and the parts where you say the same thing repeatedly). For reference, about 1/3 of the entire lecture will be updated soon. We will gradually update the rest. I think it is important for students to learn in a slightly more comfortable environment, and I would like to thank you again for your good feedback. The parts where one chapter is over 30 minutes will also be included in the improvement work for the above lecture video. I would also like to thank you for your good feedback on focusing on UI design for the web screen. I will use it as a reference for future lecture improvement and development^^ Good points and conclusion: I am honored to be able to help you a little bit in getting started with Figma and doing UI design. I am so proud and grateful that you said that I will teach from a beginner's perspective. When I first created this lecture, there was a part that I made with that in mind, so I will keep that in mind once again and work hard to help from a beginner's perspective. Thank you again for your sincere review. I hope you stay healthy and achieve all your future plans and goals. [2021-03-23] About 50 percent of the lecture video improvements I mentioned above have been completed. The remaining parts are also being improved, and I will share them as they are updated^^
受講レビュー 2
∙
平均評価 5.0
5
I am an IT junior planner. It was a good time to learn how current employees design UX. The best part of the lecture was that it mostly taught me how to use Figma and emphasized the skills I use the most. After listening to the lecture, I became more confident in using the tool. The part that I would like to see improved is the speech style. It was disappointing that there was little emphasis on the words and there were many pauses in the middle of the speech. However, it was a good lecture that made up for the shortcomings. One of my goals is to get a job in the US as a UX planner, so I will try to use Brunch and Instagram posts as role models.
I am glad that the part where I taught you frequently used skills was helpful. I felt my shortcomings in the part where I paused in the middle of speech and speech. I will use it as a reference to improve and develop the lecture. Thank you so much for the great feedback. If you have any questions about the part where you aim to get a job in the US as a UX planner or if there is anything I can help you with, please contact me through 1:1 Open KakaoTalk. For your information, I am a native Korean who received education up to college in Korea and worked there before coming to the US for graduate school and getting a job. ^^
受講レビュー 2
∙
平均評価 5.0
5
I have taken the "Introduction to UX Design for Beginners" course and am currently taking this course. As a non-major, I had a lot of difficulties when I first started, from the basic knowledge of UX design to how to handle the Figma tool and how to actually proceed with the design, but the detailed explanations were really helpful.
Punky94, thank you so much for your great feedback. When I was making this course, the people I thought about the most were beginners, including non-majors, and my goal was to help them get started with UI design and develop practical skills. I couldn't be more grateful if you found it helpful. I hope you achieve all your goals~!
受講レビュー 1
∙
平均評価 5.0
5
Hello. I am a junior product designer. It was great to be able to learn the concepts and skills of Figma in a short period of time. (+Mindset and UX concepts as a bonus) Actually, I only knew how to use Adobe XD. However, when I was looking for a job, many places required Figma or Sketch. That's why I took this course! Thanks to this, I am now using Figma well in my work :)
I am grateful and happy that I could be of some help to you through this lecture, as you have acquired the skills and are now using them in your work. I will support you in achieving all that you want to do in the future~!
￥10,207
知識共有者の他の講座を見てみましょう！
同じ分野の他の講座を見てみましょう！
![[UI3 Update] Building a Design System Using Figma Variables강의 썸네일](https://cdn.inflearn.com/public/courses/332289/cover/5b65a944-ebb3-44a7-96b2-60ca5b0cd0ea/332289-eng.png?f=avif&w=420)
![Data-Driven Design Without a Data Analyst [Datarian Seminar Replay | November 2025]강의 썸네일](https://cdn.inflearn.com/public/files/courses/339608/cover/01kbpcbn9gv7ysm630hkz313gd?f=avif&w=420)
