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を最強のデザインツールに変えるプラグインを厳選してまとめてみた！ - paiza times
どうも、まさとらん（@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」を使ってみた！ - paiza times
どうも、まさとらん（@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 の公式チュートリアル動画を一通り手を動かしながら見ることをオススメします。この記事で書いていることは大体カ
FigmaではじめるUI（Web）デザイン｜Part1｜Nao Komura｜note
Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。 そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く（人のこと言えないですが......）、初心者にはUIデザインのツールとしてはまだまだ馴染みの薄いツールなのかなと思います。 というより、昨今はデザインツールが多すぎてシンドいことこの上ないですね。一度効率化の味を知ると更なる効率化を追い求めてしまいますし、そんな現状だと日頃から使用しているツールを変えるのも一苦労です。 ......さて、今回は初心者〜中級者くらいまでに向けてFigmaで作るUIデザイン入門的な記事を書いていこうと思
Figmaの使い方、全力でまとめました。｜hikaru-takase /Loglass
最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。 私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。 導入編アカウント登録 figmaの公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが名前と職業を聞かれるぐらいで簡単に登録できます。またgoogleアカウントを持ってる人であれば、そちらからすぐにログインできるのでおすすめ。 ログイン後はfigmaのダッシュボードが表示されます。 webブラウザでほぼすべての機能が使えるのがfigmaの特長でもあります。 Desktop Appをインストールする やはり
Figma3.0リリースでFigmaがDOPEなデザインツールになった｜SketchでもAdobe XDでもない選択肢｜Nao Komura｜note
みなさんはFigmaというデザインツールをご存知でしょうか。 正直な所、Adobe XDやSketchなどと比べると知名度も低いし、それらのツールと比べても機能は充実しているのですが使い所が微妙。 (ちなみに、Figmaの公式サイトにもXD、Sketch、Invision Studio、Framerと比較したページはあるのですが全部同じ内容で肩透かしをくらいます。) という具合に個人的に推しているデザインツールではあるものの、惜しい部分が多くまだ布教できる段階では無いな、という印象も持っていました。 しかし...... バージョン3.0のリリースでその印象が大きく変わり、最強のデザインツールFigmaを布教するぞ、という気持ちになりました(謎の使命感) ということで、Figmaの機能の紹介をメインに主要なUIデザインツールであるSketchとAdobe XDとの比較なんかも合間合間していこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
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 - リアルタイム・コラボレーション・デザインツール
Webサイトやスマホアプリの画面遷移や構造を設計するための無料フローチャート素材 -Greyhound Flowcharts
