Figmaと実装をリンクさせる — HACK The Nikkei

Figmaと実装をリンクさせる — HACK The Nikkei

Nikkei Advent Calendar 2020 の 22 日目の記事です。 はじめに 法人向けサービスの UI/UX チームの清野...概要を表示 Nikkei Advent Calendar 2020 の 22 日目の記事です。 はじめに 法人向けサービスの UI/UX チームの清野です。 サービスをリリースしてから UI の変更を重ねるにつれて、デザインファイルと実装でズレが生じたり、デザインと実装の関係性がわかりにくくなったりする問題がよくあります。このような問題を防ぐために、カラーやタイポグラフィなどの情報をデザインファイルから取り出して、コード上でデザイントークンとして定義する方法を紹介します。 実現する方法の検討 実現する方法はいくつか考えられます。チーム体制やワークフロー、デザインファイルの構成によって、適している方法は変わってきます。 1. 一気通貫ツールにおまかせ デザインファイルの情報をコード化するまで一気通貫で面倒を見てくれる便利なツールもあります。代表的なものが Diez で、Figma や Sketch など

• figma
• api
• デザイン
• あとで読む