The design systems platform that connects design and codeInterplay connects and automates design and code workflows to align your entire product team around a single source of truth “This finally connects design tooling with development in a practical way — unlike other tools, Interplay is built to integrate with existing design and dev workflows.”
概要 SmartHR UIのコンポーネントをデザイナーが追加・更新する場合、デザインツールでUI設計する場合があります。 デザインデータを作成する際に必要な情報と、守って欲しいルールをまとめています。 ツール SmartHRのプロダクト開発で利用しているデザインツールは以下の通りです。これらツールを利用開始したい場合は、社内情シスに利用申請してください。 Figmaライブラリへのアクセス方法 利用申請後、Figmaにログインし「SmartHR UI」プロジェクトにアクセスしてください。 作成したコンポーネントライブラリはFigma Communityにも公開しています。 https://www.figma.com/community/file/978607227374353992 設計ルール 前提 Figmaを使ったSmartHR UIのコンポーネントのデザインモック作成を前提にした設計ル
storybook-addon-figma Live Demo: https://swapkats.github.io/storybook-addon-figma Quickstart Install the addon npm i --save-dev storybook-figma Register the plugin // in .storybook/addons.js import '@storybook/addon-actions/register' // register the Figma addon import 'storybook-figma/register' Link a Figma design to your story import React from 'react' import { storiesOf } from '@storybook/react'
はじめに こんにちは、Pocket Musubi エンジニアの関(@sekikazu01)と申します。 「あ〜アイコン大量に増えた時逐一画像を書き出して Icon コンポーネントに反映させるのめんどくせ〜〜〜」 そんな風に思った事はないでしょうか。私は思いました。 ので Figma のアイコンコンポーネントからコードに反映するまでのパイプラインを作りましたので、そのコードを公開していきます。 この記事はアイコンの生成の話ですが、一回作っておくと他にも画像だったりコンポーネントだったり諸々の生成パイプラインを作る時にも役立つと思います。 また、敬意を表すべくこのパイプラインを作るにあたって参考にさせていただいた先人の記事を紹介しておきます。 やっていることは 9 割方同じなのですが、デザイナーがアップデートした時に Figma から変更通知できるような Widget を作ってみたのが、この記
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
