curl --request POST \
--url https://api.dittowords.com/v2/components \
--header 'Authorization: <api-key>' \
--header 'Content-Type: application/json' \
--data '
{
"components": [
{
"text": "Hello world",
"name": "Component One"
},
{
"developerId": "custom-id",
"text": "Custom ID example",
"name": "Custom Component",
"notes": "For the homepage CTA",
"characterLimit": 80
},
{
"text": "In folder",
"name": "Folder Component",
"folderId": "my-folder-id"
},
{
"text": "{{count}} items in your cart",
"name": "Cart Count",
"variables": [
"count"
],
"plurals": [
{
"form": "one",
"text": "{{count}} item in your cart"
},
{
"form": "other",
"text": "{{count}} items in your cart"
}
]
},
{
"text": "Hello world",
"name": "Localized Component",
"variants": [
{
"variantId": "french",
"text": "Bonjour le monde"
}
]
}
]
}
'import requests
url = "https://api.dittowords.com/v2/components"
payload = { "components": [
{
"text": "Hello world",
"name": "Component One"
},
{
"developerId": "custom-id",
"text": "Custom ID example",
"name": "Custom Component",
"notes": "For the homepage CTA",
"characterLimit": 80
},
{
"text": "In folder",
"name": "Folder Component",
"folderId": "my-folder-id"
},
{
"text": "{{count}} items in your cart",
"name": "Cart Count",
"variables": ["count"],
"plurals": [
{
"form": "one",
"text": "{{count}} item in your cart"
},
{
"form": "other",
"text": "{{count}} items in your cart"
}
]
},
{
"text": "Hello world",
"name": "Localized Component",
"variants": [
{
"variantId": "french",
"text": "Bonjour le monde"
}
]
}
] }
headers = {
"Authorization": "<api-key>",
"Content-Type": "application/json"
}
response = requests.post(url, json=payload, headers=headers)
print(response.text)const options = {
method: 'POST',
headers: {Authorization: '<api-key>', 'Content-Type': 'application/json'},
body: JSON.stringify({
components: [
{text: 'Hello world', name: 'Component One'},
{
developerId: 'custom-id',
text: 'Custom ID example',
name: 'Custom Component',
notes: 'For the homepage CTA',
characterLimit: 80
},
{text: 'In folder', name: 'Folder Component', folderId: 'my-folder-id'},
{
text: '{{count}} items in your cart',
name: 'Cart Count',
variables: ['count'],
plurals: [
{form: 'one', text: '{{count}} item in your cart'},
{form: 'other', text: '{{count}} items in your cart'}
]
},
{
text: 'Hello world',
name: 'Localized Component',
variants: [{variantId: 'french', text: 'Bonjour le monde'}]
}
]
})
};
fetch('https://api.dittowords.com/v2/components', options)
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.error(err));<?php
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://api.dittowords.com/v2/components",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => json_encode([
'components' => [
[
'text' => 'Hello world',
'name' => 'Component One'
],
[
'developerId' => 'custom-id',
'text' => 'Custom ID example',
'name' => 'Custom Component',
'notes' => 'For the homepage CTA',
'characterLimit' => 80
],
[
'text' => 'In folder',
'name' => 'Folder Component',
'folderId' => 'my-folder-id'
],
[
'text' => '{{count}} items in your cart',
'name' => 'Cart Count',
'variables' => [
'count'
],
'plurals' => [
[
'form' => 'one',
'text' => '{{count}} item in your cart'
],
[
'form' => 'other',
'text' => '{{count}} items in your cart'
]
]
],
[
'text' => 'Hello world',
'name' => 'Localized Component',
'variants' => [
[
'variantId' => 'french',
'text' => 'Bonjour le monde'
]
]
]
]
]),
CURLOPT_HTTPHEADER => [
"Authorization: <api-key>",
"Content-Type: application/json"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}package main
import (
"fmt"
"strings"
"net/http"
"io"
)
func main() {
url := "https://api.dittowords.com/v2/components"
payload := strings.NewReader("{\n \"components\": [\n {\n \"text\": \"Hello world\",\n \"name\": \"Component One\"\n },\n {\n \"developerId\": \"custom-id\",\n \"text\": \"Custom ID example\",\n \"name\": \"Custom Component\",\n \"notes\": \"For the homepage CTA\",\n \"characterLimit\": 80\n },\n {\n \"text\": \"In folder\",\n \"name\": \"Folder Component\",\n \"folderId\": \"my-folder-id\"\n },\n {\n \"text\": \"{{count}} items in your cart\",\n \"name\": \"Cart Count\",\n \"variables\": [\n \"count\"\n ],\n \"plurals\": [\n {\n \"form\": \"one\",\n \"text\": \"{{count}} item in your cart\"\n },\n {\n \"form\": \"other\",\n \"text\": \"{{count}} items in your cart\"\n }\n ]\n },\n {\n \"text\": \"Hello world\",\n \"name\": \"Localized Component\",\n \"variants\": [\n {\n \"variantId\": \"french\",\n \"text\": \"Bonjour le monde\"\n }\n ]\n }\n ]\n}")
req, _ := http.NewRequest("POST", url, payload)
req.Header.Add("Authorization", "<api-key>")
req.Header.Add("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := io.ReadAll(res.Body)
fmt.Println(string(body))
}HttpResponse<String> response = Unirest.post("https://api.dittowords.com/v2/components")
.header("Authorization", "<api-key>")
.header("Content-Type", "application/json")
.body("{\n \"components\": [\n {\n \"text\": \"Hello world\",\n \"name\": \"Component One\"\n },\n {\n \"developerId\": \"custom-id\",\n \"text\": \"Custom ID example\",\n \"name\": \"Custom Component\",\n \"notes\": \"For the homepage CTA\",\n \"characterLimit\": 80\n },\n {\n \"text\": \"In folder\",\n \"name\": \"Folder Component\",\n \"folderId\": \"my-folder-id\"\n },\n {\n \"text\": \"{{count}} items in your cart\",\n \"name\": \"Cart Count\",\n \"variables\": [\n \"count\"\n ],\n \"plurals\": [\n {\n \"form\": \"one\",\n \"text\": \"{{count}} item in your cart\"\n },\n {\n \"form\": \"other\",\n \"text\": \"{{count}} items in your cart\"\n }\n ]\n },\n {\n \"text\": \"Hello world\",\n \"name\": \"Localized Component\",\n \"variants\": [\n {\n \"variantId\": \"french\",\n \"text\": \"Bonjour le monde\"\n }\n ]\n }\n ]\n}")
.asString();require 'uri'
require 'net/http'
url = URI("https://api.dittowords.com/v2/components")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
request = Net::HTTP::Post.new(url)
request["Authorization"] = '<api-key>'
request["Content-Type"] = 'application/json'
request.body = "{\n \"components\": [\n {\n \"text\": \"Hello world\",\n \"name\": \"Component One\"\n },\n {\n \"developerId\": \"custom-id\",\n \"text\": \"Custom ID example\",\n \"name\": \"Custom Component\",\n \"notes\": \"For the homepage CTA\",\n \"characterLimit\": 80\n },\n {\n \"text\": \"In folder\",\n \"name\": \"Folder Component\",\n \"folderId\": \"my-folder-id\"\n },\n {\n \"text\": \"{{count}} items in your cart\",\n \"name\": \"Cart Count\",\n \"variables\": [\n \"count\"\n ],\n \"plurals\": [\n {\n \"form\": \"one\",\n \"text\": \"{{count}} item in your cart\"\n },\n {\n \"form\": \"other\",\n \"text\": \"{{count}} items in your cart\"\n }\n ]\n },\n {\n \"text\": \"Hello world\",\n \"name\": \"Localized Component\",\n \"variants\": [\n {\n \"variantId\": \"french\",\n \"text\": \"Bonjour le monde\"\n }\n ]\n }\n ]\n}"
response = http.request(request)
puts response.read_body{
"developerIds": [
"component-one",
"custom-id",
"folder-component"
]
}Create components
Creates one or more library components in your workspace.
The operation is all-or-nothing: if any component is invalid, none are created.
curl --request POST \
--url https://api.dittowords.com/v2/components \
--header 'Authorization: <api-key>' \
--header 'Content-Type: application/json' \
--data '
{
"components": [
{
"text": "Hello world",
"name": "Component One"
},
{
"developerId": "custom-id",
"text": "Custom ID example",
"name": "Custom Component",
"notes": "For the homepage CTA",
"characterLimit": 80
},
{
"text": "In folder",
"name": "Folder Component",
"folderId": "my-folder-id"
},
{
"text": "{{count}} items in your cart",
"name": "Cart Count",
"variables": [
"count"
],
"plurals": [
{
"form": "one",
"text": "{{count}} item in your cart"
},
{
"form": "other",
"text": "{{count}} items in your cart"
}
]
},
{
"text": "Hello world",
"name": "Localized Component",
"variants": [
{
"variantId": "french",
"text": "Bonjour le monde"
}
]
}
]
}
'import requests
url = "https://api.dittowords.com/v2/components"
payload = { "components": [
{
"text": "Hello world",
"name": "Component One"
},
{
"developerId": "custom-id",
"text": "Custom ID example",
"name": "Custom Component",
"notes": "For the homepage CTA",
"characterLimit": 80
},
{
"text": "In folder",
"name": "Folder Component",
"folderId": "my-folder-id"
},
{
"text": "{{count}} items in your cart",
"name": "Cart Count",
"variables": ["count"],
"plurals": [
{
"form": "one",
"text": "{{count}} item in your cart"
},
{
"form": "other",
"text": "{{count}} items in your cart"
}
]
},
{
"text": "Hello world",
"name": "Localized Component",
"variants": [
{
"variantId": "french",
"text": "Bonjour le monde"
}
]
}
] }
headers = {
"Authorization": "<api-key>",
"Content-Type": "application/json"
}
response = requests.post(url, json=payload, headers=headers)
print(response.text)const options = {
method: 'POST',
headers: {Authorization: '<api-key>', 'Content-Type': 'application/json'},
body: JSON.stringify({
components: [
{text: 'Hello world', name: 'Component One'},
{
developerId: 'custom-id',
text: 'Custom ID example',
name: 'Custom Component',
notes: 'For the homepage CTA',
characterLimit: 80
},
{text: 'In folder', name: 'Folder Component', folderId: 'my-folder-id'},
{
text: '{{count}} items in your cart',
name: 'Cart Count',
variables: ['count'],
plurals: [
{form: 'one', text: '{{count}} item in your cart'},
{form: 'other', text: '{{count}} items in your cart'}
]
},
{
text: 'Hello world',
name: 'Localized Component',
variants: [{variantId: 'french', text: 'Bonjour le monde'}]
}
]
})
};
fetch('https://api.dittowords.com/v2/components', options)
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.error(err));<?php
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://api.dittowords.com/v2/components",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => json_encode([
'components' => [
[
'text' => 'Hello world',
'name' => 'Component One'
],
[
'developerId' => 'custom-id',
'text' => 'Custom ID example',
'name' => 'Custom Component',
'notes' => 'For the homepage CTA',
'characterLimit' => 80
],
[
'text' => 'In folder',
'name' => 'Folder Component',
'folderId' => 'my-folder-id'
],
[
'text' => '{{count}} items in your cart',
'name' => 'Cart Count',
'variables' => [
'count'
],
'plurals' => [
[
'form' => 'one',
'text' => '{{count}} item in your cart'
],
[
'form' => 'other',
'text' => '{{count}} items in your cart'
]
]
],
[
'text' => 'Hello world',
'name' => 'Localized Component',
'variants' => [
[
'variantId' => 'french',
'text' => 'Bonjour le monde'
]
]
]
]
]),
CURLOPT_HTTPHEADER => [
"Authorization: <api-key>",
"Content-Type: application/json"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}package main
import (
"fmt"
"strings"
"net/http"
"io"
)
func main() {
url := "https://api.dittowords.com/v2/components"
payload := strings.NewReader("{\n \"components\": [\n {\n \"text\": \"Hello world\",\n \"name\": \"Component One\"\n },\n {\n \"developerId\": \"custom-id\",\n \"text\": \"Custom ID example\",\n \"name\": \"Custom Component\",\n \"notes\": \"For the homepage CTA\",\n \"characterLimit\": 80\n },\n {\n \"text\": \"In folder\",\n \"name\": \"Folder Component\",\n \"folderId\": \"my-folder-id\"\n },\n {\n \"text\": \"{{count}} items in your cart\",\n \"name\": \"Cart Count\",\n \"variables\": [\n \"count\"\n ],\n \"plurals\": [\n {\n \"form\": \"one\",\n \"text\": \"{{count}} item in your cart\"\n },\n {\n \"form\": \"other\",\n \"text\": \"{{count}} items in your cart\"\n }\n ]\n },\n {\n \"text\": \"Hello world\",\n \"name\": \"Localized Component\",\n \"variants\": [\n {\n \"variantId\": \"french\",\n \"text\": \"Bonjour le monde\"\n }\n ]\n }\n ]\n}")
req, _ := http.NewRequest("POST", url, payload)
req.Header.Add("Authorization", "<api-key>")
req.Header.Add("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := io.ReadAll(res.Body)
fmt.Println(string(body))
}HttpResponse<String> response = Unirest.post("https://api.dittowords.com/v2/components")
.header("Authorization", "<api-key>")
.header("Content-Type", "application/json")
.body("{\n \"components\": [\n {\n \"text\": \"Hello world\",\n \"name\": \"Component One\"\n },\n {\n \"developerId\": \"custom-id\",\n \"text\": \"Custom ID example\",\n \"name\": \"Custom Component\",\n \"notes\": \"For the homepage CTA\",\n \"characterLimit\": 80\n },\n {\n \"text\": \"In folder\",\n \"name\": \"Folder Component\",\n \"folderId\": \"my-folder-id\"\n },\n {\n \"text\": \"{{count}} items in your cart\",\n \"name\": \"Cart Count\",\n \"variables\": [\n \"count\"\n ],\n \"plurals\": [\n {\n \"form\": \"one\",\n \"text\": \"{{count}} item in your cart\"\n },\n {\n \"form\": \"other\",\n \"text\": \"{{count}} items in your cart\"\n }\n ]\n },\n {\n \"text\": \"Hello world\",\n \"name\": \"Localized Component\",\n \"variants\": [\n {\n \"variantId\": \"french\",\n \"text\": \"Bonjour le monde\"\n }\n ]\n }\n ]\n}")
.asString();require 'uri'
require 'net/http'
url = URI("https://api.dittowords.com/v2/components")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
request = Net::HTTP::Post.new(url)
request["Authorization"] = '<api-key>'
request["Content-Type"] = 'application/json'
request.body = "{\n \"components\": [\n {\n \"text\": \"Hello world\",\n \"name\": \"Component One\"\n },\n {\n \"developerId\": \"custom-id\",\n \"text\": \"Custom ID example\",\n \"name\": \"Custom Component\",\n \"notes\": \"For the homepage CTA\",\n \"characterLimit\": 80\n },\n {\n \"text\": \"In folder\",\n \"name\": \"Folder Component\",\n \"folderId\": \"my-folder-id\"\n },\n {\n \"text\": \"{{count}} items in your cart\",\n \"name\": \"Cart Count\",\n \"variables\": [\n \"count\"\n ],\n \"plurals\": [\n {\n \"form\": \"one\",\n \"text\": \"{{count}} item in your cart\"\n },\n {\n \"form\": \"other\",\n \"text\": \"{{count}} items in your cart\"\n }\n ]\n },\n {\n \"text\": \"Hello world\",\n \"name\": \"Localized Component\",\n \"variants\": [\n {\n \"variantId\": \"french\",\n \"text\": \"Bonjour le monde\"\n }\n ]\n }\n ]\n}"
response = http.request(request)
puts response.read_body{
"developerIds": [
"component-one",
"custom-id",
"folder-component"
]
}Authorizations
Body
Array of components to create
Show child attributes
Show child attributes
When set to 'html', all text values in this request (including plural and variant text) are parsed as HTML and saved as rich text. Supported formatting: <strong>/<b>, <em>/<i>, <u>, <s>, and <br> for line breaks. <sup> and <sub> are only supported for workspaces with superscript and subscript enabled. Unsupported markup (for example links, lists, or headings) is dropped and its text content kept.
Note: Fully-bolded strings will have that bold styling stripped, as Figma does not support bolding an entire text layer this way.
When omitted, text is saved as plaintext and any markup is stored literally.
html Response
Returns the developer IDs of the created components
Array of developer IDs for the created components