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
76
About Programming
shaon6016
0
37
How to approach graduation research
shaon6016
0
100
Other Decks in Design
See All in Design
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
620
Yumika Yamada Portfolio
yumii
0
1.3k
Saudade typeface
tiagoporto
0
340
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
440
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
160
What makes a great Director?
_limex_
0
130
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
690
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
110
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
110
sachi_y_portfolio
sachi337
0
500
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
550
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
170
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Being A Developer After 40
akosma
90
590k
Docker and Python
trallard
45
3.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Making Projects Easy
brettharned
117
6.3k
Automating Front-end Workflow
addyosmani
1370
200k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How GitHub (no longer) Works
holman
315
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Practical Orchestrator
shlominoach
190
11k
Transcript
Figmaチュートリアル GDLab 福山翔太
そもそも とは? ・ブラウザで動作するUIデザインツール ・1ファイルを複数人で操作でき、チーム制作に向いている ・それぞれのOSなど作業環境に左右されない ・環境構築が簡単 ・XDと比べてリアルタイム性が高い 無料 ・そして何より
環境構築編 1 ・ググってダウンロードページを開いて、自分のOSに合ったものをDL
環境構築編 2 ・アカウントを作る 自前のアドレスで作る方が良いかも...? ・Discordのリンクからチームに参加 環境構築完了 ・作ったアカウントでログイン ・学生認証を行う
基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク
・制約 ・コンポーネント ・バリアント ・スタイル 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク
・制約 ・コンポーネント ・バリアント ・スタイル 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
操作説明 … 基本概念
基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク
・コンポーネント ・バリアント ・スタイル ・制約 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
操作説明 … 説明が必要そうな部分 ブーリアングループ ・シェイプやベクターパスを結合して 新たな図形を作る ・結合結果はレイヤーの重ね順で異なる ・長方形,直線,矢印,楕円などの シェイプに対してのみ適用可能 次項のマスクで違いについて説明
操作説明 … 説明が必要そうな部分 マスク ・下のレイヤーで上のレイヤー全てを切り抜く ・テキストなどシェイプ以外のオブジェクトも マスクより上のレイヤーなら切り抜ける ・レイヤー構成 マスクはEllipse5
操作説明 … 説明が必要そうな部分 コンポーネント ・繰り返し使用する要素を登録できる機能 ・コンポーネントから生成した オブジェクト群をインスタンスと呼ぶ ・コンポーネントを編集すると 全てのインスタンスが影響を受ける ・インスタンスのプロパティは編集可
コンポーネントの編集より優先される ・別コンポーネントのインスタンスを 入れ子にしてコンポーネントを作れる
操作説明 … 説明が必要そうな部分 バリアント ・コンポーネントのVer違いを作れる ・ブーリアン型でスイッチとしても使える ・コンポーネントプロパティもほぼ同様の機能 バリアントはサイズやレイアウトが 大きく異なる場合に推奨されている
操作説明 … 説明が必要そうな部分 スタイル ・コンポーネントのプロパティ版 ・登録できるプロパティは 色,テキスト,エフェクト,グリッド ・コンポーネントやスタイルは チームで共有することができる ・登録するにはオブジェクトが必要
操作説明 … 説明が必要そうな部分 制約 ・親フレームのサイズによって 子要素の振る舞いをコントロールする機能 ・デバイス差などによる表示サイズ変更に 強いUIを作ることができる ・ある座標から〇〇の位置に固定など数値で 設定すると縮尺変更に左右されない
・上,下,左,右,上下,左右,中央など指定は様々