style-dictionary を使ってフロントエンドで利用しやすいデザイントークンを生成する
tl;dr このレポジトリ から .style-dictionary の中身を持ってきて npm run build を実行してください yaml で書けて、 JSDoc がついた branded-type なデザイントークンがコード生成されます デザイントークンとは デザインシステムを構成する要素のひとつで、 UI における見た目の 各属性値 を共通化するためにトークンとして定義したものです。コンポーネントに適用された カラーコード や 余白 、 フォントサイズ などCSS のスタイルの値などが具体的なデザイントークンです デザインシステムの中でも、デザイントークンはハードルが低く（値の一覧を棚卸してトークンにするだけ）、また導入した場合の実効性が高いため（実装者、デザイン共に値を少なく管理しやすくしたいという要望がある）、とりあえず導入してみるだけでも効果があります デザインシステムに
Rust と WebAssembly で爆速な Markdown Editor を作ってみる
TypeScript でフロントエンドな皆さん、今日も型パズルしていますか？ 型が好きなら Rust ですよね。ということで、いまいち使い所が思いつかない WebAssembly と Rust でなにか面白いことできないかな、と爆速（JS比2倍）の Markdown Editor を作ってみました（面倒な人は直接 GitHub みてください） この記事は iCARE Advent Calendar 2020 の 8日目の記事になります。昨日は アオキタカユキ さんの 【adobe XD】線型、円型のグラデーションを引く方法 という記事でした Webアプリケーションを作る まず、利用する側の Web アプリケーションを作成します どんな構成でもいいんですが、タイミング的にもちょうど良い Vue3 + TypeScript で環境を作りました $ npm install -g @vue/cli
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
