Get in depth look into the Figma files of designers at top companies like Perplexity AI, Bezi, Lottie Files and more
![Sneak Peek](https://cdn-ak-scissors.b.st-hatena.com/image/square/e600c72cc3903fdb46bbfcdc5648e882e69058dc/height=288;version=1;width=512/https%3A%2F%2Fmedia.beehiiv.com%2Fcdn-cgi%2Fimage%2Ffit%3Dscale-down%2Cformat%3Dauto%2Conerror%3Dredirect%2Cquality%3D80%2Fuploads%2Fpublication%2Fthumbnail%2F6d8f9872-2ac4-462f-85e1-9ee11db59a77%2Flandscape_Sneak_Peek_Brand_GIF.gif)
Get in depth look into the Figma files of designers at top companies like Perplexity AI, Bezi, Lottie Files and more
FigmaでUIデザインをおこし、それを実装する人にハンドオフ(デザインデータを共有する)ときに、どのようなことに気をつけると良いかを書いてみます。多くの方がこの手の「実装者にやさしいデザインデータの作り方」のような記事を書いてくれていると思いますが、この記事ではFigmaに特化した内容となります。 Frame + Auto Layoutで構造的につくる実装を意識したデザインにおいては「構造化」というのは重要なポイントです。下記に並んでいるヘッダーは一見どちらも同じものです。 ですが、Figma上ではそれぞれのつくりが異なります。片方はGroupによって構成されたもの、片方はFrameとAuto Layoutでつくられたものです。 単純に一枚絵をつくるのであればどちらでも良いかもしれないですが、これらをコードへと変換していくことを考えると、後者のように情報の構造がわかりやすいことが重要です
By all accounts, Figma has been an amazing tool for designers. We've used it extensively at 37signals, and I'm sure most every other software shop has too. Adobe didn't pay $20 billion for nothing. But we don't do the bulk of our design work with or in Figma when developing Basecamp or HEY for the web. That's all done directly in HTML and CSS, as it should be. Because no matter how good Figma is,
こんにちは!今年こそは打ち上げ花火を見たいフロントエンドエンジニアの鈴木(@zookeeper08)です 💁♂️ Goodpatchではデザイナーとエンジニアが密に連携しデザイン・開発を行うことが多くあります。密に連携するからこそコミュニケーションの部分で互いに疲弊しない仕組みや工夫が求められます。この記事では最近感じている課題感とそれらを解決するような仕組みを考えてみた!というような内容です。実際にプロジェクトで実施したわけではなく、あくまで構想段階ですがせっかくなのでブログにしてみました! エンジニアがよしなに作ったその後 成果物 デザイナーからの感想 Storybook 直接みたらええやんについて どうやってやったか Storybook Connect という選択肢 Gist というプラグインを知る 最後に エンジニアがよしなに作ったその後 デザインファイルを完璧にすることは不可
There’s such an opportunity (and need!) to make design and developer tools more collaborative and accessible. When we started Figma, our stated vision was to ‘eliminate the gap between imagination and reality.’ “ There’s such an opportunity (and need!) to make design and developer tools more collaborative and accessible. When we started Figma, our stated vision was to ‘eliminate the gap between im
Shipping UIs is lossy. It requires constant back and forth between design and development. Designs help you get an overview of the UX, but are often limited to the happy path. It’s up to developers to hunt for all the un-specced edge cases. Meanwhile, development is never perfect the first time around. It’s up to designers to give feedback and sign off on the implementation before it ships. We res
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。最近は社内のデザインシステム整備の仕事もやっており、今回はそちらで作っているアイコンライブラリの話をします。 SVG アイコンを社内 npm で配る みなさん、プロダクト内で利用するアイコンをどのように管理していますか? 大抵の場合は元になる .svg ファイルが存在し、それを最終的に React コンポーネントで読んだり、あるいは昔ながらのアイコンフォントを生成したりして使っているでしょう。 ピクシブではこれまで各プロダクトがそれぞれの方法でアイコンを生成していました。あるプロジェクトは svg スプライトを生成して <use> タグで読み、またあるプロジェクトは svgr を使い、これまたあるプロジェクトでは woff を生成する npm スクリプトを持ったりしています。 実装方法
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く