Figmaで作るデザインシステム設計 2010年度版

本

Figmaでデザインシステムを作るプラクティスを掲載しています。

運営しているクリエイター: Toshiyuki Katsube

Figmaでつくるデザインシステム設計#1 Atoms作成まで

まずは、figmaを開く前に要件整理を行います。デザインシステムを作る目的デザインの一貫性を担保し、デザイナーがユーザーが期待する機能性やユーザビリティを素早く提供できるようする。また、デザインシステムを実行した結果として迅速にKPIを達成できるツールとして機能することを目指している。メリットと留意点サービスをまたいで一貫したUXデザインを実行することができる。コンポーネントが標準化される。変更・改修を素早く実行することができる。バージョン管理が容易になる。デ

Figmaでつくるデザインシステム設計#2 Atoms〜Moleculesの作成

はじめに前回の記事で、デザイン設計に関しての準備や作り方の概念及び、Figmaのアセットを利用したAtomsの作り方を書きました。今回は、その続きとしてアセットの作り方の補足と、Atoms同士の組み合わせで生成されるMoleculesの概念、実際のFigmaでの作り方まで解説します。前回の記事は下記からご覧いただけます。 Figmaでのアセット管理の特徴前回は、Atomsフレームを作り、Atomアセットをスラッシュを用いた命名規則で管理するという使い方を書きました。た

Figmaでつくるデザインシステム設計#3 Molecules〜Organisms

はじめに今回はFigmaのアセット利用して、Molecules〜Organismまでを作成します。Atomic Designについて、また各要素について引き続き解説します。 #1 Figmaでつくるデザインシステム Atomsまでの解説はこちらから #2 Atoms〜Moleculesまでの解説はこちら MoleculeのおさらいMoleculeとはAtomとAtomを組み合わせたものです。Atoms/Button/Primary（基本ボタン）とAtoms/Button

Figmaでつくるデザインシステム設計#4 Organisms〜Templates

はじめに今回は、Organism〜Templateの作成について解説します。要素を集めて整形するフェーズとなります。また作成してきたコンポーネントに対して具体的な機能を付与することができるフェーズでもあります。UXデザインにおいても重要なポイントとなります。 Atom/Molecule/Organismについては前回の記事を参照していただければ幸いです。 Templateについて TemplateとはAtom、Organismを複数組み合わせたものであり、ページの骨格を

Figmaで作るデザインシステム設計 2010年度版

記事一覧

Figmaでつくるデザインシステム設計#1 Atoms作成まで

Figmaでつくるデザインシステム設計#2 Atoms〜Moleculesの作成

Figmaでつくるデザインシステム設計#3 Molecules〜Organisms

Figmaでつくるデザインシステム設計#4 Organisms〜Templates