インプレス ビジネスメディア

エンジニアなら知っておきたいFigmaのキホン

記事一覧

「テキストボックス」を作成しながら「ステートベースドデザイン」の考え方を理解しよう

第12回の今回は、Figmaで入力コンポーネントの「テキストボックス」を作成し、「ステートベースドデザイン」の考え方を解説します。

梅田 弘之（うめだ ひろゆき）

9月3日 6:30

  • Web開発
  • 技術解説

「ヘッダー」の構造設計と命名ルールを通して「階層管理」を理解する

第11回の今回は、Figmaで「ヘッダー」を構成する要素を整理し、階層と命名の設計手法について解説します。

梅田 弘之（うめだ ひろゆき）

8月13日 6:30

  • Web開発
  • 技術解説

「スタイル」機能で「フッター」を設計してコンポーネント化する

連載第10回の今回は、Figmaのスタイルとコンポーネント機能でフッターの設計方法を解説します。

梅田 弘之（うめだ ひろゆき）

7月23日 6:30

  • Web開発
  • 技術解説

「Atomic Design」で再利用しやすいUIパーツを設計する

連載第9回の今回は、Figmaで「Atomic Design」を用いたUIパーツ設計の基本について解説します。

梅田 弘之（うめだ ひろゆき）

6月18日 6:30

  • Web開発
  • 技術解説

「エフェクト」「文字列」「数値バリアブル」でデザイン設定を標準化する

連載第8回の今回は、Figmaのエフェクト設定と文字列・数値バリアブルを使って、デザインプロパティの標準化を行う方法を解説します。

梅田 弘之（うめだ ひろゆき）

5月28日 6:30

  • Web開発
  • 技術解説

「バリアブル」と「コレクション」機能でカラー設計を標準化する

連載第7回の今回は、Figmaの「バリアブル」と「コレクション」機能を活用して、カラー設定を整理・標準化する方法について解説します。

梅田 弘之（うめだ ひろゆき）

5月8日 8:57

  • Web開発
  • 技術解説

「スタイル」機能でテキストのデザインを統一する

連載第6回の今回は、Figmaのスタイル機能を使ったタイポグラフィーの標準化について解説します。

梅田 弘之（うめだ ひろゆき）

4月16日 6:30

  • Web開発
  • 技術解説

「デザイントークン」の階層構造でUI設計を「標準化」する

連載第5回の今回は、Figmaでデザイントークンのプリミティブ・エイリアス・セマンティックの3階層構造を用いてUI設計を標準化する手法を解説します。

梅田 弘之（うめだ ひろゆき）

3月27日 6:30

  • Web開発
  • 技術解説

「コンポーネント」と「インスタンス」を活用する

連載第4回の今回は、FigmaでUI要素を部品化するための「コンポーネント」と「インスタンス」の作成・管理方法について解説します。

梅田 弘之（うめだ ひろゆき）

3月5日 6:30

  • Web開発
  • 技術解説

Figmaのデザインシステムの理解と実践【その2】

連載第3回の今回は、Figmaのプロパティパネルを活用し、デザインシステムの作成における「グループ化」と「オートレイアウト」の設定方法を解説します。

梅田 弘之（うめだ ひろゆき）

2月14日 6:30

  • Web開発
  • 技術解説

Figmaのデザインシステムの理解と実践【その1】

連載第2回の今回は、Figmaを使用したデザインシステム構築の基本となる「標準化」「部品化」の重要性と、その実践方法について解説します。

梅田 弘之（うめだ ひろゆき）

1月17日 6:30

  • Web開発
  • 技術解説

Figmaの基本構造を無償の「Starter」で理解する

連載第1回の今回は、Figmaを活用してWebデザインをはじめる前に押さえておきたいFigmaの基礎について解説します。

梅田 弘之（うめだ ひろゆき）

2024年12月20日 7:02

  • Web開発
  • 技術解説

人気記事トップ10

【序論】なぜ今、監視は「再発見」されるのか 生成AI EXPO登壇陣が断言―「エンジニア不要論」への答え、個人から大企業まで実証する50倍生産性向上の実態 KDEのソフトウェア群「KDE Gear 25.12」リリース セキュリティ調査向けLinuxディストリビューション「Kali Linux 2025.4」リリース 【最新アップデート】GPT-5.1/Gemini 3/Claude 4.5はそれぞれ何が変わったのか 全社のアクセルとブレーキを握る「コーポレートPMO」 Canonical、WSL向けの「Ubuntu Pro for WSL」リリース 3Dモデルに「テクスチャ」を貼って模様を付けてみよう プライバシー保護に注力したLinuxディストリビューション「Tails 7.3.1」リリース デスクトップ環境「cinnamon 6.6」リリース
【序論】なぜ今、監視は「再発見」されるのか 【最新アップデート】GPT-5.1/Gemini 3/Claude 4.5はそれぞれ何が変わったのか 生成AI EXPO登壇陣が断言―「エンジニア不要論」への答え、個人から大企業まで実証する50倍生産性向上の実態 Zabbix Summit2025、SCSKの生成AIエージェントを活用したセッションを紹介 アリババ新型AIグラス発表、MetaのAIグラス向けSDKプレビュー公開ほか API GatewayのKongがニューヨークでテックカンファレンスを開催。初日のキーノートを紹介 外部から「WSL1/2」のサーバーにネットワークアクセスをしてみよう Zabbix Summit2025からアナログな水道メーターを機械学習で監視するソリューションを紹介 AIには別の顔を見せるWebサイト: エージェントを狙う間接プロンプトインジェクション Community over Code Asia 2025、大学生がOSSコミュニティに参加した体験を語るライトニングトークを紹介
【序論】なぜ今、監視は「再発見」されるのか 外部から「WSL1/2」のサーバーにネットワークアクセスをしてみよう 【最新アップデート】GPT-5.1/Gemini 3/Claude 4.5はそれぞれ何が変わったのか 生成AI EXPO登壇陣が断言―「エンジニア不要論」への答え、個人から大企業まで実証する50倍生産性向上の実態 位置情報の基本中の基本となる「点」の情報の扱い方を学ぼう Kubernetesコミュニティのグループ構成と活動領域の見つけ方 AIには別の顔を見せるWebサイト: エージェントを狙う間接プロンプトインジェクション Zabbix Summit2025、SCSKの生成AIエージェントを活用したセッションを紹介 アリババ新型AIグラス発表、MetaのAIグラス向けSDKプレビュー公開ほか 日本初開催の「KubeCon＋CloudNativeCon Japan 2025」、ボランティア視点で運営の裏側をちょっとのぞいてみた話
人気記事ランキングをもっと見る

新着記事

Community Over Code Asia 2025、Rustだけのトラックを紹介。中国で着実に拡がるRustエコシステム 6:01 Xrealの新型デバイス「Project Aura」初クリップ公開、発売は2026年予定ほか 6:00 全社のアクセルとブレーキを握る「コーポレートPMO」 12月12日 6:30 API GatewayのKongがニューヨークでテックカンファレンスを開催。初日のキーノートを紹介 12月12日 6:00 【最新アップデート】GPT-5.1/Gemini 3/Claude 4.5はそれぞれ何が変わったのか 12月11日 6:30

企画広告も役立つ情報バッチリ！ Sponsored

新たな自動化で熱視線！ AIエージェントの「推論能力」を支える2つのコンポーネントとは？ 11月28日 6:30 IoTに生成AIを掛け合わせる「AI-driven IoT」で現場のIoTデータ活用を加速 11月26日 6:30 アイレット、KDDIの属人化問題を生成AIアシスタントの精度を高め解消へ 11月21日 6:30 「Grafana Cloud」の先進的ユーザーであるグリーが10年をかけて到達した「オブザーバービリティ」とは 5月15日 6:30 Grafana Labs CTOのTom Wilkie氏インタビュー。スクラップアンドビルドから産まれた「トラブルシューティングの民主化」とは 4月21日 6:30 API管理をより簡単にする「Kong Konnect」が解決する課題とその主要機能 3月5日 5:30 目指すはプロセス連結によるサイロ化の打破! ガバナンス強化にも寄与する自動化プラットフォームとは 1月15日 6:30 AIで激変する「DevOpsの未来」と「IT組織のリーダーが備えるべきこと」とは 2024年11月26日 8:53 仕様書からテストケースを自動生成! Autify Genesisが変えるソフトウェアテストの未来 2024年11月21日 8:04 LLMを自由に切り替え! Kongが提案するAIゲートウェイ活用法 2024年11月15日 6:12