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
59
Tutorial of Figma in GDLab
Shaon
October 20, 2023
Tweet
Share
More Decks by Shaon
See All by Shaon
How to approach graduation research
shaon6016
0
44
Other Decks in Design
See All in Design
ホワイト化するこの世界の片隅に
hisayosky
0
150
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
210
accfes2024_torque_yamasaki
yuuyamasakiyuu
0
130
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
250
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
1
520
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
380
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
620
Sociotechnical design for software and human systems
xinyao
2
510
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
1.1k
Ubie Vitalsの取り組み紹介
8845musign
0
280
Ride or Die Animatics
warwatkar
0
140
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
0
320
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
Why Our Code Smells
bkeepers
PRO
331
56k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
83
45k
Making the Leap to Tech Lead
cromwellryan
125
8.6k
What's in a price? How to price your products and services
michaelherold
238
11k
Producing Creativity
orderedlist
PRO
338
39k
Code Reviewing Like a Champion
maltzj
515
39k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
Transcript
Figmaチュートリアル GDLab 福山翔太
そもそも とは? ・ブラウザで動作するUIデザインツール ・1ファイルを複数人で操作でき、チーム制作に向いている ・それぞれのOSなど作業環境に左右されない ・環境構築が簡単 ・XDと比べてリアルタイム性が高い 無料 ・そして何より
環境構築編 1 ・ググってダウンロードページを開いて、自分のOSに合ったものをDL
環境構築編 2 ・アカウントを作る 自前のアドレスで作る方が良いかも...? ・Discordのリンクからチームに参加 環境構築完了 ・作ったアカウントでログイン ・学生認証を行う
基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク
・制約 ・コンポーネント ・バリアント ・スタイル 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク
・制約 ・コンポーネント ・バリアント ・スタイル 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
操作説明 … 基本概念
基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク
・コンポーネント ・バリアント ・スタイル ・制約 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
操作説明 … 説明が必要そうな部分 ブーリアングループ ・シェイプやベクターパスを結合して 新たな図形を作る ・結合結果はレイヤーの重ね順で異なる ・長方形,直線,矢印,楕円などの シェイプに対してのみ適用可能 次項のマスクで違いについて説明
操作説明 … 説明が必要そうな部分 マスク ・下のレイヤーで上のレイヤー全てを切り抜く ・テキストなどシェイプ以外のオブジェクトも マスクより上のレイヤーなら切り抜ける ・レイヤー構成 マスクはEllipse5
操作説明 … 説明が必要そうな部分 コンポーネント ・繰り返し使用する要素を登録できる機能 ・コンポーネントから生成した オブジェクト群をインスタンスと呼ぶ ・コンポーネントを編集すると 全てのインスタンスが影響を受ける ・インスタンスのプロパティは編集可
コンポーネントの編集より優先される ・別コンポーネントのインスタンスを 入れ子にしてコンポーネントを作れる
操作説明 … 説明が必要そうな部分 バリアント ・コンポーネントのVer違いを作れる ・ブーリアン型でスイッチとしても使える ・コンポーネントプロパティもほぼ同様の機能 バリアントはサイズやレイアウトが 大きく異なる場合に推奨されている
操作説明 … 説明が必要そうな部分 スタイル ・コンポーネントのプロパティ版 ・登録できるプロパティは 色,テキスト,エフェクト,グリッド ・コンポーネントやスタイルは チームで共有することができる ・登録するにはオブジェクトが必要
操作説明 … 説明が必要そうな部分 制約 ・親フレームのサイズによって 子要素の振る舞いをコントロールする機能 ・デバイス差などによる表示サイズ変更に 強いUIを作ることができる ・ある座標から〇〇の位置に固定など数値で 設定すると縮尺変更に左右されない
・上,下,左,右,上下,左右,中央など指定は様々