ReactコンポーネントをSketchにレンダリングしてくれるプロジェクト「react-sketchapp」がBeta版を公開。

Sketch3-logo-icon-bf313dbe9e977e9faccb916e495af57def04ddce

 ReactコンポーネントをSketchにレンダリングしてくれるプロジェクト「react-sketchapp」がBeta版を公開しています。詳細は以下から。

 react-sketchappは世界中で宿泊施設の貸出や民泊のマッチングを提供しているAirbnbのデザインチームが新たに公開したSketch用ツールで、ReactのコンポーネントをMac用デザインツールSketchに変換することが出来ます。

render React components to Sketch; tailor-made for design systems

airbnb/react-sketchapp: render React components to Sketch ⚛️💎 – GitHub

 react-sketchappはまだBeta版のため、アプリ(バイナリ)化されていませんが、以下の手順で利用することが可能で、現在のところSketchアプリの場所やファイル名などいくつかの制約があるため、興味のある方は[Issues]もチェックしながら利用してみてください。

  • Sketch v43以上と最新のnpmをインストール
    (*Sketchはアプリケーションフォルダにインストールする必要があります)
  • react-sketchappをクローン
  • git clone https://github.com/airbnb/react-sketchapp.git
    
  • Sketchアプリを起動し空の新規ファイルを作成
  • いくつかのサンプルファイルが用意されているので、好きなサンプルファイルへ移動し、renderすると以上の様にReactで書かれたコンポーネントがSketchへ表示されます。
  • cd react-sketchapp/examples/basic-setup && npm install
    npm run render
    
  • このエントリーをはてなブックマークに追加

関連記事

話題をチェック

  1. 600x601x20170822nana.jpg.pagespeed.ic.u5ed1iTQeL-e5b3de5c391c8e3805df72a8cdb3da051ece71fa

    ANA、機内食総選挙2017の結果発表 和食は牛すきやき丼、洋食はビーフシチューとオムライス

    Sponsored link  機上ӗ…
  2. MIT-Instant-Retouch-TA-12db540ca97a6020f2db78ca5b27647ac89d2f28

    機械学習を用いれば、写真が「撮影する前」からプロ仕様の美しさに──グーグルとMITがアルゴリズムを開発

    NEWS 2017.08.22 TUE 08:00マサチ&…
  3. GettyImages-496380034-e1503241697905-b18cea347ee2933a806af5a4adfa2f3d9569add1

    「世界共通のインターネット」を巡る、グーグルとカナダ最高裁との闘い

    NEWS 2017.08.21 MON 07:00カナダ&…
ページ上部へ戻る