WebサイトをFigmaで デザインする「Figmaの基本」編

2021年10月21日にオンラインで開催された「WordPressから考えるデザイン - WebサイトをFigmaで デザインする「Figmaの基本と応用」編」に登壇した際のスライドです。

私は「Figmaの基本編」スライドです。

WordPressから考えるデザイン - WebサイトをFigmaで デザインする「Figmaの基本と応用」編
https://web-design.connpass.com/event/225691/

#WordPressAndDesign

Transcript

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