Explore, install and use thousands of templates, plugins, and widgets published to the Figma Community by designers and developers.
Design Tools Survey 2019 で2020年、最もエキサイティングなツール 1位に選ばれた Figma。調べながら、まだしばらく Sketch でに良いんでは、と保守的に考えていたけれど、ショートカットキーがけっこうよく考えられている。。これは良い。。 自分にとってはツール習得 = ショートカットキー習得でもあるので、実際に「Figmaを使いこなせている」と感じられるまでに覚えたショートカットを一挙ご紹介します。(USキー配列です!) 整列均等配置 (Tidy Up) 「Control + Option + T」 水平方向の均等配置 「Control + Option + H」 垂直方向の均等配置 「Control + Option + V」 左揃え、右揃え 「Option + A、Option + D」 上揃え、下揃え 「Option + W、Option + S」 キ
徐々に日本でもメジャーなデザインツールとなっている「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。 本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳しく紹介します。「Auto Layout」はデザインを効率よく進められるだけでなく、デザイン段階でHTML・CSSコーディングの参考になる情報を追加できます。 デザイン段階での使い方はもちろん、Figmaでデザインを受け取ったエンジニアがどう考えて実装していくべきかまで紹介します。デザイナーはもちろん、Figmaで作られたデザインファイルを受け取る可能性があるエンジニアの方も是非ご覧ください。 Auto Layoutとは 「Auto Layout」とは
⭐figmaのブレンドモード適用一覧イマイチブレンドモードを使いこなせていない方に、ひと目で効果がわかる早見表を作成しました。 ⭐figmaで出来る文字デザイン一覧プラグインを使えばこれくらいのことはできちゃいます! ⭐figmaでつくるデザインTips動画集■ニューモフィズム文字の作り方 ⭐Figmaでニューモフィズムっぽい文字をつくる方法⭐ プラグインは必要なし!Figmaの標準機能のみ! ①文字を背景よりちょい明るい色に ②ドロップシャドウで濃い影つける ③インナーシャドウで光を入れる ④ドロップシャドウを足して上に光を足す 位置調整がちょい面倒だけど慣れれば余裕かと👍 pic.twitter.com/RoSMH7tVvU — もち | WEB・UIデザイナー (@makiko_sakamoto) December 22, 2020
Webサイトのデザインや設計を行うとき、昔は工程によっていろんなツールを使い分けていました。今はそれを(私の愛してやまない)Figma一つでブラウザ上だけで完結できます! 【目次】 私の愛してやまないFigma Webサイトの制作フロー ヒアリング(オリエン) 要件定義 サイトマップ ワイヤーフレーム デザインラフ デザインカンプ プロトタイプ フローチャート 実装段階もシームレスに 最後に 私の愛してやまないFigma 私の愛してやまないデザインツールFigma、ブラウザ完結のツールです。このブログ上の図もほとんどFigmaで作っています! ※参考:Figma: the collaborative interface design tool. 操作感はAdobe XDなんかと似た感じです。イラレのようにベクターデータのパスを描ける! ※参考:4-5. ペンツールと鉛筆ツールの使い方 |
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く