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
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
820
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
200
ネットワークセキュリティ科 学科紹介
sklbj_unz
0
160
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
330
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
510
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
430
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
810
NAHO SHIMONO_Portfolio2025
nahohphp
0
120
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
250
Dinosaur Mayhem
storyartist
0
140
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
270
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Building Adaptive Systems
keathley
40
2.4k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
How GitHub (no longer) Works
holman
313
140k
Site-Speed That Sticks
csswizardry
3
370
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Building Applications with DynamoDB
mza
93
6.2k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Transcript
Figmaチュートリアル GDLab 福山翔太
そもそも とは? ・ブラウザで動作するUIデザインツール ・1ファイルを複数人で操作でき、チーム制作に向いている ・それぞれのOSなど作業環境に左右されない ・環境構築が簡単 ・XDと比べてリアルタイム性が高い 無料 ・そして何より
環境構築編 1 ・ググってダウンロードページを開いて、自分のOSに合ったものをDL
環境構築編 2 ・アカウントを作る 自前のアドレスで作る方が良いかも...? ・Discordのリンクからチームに参加 環境構築完了 ・作ったアカウントでログイン ・学生認証を行う
基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク
・制約 ・コンポーネント ・バリアント ・スタイル 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク
・制約 ・コンポーネント ・バリアント ・スタイル 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
操作説明 … 基本概念
基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク
・コンポーネント ・バリアント ・スタイル ・制約 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
操作説明 … 説明が必要そうな部分 ブーリアングループ ・シェイプやベクターパスを結合して 新たな図形を作る ・結合結果はレイヤーの重ね順で異なる ・長方形,直線,矢印,楕円などの シェイプに対してのみ適用可能 次項のマスクで違いについて説明
操作説明 … 説明が必要そうな部分 マスク ・下のレイヤーで上のレイヤー全てを切り抜く ・テキストなどシェイプ以外のオブジェクトも マスクより上のレイヤーなら切り抜ける ・レイヤー構成 マスクはEllipse5
操作説明 … 説明が必要そうな部分 コンポーネント ・繰り返し使用する要素を登録できる機能 ・コンポーネントから生成した オブジェクト群をインスタンスと呼ぶ ・コンポーネントを編集すると 全てのインスタンスが影響を受ける ・インスタンスのプロパティは編集可
コンポーネントの編集より優先される ・別コンポーネントのインスタンスを 入れ子にしてコンポーネントを作れる
操作説明 … 説明が必要そうな部分 バリアント ・コンポーネントのVer違いを作れる ・ブーリアン型でスイッチとしても使える ・コンポーネントプロパティもほぼ同様の機能 バリアントはサイズやレイアウトが 大きく異なる場合に推奨されている
操作説明 … 説明が必要そうな部分 スタイル ・コンポーネントのプロパティ版 ・登録できるプロパティは 色,テキスト,エフェクト,グリッド ・コンポーネントやスタイルは チームで共有することができる ・登録するにはオブジェクトが必要
操作説明 … 説明が必要そうな部分 制約 ・親フレームのサイズによって 子要素の振る舞いをコントロールする機能 ・デバイス差などによる表示サイズ変更に 強いUIを作ることができる ・ある座標から〇〇の位置に固定など数値で 設定すると縮尺変更に左右されない
・上,下,左,右,上下,左右,中央など指定は様々