Figma トレーニング 教材 2026(日本語) | Figma
このトレーニング教材は、他のグラフィックツールの利用者が、Figmaでデザインを開始するための入門から応用までの機能の使い方・操作を、またFigmaの製品やプランについて説明します。【基礎編】画面構成シェイプツールテキストツール画像の配置画像のトリミングフレームツール色スタイルテキストスタイルエフェクトスマートセレクション【応用編】ブール演算マスクペンツール鉛筆とブラシプレビューインタラクションスクロールの操作オーバーレイバリアブルコンポーネントバリアント制約オートレイアウトプラグイン【製品とプラン編】製品ファミリーチームプランライブラリ共有Dev ModeFigma Si...
オートレイアウト (Auto Layout) とコンポーネント化の活用が必須
1.基本パーツのコンポーネント化(オートレイアウト適用)
2.PC版ページ全体のデザイン作成(オートレイアウト)
2.スマホ版ページへコピーして再調整(スタックの変更)
3.Dev ModeでCSSを確認しながらコーディング
Figmaを始めよう
Sketch の対抗馬として注目されているのが Figma です。 Figma は、後発のアプリケーションということで、Sketch が培ったノウハウをそのまま踏襲しており、Webデザインやアプリ開発に特化したユニークな機能が追加されています。

Figma初心者でも大丈夫!
レスポンシブWebデザインをFigmaで作るための3つのポイント
最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCで…

Figmaで効率の良いレスポンシブの作り方、プラグインやテンプレも活用する方法|しばデザイン
この記事ではFigmaでレスポンシブデザインを作る方法を紹介します。プラグインやテンプレートを活用して効率よく作成する方法も合わせて紹介します。 Figmaでレスポンシブデザインを作るにはいくつか方法があるので、これからレスポンシブデザインやろうと思ってる人向けにわかりやすくまとめてみました。 Figmaでレスポンシブデザインを作るには? Figmaにはオートレイアウトという機能があるので、3列のコンテンツを2列や1列にしたり、要素の幅をレイアウトを崩さず変更することができます。 他にもFigmaのプラグインを使って作業を効率化できるのでPhotoshopやイラレよりもサクサ
