記事一覧
Figma UI作りに欠かせない バリアントのスキルセット方法
FigmaでUIを作るに欠かせないバリアント（Variants）機能。
今回はそれについて、備忘録としてまとめました。
この記事を参考にする場合は、Figma初心者レベルはマスター済の方が向いていると思います。
VariantsとはVariantsとは、google翻訳するとバリエーション。
その通りで、1つのコンポーネントから、見た目の表示を変えるバリエーションが作れます。
Variant
Webデザインで使っているツール・素材 フォント等
FigmaWebサイト＆アプリ ワイヤーフレーム
デザインカンプ
デザインシステム構築
Photoshopバナー、メインビジュアル、図解（写真利用多めな場合）
写真加工
illustratorバナー、メインビジュアル、図解（イラスト利用多めな場合）
アイコン
ロゴ
グラフや表
紙媒体（チラシ）
WebフォントGoogle Font （CSSへimport）
※サイト表示速度の観
Webコーディングで必要なツールとプラグイン、リソースまとめ
コーダーの必要な基本的なツールとプラグイン、リソースまとめ
エディタVisual Studio Code
VSCode プラグイン
Japanese Language Pack for Visual Studio Code
Auto Rename Tag
Live Sass Compiler
Live Server
Sass (.sass only)
vscode-icons
I
アメブロ ヘッダー画像設置方法
こちらで案内している方法はリスクの少ないまっさらなブログの状態の方向けですので、設定を変更する場合はご承知の程よろしくお願いします。
ブログデザインを既に外注など利用してカスタマイズされて運用している場合は、今回のデザイン変更はおすすめしません。
アメブロ（無料会員け）のヘッダー画像の特徴ついて
PCで設置したヘッダー画像は、モバイルでは表示されないようになっています。※無料会員向け
アメブ