🚀 Figma 2023の「Variables機能」がもたらすデザイナーとエンジニア協業の新たな時代 🎨👨💻
プロトタイプから完成品へ 「10倍の法則」 新しいプロダクトをスタートするとき、プロトタイプを作成することから始めます。 短時間でFigmaでざっと作ったプロトタイプは、 アイデアの妥当性を確かめるための大切な第一歩です。 しかし、その次のステップ、プロトタイプを完成品に持っていく下流工程の作業が、想像するよりもはるかに難しい世界です。 プロトタイプを完成品のレベルまで持ち上げるためには、10倍の時間が必要と言われています。 プロトタイプから完成品への移行は、案外地味で大変な作業です。 Figma 2023はエンジニア向けツールになった 従来、Figmaはデザイナー向けのツールとして知られていました。 しかし、2023年のこのアップデートで、Figmaはエンジニア向けの機能も強化。 特にフロントエンドエンジニアにとっては、新たな可能性が広がりました。 役割分担がどう変わったか 作業効率観点
Figma Dev ModeとVariablesでデザイナーとエンジニアの連携を強化
✅ Dev Mode利用可 ❎ Dev Mode利用不可 2. Figma Variables Figmaで使える変数のことで、デザイン内で使用されるColor、Paddingなどの数値をVariablesとして定義し、一元管理が可能となります。Light/Darkに代表されるテーマ切替やコンポーネントのステータスやフォームのバリデーションなどを見越して、UIツールキット「Astro」にVariablesを取り込んでみました。 Variablesを取り込みたい理由 今までのFigmaの指定では、Figma上のColor指定と、CSS Variablesのネーミングにズレがあり分かりづらく困っていました。Figma側ではデザインシステムでStyles設定したカラーパレットを用い Thema/Primary という名前で登録していました。しかし、CSSではカラーに対して色の意味より具体的
エンジニア直伝！デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法｜ShikiCheri/C-C-C
こんにちは、@ShikiCheriです。 現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。 デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…！？クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サービスWeb版クックパッドのUIのリニューアルを行いました。 またこのプロジェクトと同時に、webに限らずアプリも含めたサービス全体の体験を統一するためのデザインシステムの構築を担当しました。 Apron - Figma Community これらのプロジェクトを推進する際、デザイン×開発の架け橋的存在であるUXエンジニアのむーさん、実装もできるデザイナーのけんけんさん、TOFUWORKSさんと共に
エンジニアといい感じに連携したいデザイナーの取り組み｜taiga / 佐野大河
こんにちは、デザイナーの佐野大河 @sn_taiga です。今日はエンジニアといい感じに連携したいデザイナーの取り組みについて話します。 社内でC2Cというデザイナー同士で学びを共有し合う場があり、そこで話した内容を社外向けにまとめました。 👉 C2Cについて詳しく書かれている記事はこちら チームのエンジニアにヒアリングしてみた画面を設計するときや仕様を詰めるとき、伝えるとき、動作検証をするときなどなど、日々デザイン業務に取り組む上でエンジニアとコミュニケーションを取るシーンは多いと思います。 そんな中自分が「エンジニアが開発しやすいように」よかれと思ってやっていることを付箋に書き出し、チームのエンジニアにヒアリングをしてみました。 良いと思った付箋に印を付けてもらい、その理由等を聞きました💬 「エンジニアが開発しやすいように」というテーマで書き出してみたものの、むしろデザイナーがエン
デザイナーとエンジニアを巻き込んだワークフローの改善｜鈴木慎吾 / TSUMIKI INC.
「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar」20日目の記事です。 今年の５月から、社内でクライアントワークのチームから自社事業のチームに異動し、映画・ドラマ・アニメのレビューサービスのFilmarksで有料会員機能のPMを担当しています。 以前はUIデザインやアプリ開発、あるいはその中間的な仕事としてプロトタイプ開発やディレクションなどを経験してきました。 PM業の傍ら、社内のデザイナーとエンジニアの受け渡し部分の改善に取り組みました。その検討過程について紹介します。 要件定義・UIデザイン・開発間のワークフロー改善もともとFilmarks内ではディレクターがGoogleスライドなどで要件資料とGithub Issueをつくり、 デザイナーがSketchでUIをつくりZeplinで書き出したURLをエンジニアに受け渡し、エンジニ
デザイナーやエンジニアの作業効率が向上するFigmaの運用方法を考える｜osanai / ui designer
カンムでプロダクトデザインをしている osanai です。こんにちは。 前回ご紹介したコンポーネント品評会により、デザインシステムにおけるコンポーネントの課題について議論が進み、不必要なコンポーネントが生まれにくくなり、デザインの意図が汲み取りやすくなりました。 品評会をしていると、しばしばデザイナーとエンジニアで「Figma でもっと効率よくできないかな」という話題が出てきます。例えば「コンポーネントの Variants のパターンをパット見で把握したい」「目的のページやコンポーネントにもっと素早くアクセスしたい」などです。 運用方法に関する課題に対して少しずつ改善に取り組み続け、徐々にですが Figma でのデザインシステムの管理が効率化されつつあります。今回はこれまでに実施した Figma の運用効率化の取り組みをご紹介します。 プラグインで解決編目的のページやコンポーネントに素早く
努力しないFigmaとの付き合い方
この記事は12月22日に行われた「Figma Design File 大公開！ デザイナー忘年会2022」で話した内容を記事化したものです。 デザインデータは中間成果物 これはこの記事のベースとなる考え方です。僕はデザインデータは中間成果物であり、いつか捨てられる（メンテされなくなる）ものだと考えています。 デザインデータを作る目的はエンジニアやBizDevの人たちとのコミュニケーションを円滑に進めることです。その目的を達成する以上に整っている必要はないと考えています。 また僕は実装されお客さんが実際に利用するアプリケーションの品質が全てだと考えていて、デザインデータをきれいに整えることは時間の無駄になることが多いと思っています。本当に考えるべきことはデザインデータをきれいに運用することではなく、品質の高いUIがきちんとリリースされる仕組みです。 しかしあまりにも無秩序に散らかっているとコ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
