Why designers should move from px to rem — and how to do that in Figma
If you are anything like me, you happily used Pixel (px) in Sketch and Figma during the past years without thinking much about it. It is the unit they gave me. Surely it is correct, and if not, the development team can fix that, no? Plus, there are a lot of people saying my design should be pixel perfect, right? Not quite (unless you interpreted “pixel perfect” as avoiding half-pixel). Let’s get s
FigmaでWebサイトのデザインから公開まで完結するプラグイン「Makers」が登場！ | Web Design Trends
先日、「Makers」というFigmaでWebサイトのデザイン制作から公開まで完結することができるプラグインが発表されました。 ノーコードでのWeb制作は非常に注目を集めている分野であり、実際にノーコードでのWeb制作も広まってきています。そんな中登場するMakersはどのようなツールなのでしょうか。 今回は、Makersというプラグインの概要と、機能や料金についてご紹介したいと思います。 進化が止まらない！Webサイトが簡単に作れるノーコードツールまとめ 近年話題を集めている「ノーコード」ですが、Webサイト制作においてもノーコードでサイトを制作できるツールやサービスが充実してきました。 数年前までは、まだまだノーコードツールの使い勝手もあまり良くなく... Web Design Trends Makersは、Figmaで制作したデザインをそのままWebサイトとして公開することができるプ
FigmaのAutoLayout入門 - エンジニアに伝わるデザインを作ろう - ICS MEDIA
徐々に日本でもメジャーなデザインツールとなっている「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。 本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳しく紹介します。「Auto Layout」はデザインを効率よく進められるだけでなく、デザイン段階でHTML・CSSコーディングの参考になる情報を追加できます。 デザイン段階での使い方はもちろん、Figmaでデザインを受け取ったエンジニアがどう考えて実装していくべきかまで紹介します。デザイナーはもちろん、Figmaで作られたデザインファイルを受け取る可能性があるエンジニアの方も是非ご覧ください。 Auto Layoutとは 「Auto Layout」とは
勉強になったFigmaのデザインシステム8選｜東 莉緒／Rio Azuma
おひさしぶりです🔅 最近は週末プロジェクトでアプリを2つリリースしようと動いていたり、一人暮らしを始めたり、バタバタした日々を過ごしておりました.... （toCサービス好きな人、一緒に週末プロジェクトやりませんか・・笑 週末プロジェクトはなかなか難しい....） 先日こんなイベントがあり、他社のサービスのFigmaファイルを見る機会が...！そして、Twitterなどで各社、各サービスがFigmaデータやDesign Systemをオープンにしているのを最近ちらほら見かけますよね...！ 私がUIを勉強し始めた時は、Apple社が提唱するHuman Interface GuidelinesやGoogle社が提唱するMaterial designなどのUI設計の原則を定めたガイドラインを読んだり、本やnoteを読んだり、AppleやGoogle社が開発するアプリを中心にトレースしたり..
Figmaのデザインシステム UI2 を分析してみる - DESIGN JOURNAL - 株式会社モンスターラボ
今回はコミュニティの中でFigma開発チームが公開しているデザインシステム「UI2」を分析してみました。さすがFigmaの開発チームが作っているFigmaデータだけあってとてもよく作られており、観察すればするほど面白い発見があります。 ファイルのページ構成 まず最初にファイルのページ構成を確認しておきましょう。構成はとてもシンプルでわずか3ページ。1ページ目の「Main」にガイドラインとコンポーネント集などほぼ全ての情報が集約されています。あとは2ページ目の「Templates & Extras」にコンポーネントを組み合わせた画面全体の構成例があり、3ページ目の「Cover」にFigmaファイルのカバー写真という形です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンド開発のための Figma
Google、「Material Design」のアイコンを「Figma」で公開／2,000以上ものアイコンが、5つのバリエーションで。商用も可