UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

Figma

【イベント参加ログ】Figmaの制作フロー大解剖

こちらのイベントに参加した cssnite.doorkeeper.jp Qiita株式会社の綿貫さんが1人で2時間Figmaの制作フローを解説するというイベント 都度質問の回答をしながらだったのでちょっとやりにくそうだったが、とても勉強になった 特に参考になったのは以下の2…

【Figma】Figma Tokens

気になっていたFigma Tokensについて調べた www.figma.com Figma TokensはFigmaでデザインしたデザイントークンをReactなどで使用できるようにするFigma Plugin borderの半径やspacerの単位、カラーやタイポグラフィまで、あらゆるデザインオプションに使用…

【Figma】Config2022での新機能を触ってみた

Figma Config 2022 発表されたアップデートのうち、気になった機能を触ってみた Figma Releases Auto Layout Auto Layoutは入れ子になっている要素の長さや数に応じて、自動的にオブジェクトのレイアウトを調整してくれる機能 これの複数要素間のスペースを…

【Figma】ChromaticのStorybookと連携する

前々から気になっていたFigmaのStorybookと連携できるプラグインを試してみる www.figma.com これをやるにはChromaticにStorybookがパブリックにホスティングされている必要がある やり方は以下にまとめた uga-box.hatenablog.com これをみてやってみる www.…

【Figma】運用まとめ

Figmaの階層構造はTeams > Projects > Files > Pages に分かれているが、これをどう使うかは各プロジェクトに委ねられている(公式見解はあるが当てはまらないところが多い) そんな中でFigma見せ合いっこというイベントがあり、そのまとめ記事があったので…

【Figma】Figma to HTMLの実装方針

FigmaでデザインされたものからHTMLやCSSに変換するプラグインをつくりたい そのための実装方針を考えたい FigmaのNode Figmaのレイヤー構造はnodeというもので表される www.figma.com プラグインコードでは、ほとんどの場合SceneNodeとも呼ばれるページ内に…

【Figma】FigmaプラグインをWebpackをつかってバンドルする仕組みをつくる

前回Figmaのプラグインについて調べた uga-box.hatenablog.com このときはテンプレートをダウンロードしたときの実装済みの挙動を確認しただけだったが、今度はもう少し自分で書いてFigmaからHTMLとCSSを出力するようなプラグインをつくってみたい このとき…

【Figma】自作プラグイン

Figmaで自作プラグインがつくれるみたいなので簡単に触ってみる プラグインの仕組みは下のドキュメントを読んだ www.figma.com そして、実装はこちらの記事が分かりやすかったので、これを読んでの自分用メモ zenn.dev バージョンが違うからか、ちょっと記事…

【Figma】ブランチ運用を考える

Figmaの運用を考えてみた ブランチ運用 Figmaにはブランチ機能があるが、使えるのはOrganizationプランだけだった www.figma.com なのでブランチ運用をプロジェクト独自で考えないといけない 調べると様々な工夫をされているチームの記事があってとても参考…

【Figma】Variantsとは?

FigmaのVariants機能が便利そうなので試してみる https://help.figma.com/hc/en-us/articles/360056440594 この機能はどのチームまたはプランでもサポートされているが、ライブラリへの公開は無料アカウントではできない 簡単に言うと、コンポーネントにプロ…

【Figma】ファイルのexportとimport

前回Figmaの練習でファイルをつくってみた uga-box.hatenablog.com ただ、このとき無料プランのアカウントの方で作ったので、別ファイルでコンポーネントやスタイルを共有することを試すことができない ※有料プランであれば別ファイルでComponentとStyleが参…

【Figma】Figmaのお勉強

参画しているプロジェクトのデザインツールがFigmaになるので触ってみる サイトデザインはハードルが高いので、前々からやってみたかった↓の方のコードサンプル付きのサムネを作ってみる A lot of you have been asking how I make these thumbnails/coding …

【デザイン】Figmaについて

参画しているプロジェクトのデザインツールをFigmaにする案がでているようで、ちょっと調査 www.figma.com 2015年にEvan Wallace氏とDylan Field氏がWeb のアクセシビリティとネイティブ アプリの機能を組み合わせたデザインツールを作成 それをFigma1.0とし…