Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Tutorial of Figma in GDLab
Search
Shaon
October 20, 2023
Design
0
120
Tutorial of Figma in GDLab
Shaon
October 20, 2023
Tweet
Share
More Decks by Shaon
See All by Shaon
Research & Job Hunting
shaon6016
0
40
About Programming
shaon6016
0
25
How to approach graduation research
shaon6016
0
81
Other Decks in Design
See All in Design
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
610
Dive Deep into Communication
yomtsu
0
210
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
140
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
190
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
66k
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
320
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
140
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
240
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
680
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
720
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
270
Featured
See All Featured
Being A Developer After 40
akosma
89
590k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Building Adaptive Systems
keathley
40
2.4k
Agile that works and the tools we love
rasmusluckow
328
21k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Making Projects Easy
brettharned
116
6k
How to Ace a Technical Interview
jacobian
276
23k
Visualization
eitanlees
146
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Producing Creativity
orderedlist
PRO
343
39k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Transcript
Figmaチュートリアル GDLab 福山翔太
そもそも とは? ・ブラウザで動作するUIデザインツール ・1ファイルを複数人で操作でき、チーム制作に向いている ・それぞれのOSなど作業環境に左右されない ・環境構築が簡単 ・XDと比べてリアルタイム性が高い 無料 ・そして何より
環境構築編 1 ・ググってダウンロードページを開いて、自分のOSに合ったものをDL
環境構築編 2 ・アカウントを作る 自前のアドレスで作る方が良いかも...? ・Discordのリンクからチームに参加 環境構築完了 ・作ったアカウントでログイン ・学生認証を行う
基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク
・制約 ・コンポーネント ・バリアント ・スタイル 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク
・制約 ・コンポーネント ・バリアント ・スタイル 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
操作説明 … 基本概念
基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク
・コンポーネント ・バリアント ・スタイル ・制約 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
操作説明 … 説明が必要そうな部分 ブーリアングループ ・シェイプやベクターパスを結合して 新たな図形を作る ・結合結果はレイヤーの重ね順で異なる ・長方形,直線,矢印,楕円などの シェイプに対してのみ適用可能 次項のマスクで違いについて説明
操作説明 … 説明が必要そうな部分 マスク ・下のレイヤーで上のレイヤー全てを切り抜く ・テキストなどシェイプ以外のオブジェクトも マスクより上のレイヤーなら切り抜ける ・レイヤー構成 マスクはEllipse5
操作説明 … 説明が必要そうな部分 コンポーネント ・繰り返し使用する要素を登録できる機能 ・コンポーネントから生成した オブジェクト群をインスタンスと呼ぶ ・コンポーネントを編集すると 全てのインスタンスが影響を受ける ・インスタンスのプロパティは編集可
コンポーネントの編集より優先される ・別コンポーネントのインスタンスを 入れ子にしてコンポーネントを作れる
操作説明 … 説明が必要そうな部分 バリアント ・コンポーネントのVer違いを作れる ・ブーリアン型でスイッチとしても使える ・コンポーネントプロパティもほぼ同様の機能 バリアントはサイズやレイアウトが 大きく異なる場合に推奨されている
操作説明 … 説明が必要そうな部分 スタイル ・コンポーネントのプロパティ版 ・登録できるプロパティは 色,テキスト,エフェクト,グリッド ・コンポーネントやスタイルは チームで共有することができる ・登録するにはオブジェクトが必要
操作説明 … 説明が必要そうな部分 制約 ・親フレームのサイズによって 子要素の振る舞いをコントロールする機能 ・デバイス差などによる表示サイズ変更に 強いUIを作ることができる ・ある座標から〇〇の位置に固定など数値で 設定すると縮尺変更に左右されない
・上,下,左,右,上下,左右,中央など指定は様々