マガジンのカバー画像

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

4
Figmaでデザインシステムを作るプラクティスを掲載しています。
運営しているクリエイター

2020年3月の記事一覧

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

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

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

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