Skip to main content
Een thema is een gedeeld kleurenpalet en een hoekafronding voor je schermen. Elk bestand heeft een thema en een weergave (licht of donker), en schermen worden gestyled met de tokens van het thema. Pas je een thema aan, dan volgt elk scherm dat het gebruikt die wijziging. Zo werkt je team met één set beslissingen in plaats van kleuren in elke prompt opnieuw op te geven. Thema’s die je maakt of genereert, worden opgeslagen in je organisatie en staan onder Themes op Home. Zo kan elk bestand in de organisatie ze gebruiken.

​
Een thema kiezen voor een bestand

Kies het thema en de weergave voor nieuwe schermen in de prompt-composer in een bestand. De themaknop staat niet in de promptbox op Home.
1

Open het thememenu

Klik in de prompt-composer op de themaknop. Die toont het kleurvak van het huidige thema, of een kleurenwiel wanneer het thema Automatic is. Het menu heet Theme for new screens.
2

Kies een thema

Kies Automatic, een van de thema’s van je organisatie (die staan bovenaan), of een ingebouwd thema: Default, Blue, Grayscale, Green, Ice, Orange, Red, Rose, Violet of Yellow.
3

Kies een weergave

Kies onder Appearance Light of Dark, of kies Automatic zodat Flowstep per scherm beslist op basis van je prompt. Een prompt als “a dark dashboard” levert een donker scherm op.
Je keuze geldt voor de schermen die je hierna genereert. Schermen die al op het canvas staan, behouden hun uitstraling.

​
Flowstep een thema laten ontwerpen

Wanneer een bestand nog geen thema heeft (een nieuw bestand waarbij het thema op Automatic staat), ontwerpt Flowstep een aangepast thema naast de eerste schermen die het genereert. Terwijl het werkt, zie je een stap Designing theme in de chat. Flowstep bouwt het thema op basis van:
  • Kleuren die je in je prompt noemt
  • Kleuren in je ontwerprichtlijnen
  • Merkkleuren uit bijlagen en links die je plakt
  • Het product en de sfeer die je prompt beschrijft, wanneer er niets specifiekers is
Het thema krijgt een korte naam, een volledig palet voor zowel licht als donker, en een afrondingsstap. Het wordt opgeslagen in je organisatie onder Themes op Home. Het bestand gebruikt het thema voor elk scherm dat daarna wordt gegenereerd. Zodra een bestand een thema heeft, ontwerpt Flowstep er niet zelfstandig nog een. Wil je een nieuw thema, kies dan opnieuw Automatic in het thememenu. De volgende generatie ontwerpt een nieuw thema, en het bestand gaat daarop over. Kan Flowstep geen thema ontwerpen, dan valt het bestand terug op een ingebouwd thema.
Vermeld je merkkleuren in je eerste prompt, of stel ze in via je ontwerprichtlijnen voordat je genereert. Het gegenereerde thema begint dan met die kleuren.

​
Het thema van één scherm wijzigen

Zo pas je één scherm aan zonder de rest van het bestand te raken:
  1. Selecteer het scherm op het canvas.
  2. Klik in het menu boven het scherm op de knop Theme.
  3. Kies een van de thema’s van je organisatie of een ingebouwd thema, of wissel tussen Light en Dark.
Een wisseling van thema verft het scherm direct opnieuw. Wisselen tussen Light en Dark vraagt de AI om het scherm opnieuw te stylen, net als bij een AI-bewerking. Het menu is niet beschikbaar terwijl een generatie loopt.

​
Een thema bewerken

Open een thema via de sectie Themes op Home. De themaeditor toont een live voorbeeld van het thema, met Theme settings rechts. Gebruik de knoppen Light en Dark bovenaan om het voorbeeld te wisselen. Klik op de naam van het thema om het te hernoemen.
  • Colors: elke kleurgroep heeft een kleurvak voor licht en een voor donker: Primary, Secondary, Accent, Muted, Destructive, Background, Card, Popover, Border, Input, Ring, Charts en Sidebar. Klik op een kleurvak om de kleuren ervan te bewerken, bijvoorbeeld de vul- en tekstkleur van een groep. Gebruik de kleurkiezer of een hexwaarde.
  • Radius: kies een afrondingsstap (Square, Slight, Balanced, Soft of Round), of kies Custom en sleep Base radius om je eigen waarde in te stellen.
Je bewerkingen worden eerst als concept opgeslagen, zodat schermen niet veranderen terwijl je werkt. Als je klaar bent:
  • Klik op Publish om elk scherm dat het thema gebruikt bij te werken. Flowstep bevestigt met “Published. Screens using this theme are updating.” (Gepubliceerd. Schermen die dit thema gebruiken, worden bijgewerkt.)
  • Klik op Reset changes om je niet-gepubliceerde wijzigingen te verwerpen. Schermen die het thema gebruiken, worden daardoor niet beïnvloed.
Om een thema te verwijderen, klik je onderaan Theme settings op Delete theme. Je kunt ook op het prullenbakpictogram naast het thema in de lijst Themes op Home klikken. Een verwijderd thema wordt niet meer aangeboden in thememenu’s. Schermen die het al gebruiken, behouden hun uitstraling, dus er verandert niets op je canvas.
Iedereen in je organisatie behalve Guests (gasten) kan thema’s bewerken en verwijderen.

​
Kleuren en hoeken koppelen aan je thema

Kleuren en hoeken kunnen verwijzen naar een themaversie in plaats van naar een vaste waarde. Een gekoppelde waarde volgt het thema van het scherm. Verandert het thema (een ander thema, een gepubliceerde bewerking of een wisseling tussen licht en donker), dan werken de gekoppelde kleuren en hoeken mee. Colors: klik in het paneel Fill of Border op het kleurvak. Kies op het tabblad Token een token via zoeken, of kies er een uit de groepen Theme, Base of Tailwind. Gebruik het tabblad Custom voor een exacte kleur. Een gekoppelde kleur toont zijn tokennaam in het paneel, en je kunt de dekkracht nog steeds aanpassen. Corners: klik in het paneel Corners op een hoekvoorbeeld. Kies op het tabblad Token een stap (bijvoorbeeld md of lg). Typ op het tabblad Custom een exacte waarde in pixels. Een gekoppelde hoek toont zijn tokennaam, en wanneer je de afronding van het thema wijzigt, wordt de hoek opnieuw afgerond. Wil je een gekoppelde waarde weer vastzetten, klik dan op Detach from token. De kleur of hoek behoudt zijn huidige uitstraling, maar volgt het thema niet meer.

​
Goed om te weten

  • Schermen behouden hun eigen thema: elk scherm onthoudt zijn thema en weergave. Het wijzigen van het thema van het bestand heeft alleen effect op schermen die je hierna genereert. Gebruik het thememenu per scherm om bestaande schermen opnieuw te stylen.
  • Alleen gepubliceerde versies: schermen tonen de gepubliceerde versie van een thema. Concepten zijn alleen zichtbaar in de themaeditor totdat je publiceert.
  • Tokenkoppelingen blijven behouden bij bewerkingen: themakleuren die in schaduwen, filters en verlopen worden gebruikt, blijven gekoppeld aan het thema wanneer Flowstep een scherm bewerkt of opnieuw genereert.
  • Afrondingsstappen die niet meeschalen: de tokens none en full voor hoeken zijn altijd respectievelijk vierkant en volledig rond, wat de afronding van het thema ook is.