これからFigmaを学んでいきます！
まずは全体像を把握してゴールを認識しましょう。
Figmaは、UI/UXデザインやWebデザインなどのデジタルデザインに特化したツールで、その最大の特徴はブラウザベースの設計にあります。インターネットブラウザさえあれば、誰でも簡単にアクセスでき、チームメンバーとのスムーズな共有やコラボレーションが可能です。さらに、コンポーネント機能による再利用可能なUIパーツの管理や、バリアブルズ・スタイル機能による配色・フォントの一元管理など、現代のデジタルデザインに不可欠な機能が充実しています。本記事では、Figmaを使って実現できることを詳しく解説していきます。
Figmaのサービスサイトhttps://www.figma.com/ja-jp/
BONO では無料のFigma入門コースを提供しています。
動画のやり方を見ながら、真似することで、Figma操作の基本を誰でも習得できます
Figma&UIデザインコース
https://www.bo-no.design/rdm/uidezainru-men
Figmaをこれから学びたい方はぜひ活用してみてください。
Figmaの真の強みは、これらの機能が単独で存在するのではなく、シームレスに連携している点にあります。UIデザインからプロトタイプ作成、チームコラボレーションまで、一つのプラットフォームで完結できることは、現代のデザインワークフローにおいて大きなアドバンテージとなっています。
デザイナーだけでなく、エンジニア、プロジェクトマネージャー、そしてクライアントまで、プロジェクトに関わる全ての人々がスムーズにコミュニケーションを取れる環境を提供するFigma。これからのデジタルプロダクト開発において、ますます重要なツールとなっていくことでしょう。
初心者の方も、まずは基本的な機能から少しずつ試してみることをお勧めします。Figmaの持つ可能性を、ぜひ御社のプロジェクトでも活用してみてください
現代のデザインワークフローにおいて、Figmaは以下の7つの主要な機能を提供しています：
それぞれの機能について、実践的な活用方法を見ていきましょう。
デジタルプロダクトの設計において、UIデザインは最も重要な要素の一つです。Figmaは特にUIデザインにおいて卓越した機能を提供しており、開発チームとの協業を強力にサポートします。
これらの機能により、デザインからエンジニアリングへの橋渡しがスムーズになります。例えば、コンポーネント機能を使用することで、ボタンやフォームといったUIパーツを一元管理でき、デザインの一貫性を保ちながら効率的な開発が可能になります。
Webデザインの現場でも、Figmaは強力な味方となります。従来のデザインツールと比べて、特に以下の点で優位性を発揮します：
例えば、Webサイトのヘッダーやフッターといった共通パーツを一度作成すれば、それを複数のページで使い回すことができます。さらに、元となるコンポーネントを編集すれば、そのパーツを使用している全てのページに変更が反映されます。
グラフィックデザインツールとしても、Figmaは十分な機能を備えています。特に基本的なバナーデザインにおいては、以下のような用途で活躍します：
高度なエフェクトや質感表現が必要な場合はPhotoshopが適していますが、基本的な平面デザインであれば、Figmaの機能で十分にカバーできます。実際、多くのクリエイターがFigmaだけでコンテンツのサムネイル制作を行っています。
Figmaは従来のプレゼンテーションツールとは一線を画す、新しいスライド作成環境を提供します：
特筆すべきは、新しく登場した「Figmaスライド」です。このサービスにより、Figmaのデザイン機能を最大限に活かしながら、プレゼンテーション特化の環境で作業することが可能になりました。
Figmaの強みの一つは、デザインとプロトタイプ作成を同一ツール内で完結できる点です：
デザインからプロトタイプまでをシームレスに作成できることで、アイデアの検証やユーザビリティテストがより効率的に行えます。
ブラウザベースのツールであることを活かし、Figmaは優れたコラボレーション機能を提供します：
チームメンバーやステークホルダーとの円滑なコミュニケーションを実現し、プロジェクトの進行を加速させます。
Figmaはデザインシステムの構築と管理において、特に優れた機能を提供します：
これらの機能により：
が実現可能となります。
デジタルデザインツールとして急速に普及しているFigma。その人気の背景には、他のデザインツールにはない独自の特長があります。従来のデザインツールが抱えていた課題を解決し、より効率的でシームレスなデザインワークフローを実現しています。今回は、Figmaの主要な4つのメリットについて、実践的な活用シーンを交えながら詳しく解説していきます。
Figmaの最大の特長は、デジタルプロダクト制作に特化した機能群です。特に、UIデザインやWebデザインにおいて、その真価を発揮します。従来のデザインツールでは、デザインとコードの間に大きなギャップが存在していましたが、Figmaはそのギャップを最小限に抑える革新的な機能を提供しています。
オートレイアウト機能
例えば、従来のデザインツールでは、デザイナーが思い描いた通りにレイアウトを組むことができても、それが実際の実装では再現が難しいということがよくありました。Figmaのオートレイアウト機能を使用すると、FlexboxやGridといったWebの標準的なレイアウトシステムに近い形でデザインを構築できます。これにより、デザインの段階から実装の制約を考慮することができ、後々の手戻りを防ぐことができます。
これらの機能を活用することで、例えばブランドカラーやフォントサイズといった基本的な要素から、ボタンやフォームといった複雑なUIコンポーネントまで、一貫性を保ちながら効率的に管理することができます。特に大規模なプロジェクトやチーム開発において、この機能の価値は計り知れません。
従来のデザインツールと一線を画すFigmaの特長として、ブラウザベースの設計が挙げられます。この特徴は、特にリモートワークが一般化した現代のワークスタイルと相性が良く、場所を問わない柔軟な働き方を可能にします。
ただし、以下の点には注意が必要です：
Figmaは、チームでのデザイン制作を強力にサポートします。特に、複数のステークホルダーが関わる現代のプロダクト開発において、このコラボレーション機能は非常に重要な役割を果たします。
例えば、従来のワークフローでは、デザインの共有やフィードバックのやり取りに多くの時間と手間が必要でした。Figmaでは、デザインの作成から共有、フィードバック、修正までのサイクルを大幅に短縮することができます。また、プロジェクトの進行状況を常に全員が把握できることで、より効率的な意思決定が可能になります。
2024年現在、Figmaは機能制限付きながら、無料プランを提供しています。これは、デザインツールの導入を検討している個人やチームにとって、大きなメリットとなっています。
※具体的な制限事項や料金プランの詳細については、別途「料金プラン」の記事でご紹介いたします。
Figmaには4つの料金プランが用意されており、個人からエンタープライズまで、様々な規模や目的に応じて選択することができます。各プランの詳細を見ていきましょう。
個人やスモールチームの入門に最適な無料プランです。基本的な機能を備えており、Figmaを始めるのに十分な機能を提供しています。
主な機能：
ユースケース：
現在、有料プランにはプロフェッショナル・ビジネス・エンタープライズの3つがあります。有料プランにする特徴としてはチーム間のコラボレーション機能の解放があります。
□ 無料プラン（スターターチーム）の主な制限
□ 有料プランで解放される重要機能
デザイン面での拡張機能
開発連携の強化
プロジェクト管理の向上
Figma.comにアクセスして、新規登録からアカウントを作成しましょう。Figmaは日本語に対応しているので日本語のサイトにアクセスすると良いでしょう。
「無料で始める」のボタンからアカウント作成をはじめましょう。
登録時に入力したメールアドレスに確認のメールが届きます。メールから確認のリンクをクリックして始めましょう。
.webp)
認証メールをクリックする、「表示名」の登録が始まります。Figmaで使用したいアカウント名を入力しましょう（あとから変更できます）
そのあといくつかアンケートが出てくるので回答しましょう。
そのあといくつかアンケートが出てくるので回答しましょう。プランも無料から使い始めることができます。
.webp)
そのあといくつかアンケートが出てくるので回答しましょう。
プランも無料から使い始めることができます。
.webp)
Figmaの登録が成功したら、Figma操作の起点になるホーム/チーム画面についての使い方を把握しておきましょう。ここではファイルを作成したり、ファイルの管理・閲覧などができます。
主に左のサイドバーの「管理：ナビ」と右側の「ファイル・作成」に分かれます。管理・ナビでは、ファイルの整理や管理をしたりすることが主になります。ファイル・作成のエリアでは現在選択しているプロジェクトなどの中にあるファイルの一覧を確認することができます。
.webp)
自分のアカウント管理や設定は、アカウントをクリックして詳細を選択することで可能になります。メールアドレスの変更などの自分の情報の編集確認や、テーマの変更でダークモードに対応できたりします。
最近開いたり、作成されたファイルが一覧で閲覧できます。無料プランのように作成できるファイルに限りがある場合はほとんどの場合はこちらを見ることで、ファイルを探すことができるでしょう。
Figmaはチームごとにプランの課金が基本的には行われます（エンタープライズなどのプランを除く）。そのためチームをクリックすることで今誰がチームの編集権限を持っているかなどを確認することができます。
ファイルに対する”フォルダ”のような概念です。複数のファイルをプロジェクトに所属することで、ファイル管理を容易にすることができます。
ファイルを新規作成できる導線になります。主に以下のようなものを作成できます。基本的なデザイン作業に関しては「デザインファイル」を作成して編集することがメインになります。
メインはデザインファイルを作成を使ってデザインを作成しましょう。FigJamはオンライン上で付箋やマインドマップを使ってアイデアをブレストしたりすることに特化したツールになります。会議のメモをしたりするときにも使うことができます。
Figmaスライドは2024年からリリースした新しいツールです。Figmaの仕組みを使ってスライドを作成・管理することができます。
インポートはSketchファイルなど、他のデザインツールからFigmaに変換することができる作成方法です。
選択しているプロジェクトや、表示方法（”最新”のようなもの）のファイルの一覧が閲覧できます。こちらをクリックすることで、ファイルを開いて確認・編集することが可能です。
デザインファイル、FigJam、スライドの３種類はマウスホバーすると表示されるアイコンの違いでも確認することが可能です。
各ファイルに表示されている画像サムネイルも、ファイル内で設定することで変更することができるので管理をすることもできます。
続いて、デザインする上で最も活用するFigmaデザインファイルの基本の解説をしていきます。まずはファイルを開くと表示される各要素について認識をしておきましょう。
全てを暗記するというよりは使いながら慣れていくのがお勧めです。まずは全体像を把握して全体の機能を把握して慣れる確率を上げましょう。
それぞれ役目ごとにブロックを分けて解説をしていきます。今回以下のようにブロックを分けてみました。
1 : ナビゲーション
2 : ファイルの中身
3 : ツール
4 : プロパティ
主にデザインファイルに対しての操作をする機能や、ホーム画面に戻る導線があります。
こちらをクリックすることでデザインファイルから、ホーム画面へ戻ることができます。
スクリーンショットで「無題」と書いているところをクリックすると、ファイルのタイトルを編集することができます。
ファイルをシェアすることができます。シェアする際にリンク設定を”公開”にすることで、同じチームにいないアカウントの人でも、ファイルの閲覧・コピーなどが可能になり、コラボレーションに便利です
プロトタイプ機能のプレビューをすることができます。パソコンブラウザで自分のデザインを確認したり、スマホアプリを使うことでスマホでの表示を確認することができます。
このエリアで、編集中のファイルの中身を確認することができます。
デザインを作っているとさまざまな要素を追加していきますが、それが「レイヤー」の部分に階層で現れます。
また「ページ」を増やすことで、全く別のシートでデザインを作り始めることも可能になります。例えば、作成しているときのバージョンをページで管理したり、「ラフ」と「確定版」のように別けることも可能です。
実際にデザインを作成するときに使う道具が置かれている場所になります。例えばテキストを配置したり、複数の要素をグループにまとめたり、四角形を置いたりするツールが用意されています。またアクションでFigma内の要素を検索したりすることもできます。
また選択するとツールの中に他ツールが格納されています（スクショの黒いメニュー）。その中から他のツールを選択できます。また右側に書いてあるアルファベットはショートカット表記になっています。半角で該当するキーボードを押すことですぐにそのツールを呼び出すことができます。
Figmaを操作する上での基本ツールです。編集したい、移動したいオブジェクトの選択ができる「移動」ツールはかなり多用します。ショートカット”V”でいつでも呼び出すことができるので、覚えておくと良いでしょう。
手のひらツールはMacbookについているトラックパッドや、Spaceキーを押しながらクリック移動でも代替利用することができます。
「拡大縮小機能」も画像の拡大などで覚えておくと便利です。同じ比率で指定した倍率に拡大・縮小をしてくれるツールです。
フレームツールは他のデザインツールでいうところのグループに近い機能です。Figmaでは基本的にFrame/フレームの箱を使ってキャンバス、デザインする範囲、を指定したり、複数の要素を1つの箱としてまとめたりします。
セクションツールはデザインファイル上の要素を整理する際に便利な機能です。デザインに干渉しないグループを呼び出すことができ、整理することが容易になるツールです。慣れてきた初心者はぜひ覚えておくと、ファイル整理の速度を劇的に上げることができるでしょう。
Figmaのセクションツールに関して詳しくはこちらの動画でも解説しています。
長方形や直線などの図形を呼び出すことができます。UI作成上は慣れてくるFrameフレームツールを使って線を引いたり、四角を作ったりすることが多いためあまり使わないかもしれませんが、グラフィカルな要素を作るときに使うツールになるので覚えておきましょう。
画像や動画の貼り付けも可能ですが、画像や動画ファイルをFigmaにそのままドラッグ＆ドロップすることでも貼り付けすることはできます。
イラストレーターで使えるようなベクターでパスを編集できるペンツールです。Figma自体がベクターファイルに対応しているため、簡単なパス作業でのグラフィック作成はFigmaでも可能です。
鉛筆ツールはドラッグすることで線を引けるツールです。会議中に場所を示すなどで使うと便利です。
Figmaのファイル上にコメントを残すことができる機能です。自分用のメモを書いたり、他の人に伝えるメモを書いたりするときに使用することができます。
メモを残すとその残した場所に追従する形でメモが残ります。Figmaでコラボレーションするときに便利な機能です。ただ、ホバー・クリックしないと中身がわからないので多用しすぎると少し煩雑になってしまうので、使い所やチームでのルール決めなどは必要な場合があります。
文字を配置するツールです。こちらもUIデザインやWebデザイン、バナー作成している時には基本の機能になるため頻繁に使うツールになるでしょう。ショートカットは”T”を押すことでいつでも呼び出すことができます。
2024年のUI3にFigmaがアップデートされてから登場した機能です。メインではFigmaファイル上の操作を検索することができたり、プラグインやAI機能を呼び出すことができます。
操作に迷った時は検索することでツールを出してくれますし、プラグインやAI機能など、Figmaのプラスαの機能を呼び出す際に触ることになる場所です。
Figmaの右パネルは選択中のオブジェクトに沿った内容が表示され、選択中のものを編集するために必要な情報が表示されます。例えば「テキスト」をクリック選択しているときには、テキストサイズを変更するためのボックスなどが表示されます。
中身を編集したいときは左のパネルに表示される、というのを知っておくと慣れる速度が早まるでしょう。
バリアブルやスタイルという、繰り返し使用するUI要素を登録できる機能へアクセスできます。”ローカル”という表現がついていますが、これは開いているファイルだけの繰り返し設定する内容を登録できるという意味です。
有料プランにすることで、チーム内の他ファイルに使いまわせる「ライブラリ」という機能を使うことで、ローカルで登録した内容を他ファイルに使い回すことも可能です。
選択中の際は、その選択したオブジェクトを編集できる要素が表示されます。
Figmaでは選択したものをJPG/PNG/SVG/PDFに書き出すことが可能です。選択したもの状態で「エクスポート」を選択することで、書き出しサイズの倍率とファイル形式を選択して、素材として書き出すことができます。
エンジニアリングで必要な画像素材や、説明に必要なイメージはこちらから書き出しましょう。
Webの標準的なFlexboxの考え方を採用し、レスポンシブデザインを効率的に実現します。
要素間の余白や配置を自動で調整し、コンテンツ量の変更にも柔軟に対応。実装を考慮したデザインが可能です。
動画やチュートリアルの内容は、実際のURLを参照することをお勧めします。これらのリソースでは、段階的にオートレイアウトの基礎から応用まで学ぶことができます。
Figmaのプロトタイプ機能を使うことで、静的なデザインに動きや画面遷移を追加し、実際のプロダクトに近い形でデザインを確認・共有することができます。
UIやWebサイト上でのインタラクション（クリックによる画面の移動や、ボタンを押すことでの状態変化など）をFigmaで作成したデザインファイルに設定することができます。
プロトタイプ機能で設定した動きをプレビューで確認することができます。
□ デスクトップでの確認
□ スマートフォンでの確認
プレビューを他のユーザーでも確認するためにリンクでシェアすることが可能です。
Figmaはブラウザベースのツールであり、これにより驚くほど簡単にデザインの共有が可能です。
誰でもシェアされたデザインデータをがワンクリックで閲覧可能になります。またリンクの公開設定をチームのみ、または閲覧課に設定することもできるので 自分のチームにいないメンバーにもデザインデータをシェアすることが可能になります
Figmaはブラウザをベースにしているのでシェアが簡単に可能です リンクを生成することでメールやスラックなどに貼れ、 シェアは同様にプロトタイプのみのシェアも可能になっています プロトタイプが表示されるプレビューの画面でシェアを押すことによってプロトタイプのシェアをすることが可能です
Figmaはデザインファイルに直接コメントを残すことができます。
コメント機能を選択してクリックすることによって、コメントしたい箇所を選択してコメントを残すことができます。また、コメント機能は範囲をドラッグで指定することによって、一定の範囲に対してのコメントを残すことも可能になります。
コンポーネントは、デザインの再利用性と一貫性を高めるFigmaの中核機能です。ボタンやナビゲーション、カードなどのUIパーツを一元管理することで、効率的なデザイン作業と品質の維持を実現します
コンポーネントをさらに強力に活用するための機能として、バリアントが提供されています。この機能により、UIの状態管理がより直感的かつ効率的になります。
スタイル登録は、デザインの基本要素を定義・管理するための機能です。テキストスタイルやシャドウなど、細かなデザイン要素を統一的に管理することができます。
バリアブルは、Figmaでのデザインシステム構築をより強力にサポートする新機能です。デザインの基本要素をトークン化し、より体系的な管理を可能にします。
バリアブル機能の具体的な活用方法については、詳細なチュートリアルを提供しています。Variables機能の基本から応用まで、ステップバイステップで学ぶことができます。
バリアブル/Variables機能の使い方はこちらの記事で解説しています。https://www.bo-no.design/contents/figma-variables-turtorial
2024年、デザインツールの定番であるFigmaに新しいAI機能が追加されました。本記事では、実務でよく使う可能性の高いAI機能と開発者向け機能について、初心者にもわかりやすく解説していきます。
First Draft（ファーストドラフト）は、UIやウェブサイトのデザインデータをAIが自動生成してくれる新機能です。よく見かけるパターンのデザインであれば、イメージに近いものを瞬時に生成してくれます。例えば「お問い合わせフォームページ」などはすぐに近いものを出してくれるでしょう。
具体的な使用例：
※注意点：
この機能は完成品のデザインではなく、アイデアの第一段階となる「ドラフト」を生成することが目的です。
Figmaでは、AIが自動でレイヤー名を付けてくれる機能が存在します。これはかなり便利で、レイヤーの構造をAIが読み取ることで、適したレイヤー名に全て変更してくれます。
□ 使い方：
写真から特定の要素だけを抽出したい場合に便利な機能です。簡単な画像の切り抜き素材が欲しい場合はFigmaだけで完結して行うことができます。
特徴：
注意点：
。
開発者向けの特別なモードで、デザインからコーディングへの移行を支援します。開発者がデザインデータを見ることに特化したWebモードという機能もFigmaには存在します。有料プランへの加入が必要です。
Figmaは、現代のデジタルデザインワークフローを大きく変革するツールとして急速に普及しています。その特徴と機能を振り返ってみましょう。
デザインツールとしてのFigmaは、単なる作図ツールの域を超え、チーム全体のデザインワークフローを効率化するプラットフォームへと進化しています。特に2024年に追加されたAI機能により、デザイナーの作業効率は更に向上することが期待されます。
初心者の方も、基本的な機能から段階的に習得することで、効率的なデザインワークフローを構築することができます。Figmaの持つ可能性を最大限に活用し、より良いデザイン制作に取り組んでみましょう
Figmaの登録はこちらからhttps://www.figma.com/ja-jp/
BONO では未経験からでもUIUXデザイナーに転職した実績のあるオンラインコースを提供しています。
現場歴10年以上のデザイナーが考案・更新している「学習ロードマップ」のコースに沿って、3つの基礎を身につけ、デザイナーを目指すことができます。
詳しくはBONOのUIUXコース、または、BONOのサイトをご覧ください。
UIUXデザインコース
https://www.bo-no.design/rdm/roadmap-uiuxdesigner
簡単なバナーを作りながらFigmaの操作を学んでいきます。手を動かしながら必要なことを拾っていくのがツール系を覚えるコツです。
2025年更新、Figmaの超初心者向けチュートリアルです。仕事で使う、デザインをはじめたい、全ての人向けに基本的な使い方を動画で説明しながら解説します！💪
-----------------------------------------------
00:00 イントロ :Figmaチュートリアルについて
00:53 a. Figmaの全体像を知りたいなら
01:26 チュートリアルでの目標
01:29 a. バナーを作るのが目標！
03:17 バナーを作る準備をしよう
03:20 a. Figmaのアプリをインストール
05:26 b. デザインファイルを作成しよう
06:23 c. 素材をコピーしよう
08:34 基本機能：Frameと移動ツール
08:37 a. Frameでデザインする枠をつくる
10:58 b. 移動ツールと詳細パネル
14:57 Frameのサイズを設定しよう
15:00 a. 選択してサイズを調べよう
15:48 b. サイズを指定しよう
18:21 c. Frame名を変更してみよう
19:22 レイヤーパネルについて
19:25 a. 左側のパネルについて
20:43 b. レイヤーの解説
25:26 ページについて
25:29 a. ページ機能の説明忘れてた
26:25 まとめと次のステップ
26:29 a. やり方を真似して回数を増やそう
26:51 b. 次のステップ
27:10 高評価・登録おねがいします！
https://www.figma.com/file/PuNqOnvB3I5XZkOlbaa6QJ?node-id=0:1&locale=en&type=design
今回からデザインに入っていきます！
まずは簡単なバナーをトレースしながらFigmaの操作について入っていきましょう〜！
📜目次
-----------------------------------------------
01:44 画像を配置してみよう
01:47 a. パーツの移動
03:00 b. 背景の色を変更する
06:02 c. スクショを配置しよう
07:46 d. Figmaのロゴを配置しよう
08:31 位置の調整をしよう
08:34 a. 距離を測って位置を調整
09:19 b. レイヤーでスクショを選択
10:52 c. 実際に距離を測って位置を調整してみよう
15:27 人と文字を配置しよう
15:30 a. 人を配置しよう
18:18 b. テキストを配置しよう
20:13 c. タイポグラフィの解説
27:00 グラデーション素材で文字を読みやすく
27:03 a. グラデ素材を配置しよう
29:46 b. グラデーションも作れるよ
30:24 角丸ボックス×テキスト配置
30:27 a. Frameで四角を作る
34:45 b. テキスト配置して調整
41:51 まとめ
41:54 a. 配置と調整のやり方をやりました
42:23 b. 次：デザイン的な微調整で完成へ
43:09 c. 高評価・登録・BONOもお願いします！
🚩バナー作成で使う素材
-----------------------------------------------
https://www.figma.com/file/PuNqOnvB3I5XZkOlbaa6QJ?node-id=0:1&locale=en&type=design
00:00 完成させていきます！
00:15 この動画でデザインすること
00:18 a. 整列微調整が今回の肝！
01:32 b. 吹き出し配置して完成！
01:46 整列微調整をしよう
01:49 a. 基本原則：整列させよう
03:00 b. 下ブロックを調整
06:24 c. 定規ツールで位置調整
08:42 d. 白グラデの位置も調整
09:05 e. フォントの調整
10:56 吹き出しを配置しよう
10:59 a. 吹き出しと文字を配置しよう
12:51 b. 文字の一部だけ色を変更する方法
13:39 c. シャドウの付け方の解説
16:59 画像を書き出して完成！
17:03 a. 画像書き出しの解説
19:25 まとめと次のチュートリアル
19:28 a. 解説してないスライドについて
19:42 b. 完成をシェアしてみてください！
19:56 c. UIデザイン向けのチュートリアル
20:52 d. 高評価・チャンネル登録・BONOもお願いします！
iOSのスマホUIをトレースしながらFigmaの操作に触れていきます。まずはどんな感じでUIのデザインデータが作られるのかを知っていきましょう。
今回から「UIデザイン編」です。WebデザインやUIデザイン向けのツールであるFigmaならではの機能もチュートリアルにしていきます💡
📜目次
-----------------------------------------------
00:00 Figmaの基本をUIトレースで習得するチュートリアル
01:02 チュートリアルの内容紹介
01:43 なぜUIトレースなのか
02:55 ゴールとポイント
04:32 進め方と目次
05:23 レベル感
06:36 取り組むマインド
08:19 なぜ無料でチュートリアルやるのか
ヘッダーUIをFigmaでデザインします！
📜目次
-----------------------------------------------
00:00 デザインするアードボードの準備
00:17 デザインするUIの紹介
01:48 スクショを作業ファイルに置こう
03:31 デザインするFrameを設置しよう
05:35 Frame プリセット機能
06:49 スマホ解像度の調べ方
08:43 アイコンとOSUIキットの準備
09:40 マテリアルアイコンを準備
12:47 Figmaコミュニティの説明
14:24 iOSのUIキットを準備
22:03 覚えるより慣れていこう
22:31 AndoroidのOSキット
23:01 次回：YouTubeの動画UIをデザインしていきます
23:04 質問などあればコメントで
📜 Figma素材
-----------------------------------------------
📜目次
-----------------------------------------------
00:00 前回の続きからやっていくぞ〜
00:10 動画タイトルなどの文字を配置
00:49 動画タイトル文字を配置
03:21 改行の値の合わせ方
04:12 チャンネル名など配置
08:03 チャンネル画像UIを作成
08:51 画像を塗りに配置
09:35 アイコンの設置
10:02 レイヤー検索
10:57 コピペして設置
13:21 微調整をして完成に持っていく
15:47 グルーピングにする
17:11 動画としてグループにする
17:50 余談と次の動画
📜素材
-----------------------------------------------
📜目次
-----------------------------------------------
00:00 使用するフォントをインストールしよう
01:30 Noto Sans Japaneseを使おう
04:33 動画UI部分を作成しよう
06:30 作成するUIの構造
07:15 動画時間のUIを作成
08:46 動画時間の数字を配置
12:03 背景UIをFrameで作成
18:57 動画部分のUIを作成
21:57 Frameに画像を配置
25:51 動画の再生バーを作成
29:15 グルーピングしよう
32:18 次の動画：動画UI部分を作成
📜目次
-----------------------------------------------
00:00 イントロ
00:22 ヘッダーナビゲーションの役割
02:11 UIの構造と理解について
04:04 ロゴ素材の取得方法
07:44 ロゴサイズを調整しよう
09:22 アクションアイコンの配置
10:43 アイコンを探して配置
15:13 水平方向の整列と調整
21:05 通知アイコンの通知バッジ作成
24:09 Frameで枠を作成
25:17 外側に白色の線を作成
26:55 メインナビゲーションのグルーピング
28:34 ヘッダー全体の横幅調整
29:41 ヘッダー高さを40pxに
30:48 Figmaの慣れとUIについてのポイント
📜目次
-----------------------------------------------
00:00 イントロ
00:26 ヘッダーカテゴリの構造について
03:11 「探索」 部分の作成
03:57 フレームでブロックにする
04:53 右側コンテンツの作成
08:22 他のカテゴリーの作成
11:52 コンテンツのグループ化と整理
13:52 ヘッダーの完成
14:24 次のデザインについて
📜目次
-----------------------------------------------
00:00 イントロ
00:18 「ボトムナビゲーション」の基本構造
06:18 SVGアイコンについて
09:46 アイコンサイズの調整
12:14 フォントの調整
21:34 プロフアイコンの作成
27:03 グループにしよう
28:08 プラスボタンの作成
31:53 ボトムナビゲーションの配置
34:29 タップ範囲を調整
39:49 エフェクトの適用
49:32 まとめ
📜目次
-----------------------------------------------
00:00 イントロ
00:12 Shorts部分の基本構造
04:25 ヘッダー部分の作成
09:49 文字の配置とスタイル
15:33 アクションアイコンの追加
17:39 動画サムネの設定
19:04 シャドウを適用する理由
19:36 シャドウの適用方法
21:30 右上のアイコンにもシャドウを適用
22:15 Shortsブロックを配置する
24:38 コンテンツを調整
25:20 完成したレイアウト
25:35 まとめ
26:47 次のデザイン
📜目次
-----------------------------------------------
00:00 イントロ
00:12 Shorts部分の基本構造
04:25 ヘッダー部分の作成
09:49 文字の配置とスタイル
15:33 アクションアイコンの追加
17:39 動画サムネの設定
19:04 シャドウを適用する理由
19:36 シャドウの適用方法
21:30 右上のアイコンにもシャドウを適用
22:15 Shortsブロックを配置する
24:38 コンテンツを調整
25:20 完成したレイアウト
25:35 まとめ
26:47 次のデザイン
📜目次
-----------------------------------------------
00:00 タップ時UIの作成
00:23 背景を暗くする理由
01:02 フレームを配置して調整する
03:39 右上・左上のアイコン配置
04:28 素材はコピーして使おう
05:08 アイコンを並べていく
07:12 自動再生スイッチを作る
10:15 ボタンにシャドウをかける
11:53 自動再生スイッチを完成させる
17:12 再生/停止・戻る/進むボタンのデザイン
24:33 時間表示のデザイン
25:45 数字を配置して調整しよう
28:56 仕上げ
29:27 バーに丸を置く
30:13 まとめ & 次回
📜目次
-----------------------------------------------
00:00 タップ時UIの作成
00:23 背景を暗くする理由
01:02 フレームを配置して調整する
03:39 右上・左上のアイコン配置
04:28 素材はコピーして使おう
05:08 アイコンを並べていく
07:12 自動再生スイッチを作る
10:15 ボタンにシャドウをかける
11:53 自動再生スイッチを完成させる
17:12 再生/停止・戻る/進むボタンのデザイン
24:33 時間表示のデザイン
25:45 数字を配置して調整しよう
28:56 仕上げ
29:27 バーに丸を置く
30:13 まとめ & 次回
📜目次
-----------------------------------------------
00:00 本シリーズ最後の動画
00:30 今回デザインするUIの構造
03:32 アクションブロックの作成
05:33 アイコンの意味と構造
06:30 ボタンを作成していく
13:24 ボタン間の余白を調整
14:23 コメントブロックを作成
17:43 余白をチェックして調整する
19:51 最後の仕上げ
21:35 角丸をつけて完成
22:48 まとめと次回
24:52 BONOについて
Figmaでよく使う操作に触れていきましょう。暗記するのではなく何回も使うことで身についていきます。
Figmaを愛用する人中では馴染みのある”オートレイアウト（Auto Layout）"。ただ、初心者の方にとっては「なんだ…この機能は…（意味ワカメ）」なのかなと思います。
というわけで！めちゃくちゃ尺を使って解説してみました！Figmaを操作しながらオートレイアウトを理解できる動画です。多分これみてやれば、一般的に必要な項目は網羅できると思います！
—————————————————————
こちらをお使いください〜
※コピペして、手元のFigmaでお試し下さい
-------------------------------------------
00:00 目次と動画の説明
02:18 なぜオートレイアウト？いつ使うの？
07:02 コードでレイアウト組むってどんな感じ？
10:06 実装を意識したデータ、スピードも速い
11:39 使い方を解説します
13:33 オートレイアウト使ってみよう！
19:38 オートレイアウト使ってみよう②
26:06 さらに詳細を習得しよう！
26:56 Hug/Fill/Fixの違い
28:04 Fillを使ってデザインをしよう
32:17 お疲れ様でした！
❐ UIとUXのコミュニティ『BONO』
-------------------------------------------
デザイナーになりたい、デザインをもっと伸ばしたい。
成長速度は現場のプロに聞いて、仕事を見て学べば倍以上になります。し、同じ気持ちのメンバーと一緒に成長すればさらに上がります。
詳しくはこちら！参加お待ちしてます。
https://www.bo-no.design/
❐ カイクンについて👋
-------------------------------------------
Webデザイン、UIデザインを経て、今ではスタートアップの立ち上げしたりしてます。
経営学部→独学でmixiデザイン部→NewsPicksでPdM×デザイナとしてAppリニューアル等→MOSH共同創業→Cocoda!,SHE,canal,Spir etc立ち上げなどなどやっておりました
#figma #オートレイアウト #autolayout
—————————————————————
このデータを使って、動画と同じことをできます
この動画ではアニメーションとオーバーレイのプロトタイプのきほんを習得できます！
正直プロトタイプ機能の細かい設定パネルがあんまりわかってないな〜という人はこれを実践すると大体把握できるのではないかな〜と思っております。
覚えるより使ってみると一気にハードルなどが下がると思うのでぜひ見るだけではなく触ってみてください。
この動画の前の動画はこちら
https://youtu.be/iH8R8RTIyWI
チュートリアルのデータ
https://www.figma.com/file/DakVblpakKDu1VQ7jKgZBl/%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E6%A9%9F%E8%83%BD%E5%85%A5%E9%96%80--?type=design&node-id=29%3A738&mode=design&t=3u48qQYrTV4rwZKk-1
Figma初心者向けのショートカットを紹介します！
一覧は目次をご覧ください〜💡
パソコンやツールに慣れてない人は「ショートカット難しい…」と感じると思います。が、ここの壁を早く乗り越えておくと「なぜ私はあんな無駄な時間を…」と三井ばりに後悔しなくて済むので、おすすめです。
今日から爆速！！
—————————————————————
00:00 速度UPならショートカット!
01:00 Windowsな方へ
01:34 Figmaで一覧を見る
ー基本編ー
02:11 フレームツール
02:54 ムーブツール
03:31 テキストツール
04:05 四角ツール
04:38 線ツール
05:11 拡大縮小ツール
06:14 動作を戻す
ー表示編ー
07:33 定規ツール
08:13 表示範囲の移動
08:41 表示の拡大縮小
ーコピペ/編集編ー
09:02 コピペ
10:25 複製
11:08 一気に名前を編集
12:23 スタイルのコピペ
ーオブジェクト編ー
14:02 グループ
15:03 表示/非表示
15:36 グループの中を選択
16:35 オートレイアウト
17:41 コンポーネント
