Illuminating dark mode | Figma Blog
. So, after months of toiling over the right approach, we shipped dark mode in May. Product Manager Jacob Miller and Product Designer Ryhan Hassan detailed the product and design challenges of implementing dark mode at Config 2022, our annual conference. Not only did dark mode surface thorny UI questions—which Jacob and Ryhan talked all about—it required a significant engineering lift. As they sai
「Figma」日本語版が公開 デザインコラボツール大手 ヤフー、LINE、楽天などがすでに導入
デザインコラボレーションツール「Figma」を手掛ける米Figmaは7月27日、Figmaの日本語版を提供開始したと発表した。価格は、スタータープランが無料、編集が可能になるプロフェッショナル版は1人あたり月額12ドル（年間パッケージに加入した場合の1人あたりの額）、ビジネス版は1人あたり45ドル、大企業向けのエンタープライズ版は1人あたり75ドル。 （左から）Figma CPO（Chief Product Officer）の山下祐樹氏、同社CCO（Chief Customer Officer）のアマンダ・クレハ氏、同社CEOのディラン・フィールド氏、Figma Japan代表取締役社長の川延浩彰氏 Figmaは、Webブラウザ上でWebやアプリなどのサイトデザイン全般を制作・レビューできるコラボレーションツール。デザイナーだけでなく、プロダクトマネジャー、エンジニア、マーケターなどが参加
Figmaのプロトタイプでゲームを作ってみんなで遊びました - BASEプロダクトチームブログ
こんにちは！デザイナーの渡邊です。 前回、BDIというデザイナーの勉強会のロゴについての記事を書かせていただきました。 BASEのデザイナー勉強会『BDI NIGHT』のロゴを制作しました - BASEプロダクトチームブログ 今回はBDIでゲームを作るワークショップを企画したので、準備や当日の様子をお伝えできればと思います。 デザイナーもデザイナー以外にも楽しんでもらえる勉強会を BDIは主にデザインチームを対象とした勉強会でしたが、デザイナーが大切にしていることを知ってもらったり、デザインをより身近に感じてもらうために、デザインチーム外の方の参加も歓迎してはどうだろうかという意見が上がりました。 またBDIそもそものコンセプトとして、メンバー間のコミュニケーションを活発にしたり、リラックスして楽しんでインスピレーションを得て欲しいという目的もありました。 ワークショップや情報交換ももちろ
Figmaの生産性を高めるTips50選｜三上蒼太 / Sota Mikami
このような記事を参考にすることで設定可能です。 僕は ⌘ + Shift + M で設定しています。 3: Figma Walkerはショートカット設定しよう一押しPluginの一つ、Figma Walker。 日本人のエンジニアさんが開発されました。 SkecthでいうRunnnerのようなPluginです。 特に、特定のFrameやMainComponentがある位置にすぐさま移動するのに便利です。 プロジェクトが進みファイルが大きくなってきた際にとっても便利です。 これもどんどん使う機会が多くなってくるため、Macにて独自のショートカットとしておくと便利です。 僕は ⌘ + Shift + F としています。 4: ショートカットのチートシートの存在 ショートカットに苦手意識がある方は、ぜひ「ショートカットのチートシートがある」ということをだけでも覚えておいてください。 全てではない
Figmaを最強のデザインツールに変えるプラグインを厳選してまとめてみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回はブラウザ上でWebデザインやプロトタイプを作成できる「Figma」をパワーアップしてくれる、厳選された拡張機能をまとめてご紹介します。 デザインの構築を便利にしてくれるものから、Web開発の即戦力となるプラグインやツールの枠を超えたユーティリティを提供してくれるものまで、幅広くピックアップしていますのでぜひ参考にしてみてください！ ■Figmaのデザインをコードに変換できるプラグイン 【 Figma to Code 】 Figmaで作成したWebデザインを、そのまま実際の開発に利用できるソースコードに変換してくれるプラグインが「Figma to Code」です。 2020年11月時点では、汎用性の高い「Tailwind CSS」を利用したHTMLへの書き出しに対応しており、他にもFlutterやSwiftUIのソースコードが出力可能です。
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との比較なんかも合間合間していこ
Figmaの使い方、全力でまとめました。｜hikaru-takase /Loglass
最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。 私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。 導入編アカウント登録 figmaの公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが名前と職業を聞かれるぐらいで簡単に登録できます。またgoogleアカウントを持ってる人であれば、そちらからすぐにログインできるのでおすすめ。 ログイン後はfigmaのダッシュボードが表示されます。 webブラウザでほぼすべての機能が使えるのがfigmaの特長でもあります。 Desktop Appをインストールする やはり
FigmaではじめるUI（Web）デザイン｜Part1｜Nao Komura｜note
Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。 そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く（人のこと言えないですが......）、初心者にはUIデザインのツールとしてはまだまだ馴染みの薄いツールなのかなと思います。 というより、昨今はデザインツールが多すぎてシンドいことこの上ないですね。一度効率化の味を知ると更なる効率化を追い求めてしまいますし、そんな現状だと日頃から使用しているツールを変えるのも一苦労です。 ......さて、今回は初心者〜中級者くらいまでに向けてFigmaで作るUIデザイン入門的な記事を書いていこうと思
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Frames X — UI Kit & Design Handbook for Figma
Responsive | Figma
Web制作者は要チェック！ Figmaで無料利用できるUI用のデザインシステムのまとめ -Design Systems for Figma