Figma
こちらのイベントに参加した cssnite.doorkeeper.jp Qiita株式会社の綿貫さんが１人で２時間Figmaの制作フローを解説するというイベント 都度質問の回答をしながらだったのでちょっとやりにくそうだったが、とても勉強になった 特に参考になったのは以下の２…
気になっていたFigma Tokensについて調べた www.figma.com Figma TokensはFigmaでデザインしたデザイントークンをReactなどで使用できるようにするFigma Plugin borderの半径やspacerの単位、カラーやタイポグラフィまで、あらゆるデザインオプションに使用…
Figma Config 2022 発表されたアップデートのうち、気になった機能を触ってみた Figma Releases Auto Layout Auto Layoutは入れ子になっている要素の長さや数に応じて、自動的にオブジェクトのレイアウトを調整してくれる機能 これの複数要素間のスペースを…
前々から気になっていたFigmaのStorybookと連携できるプラグインを試してみる www.figma.com これをやるにはChromaticにStorybookがパブリックにホスティングされている必要がある やり方は以下にまとめた uga-box.hatenablog.com これをみてやってみる www.…
作ったGifをFigmaで確認したい ただ、貼り付けだけでは動かないのでプラグインを入れる必要があった www.figma.com Gif画像そのものをFigmaで作りたい場合はGiffyCanvasというのが良いみたい www.figma.com note.com
Figmaの階層構造はTeams > Projects > Files > Pages に分かれているが、これをどう使うかは各プロジェクトに委ねられている（公式見解はあるが当てはまらないところが多い） そんな中でFigma見せ合いっこというイベントがあり、そのまとめ記事があったので…
FigmaでデザインされたものからHTMLやCSSに変換するプラグインをつくりたい そのための実装方針を考えたい FigmaのNode Figmaのレイヤー構造はnodeというもので表される www.figma.com プラグインコードでは、ほとんどの場合SceneNodeとも呼ばれるページ内に…
前回Figmaのプラグインについて調べた uga-box.hatenablog.com このときはテンプレートをダウンロードしたときの実装済みの挙動を確認しただけだったが、今度はもう少し自分で書いてFigmaからHTMLとCSSを出力するようなプラグインをつくってみたい このとき…
Figmaで自作プラグインがつくれるみたいなので簡単に触ってみる プラグインの仕組みは下のドキュメントを読んだ www.figma.com そして、実装はこちらの記事が分かりやすかったので、これを読んでの自分用メモ zenn.dev バージョンが違うからか、ちょっと記事…
Figmaの運用を考えてみた ブランチ運用 Figmaにはブランチ機能があるが、使えるのはOrganizationプランだけだった www.figma.com なのでブランチ運用をプロジェクト独自で考えないといけない 調べると様々な工夫をされているチームの記事があってとても参考…
FigmaのVariants機能が便利そうなので試してみる https://help.figma.com/hc/en-us/articles/360056440594 この機能はどのチームまたはプランでもサポートされているが、ライブラリへの公開は無料アカウントではできない 簡単に言うと、コンポーネントにプロ…
前回Figmaの練習でファイルをつくってみた uga-box.hatenablog.com ただ、このとき無料プランのアカウントの方で作ったので、別ファイルでコンポーネントやスタイルを共有することを試すことができない ※有料プランであれば別ファイルでComponentとStyleが参…
参画しているプロジェクトのデザインツールがFigmaになるので触ってみる サイトデザインはハードルが高いので、前々からやってみたかった↓の方のコードサンプル付きのサムネを作ってみる A lot of you have been asking how I make these thumbnails/coding …
参画しているプロジェクトのデザインツールをFigmaにする案がでているようで、ちょっと調査 www.figma.com 2015年にEvan Wallace氏とDylan Field氏がWeb のアクセシビリティとネイティブ アプリの機能を組み合わせたデザインツールを作成 それをFigma1.0とし…
