Tweet
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

さいごに ご清聴ありがとうございました。