If you have any questions that I missed, please ask them here.
@Louis thank you for asking about why I absolutely positioned the rain image on a board rather than applying it as a background image on the container, sorry I didn’t get around to answering you! The answer is that I wanted to apply a blur to the image. If I applied that blur to the container, it would’ve blurred its contents as well as the image. It’s a little workaround
The border itself is a rectangle that has a fixed height of 1px (or however thick you want your border) and in its flex element settings, it is set to keep that height as a fixed height, but fill the width of the flex container.
Tada! You have a border that will always be the width of its container. This also works with side borders, you just need to make the rectangle a fixed width with full height and layout its flex container from left to right.
Hi, this tutorial was super helpful, thank you so much!!
For the “Recent Scenes” and “Active Devices” texts (minute 34:00 of the video circa), could it be a good approach to use an absolute positioning for them (with a Z index)? Because using a negative margin makes it more difficult to align the div (board) that contains the elements later. Or is it just my wrong idea?
Just to make sure I understood something! cardsss.penpot (76.0 KB)
It’s a great question! I would generally avoid absolute positioning in web-based UIs unless you absolutely () have to use it. This is because absolute positioning takes an element out of the flow so it can’t be affected by the elements around it.
When we’re designing for flexible layouts, we ideally want elements to flex and flow around each other depending on the viewport width. Positioning the title and buttons using a negative margin means the positioning will work whether the cards are placed in a narrow mobile-sized viewport or a really widescreen viewport. Absolute positioning could still work in some of these cases, but you’re more likely to have to manually change its height, width, X and Y positioning for different viewport sizes because an absolutely-positioned item won’t base those values on the objects around it.
My approach here is most informed by writing code for UIs. So while absolute positioning could be a handy workaround if you’re creating a static design, it won’t translate as well into code if you’re designing a web UI. Does that make sense?
It helps you out creating an accessible design system by leading the user through a series of forms and you end up with the design tokens.
I have created one example with their demo and now I´m looking how to import it into the Penpot server from Token Studio that supports import and export design tokens.
They have a Figma workflow and it would be wonderful to do something similar for penpot.
It would be very interesting to contact them and also to develop a plugin to integrate this as soon as design tokens are ready.
Great! Maybe even with the Material Theme Builder, since I imagine the code produced for exporting assets is similar, it would be possible to do the same thing!
@Elena_Alcalde_Rueda Instead of using TimezoneWizard I suggest using ZoneStamp its open source, you pick your’e date, time and time zone. The you press generate link, when a user clicks on the link he sees the time of the event in his local time. TimeStamp is more straight forward and easier to use than TimezoneWizard.
Sure design tokens is a complex theme, that is why having a template with a generic design system example would be very helpful. Maybe someone at Penpot could do it?
I will like to create a plugin to create a color palette, similar to what this plugin does but instead of using the colors in the library using the ones in the design tokens.
A plugin to create a design system from the complete design tokens file would be super useful.
How can I access to the tokens information through the API?
Great to see that you’re enjoying the beta! Regarding the tokens in the API, they won’t be available yet. We need to test the data structure before including them, so they’ll be added after the MVP stage.
I’m using the same tokens file to test a few things, along with the attached library from on this repo. You could use our Penpot Exporter for this as well, but I’m sharing the file I’m working on in case you want to give it a try. You just need to reimport the token set in this file in order to see it working
Please be aware that this is a WIP - testing file, so there may be a lot of errors but switching sets works just fine.
Another great thing about using the penpot exporter plugin is that the typography styles are working as well (we don’t have typography tokens yet). So this part is also covered
) have to use it. This is because absolute positioning takes an element out of the flow so it can’t be affected by the elements around it.
