VSCodeにFigmaを組み込む「Figma for VS Code」登場。コードの自動補完にも対応 昨年（2022年）、Adobeによる買収が発表され話題となったWebデザインツールを提供するFigmaは6月23日と24日の2日間、イベント「Config 2023」をサンフランシスコで開催しました。 その基調講演で、VSCodeのコードエディタ画面にFigmaの機能を組み込む「Figma for VS Code」が発表されました。 Bring Figma to VS Code Our new extension for VS Code eliminates context switching and helps you move faster with code suggestions based on your designs. Install to... → Inspect Fig
カンムでプロダクトデザインをしている osanai です。こんにちは。 前回ご紹介したコンポーネント品評会により、デザインシステムにおけるコンポーネントの課題について議論が進み、不必要なコンポーネントが生まれにくくなり、デザインの意図が汲み取りやすくなりました。 品評会をしていると、しばしばデザイナーとエンジニアで「Figma でもっと効率よくできないかな」という話題が出てきます。例えば「コンポーネントの Variants のパターンをパット見で把握したい」「目的のページやコンポーネントにもっと素早くアクセスしたい」などです。 運用方法に関する課題に対して少しずつ改善に取り組み続け、徐々にですが Figma でのデザインシステムの管理が効率化されつつあります。今回はこれまでに実施した Figma の運用効率化の取り組みをご紹介します。 プラグインで解決編目的のページやコンポーネントに素早く
こんにちは。こちらはLinc'wellアドベントカレンダーの24日目です。 最近 figma を使い始めたのですが、私はキャリアとしてはフロントエンドエンジニアとしての歴が長く、何か実現したいデザインが頭に思い浮かんだ時、思考としては 「display:flex の justify-content:space-between なレイアウト作りたいんだけどな〜」とCSSでイメージしてしまいます。 きっと同じ「CSSで言ってくれないと分かんない」という方もいらっしゃるのではないかと思ったので「CSSで言うこれはこんな感じで作る」という情報が役に立つのではないかと思い、今回筆を取りました。 ※ この記事は最初のとりあえずの索引としては有効だとは思いますが、真面目に入門する際には figma の公式チュートリアル動画を一通り手を動かしながら見ることをオススメします。この記事で書いていることは大体カ
仕事でbootstrapを使う機会があったので、これを機にfigmaでbootstrapデザインテンプレートを構築しました。Figmaとbootstrapの相性と生産性はめちゃくちゃ良いと感じてます。 エンジニアさん御用達！みんな大好きbootstrapは優れたコンポーネントを提供しており、その優れたbootstrapコンポーネントを共有&共同作業に特化したFigmaで事前にコンポーネント化しておく事で、デザイナー以外の人でもパーツの組み合わせを考えるだけで実際の画面に近いプロトタイプを構築することが可能になります。 細かなデザインやパーツ製作に注力しなくて良くなる分、プロジェクトの課題であるビジネス課題やシステム構成にフォーカスする事ができるのが特長です。優れたコンポーネントがデザインされていれば、デザイナー以外でも（チームで）UI/UX課題に対してアプローチしやすくなる思想や考え方は素
こんにちは、デザイナーのとりみずです。 最近Misocaでは全社的にデザインツールにFigmaを導入しました。 Misocaではリモートの社員も多く、モバイルアプリを開発しているチームは 東京…デザイナー 名古屋…サーバサイドエンジニア 京都…デザイナー 鳥取…Androidエンジニア 福岡…iOSエンジニア という日本各地の集まりになっています。 このメンバーで、とある価値仮説に対して「俺の考える最強のアイデアぶつけあい大会」をすることになりました。 そこでFigmaを活用したところ、リモートでのアイデア発散会にとても向いていたので、その様子を紹介したいと思います。 当日までの準備 課題とターゲットをすり合わせを行い、当日のアイデア発散会までの準備に下記を宿題としました。 アイデア発散会の日までに各自手書きでアイデアイメージをA1の紙に書く 匿名性を考慮してアイデアに考えた人の名前はつけ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
