【初心者】Figma使い方#13:コンポーネント機能 - UIを部品として効率よく設計しよう

Figmaのより便利な「コンポーネント」機能の動画です。
📜目次
-----------------------------------------------
00:00 コンポーネント機能解説
00:35 今日のポイント
00:56 ❶機能説明
02:57 ❷使い方
07:10 ❸UIの効率化イメージ
10:33 まずは小さく試そう
📜参考
-----------------------------------------------
Figma - コンポーネント機能の素材
www.figma.com/file/i0PMMa8PC2...
📜Figma初心者シリーズ
-----------------------------------------------
❶#1 - 世界が注目するデザインツールFigmaの特徴、機能、料金、人気の理由を解説します
• 【超初心者】Figma講座#1:バナーデザイ...
❷#2:バナー をつくろう! - デザインする前にセットアップ。管理画面の使い方を知ろう
• 【Figma】使い方講座#2:バナーをつくろ...
❸#3:バナーをつくろう!- オブジェクトの配置&ツールの構造を知る
• 【Figma】使い方講座#3:バナーをつくろ...
❹#4:バナーをつくろう! - サイズの調整方法を身につけてバナーを完成させる
• 【Figma】使い方講座#4:バナーをつくろ...
❺#5:KZreadUIをつくる!! - アニメーションやオートレイアウト機能などもカバーするUI編のコンテンツを紹介
• 【Figma】使い方講座#5:KZread...
❻#6:KZreadUIをつくる!! - コンポーネント、ロゴ、アイコンを使ってヘッダーUIをデザインする
• 【Figma】使い方講座#6:KZread...
❼#7:KZreadUI - ボトムナビゲーションの作り方。繰り返しのパーツ/アイコン設置
• 【Figma】使い方講座#7:KZread...
❽#8:KZreadUIデザイン - 動画コンテンツのUIデザイン。画像のマスクと境界線の使い方
• 【初心者向け】Figma使い方#8:Yout...
❾#9:KZreadUIデザイン - 動画閲覧ページを作る_UIづくりテクニックの総集編です
• 【初心者向け】Figma使い方#9:Yout...
⑩#10:カラーパレット機能 - 良く使う色を登録して効率よく、一貫した配色を可能にしよう
• 【初心者】Figma使い方#10:カラーパレ...
11 - #11:プロトタイプ機能 - ホバーや遷移を付けて画面を触れる形にデザインしよう
• 【初心者】Figma使い方#11:プロトタイ...
12 - オートレイアウト機能 - 繰り返しのUIレイアウトが抜群にラクになる方法を解説
• 【初心者】Figma使い方#12:オートレイ...
🔽Figma
-----------------------------------------------
www.figma.com/
🔽チャンネル登録はこちら👋
-----------------------------------------------
/ @-bono2271
❐ 他の動画もよろしくね👋
-------------------------------------------------
【UIデザイン超基礎講座】Twitter風アプリを作りながら学ぶデザインチュートリアル
• 【UIデザイン超基礎講座】Twitter風ア...
Webデザインの新時代。プログラミングなしでWebサイトが作れるSTUDIO解説講座スタートします
• Webデザインの新時代。プログラミングなしで...
非デザイナーも使える!デザインの基本4原則でわかりやすい綺麗なグラフィックを作ろう
• 非デザイナーも使える!デザインの基本4原則で...
❐ SNS👋
-------------------------------------------------
【Twitter】
/ takumii_kai
【Instagram】
/ takumi.kaii
❐ カイクンについて👋
-------------------------------------------
Webデザイン、UIデザインを経て、今ではスタートアップの立ち上げしたりしてます。
経営学部→独学でmixiデザイン部→NewsPicksでPdM×デザイナとしてAppリニューアル等→MOSH共同創業→Cocoda!→SHE→canalというスタートアップででパッケージ×ブランド事業
#Figma #参考・目次は概要欄に

Пікірлер: 15

  • @99letters99
    @99letters99 Жыл бұрын

    お忙しいところ恐れ入ります。今Figma勉強しているのですが、こちらはコピーして自分のドラフトで中身を見て勉強することは可能でしょうか?無茶な質問でしたら申し訳ございません。

  • @-bono2271

    @-bono2271

    Жыл бұрын

    できます〜コピペする想定で作ってますよ〜

  • @user-ru6ug6md1l
    @user-ru6ug6md1l3 жыл бұрын

    08:30あたりでアイコンをコンポーネント化してインスタンス(?)の中から選んでるところのやり方がわかりません😭 どのように登録しておくのでしょうか!?🙇

  • @-bono2271

    @-bono2271

    3 жыл бұрын

    これは別シリーズにしてちゃんと解説したいんですが、 1.アイコン1つ1つがSymbolとして登録されている(選択したら紫色になる状態) 2.同じFigmaのデータ上に複数Symbolあると、Symbol同士を動画のように切り替えられる  →8:09に写っている アイコン横並び のものはすべてSymbol化していて、これらを切り替えられるようになってる みたいな感じです!

  • @-bono2271

    @-bono2271

    3 жыл бұрын

    ちょっと3月ぐらいから週1Figma流行ろうかなと思ってます〜

  • @hongoj5695

    @hongoj5695

    11 ай бұрын

    これ、XDでアイコンセット設定するとなるとできなかないけど、Figmaほどわかりやすくはないですよね。@@-bono2271

  • @youtim7093
    @youtim70933 жыл бұрын

    お忙しい中申し訳ありません!一度コンポーネントしたものはもとに戻せないのでしょうか?

  • @-bono2271

    @-bono2271

    3 жыл бұрын

    ありがとうございますー!マスター以外のコンポーネントなら戻せます! ▼master ・現状もどせないので 1. コピーして Master→Instance のUIを作成 2. Instanceのものを、解除する ▼Instance 1. Detach Instance で解除できます(Mac : cmd+opition B )

Келесі