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のplugin使ってますか？ 今、チーム内でfigma plugin開発の流れがきているで、車輪の再発明をしないように一旦あるものを片っ端から触ってみました！その中から業務フローに組み込めたものを紹介します！ そもそも業務って何してるの？オンラインプログラミングサービス「Progate」の教材スライドを作っています。プログラミング初学者にも分かるようにプレゼン資料を作っているイメージです。 詳しくは下記の記事を参照ください。 選択しているレイヤーと似ている（similar）レイヤー（layer）を検索することができるプラグインです。とにかく汎用性が高く、あらゆる修正作業で役に立ちます。 例えば下記のようなことをしたい時どうすれば良いでしょうか？ ・特定のフォントを使ったテキストを 別のフォントに置き換えたい ・非表示のオブジェクトを 削除したい ・同じサイズのオブジェクトを Ex

Figmaにはプラグインがたくさんあります、その中から特に便利なプラグインを紹介します。WebサイトやスマホアプリのUIを作成するワークフローに役立つ便利なプラグインばかりです。 20 Awesome Figma Plugins to improve your Workflow by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 特にお勧めしたいFigmaのプラグイン 終わりに はじめに 私はここ数年の間、Figmaの多くのプラグインを実際に試し、定期的に使用してきました。Figmaコミュニティで提供されるプラグインは改善され続け、その勢いは衰える気配がありません。 私がこれまでに使用してきたプラグインの中で、特にお勧めできる20個のプラグインと、現在も更新されているプラグインをまとめるのに良

先日、「Makers」というFigmaでWebサイトのデザイン制作から公開まで完結することができるプラグインが発表されました。 ノーコードでのWeb制作は非常に注目を集めている分野であり、実際にノーコードでのWeb制作も広まってきています。そんな中登場するMakersはどのようなツールなのでしょうか。 今回は、Makersというプラグインの概要と、機能や料金についてご紹介したいと思います。 進化が止まらない！Webサイトが簡単に作れるノーコードツールまとめ 近年話題を集めている「ノーコード」ですが、Webサイト制作においてもノーコードでサイトを制作できるツールやサービスが充実してきました。 数年前までは、まだまだノーコードツールの使い勝手もあまり良くなく... Web Design Trends Makersは、Figmaで制作したデザインをそのままWebサイトとして公開することができるプ

徐々に日本でもメジャーなデザインツールとなっている「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。 本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳しく紹介します。「Auto Layout」はデザインを効率よく進められるだけでなく、デザイン段階でHTML・CSSコーディングの参考になる情報を追加できます。 デザイン段階での使い方はもちろん、Figmaでデザインを受け取ったエンジニアがどう考えて実装していくべきかまで紹介します。デザイナーはもちろん、Figmaで作られたデザインファイルを受け取る可能性があるエンジニアの方も是非ご覧ください。 Auto Layoutとは 「Auto Layout」とは

共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation

おひさしぶりです🔅 最近は週末プロジェクトでアプリを2つリリースしようと動いていたり、一人暮らしを始めたり、バタバタした日々を過ごしておりました.... （toCサービス好きな人、一緒に週末プロジェクトやりませんか・・笑 週末プロジェクトはなかなか難しい....） 先日こんなイベントがあり、他社のサービスのFigmaファイルを見る機会が...！そして、Twitterなどで各社、各サービスがFigmaデータやDesign Systemをオープンにしているのを最近ちらほら見かけますよね...！ 私がUIを勉強し始めた時は、Apple社が提唱するHuman Interface GuidelinesやGoogle社が提唱するMaterial designなどのUI設計の原則を定めたガイドラインを読んだり、本やnoteを読んだり、AppleやGoogle社が開発するアプリを中心にトレースしたり..

figmaを利用していて、大きな画像を配置しようとしたら縮小表示されてしまった経験はありませんか？ figmaの仕様だと縦横4096pxを超える画像はペースト時に小さくなってしまいます。 スマホデザインなど縦長の画像を貼り付けたい時に不便ですよね。 こちらはどうやらプラグインで解決できるようです。 プラグインの使い方そもそもプラグインをどこからDLするのかよくわかってなかったので覚え書き。 ファイル一覧画面のSearchを選択。 上部にサーチバーがあるのでここで検索します。 その際、下のタブはPluginsを選択してください。 今回はInsert Big Imageというものをインストールしました。 インストールしたら、プラグインを起動します。 プラグインの場所は、ハンバーガーメニュー内のPlugins内にあります。 プラグインを実行するとInsert Big Imageのモーダルがでてき

今回はコミュニティの中でFigma開発チームが公開しているデザインシステム「UI2」を分析してみました。さすがFigmaの開発チームが作っているFigmaデータだけあってとてもよく作られており、観察すればするほど面白い発見があります。 ファイルのページ構成 まず最初にファイルのページ構成を確認しておきましょう。構成はとてもシンプルでわずか3ページ。1ページ目の「Main」にガイドラインとコンポーネント集などほぼ全ての情報が集約されています。あとは2ページ目の「Templates & Extras」にコンポーネントを組み合わせた画面全体の構成例があり、3ページ目の「Cover」にFigmaファイルのカバー写真という形です。