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

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

記事一覧

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

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

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

2025年9月3日 6:30

  • Web開発
  • 技術解説

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

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

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

2025年8月13日 6:30

  • Web開発
  • 技術解説

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

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

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

2025年7月23日 6:30

  • Web開発
  • 技術解説

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

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

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

2025年6月18日 6:30

  • Web開発
  • 技術解説

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

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

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

2025年5月28日 6:30

  • Web開発
  • 技術解説

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

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

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

2025年5月8日 8:57

  • Web開発
  • 技術解説

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

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

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

2025年4月16日 6:30

  • Web開発
  • 技術解説

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

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

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

2025年3月27日 6:30

  • Web開発
  • 技術解説

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

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

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

2025年3月5日 6:30

  • Web開発
  • 技術解説

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

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

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

2025年2月14日 6:30

  • Web開発
  • 技術解説

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

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

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

2025年1月17日 6:30

  • Web開発
  • 技術解説

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

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

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

2024年12月20日 7:02

  • Web開発
  • 技術解説

人気記事トップ10

「OAuth 2.1」の認可コードフローを「Keycloak」で実装しよう グローバルな設定ファイル「.wslconfig」でWSL2をチューニングしてみよう SentinelOneのインストーラを悪用するEDRバイパス手法「Bring Your Own Installer」 3D世界を創るAI「Marble」のAPI公開ほか Feature Flagがもたらす「技術的負債」と「ライフサイクルマネジメント」 GitHub Universe 2025、日本からの参加者による座談会を開催 KubeCon North America 2025、BloombergによるAIをマルチクラスターで実装したKarmadaのセッション KubeCon North America 2025、ユーザー4社が相乗りしたキーノートセッションを紹介 【日本の勝機はフィジカルAI⁉︎】2026年、生成AIは「測定可能な成果」を求められる プログラミングツール「GNU Binutils 2.46」リリース ─ AMD Zen 6やSFrame v3対応など
グローバルな設定ファイル「.wslconfig」でWSL2をチューニングしてみよう LLMの「親切さ」を逆手に取るジェイルブレイク手法「HILL」と防御の限界 「OAuth 2.1」の認可コードフローを「Keycloak」で実装しよう 【日本の勝機はフィジカルAI⁉︎】2026年、生成AIは「測定可能な成果」を求められる Linuxカーネル「Linux 6.19」リリース ─ 次期リリースは「7.0」に Valveが新型ハードウェアを2026年上半期に出荷ほか オープンソースの圧縮・解凍ソフト「PeaZip 10.9.0」リリース ─ GUI強化と多形式プレビュー対応で利便性向上 オープンソースの電子書籍管理ソフト「Calibre 9.0」リリース ─ 本棚ビューやビューア操作性を強化 GitHub Universe 2025、日本からの参加者による座談会を開催 【CNDW2025】ABEMAの広告基盤を高速化した分散カウンターの実装とスケーラビリティ戦略
グローバルな設定ファイル「.wslconfig」でWSL2をチューニングしてみよう 【日本の勝機はフィジカルAI⁉︎】2026年、生成AIは「測定可能な成果」を求められる 「OAuth 2.1」の認可コードフローを「Keycloak」で実装しよう オープンソースの電子書籍管理ソフト「Calibre 9.0」リリース ─ 本棚ビューやビューア操作性を強化 LLMの「親切さ」を逆手に取るジェイルブレイク手法「HILL」と防御の限界 Ubuntuベースの軽量Linuxディストリビューション「Linux Lite 7.8」リリース ― 多数アプリケーションをPython/GTK4へ刷新 【クラウドという新大陸】主要3大クラウドの「ネイティブテレメトリ」 3D世界を創るAI「Marble」のAPI公開ほか 写真で見るGitHub Universe 2025、「楽しむ」ためのカンファレンスの様子とスポンサーブースを振り返る Linuxカーネル「Linux 6.19」リリース ─ 次期リリースは「7.0」に
人気記事ランキングをもっと見る

新着記事

SentinelOneのインストーラを悪用するEDRバイパス手法「Bring Your Own Installer」 2月12日 6:30 Feature Flagがもたらす「技術的負債」と「ライフサイクルマネジメント」 2月12日 6:30 LLMの「親切さ」を逆手に取るジェイルブレイク手法「HILL」と防御の限界 2月11日 6:30 KubeCon North America 2025、BloombergによるAIをマルチクラスターで実装したKarmadaのセッション 2月11日 5:59 Gateway API(「kgateway」＋「agentgateway)でKubernetes上のAIツール接続を制御する 2月10日 6:30

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

【CNDW2025】Grafanaが明かす「オブザーバビリティの哲学」ー最小限の労力で実用的なインサイトを得るには 1月23日 6:30 【CNDW2025】プロダクト急増に備える基盤刷新 ーウェルスナビがECSからEKSへの移行で得た知見とは 1月15日 6:30 【CNDW2025】250環境を5人で運用、構築時間は30分に ーKINTOテクノロジーズが語るインフラ基盤組織の作り方 2025年12月18日 6:30 新たな自動化で熱視線！ AIエージェントの「推論能力」を支える2つのコンポーネントとは？ 2025年11月28日 6:30 IoTに生成AIを掛け合わせる「AI-driven IoT」で現場のIoTデータ活用を加速 2025年11月26日 6:30 アイレット、KDDIの属人化問題を生成AIアシスタントの精度を高め解消へ 2025年11月21日 6:30 「Grafana Cloud」の先進的ユーザーであるグリーが10年をかけて到達した「オブザーバービリティ」とは 2025年5月15日 6:30 Grafana Labs CTOのTom Wilkie氏インタビュー。スクラップアンドビルドから産まれた「トラブルシューティングの民主化」とは 2025年4月21日 6:30 API管理をより簡単にする「Kong Konnect」が解決する課題とその主要機能 2025年3月5日 5:30 目指すはプロセス連結によるサイロ化の打破! ガバナンス強化にも寄与する自動化プラットフォームとは 2025年1月15日 6:30