るるここ Webクリエイター

フロントエンド UIデザイン WEBデザイン

Figma UI作りに欠かせないバリアントのスキルセット方法

FigmaでUIを作るに欠かせないバリアント（Variants）機能。今回はそれについて、備忘録としてまとめました。この記事を参考にする場合は、Figma初心者レベルはマスター済の方が向いていると思います。 VariantsとはVariantsとは、google翻訳するとバリエーション。その通りで、1つのコンポーネントから、見た目の表示を変えるバリエーションが作れます。 Variants この機能どこで使うか今のところ、下記のようなパーツを作るときに使っていま

Webデザインで使っているツール・素材フォント等

FigmaWebサイト＆アプリ　ワイヤーフレームデザインカンプデザインシステム構築 Photoshopバナー、メインビジュアル、図解（写真利用多めな場合）写真加工 illustratorバナー、メインビジュアル、図解（イラスト利用多めな場合）アイコンロゴグラフや表紙媒体（チラシ） WebフォントGoogle Font （CSSへimport） ※サイト表示速度の観点から使用しないケースもある。和文 Noto Sans JP → 相性のいい欧

るるここ Webクリエ…

6か月前

12
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 IntelliSense for CSS class names in HTML

るるここ Webクリエ…

6か月前

4
アメブロヘッダー画像設置方法

こちらで案内している方法はリスクの少ないまっさらなブログの状態の方向けですので、設定を変更する場合はご承知の程よろしくお願いします。ブログデザインを既に外注など利用してカスタマイズされて運用している場合は、今回のデザイン変更はおすすめしません。アメブロ（無料会員け）のヘッダー画像の特徴ついて PCで設置したヘッダー画像は、モバイルでは表示されないようになっています。※無料会員向けアメブロヘッダー画像標準的なサイズ横幅1120px、縦幅400px サイズで作成

るるここ Webクリエ…

6か月前