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
130
Tutorial of Figma in GDLab
Shaon
October 20, 2023
Tweet
Share
More Decks by Shaon
See All by Shaon
Research & Job Hunting
shaon6016
0
74
About Programming
shaon6016
0
37
How to approach graduation research
shaon6016
0
99
Other Decks in Design
See All in Design
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
2
2.8k
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
800
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
750
Storyboard Honey
rocioparronrubio
0
330
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
株式会社バクタム 会社説明資料
bactum
0
280
「UXとUIの違い」v2
shirasu3
0
180
アクセシビリティに取り組むメリット
magi1125
1
230
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.1k
freee + Product Design FY25Q4
freee
4
15k
Findyのプロデチームの 歩みとこれから
satty9556
0
210
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
310
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
The World Runs on Bad Software
bkeepers
PRO
70
11k
A designer walks into a library…
pauljervisheath
207
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Statistics for Hackers
jakevdp
799
220k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Pragmatic Product Professional
lauravandoore
36
6.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Transcript
Figmaチュートリアル GDLab 福山翔太
そもそも とは? ・ブラウザで動作するUIデザインツール ・1ファイルを複数人で操作でき、チーム制作に向いている ・それぞれのOSなど作業環境に左右されない ・環境構築が簡単 ・XDと比べてリアルタイム性が高い 無料 ・そして何より
環境構築編 1 ・ググってダウンロードページを開いて、自分のOSに合ったものをDL
環境構築編 2 ・アカウントを作る 自前のアドレスで作る方が良いかも...? ・Discordのリンクからチームに参加 環境構築完了 ・作ったアカウントでログイン ・学生認証を行う
基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク
・制約 ・コンポーネント ・バリアント ・スタイル 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク
・制約 ・コンポーネント ・バリアント ・スタイル 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
操作説明 … 基本概念
基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク
・コンポーネント ・バリアント ・スタイル ・制約 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
操作説明 … 説明が必要そうな部分 ブーリアングループ ・シェイプやベクターパスを結合して 新たな図形を作る ・結合結果はレイヤーの重ね順で異なる ・長方形,直線,矢印,楕円などの シェイプに対してのみ適用可能 次項のマスクで違いについて説明
操作説明 … 説明が必要そうな部分 マスク ・下のレイヤーで上のレイヤー全てを切り抜く ・テキストなどシェイプ以外のオブジェクトも マスクより上のレイヤーなら切り抜ける ・レイヤー構成 マスクはEllipse5
操作説明 … 説明が必要そうな部分 コンポーネント ・繰り返し使用する要素を登録できる機能 ・コンポーネントから生成した オブジェクト群をインスタンスと呼ぶ ・コンポーネントを編集すると 全てのインスタンスが影響を受ける ・インスタンスのプロパティは編集可
コンポーネントの編集より優先される ・別コンポーネントのインスタンスを 入れ子にしてコンポーネントを作れる
操作説明 … 説明が必要そうな部分 バリアント ・コンポーネントのVer違いを作れる ・ブーリアン型でスイッチとしても使える ・コンポーネントプロパティもほぼ同様の機能 バリアントはサイズやレイアウトが 大きく異なる場合に推奨されている
操作説明 … 説明が必要そうな部分 スタイル ・コンポーネントのプロパティ版 ・登録できるプロパティは 色,テキスト,エフェクト,グリッド ・コンポーネントやスタイルは チームで共有することができる ・登録するにはオブジェクトが必要
操作説明 … 説明が必要そうな部分 制約 ・親フレームのサイズによって 子要素の振る舞いをコントロールする機能 ・デバイス差などによる表示サイズ変更に 強いUIを作ることができる ・ある座標から〇〇の位置に固定など数値で 設定すると縮尺変更に左右されない
・上,下,左,右,上下,左右,中央など指定は様々