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

本

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

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

#figma入門

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を複数組み合わせたものであり、ページの骨格を