figma设计_如何在Figma中使用真实内容进行设计

figma设计

Content is king. Designers have known for quite some time now that it’s best to ditch Lorem ipsum and work with real content. Until recently though, it hasn’t been really easy to do. The main question is:

çontent为王。 设计师已经知道了很长时间了，最​​好抛弃Lorem ipsum并处理真实内容。 直到最近，这还不是很容易做到。 主要问题是：

How do you get real content into the design tool?

您如何将真实内容纳入设计工具？

I’m here to show you how. There are actually several ways of doing this and we will look at a specific one but you are free to explore (and I am going to hint at other ways at the end of this tutorial).

我在这里向您展示如何。 实际上，有几种方法可以做到这一点，我们将介绍一种特定的方法，但是您可以自由探索(我将在本教程的最后暗示其他方法)。

In this tutorial, we will:

在本教程中，我们将：

• model and create content
  建模和创建内容
• design a simple product page
  设计一个简单的产品页面
• connect real content to elements in our design file
  将真实内容连接到我们设计文件中的元素

This is pretty exciting and I can’t wait to show you. Before we dive in, let’s briefly look at a mindset that this tutorial is coming from.

这非常令人兴奋，我迫不及待地向您展示。 在深入探讨之前，让我们简要地看一下本教程的思路。

内容至上的设计 (Content-first design)

For years, the prevalent mindset in design practice has been “form first, content second”. Designers would come up with layouts and then fit (or rather cram) real content in the existing layout. This is problematic for several reasons.

多年以来，设计实践中普遍存在的心态是“形式第一，内容第二”。 设计人员会提出布局，然后在现有布局中放入(或填入)真实内容。 这出于几个原因是有问题的。

It’s easy to run into a big mismatch between the design and the content. More importantly, though, it makes content second priority even though that’s what users and customers come to the business for.

容易在设计和内容之间出现很大的不匹配。 不过，更重要的是，即使用户和客户正是出于此目的，它仍将内容放在第二位。

This mindset has started to shift towards a content-first design in recent years. It’s the approach of thinking through the content first, modelling it, creating it and only then designing around it.

近年来，这种思维方式已开始转向内容优先的设计。 它是首先考虑内容，对其进行建模，创建它，然后才围绕它进行设计的方法。

I encourage you to read more about it: https://responsivedesign.is/design/content-first-design/

我鼓励您阅读有关此内容的更多信息： https : //sensitivedesign.is/design/content-first-design/

Now that we're on the same page, grab yourself a cup of your favourite hot beverage and let’s start.

现在我们在同一页上，为自己准备一杯您最喜欢的热饮料，然后开始吧。

在本教程中您需要什么 (What you'll need in this tutorial)

To make this happen, we’re gonna need a couple of things:

为了实现这一目标，我们需要做一些事情：

• Source of content (I chose Kentico Kontent, the content-as-a-service platform I’m working on)

  内容来源(我选择了Kentico Kontent ，我正在使用的内容即服务平台)

• Design tool (Figma, because it's cool)

  设计工具( Figma ，因为它很酷)

• Plugin to fetch the content and put it into the design file
  插件来获取内容并将其放入设计文件

For the last bit, the “API / JSON Sync” plugin by Emin Sinani is a perfect choice. I know that API and JSON may sound scary but don’t worry, we won’t be writing any code. We will only fiddle with some URLs.

最后， Emin Sinani的“ API / JSON Sync”插件是一个完美的选择。 我知道API和JSON听起来很吓人，但是不用担心，我们不会编写任何代码。 我们只会摆弄一些UR​​L。

Here's a visual overview of how it will work:

以下是其工作方式的直观概述：

Model of working with real content in Figma using Kentico Konent as the content source

使用Kentico Konent作为内容源在Figma中处理真实内容的模型

First, we will define, model and create the content we need. We’ll then go and design a simple product page for a coffee e-shop using that content. Finally, we'll populate the design with the content we prepared using the API/JSON sync plugin.

首先，我们将定义，建模和创建所需的内容。 然后，我们将使用该内容为咖啡店设计一个简单的产品页面。 最后，我们将使用使用API​​ / JSON同步插件准备的内容填充设计。

I encourage you to create everything with me as you’ll go along to try it for yourself.

我鼓励您与我一起创造一切，然后继续自己尝试。

步骤1：为内容建模 (Step 1: Modelling content)<