Figmaのオートレイアウトを完全に理解した話｜UI/UXデザイナー うっくん
どーもーUI/UXデザイナーのうっくんです。 ちょっと前にFigmaにオートレイアウトという機能が追加されました。 最初は、「おー、ボタンの長さがテキストに追従して変えられるのかー」としか思ってなかったのですが、実際に使ってみると実はもっと強力な機能でした。 オートレイアウトの基本機能。コンテンツの大きさに応じて、コンテナの大きさが変わる。今までは、いちいち赤い背景の部分もデザイナーがリサイズしなおさないといけなかった。めんどくさいので、プラグインなどを使っている人が多かったこれがとても実用的で、業務効率も上がりそうなので、すでに実戦投入しています。 かなり使いこなせてきたので、そのポイントを以下の３段階に分けてご紹介していきます。 1. 基本機能, 2. 発展系、そして、3. 現時点ではできないこと これを読めば「オートレイアウト完全に理解した」と言えるようになります。Figmaのオート
Figmaにおけるコンポーネントとバージョンの管理について考える｜Nao Komura｜note
まだ完結していないシリーズの途中ではあるのですが、ちょっと早めに自分の備忘録としてまとめておきたかったので先にこちらを書いてしまいました。 相変わらずの文章量なのですが(ちゃんと読むのに15分は確実にかかります)、お時間ある方は読んでいただけると嬉しいです。そして、内容についてはまだ実験段階な部分が多いので、フィードバックを貰えると非常に助かります🙏 1.命名規則とコンポーネントの単位について命名規則とコンポーネントの単位はプロジェクトで使用される技術によって少し状況が変わってくるように思います。 そもそもコンポーネントという概念が開発にほぼ必要ない普通のWebサイトなどであれば、多少実装しにくいと思われるかもしれませんが、あまりデザイナー側が気にする事ではないかなとも思います。 ただ、今回はReact.jsやVue.jsなどのフレームワークを使ったWebアプリケーション/サービス、また
Figmaのデザインシステム UI2 を分析してみる - DESIGN JOURNAL - 株式会社モンスターラボ
今回はコミュニティの中でFigma開発チームが公開しているデザインシステム「UI2」を分析してみました。さすがFigmaの開発チームが作っているFigmaデータだけあってとてもよく作られており、観察すればするほど面白い発見があります。 ファイルのページ構成 まず最初にファイルのページ構成を確認しておきましょう。構成はとてもシンプルでわずか3ページ。1ページ目の「Main」にガイドラインとコンポーネント集などほぼ全ての情報が集約されています。あとは2ページ目の「Templates & Extras」にコンポーネントを組み合わせた画面全体の構成例があり、3ページ目の「Cover」にFigmaファイルのカバー写真という形です。
Figmaのガイドラインを作りました｜Shinya
デザイナーとしての仕事とはちょっと違いますが、1人目のデザイナーとして2人目以降のデザイナーの為に、Figmaの運用ルールを考え、ガイドラインを作りました。 なぜガイドラインを作ったのか 1人デザイナーとしてやってきたので、Figmaも自分自身のルールで運用していました。 しかしいずれ2人目のデザイナーが入るので、自分だけ分かるルールでFigmaを運用し続けていくことは、不可能でした。 その為、今後Figmaを決まったルールで運用していく為に、ガイドラインを作ることとしました。 課題を整理する2人目のデザイナーの為だけだと、現在直面している課題を解決する事にはならないので、まず現状Figmaのガイドラインがない事によって、発生している課題を洗い出しました。 作るガイドラインは、この課題を解決する事を軸として考え、設計していきました。 直面している課題 ・デザイナーとエンジニアで見ているデザ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
