Figma:設計、プロトタイプ、および企業全体でのコラボレーション
ここ数か月間、私はクライアント向けに高度にカスタマイズされた WordPress インスタンスの開発と統合を支援してきました。カスタムフィールド、カスタム投稿タイプ、デザインフレームワーク、子テーマ、カスタムプラグインを通じてWordPressを拡張し、スタイルのバランスが非常に取れています。
難しいのは、独自のプロトタイピング プラットフォームの単純なモックアップからそれを行っていることです。これはビジュアライゼーションとデザインのための強固なプラットフォームですが、簡単に応用できるものではありません。 HTML5 & CSS3。他のすべての反復を追加すると、進捗が非常に遅くなり、イライラする日々が続きます。
パズルのXNUMXつは、設計機関がマスタースタイルシートを提供せずに、単にプロトタイプを渡したということです。そのため、プロトタイプをにエクスポートすることで、それを実現するために取り組んでいます。 ゼプリンを翻訳してから、 CSS 私たちのために 子テーマ WordPressのスタイルシート。必要な手順の数とプラットフォーム間のギャップにより、このプロセスは困難になります。スピードとスケーラビリティのために複雑さを単純化しようとすることは言うまでもありません
figma
figma マルチプレイヤー コラボレーションを備えた強力なデザイン ツールを提供し、チームがリアルタイムで質の高いフィードバックを取得しながらアイデアを検討できるようにします。
figma この作業の多くを、チームの各メンバー全体で設計、フィードバック、およびコラボレーションを可能にするプラットフォームで一元化します。
- デザイナー: 状況に応じてリアルタイムでコラボレーションします。ファイルが古くなったり、お互いのファイルが上書きされたりする心配はありません。
- ステークホルダー: リンクを送信してフィードバックを収集し、変更リクエストを取得し、関係者がデザインのコピーを更新できるようにします。
- 開発者: エンジニアは常に最新の信頼できる情報源にアクセスでき、要素を検査し、アセットをエクスポートし、コードをコピーできます。
Figmaにはいくつかのユニークな機能があります。
- ブール演算: 結合、減算、交差、除外の 4 つの式を使用すると、シェイプ レイヤーの任意のセットを正確に組み合わせることができます。
- コンポーネント: ファイル全体で再利用可能でスケーラブルな要素を使用して、より迅速かつ一貫して構築します。各インスタンスのレイヤーにアクセスして、テキストや画像をインラインで直感的に編集およびオーバーライドできます。
- 制約: オブジェクトを親フレームに固定したり、オブジェクトをグリッドにスナップしたり、スケールするコンポーネントを作成したりすることで、任意の画面サイズに合わせてデザインをスケールできます。
- デバイスフレーム: 適切な環境でデザインを提示します。ポートレートモードとランドスケープモードを選択することもできます。
- 相互作用: クリック時、ホバリング中、押し中などのインタラクションを定義することで、プロトタイプに命を吹き込みます。
- オーバーレイ: 相対位置および手動位置を使用すると、オーバーレイがどこにどのように表示されるかを完全に制御できます。
- ピクセルの完璧さ: 60fps のインタラクティブ編集により、非常に鮮明でピクセル完璧なプレビューとエクスポートが可能になります。
- プロトタイピング: 画面を接続し、インタラクション、トランジション、オーバーレイなどの要素を追加することで、フローをすばやく構築します。他のツールと同期する代わりに、URL を共有するだけでフィードバックを受け取ることができます。
- 応答デザイン: レイアウトを拡大して、画面サイズの変化にどのように反応するかを確認します。
- スクローリング: 個々の図形または親フレーム全体内で水平、垂直、または任意の方向のスクロールを有効にします。
- スタイル: すべてのプロジェクト間で色、テキスト、グリッド、エフェクトを同期します。維持するテキスト スタイルを減らし、Figma 独自のグリッド スタイルを使用してさまざまなデバイス間でデザインを調整します。
- チームライブラリ: Figma でコンポーネントとスタイルを共有します。共有ドライブや追加のツールは必要ありません。あなたとあなたのチームは、シンプルな公開ワークフローを使用して、変更をいつどのように展開するかを制御します。
- ベクターネットワーク: Figma はペン ツールをより直感的に作成し、パスとの下位互換性を維持しながら直接操作できるようにしました。
エンタープライズ クライアント、 figma 大規模な一貫性、効率性、セキュリティを推進できます。このプラットフォームを使用すると、企業クライアントはチーム ライブラリを使用してデザイン システムを簡単に管理でき、組織全体でカスタム フォントをアップロードして共有できるようになります。シングル・サインオン (SSO)、アクセス制御、アクティビティ ログが含まれます。
Figmaを始めよう
figma には、さまざまなチュートリアルが用意されており、 YouTubeチャンネル、これが入門ビデオです:
figma 開発者は、アセットを検査、コピー、エクスポートし、コピーする機能も提供します。 CSS デザインファイルから直接。次のような統合を使用して既存のワークフローを有効にすることもできます。 ゼプリン, JIRA, ドロップボックス, プロトピー
, 原則 Mac用。堅牢性も備えています。 API.