Figmaのオートレイアウトを完全に理解した話｜UI/UXデザイナー うっくん
どーもーUI/UXデザイナーのうっくんです。 ちょっと前にFigmaにオートレイアウトという機能が追加されました。 最初は、「おー、ボタンの長さがテキストに追従して変えられるのかー」としか思ってなかったのですが、実際に使ってみると実はもっと強力な機能でした。 オートレイアウトの基本機能。コンテンツの大きさに応じて、コンテナの大きさが変わる。今までは、いちいち赤い背景の部分もデザイナーがリサイズしなおさないといけなかった。めんどくさいので、プラグインなどを使っている人が多かったこれがとても実用的で、業務効率も上がりそうなので、すでに実戦投入しています。 かなり使いこなせてきたので、そのポイントを以下の３段階に分けてご紹介していきます。 1. 基本機能, 2. 発展系、そして、3. 現時点ではできないこと これを読めば「オートレイアウト完全に理解した」と言えるようになります。Figmaのオート
チームとプロジェクト【これからはじめるFigma】 - bagelee（ベーグリー）
はじめに 前回の記事ではFigmaでできることやツールを一通りざっくりとご紹介しました。また、FigmaとSketchとの違いなども取り上げました。 もう一度復習されたい方はこちらからご覧ください！ Figmaでできること【これからはじめるFigma】 今回の記事では、Figmaで新しいチーム、プロジェクト、そしてファイルを作っていきます。そもそもこの３つの違いはなんなのか？どういった時にチームを作ったら良いのか、プロジェクトを作ったら良いのか、どういう設定ができるのかなどしっかりとご紹介します。 ただし、完全に個人で気軽にデザインする、という方に関しては、本記事の「チーム」と「プロジェクト」部分は簡単に読む程度で十分でしょう。 1人以上の方とデザインする可能性がある方は、「チーム」と「プロジェクト」の内容も理解しておくと良いでしょう。 チームを作る まずは、前回同様Figmaを開いてくだ
FigmaのコンポーネントをVariantsで状態管理する｜ふじけん / kenshir0f
こんにちは、ふじけん(@kenshir0f)です。 Figma に新機能 Variants がリリースされました。一通り触ってみたので、チュートリアル読むよりもサクッと知りたい方向けに、何が変わったのか紹介したいと思います。 Variantsとは？複数のコンポーネントの状態をひとつにまとめて管理する機能です。 例えば、Buttonの[Default, Hover, Focus, Disabled]といった状態をそれぞれコンポーネントで作っていましたが、Variantsを使うことでひとつのコンポーネントで整理できるようになりました。 チュートリアル公式がチュートリアルを用意しているので、実際に触って試したい方はこちらをどうぞ。 Variantsの使い方(準備) Variants は複数のコンポーネントに対して使うことができます。状態の違うコンポーネントまとめてくれるので、複数のコンポーネント
Figmaのプラグインをいろいろ触ってみました - BASEプロダクトチームブログ
こんにちは。UIデザイナーの野村(@nomjic)です。 世のUIデザイナーの皆様は、デザインツールには何を使ってますか？私はSketchとFigmaを行き来して使ってますが、割とFigma推しです。ノンデザイナーでも割とすんなり使える優れものです。 先日Figmaのプラグイン機能がリリースされましたね。この記事書いてる時点でプラグイン数は100近くあり、この先便利機能がガンガン増えてくものと思われます。 いろいろ触って知っておきたいぞ！ということでBDI（※）でチームの数名とプラグイン触ってみることにしました。 ※ BASEのデザインチームでは、第2第4金曜にBDI Night (BASE Design Inspiration Night) を開催しています。洒落た名前つけてますけどいわゆる社内勉強会です。 （集まってくれたチームの皆さん） 30分ばかりで各々プラグインを触ってみて、用意
Figmaで色の変数管理をする🎨｜わたなべなつき
こんにちは！コネヒト株式会社デザイナーのなっぴーこと、わたなべなつきです。 コネヒトでは、最近SketchからFigmaに移行しました！まだまだ慣れない点も多く、日々、FigmaでのUI運用を試行錯誤しています。 今回は、そんな日々の試行錯誤の中で発見した、FigmaのLibrary機能を使って、色を変数管理する方法についてしたためてみました🎨 Sketch&Zeplin→Figma移行時の「色」に関する課題弊社ではこれまでSketchでUI制作後、ZeplinにUIデータをimportし、エンジニアさんにZeplinのUIデータを参照していただいていました。 Figma移行に伴い、エンジニアさんから「ZeplinのときはStyleguide機能があって、実装時に共通化する色がわかりやすかったけど、Figmaにはないの？」というご意見があがりました。 Figmaでも色に変数がつけられる！
Figmaで使える！スタイルガイドテンプレートのつくりかた (テンプレートのみ有料)｜Chizuru Kamisono
こんにちは、かみそるです。 noteでファイルアップロードができるようになったので、さっそくずっと育ててきたスタイルガイドのテンプレートを販売してみようと思います！ このノートでは、テンプレートのつくりかたを解説しています。テンプレートデータのダウンロードは有料ですが、命名規則などのノウハウはすべて無料で読めるのでぜひ参考にしてみてください！ はじめに🌟 UIをスクラッチで作るときに向いているスタイルガイドです 🌟 表現の幅が狭まらない設計を心がけています 🌟 テンプレート（.fig）のダウンロードのみ有料 🌟 アップデート（カイゼン、バリエーション追加）があった場合も無料で再ダウンロード可能 なんのためにテンプレートをつくるの？ 1️⃣ 効率化のため 命名規則、文字周りの定義などを一瞬で決めてデザインに入りたい。 2️⃣ 拡張性担保のため 複数のデザインデータに展開できるようにカ
Figma でざっくり作るプロトタイピング｜Spacemarket Design
こんにちは、スペースマーケット デザインチームの伊東です。 現在スペースマーケットの UI デザインは Figma で行っています。以前は Adobe XD や Sketch を使っていたのですが、わりと最近になって移行しました（デザインツールに関して、導入を決めたきっかけやメリットに関しては改めて記事として投稿できれば幸いです）。 私自身、スペースマーケットに入社してから初めて Figma を触ったのですが、あまりドキュメントを読み込まなくてもすぐに使える（≒ Sketch など従来のデザインツールとのスイッチで疲弊しない）操作感の虜になりました。 その一方で、「これをやるにはどうすれば……？？」といった場面に遭遇することも多く、その度に適宜ググったり、公式のドキュメントを読んだり、国内の有志による Slack チャンネル で情報を収集するなどして知見を溜めてきた経緯があり、同じような悩
Figmaを最強のデザインツールに変えるプラグインを厳選してまとめてみた！ -
どうも、まさとらん（@0310lan）です！ 今回はブラウザ上でWebデザインやプロトタイプを作成できる「Figma」をパワーアップしてくれる、厳選された拡張機能をまとめてご紹介します。 デザインの構築を便利にしてくれるものから、Web開発の即戦力となるプラグインやツールの枠を超えたユーティリティを提供してくれるものまで、幅広くピックアップしていますのでぜひ参考にしてみてください！ ■Figmaのデザインをコードに変換できるプラグイン 【 Figma to Code 】 Figmaで作成したWebデザインを、そのまま実際の開発に利用できるソースコードに変換してくれるプラグインが「Figma to Code」です。 2020年11月時点では、汎用性の高い「Tailwind CSS」を利用したHTMLへの書き出しに対応しており、他にもFlutterやSwiftUIのソースコードが出力可能です。
FigmaのデザインデータをPSDに変換する方法
今回は、最高のデザインツール“Figma”のローカルデータである「.fig」を、Photoshop専用の「.psd」データへ変換・エクスポートする方法を解説する。 デザイナーだったら一度は経験したことあると思うのだが、デザインデータを納品してほしいという依頼の場合、ほとんどが「.psd」で求められることが多い。 これはきっといつまで経ってもしばらくは変わることはないだろう。 せっかく効率よくデザインができるFigmaの存在を知っていても、「PSDも納品してほしい」という案件ばかりだと、なかなか使うタイミングが無いのではないだろうか。 もちろんFigma自体、基本的にクラウド保存される物であり、PSDデータに変換するということが想定されていない。そのため、デフォルトではPSDへ変換する機能は備わっていない。 しかし、あまり知られていないのだが、ローカルデータである「.fig」は、とあるステッ
Figmaのconstraints徹底解説｜UI/UXデザイナー うっくん
どうもーUI/UXデザイナーのうっくんです。 以前、Figmaのgroupとframeの違いについて書いた記事が評判でした。 そこではサラッとしか説明しなかったのですが、つまづく人も多そうなので、今回はconstraintsについて解説してみようと思います。 constraintsとは 「constraintsってなんやねん。日本語でおk」と思いますよね。安心してください。そういう方の為にこのnoteはあります。 constraints=制約。とは、frame(外枠)のサイズが変わったときに、中のUI部品がどのように振る舞うかを決めるもの、です。 もともとiPhone向けのアプリなどを開発するツールである、「Xcode」の中でUIを作る機能として使われていた用語がFigmaに輸入されたものと理解しています。なので、概念としても、設定方法としても、Xcodeのconstraintsに似ていま
FigmaのWebデザインを本物のスマホアプリに変換できる「Bravo Studio」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、UI / UXなどのWebデザインを手軽に作れるFigmaと連携してスマホアプリが作れる無料サービスをご紹介します。 プログラミングは一切不要で簡単なタグをFigmaのレイヤーに記述するだけで、アプリに変換できるユニークな機能が搭載されています。また、Airtableと連携してインタラクティブなアプリも構築できます。 さらに、ネイティブアプリのソースコードにも書き出せるので、アプリストアへの登録も可能です。 手軽にスマホアプリを開発したい方やデザイナーの方も含めて、ぜひ参考にしてみてください！ 【 Bravo Stuido 】 ■「Bravo Studio」の使い方 それでは「Bravo Studio」をどのように使えばよいのかについて見ていきましょう！ まずはトップページの【Sign up】ボタンから無料のユーザー登録を済ませておきま
CSSそこそこわかる人がとりあえず figma で何か作ることになった時の tips 集｜seya
こんにちは。こちらはLinc'wellアドベントカレンダーの24日目です。 最近 figma を使い始めたのですが、私はキャリアとしてはフロントエンドエンジニアとしての歴が長く、何か実現したいデザインが頭に思い浮かんだ時、思考としては 「display:flex の justify-content:space-between なレイアウト作りたいんだけどな〜」とCSSでイメージしてしまいます。 きっと同じ「CSSで言ってくれないと分かんない」という方もいらっしゃるのではないかと思ったので「CSSで言うこれはこんな感じで作る」という情報が役に立つのではないかと思い、今回筆を取りました。 ※ この記事は最初のとりあえずの索引としては有効だとは思いますが、真面目に入門する際には figma の公式チュートリアル動画を一通り手を動かしながら見ることをオススメします。この記事で書いていることは大体カ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figma Variants Playground | Figma
Design Systems For Figma
東京都が“GitHub”に開設した新型コロナウイルス対策サイトがすごいと話題／モダンなライブラリでモダンなデザイン、オープンデータへの取り組みも【やじうまの杜】
iOS 12に使用されている全てのUI要素・スクリーンが収録されたAdobe XD, Sketch, Figma用の無料デザイン素材
Eggplore UI StyleGuide - Freebie 🤯
Figma templates, design systems and UI kits
セキュリティ診断・検査のGMOサイバーセキュリティ byイエラエ
Figma - リアルタイム・コラボレーション・デザインツール
