Skip to content

Commit 5b62f8e

Browse files
committed
update theme gen doc
1 parent 983ef07 commit 5b62f8e

File tree

1 file changed

+7
-10
lines changed

1 file changed

+7
-10
lines changed

apps/showcase/doc/designer/createtheme/FigmaDoc.vue

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,29 @@
22
<DocSectionText v-bind="$attrs">
33
<p>
44
The <NuxtLink to="uikit">Figma UI Kit</NuxtLink> and the theming api is fully synchorized, meaning the design tokens in Figma map to the CSS variables in the code. The mapping is created via the
5-
<a href="https://tokens.studio/" target="_blank" rel="noopener noreferrer">Token Studio</a> at Figma which allows exporting a single json file. The Designer is able to interpret this file and transform it to an actual theme. In case your
5+
<a href="https://www.figma.com/community/plugin/1592914021886732603" target="_blank" rel="noopener noreferrer">PrimeUI Theme Generator</a> plugin at Figma which allows exporting a single json file. The Designer is able to interpret this file and transform it to an actual theme. In case your
66
UI Kit version is older, the transformation process marks the missing tokens and recommends an auto migration via the migration assistant.
77
</p>
88
<p>
99
This is an automated workflow and eliminates the manual design to code during the handoff process. If you have UI designers in your team, the recommended approach is using Figma for the actual design process and utilizing the designer for
1010
transformation, preview and download purposes.
1111
</p>
12-
<b class="mb-4 block">CI Pipeline</b>
12+
<b class="mb-4 block">Automated Flow</b>
1313
<p>
14-
Recommended approach is setting up the CI Pipeline flow as manually exporting the tokens file from Figma and uploading it to the online designer tool may quickly become tedious in active development cycles. As a solution, theme designer
15-
provides a remote API that can be integrated into your flow. Visit the <NuxtLink to="/designer/ci">CI Pipeline</NuxtLink> documentation for comprehensive information and examples for GitHub, GitLab and BitBucket.
14+
Recommended approach is using the PrimeUI Theme Generator Figma plugin which provides built-in synchronization capabilities that automate the theme generation process. Visit <a href="https://www.figma.com/community/plugin/1592914021886732603" target="_blank" rel="noopener noreferrer">the plugin website</a> to learn more about this workflow.
1615
</p>
1716
<b class="mb-4 block">Manual Flow</b>
1817
<p>
19-
Instead of setting a CI pipeline, for quick prototyping purposes, you may also choose to use to manually export a tokens json file and then upload it to the designer. Note that, this flow would get tedious and repetitive in active
20-
development cycles when compared to an automated CI pipeline.
18+
Instead of generating themes directly from Figma using the PrimeUI plugin, for quick prototyping purposes, you may also choose to use to manually export a tokens json file and then upload it to the designer. Note that, this flow would get tedious and repetitive in active
19+
development cycles when compared to an automated flow.
2120
</p>
2221
<p>
23-
Open the <NuxtLink to="/uikit">PrimeOne UI Kit</NuxtLink> in which you've modified tokens. In the Tokens Studio plugin, navigate to the <i>Tools</i> menu and select <i>Export to file/folder.</i> When the Export tokens modal appears, make
24-
sure the <i>Single file</i> tab is selected. Check the <i>All tokens sets</i> option, then click <i>Export</i>.
22+
Open the <NuxtLink to="/uikit">PrimeOne UI Kit</NuxtLink> in which you've modified tokens. In the PrimeUI Theme Generator plugin, click the <i>Export</i> option to export all variable collections.
2523
</p>
26-
<p>In case you utilize custom tokens, create a new token set named <i>custom</i> and define your tokens under this set to make sure they are also exported to the theme code.</p>
2724
<div class="pl-8 pr-4 pt-4 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface mb-4" style="max-width: 48rem">
2825
<img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/tokens-studio.png" class="w-full" />
2926
</div>
30-
<p>When creating a new theme at Theme Designer, choose the <i>Import Figma Tokens</i> option and import the json file.</p>
27+
<p>When creating a new theme at Theme Designer, choose the <i>Import Figma Variables</i> option and import the json file.</p>
3128
<div class="pl-8 pr-4 pt-4 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface mb-4" style="max-width: 48rem">
3229
<img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-create.png" class="w-full" />
3330
</div>

0 commit comments

Comments
 (0)