デザインに貢献できる開発者になろう！ Figmaを通じたデザインの始め方一覧CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
【2022年】 Twitterで紹介して反響のあった海外プロダクト40選｜Sakino Tomiura｜note
Product Hunt巡りが日課で、おもしろい海外のプロダクトを見つけるのが趣味なのですが、そんな中で特に気になったものはTwitterに簡単な説明とともに投稿することがルーティンになっています。 去年も同様のまとめをこちらのnoteに書いて、良い振り返りになったので、毎年恒例になりつつある今年もカテゴリ別にプロダクトやサービスを振り返っていきたいと思います。 このnoteに掲載したプロダクト/サービスの基準： ✅ 2022年2月〜12月までで紹介したプロダクトやサービスで、「インプレッション数」が多かったものを中心にピックアップしています。 ✅ 有名すぎるプロダクトや、国内プロダクトは除いています。 ✅ Product Huntの順位とは全く関係ありません。 数が多いので、下記の目次から気になるカテゴリやサービスがあればぜひ覗いてみてください。 ⭐️ Twitterインプレッション数上
エンジニアにオススメの Figma 活用
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン＆開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
エンジニアでも使える！デザインツールFigmaがもたらす効果とは？ | Sqripts
こんにちは、AGESTでエンジニアをしているやまたろうです。 皆さんは、FigmaやAdobeXDといったデザインツールをご存知でしょうか。Webシステム開発に携わっている方であれば、聞いたことがあったり、使っている方が多いと思います。 デザインツールという名前を聞くと「デザイナーのためのツール」という印象を持たれるかもしれません。（私も最初はそう思っていました）しかし、実際にエンジニアとしてデザインツールを使って得られたものは想像以上に大きかったので紹介させていただきます。 本記事は、筆者がメインで利用しているFigmaをベースにお話しします。 超高速なプロトタイピング 私はフロントエンド領域を得意とするエンジニアで、2日もあればTwitterのクローンアプリを作れる程度には自信があります。なので、実務でプロトタイプを作成する際はFirebaseやSPAフレームワークを駆使していました。
明日からできる、爆速Figma活用術 - エムスリーテックブログ
こんにちは、エムスリーデザイングループでチームリーダーをやりながらエンジニアリングGも兼務しているプロダクトデザイナーの大月です。 私が所属しているエムスリーのデザイン組織は以下２つの強みがあります。 多様性 スピード 特に日々の業務では"スピード"をとても大切にしており、 デザインを早くすることで、検証回数を増やし、PDCAを多く回し、価値創造を加速することを意識しています。 こうしたエムスリーのスピード文化から、日々の業務を効率化できるFigma活用法もデザイナーのみんなで学びあっています。 今回は、エムスリーのデザイナー間で話題になった、意外と知らなかった、知っているだけで日々の業務が一気に楽になった！というFigma活用術を紹介します。 少しでもFigmaでのデザイン作業をスピードアップさせたい方の参考になれば幸いです！ 爆速のための3種の神器 1. 秩序をつくる ファイル構成とコ
大規模SaaS 「カイポケ」の未来を支えるフロントエンドの技術選定 - エス・エム・エス エンジニア テックブログ
こんにちは、エス・エム・エスのフロントエンドエンジニアの城内です。 前職では、ヘルスケア系のスタートアップでソフトウェアエンジニアをしていましたが、2022年8月にエス・エム・エスへ入社し、介護事業者向けの経営支援サービス「カイポケ」の改善をするチームに所属しています。 カイポケの改善を進める開発チームでは、この度フロントエンド専任チームを立ち上げました。この記事ではフロントエンドチーム立ち上げの背景や、チームの立ち上げから進めてきた技術選定について書きたいと思います。 カイポケ改善プロジェクト 介護事業者向けの経営支援サービス「カイポケ」は、4万を超える事業所で導入されている SaaS 型のサービスです。介護事業には様々なサービスの種類（ex. 居宅介護支援、通所介護支援、訪問介護支援、etc…）があり、カイポケはそれぞれのサービス種類に対応した約40のサービス・機能を提供しています。カ
25年続くYahoo!ニュースを支える、Figmaを用いたデザインシステム
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースでデザインを担当している萩野と小股です。 Yahoo!ニュースは、Yahoo! JAPANが運営する国内や海外のニュースを閲覧できるサービスです。1996年にサービスを開始し、2021年には25周年を迎えました。 そんなYahoo!ニュースでは、2020年より「Figma」を用いてデザイン業務を行っています。この記事では、Figmaの利用に至った背景や、運用し続けられるものにする工夫、デザインシステムによってデザイン業務がどのように効率化されたか、お伝えします。 Yahoo!ニュースが抱えていたデザインにおける課題と解決方法 この章では、Yahoo!ニュースが当時抱えていた複数のデザイナーがデザイン
ほぼコードを書くことなく Figma からレスポンシブな React コンポーネントを生成する | Amazon Web Services
Amazon Web Services ブログ ほぼコードを書くことなく Figma からレスポンシブな React コンポーネントを生成する Amplify Studio が、Figma のコード化を通じて、レスポンシブコンポーネントのデザインを大幅に強化しました。バリアントを作成してブレークポイントをカスタマイズするだけで実現可能です。Amplify Studio は、あなたのレスポンシブデザインが組み込まれた React コンポーネントを生成することで、面倒な作業を人の代わりに行います。 どのように動作するか 最新のアプリケーション設計では、開発者はさまざまな画面サイズに合わせてアプリケーションを設計する必要があります。これは多くの場合、React コンポーネントの複数のバージョンを作成し、画面サイズに基づいてレンダリングするようにトリガーすることを意味します。 Amplify の
FigmaのVariants入門 - さらにコンポーネントを使いこなそう - ICS MEDIA
ウェブ制作の現場で定番となってきたデザインツール「Figma」。前回の記事『デザインの管理と効率化が行える FigmaのComponents入門』では、デザインパーツの管理や柔軟な変更が可能になる「Components」機能を紹介しました。 本記事ではComponentsをまとめ、検索性を保ちつつ、さらに柔軟な変更と管理が行える「Variantsバリアンツ」を紹介します。 Variantsを使うと、複雑なコンポーネントの切り替えや管理が行いやすくなり、堅牢なデザインファイルが作成できます。また、コーディング時に近い思想でデザインを組めるので、実装時に破綻が起こりにくくなります。 Variantsは規模感に関わらず小さな単位でも活用できます。 「使いこなせていない」、「自分の制作の規模感では不要」と考えているデザイナーにも、手軽に導入できメリットを実感できるはずです。本記事で使い方を説明する
「デザインからコードを生成するツール」は実運用に耐えうるのか｜seya
A. 結論、現状存在するツールでは初期の開発フェーズに限られそう 先日 Figma から React のコードを生成する Amplify Studio というサービスのリリースが発表され一部の世間を騒がせたようなそうでもないような。 このような「デザインからコードを生成する」ツールというのは昨今続々とリリースされています。誇張抜きで100個くらいあると思います。なんなら私も一個作ってます。 デザインからコードを生成する そんなツールが出る度に人々は心を躍らせるものですが、それが実際にプロダクションで使われている、という事例はあまり聞いたことがありません。 それは、いざ使ってみると生成されたものに幻滅したり、ちゃんと生成するにはデザインやコードに一定の縛りが必要になってしまったり、既存のコードのアップデートにはあまり意味をなさなかったり…、様々な理由から実運用に耐えないものであるからでしょう
エンジニアのためのFigma超入門
エンジニアがFigmaを学ぶ利点 ブラウザ上で共同編集ができるなどの理由から、最近では観測範囲内の多くの企業がFigmaをメインのデザインツールとして採用しています。 一般的にフロントエンドエンジニアはデザイナーがFigma上で作成したデザインファイルを元に実装を進めると思いますが、ここでエンジニア側にもFigmaの知識がある程度あればより円滑かつスピーディにUIの実装が行えるのではないかと考えています。 具体的には、エンジニアにFigmaの知識があることで以下のような利点があります。 デザイナーの意図を汲み取ることができる デザイナーと共通言語で話せる 実装の観点からデザイナーにFigmaの修正依頼ができる ↑の打ち返しを待たずに自分で軽微な修正ができる というわけで、今回はエンジニア目線で実装への応用を交えながらFigmaの基礎知識を解説していきたいと思います。 スタイル Figmaで
デザインの確認などレビューする人向けにFigmaの使い方をまとめました。 | DevelopersIO
Figmaを使ってレビューすることが増えましたね。そんなレビューする人に向けて、とりあえずの使い方をまとめました。 レビュー等でデザインの確認を目的とした、主にViewer権限を持ったユーザー向けのFigmaの使い方についてまとめました。 Viewer権限でも細かく見ていくとざまざまな機能がありますが、ここでは必要な機能＋知っていると便利になる機能を紹介しています。 この記事では次の点にご注意ください。 ショートカットの表記でcmd/ctrlのようにスラッシュで区切られている場合、スラッシュの前がMac、後ろがWindowsの修飾キーを表します。 ショートカットはUSキーボードを基準としているため、JISキーボードだとキーコンビネーションが異なるかもしれません。（筆者はUSキーボードユーザーのため、JISでの確認はしていません）。 ブラウザ版の利用を想定しています。 Figmaアカウントは
FigmaではじめるUI（Web）デザイン｜Part2｜Nao Komura｜note
ただ、前回作ったものはデザインシステムの空箱でしかありません。 空箱という言葉が示すように、変数的に定義したカラーやタイポグラフィをどのように意味づけていくかが残りのPartの目的の1つでもあります。 そして、そのデザインシステムを真に活用していくには横断的な組織が必要不可欠になってきます。 どうすれば横断的な組織をデザイナーという立場から作り出せるのか。それは僕にはまだ上手く説明できませんが、こちらの記事なんかはヒントになるかもしれません。（Takramさんの越境という思想はUIデザイナーとして成長していくにあたって重要なファクターになると思います。） とはいえ、組織のデザインはせずにスタイルガイド的な俺々デザインシステムを作るだけでも有用であることに変わりはないと僕は考えます。 のちのち自分の作ったデザインシステムが組織的に必要になる状況はありえますが、まったく不要になるという状況はほ
FigmaではじめるUI（Web）デザイン｜Part1｜Nao Komura｜note
Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。 そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く（人のこと言えないですが......）、初心者にはUIデザインのツールとしてはまだまだ馴染みの薄いツールなのかなと思います。 というより、昨今はデザインツールが多すぎてシンドいことこの上ないですね。一度効率化の味を知ると更なる効率化を追い求めてしまいますし、そんな現状だと日頃から使用しているツールを変えるのも一苦労です。 ......さて、今回は初心者〜中級者くらいまでに向けてFigmaで作るUIデザイン入門的な記事を書いていこうと思
【Amplify と Figma の連携】Amplify Studio の UI Library を使ってみた - サーバーワークスエンジニアブログ
本ブログは動画での解説も行っています。 youtu.be はじめに 新卒1年目の近藤です。今回AWSのサービス「Amplify」で、デザインツール「Figma」との連携に関する（Amplify Studio）アップデートがありました。どちらも普段からよく使うものランキング上位のサービスなので、知りたい！ただそれだけの思いで設定を行ってみました。 何がうれしいのか デザインツールで作成した UI をコード（React コンポーネント）に変換できる Amplify Studio 上でコンポーネントを管理できる ローカルの開発環境へのインポートが簡単 私が率直に感じたうれしいポイントは上記の3つです。React などのフレームワークでは、Webページでよく使う要素（例えばボタンのUIなど）をコンポーネントとして管理することができます。通常、開発において、デザインツールで作成した UI をコードで
Figma ✕ React Storybook で作るプロトタイピング & スタイルガイド - Qiita
アプリを開発する前に予め、開発の全体像を把握するためにプロトタイプを作成します。 プロトタイピングツールで作成したUIは、実際のアプリ開発にも流用できるため効率的です。 今回は簡単な写真共有Webブラウザアプリを制作すると仮定して、 プロトタイピングツールFigmaでプロトタイプ作成 Reactコンポーネントへの落とし込み Storybookでの管理 という一連の流れを実際に実装しながらFigmaやStorybookを導入することでどういったメリットがあるのか・どういったことができるのかの検証を行います。 作成したプロトタイプの全体像 最初にどんなアプリなのかをスクリーンショットで提示してから、詳細な解説を進めていきます。 基本的なアプリに最低限必要な認証・一覧表示・登録・編集 機能をプロトタイピングで再現しました。 マテリアルデザイン（Material-ui）をベースとしています。 ログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figma Best Practices
See a demo of Figma
共同作業に最適なプロトタイピングツール「Figma」入門一覧
Stay ahead of the curve with Feedly AI