figma
Figmaからコーディングする具体的な方法
- 文字をコーディングする（以下プロパティが対応できる） font-family font-size font-weight line-height letter-spacing color
ファイル構造が分かりにくい問題
プロジェクト
└── ファイル（プロジェクト名）
├── ページ（プレゼン）# 最終的にプレゼンテーションに入れて、クライアントに提出しコメントのやり取りをする。
├── ページ（デザイン）# デザイン。versionがある場合はページが増える
└── ページ（リサーチ）# ブードボードやリファレンス（参考資料）デザインのベースになるコンセプトになるような画像を突っ込む
figma tips
shift shift押下しながら縮小すると縦横比を保ちながら縮小する。
figma web design作り方
- Grid Layoutを作る Grid Layoutわかりやすい
- headerからdesignを作る
Google Fonts 導入
参考URL Googleが提供するWebフォントのサービスで、オープンソースで提供されており、基本的に無料で使用できる。 さまざまな言語のフォントも用意されている。
Illustratorやphotoshopの場合だとフォントを一度ダウンロードした後、インストールしてフォントを選んで使用するということが当たり前であったと思いますが、Figmaの場合は使用したいGoogle Fontsの名前がわかっていれば、ダウンロードやインストールをせずに使用することが可能です
figma での斜め事情
Figmaではオブジェクトを斜めに変形させることができない。
pluginの SkewDat を使うと、このIllustratorの旋回と同じような効果をFigmaだけで完結できる。