Figma の Component Properties を学ぶ｜ふじけん / kenshir0f
こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2022 で新しく追加された Component Properties によって UI コンポーネントをより再利用しやすい形で作ることが可能になりました。 この記事では Figma の Component Properties を使った UI コンポーネントについて、使い方とメリットなどについてまとめたいと思います。 公式のチュートリアルはこちら↓ Component Properties とは？Component Properties (コンポーネントプロパティ) は名前の通り UI コンポーネントにプロパティを設定することができる機能です。プロパティは以下の3つを設定することができます。 Boolean プロパティ (要素の表示・非表示を切り替えられる) Text プロパティ (テキストをプロパティとして管理
How To Easily Build And Support Tables In Figma — Smashing Magazine
User interface designers work with tables on a daily basis. The table is often a complex combination of text components, lines, rectangles, and icons which could be very difficult to work with, especially if you also need to support different screen resolutions, change the order of columns, and use real-life content. In this article, Andrii shares his approach to managing tables in Figma with a bi
Where do you put spacing on design system components?
I work on design systems now. It scratches a lot of itches I have, most importantly organizing and standardizing things, as well as baking accessibility in at both the design and development layers. My very cool boss is working on updating our grid system, and with that comes conversations about vertical rythm. If you’re not familiar, vertical rhythm is a way to consistently add vertical spacing b
Component architecture in Figma
Last year I published the article “Building flexible components in Figma”. Since writing that article, Figma has added improvements which expand on the many ways you can structure components by allowing you to nest components within others, and easily swap component instances, and so I thought it was a good time for an updated look at components in Figma. One of the best things about Figma’s compo
Figmaのリファクタリングからはじめるデザインシステムの構築｜TORAJIRO
こんにちは、GaudiyデザイナーのTORAJIRO（@jirosh1998）です。 『英単語アプリ mikan』の副業デザイナーとして、Figmaリファクタリング&デザインシステムの一歩目を構築した話を書こうと思います。 このnoteの最後に、今回作成した『mikan DesignSystem』のデータを公開していますので、ぜひご覧ください👋（mizoさんをはじめmikanのみなさん、具体的なアウトプットの公開まで許可いただき感謝です！心広すぎ！） 読んで欲しい人 - これからチームでデザインシステムを作っていきたい - コンポーネントライブラリをFigmaで構築したい - Figmaをリファクタリングして、デザイナーの作業効率を上げたい デザインシステム本題に入る前に、このnoteで書いている「デザインシステム」の定義について触れておきます。デザインシステムとは「良いデザインを『効率
Figmaのショートカットキーをカスタマイズして、自己流のデザインワークフローを身に着けよう。
Figmaのショートカットキーをカスタマイズして、自己流のデザインワークフローを身に着けよう。 2020.08.13 デザインツール「Figma」には、他のデザインツールと同様にデフォルトでショートカットキーが設定されている。基本的なショートカットキーは設定されているので、しっかり身につければよりスピーディにデザインワークをこなすことができる。 しかしデザインの技術が向上していくと、「もっとこういう機能のショートカットキーがほしい」「これってショートカットキーにできないのかな？」といった疑問が出てくることだろう。今回はそんな疑問を解決するために、Figmaのショートカットキーを独自にカスタマイズするマニアックな機能を紹介したいと思う。 ただし、この記事中に記載される内容は、すべてMac OS上での話になる。一部のショートカットキーにおいてはWindowsでも動作すると思うが検証端末がないた
Figmaで幅や高さを0にした要素を作っても内部的には0ではない - Qiita
これは何 Figmaを触っていてたまたま見つけた、ちょっと変わった（？）仕様について書いた記事です また、記事投稿イベント「3000文字Tips - 知ると便利なTipsをみんなへ届けよう」への投稿記事でもあります そもそも「幅や高さを0にした要素」って？ FigmaではWやHに0と打ち込んでも勝手に1になってしまいますが、0.001とでも打ち込めば0を実現できます1 私はこれを利用して、Auto layout内でも一部はみ出したようなレイアウトのUIを作るときがあります。 2022年5月27日追記 以前はこれを利用してAuto layout内で絶対配置を実現していましたが、2022年5月11日のアップデートにより不要なテクニックとなりました。 この記事の内容自体は変わっていませんが、今となっては考慮せずとも良い内容と言えます。 詳細をこちらの記事をご覧ください。 https://qiit
Why We Switched to Figma for Icon Design | Blog Awesome
10 Reasons We Switched to Figma For Icon Design Written: on August 3, 2021 by Jory Raphael Bright light! Bright light! We’ve tried keeping them out of sunlight, never giving them water or feeding them after midnight. Still, somehow the icon count at Font Awesome continues multiplying with new styles and categories. With these Gremlin-esque changes, managing our design workflow and asset library ha
コーディングしやすいFigmaデータの作り方 - Qiita
これは何 UIモックアップデータを作る際、少しでもコーディングが楽になるように作る方法を書いた記事です 大抵のWebサイトやアプリ制作においては、UIのモックアップデータを作り、その後コーディングをすると思います そのため、見た目が同じでもデータの作り次第で作業効率が大きく違います この記事で取り扱うツールはFigmaですが、本筋はSketchでもXDでも変わりません ツール名称などを適宜読み替えていただければSketchやXDでも使える考え方だと思います 対象読者 コーディングを依頼する人 主にUIデザイナー チームによってはディレクターやプロダクトオーナーも該当するかもしれません 作業しやすいデータ作成を理解するために読んでもらえたら嬉しいです コーディングをする人 フロントエンドエンジニア・マークアップエンジニア チームによってはデザイナーも該当するかもしれません 余りにもコーディン
Coming together at Config 2021 | Figma Blog
Today, after three years of silence and hard work, I finally get to announce the launch of Figma, a collaborative interface design tool. , people thought design was a solo act. Teams opened up over time, particularly over this past year, as entire organizations—designers and non-designers alike—sought out digital spaces, like Figma, to be together. Today, at Config 2021, we announced new ways to b
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Untitled UI Icons — The Ultimate Figma Icon Library
Speed Up Your Workflow With Figma Plugins — Smashing Magazine
figmabox.com
A to Z of Figma: Tips & Tricks! | Envato Tuts+
Dialy: Open source UI Kit for Figma - Freebiesbug
Building Complex Figma Variants
Figma Crash Course
How we migrated our design team to Figma
Breakpoints – Figma
Bridging design and code with Variants | Figma Blog