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