Desech Studio
Desech Studioは各OSにも対応のFigmaやSketch、XDなどからもインポートできるノーコードなビジュアルHTML/CSSエディターデスクトップアプリです。
Mac、Windows、Linuxをサポートしており、FigmaやSketch、XDなどのファイルをインポートし、自動でHTML/CSS化したのちにそのままその場でHTML/CSSを編集できる、というデスクトップアプリです。UIは左カラムにファイルツリー、中央カラムにビジュアルエディター、右カラムに編集ツールが配置される、この手のツールでよくあるUIです。
前述通りノーコードアプリとなっており、ビジュアルエリアで選択した要素の編集はその場でマウスで、或いは右カラムの編集ツールでセッティングする、という感じでコーディング不要でレイアウトを作成出来るようになっています。
FigmaやSketch、XDなどを使わないときはプロジェクトとして任意のファイルを選択し、その中のhtmlやcssを編集するビジュアルコードエディターとして使います。RWDにも対応しており、モニタサイズの異なる各デバイスで表示確認が可能、React、Angular、Vueなどもサポートされています。
とはいえ、FigmaやSketch、XDファイルなどをインポート出来ることは出来るんですが、いくつか試してもデザインした通りのCSS化は難しい様で、現状での精度はテキストと配置、ある程度の見た目の再現程度にとどまっています。いつ登場したか分かりませんが、Twitterアカウントの開始が2021年5月のようなのでまだローンチされたばかりっぽいですし今後の開発に期待したいところです。
今のところ無償プランと有償プランが用意されており、無償プランでもある程度機能を豊富にしてくれています。デスクトップアプリですがDesech Studioへのユーザー登録が必要となっています。
