Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
前半:Figmaの基本編
Slide 2
Slide 2 text
はじめに 虎野とも コーダー&フロントエンドエンジニア、時々デザイナー ロードバイクと日本酒と抹茶が好きです。
Slide 3
Slide 3 text
本日のメニュー お話しすること(約40分)、ざっくりと。 ・PagesとLayers ・ComponentとMask ・AssetsとStyles ・LibraryとTeam Twenty Twenty-TwoのDraftsで実践していきます!
Slide 4
Slide 4 text
事前準備 Twenty Twenty-Twoの共有URLはこちら。 https://www.figma.com/file/76mfUcaK4QDlrXElk8MK3H/Twenty-Twenty- Two?node-id=729%3A4866 Duplicateして使ってね。
Slide 5
Slide 5 text
事前準備 ファイル開いてからDuplicate 上部のファイル名 をクリックで メニューが出るよ 自分のDraftsに 複製するよ
Slide 6
Slide 6 text
事前準備 Home画面からDuplicate Duplicateしたい ファイルを 右クリック Duplicateを クリック (Copy)が ついたファイルを 触っていこう 左上の を選択
Slide 7
Slide 7 text
PagesとLayers Pages こんなやつ 入ってるのが 今見ている Page +で Pageを 増やせる
Slide 8
Slide 8 text
PagesとLayers Layers Pagesの中にLayersがある ここは Pagesが表示 されてるよ すべての Layerがここに 入ってるよ
Slide 9
Slide 9 text
PagesとLayers 右側のサイドメニュー 選択している要素の設定が一目瞭然
Slide 10
Slide 10 text
ComponentとMask Componentの作り方 ショートカット: ⌥ ⌘ K multipleは 複数のcomponentsを 一気に作りたいときに 便利 上部メニューの アイコンからも いけるよ
Slide 11
Slide 11 text
ComponentとMask Maskの作り方 ショートカット: ⌃ ⌘ M 上部メニューの アイコンからも いけるよ
Slide 12
Slide 12 text
AssetsとStyles Assetsって? Componentsがまとめられたところ いろんな場所の Componentsが 一覧で見れるよ Componentを 作ったら 勝手に入るよ
Slide 13
Slide 13 text
AssetsとStyles Stylesって? オブジェクトのプロパティや属性のセットを定義できる Colorだけでなく FontやEffectも セット化できるよ
Slide 14
Slide 14 text
AssetsとStyles Stylesの名前 /の前はフォルダのように扱ってくれる body/textとか /を入れると 勝手にまとめて くれるよ
Slide 15
Slide 15 text
LibraryとTeam Libraryって? 他のファイルからComponentsやStylesを 持ってこれちゃう! スイッチを にすると 外部のファイルから 取り込めるよ 本アイコンを クリック
Slide 16
Slide 16 text
LibraryとTeam Publishしよう 他のファイルから共有したいファイルでPublish 最初に 共有したいファイルで Publishしてね
Slide 17
Slide 17 text
LibraryとTeam Publishしよう ただし、無料で共有できるのはStylesのみ Componentsは 有料アカウントでしか 共有できないよ Stylesのみ Publishできるよ
Slide 18
Slide 18 text
LibraryとTeam Teamのお話 招待された人だけが見れたり触れたりするファイル FigJamは 今のところ 無制限! Starter(無料)は Projectが Design fileが まで fileごとのPagesが まで 作れるよ 1つ 3つ 3つ
Slide 19
Slide 19 text
LibraryとTeam 権限のお話 Viewer と Editor can viewとは 編集はできないけど ファイルを見れる人 can editとは 実際にファイルを 編集できる人
Slide 20
Slide 20 text
Let’s 実践
Slide 21
Slide 21 text
さいごに Figmaの良いところ リアルタイムな共同編集ができる ブラウザでのアクセスと編集が可能 共有が簡単
Slide 22
Slide 22 text
さいごに ご清聴ありがとうございました。