Tutorial CSS Grid Layout | Dashboards
4:21
21 сағат бұрын
CSS Grid Layout tutorial | Basics
8:23
Пікірлер
@neodidi
@neodidi Сағат бұрын
Definitely jumping in.. For sure.. I always look out for cool UI, nice features and easy access... Penpot now ticks all that box for me.. Excited to start learning..
@NYProductions
@NYProductions 11 сағат бұрын
Now we have overlays. Cool!
@njabulo316
@njabulo316 13 сағат бұрын
If it could also be downloadable offline, that would be super useful and highly productive.
@taylorkoepp3048
@taylorkoepp3048 14 сағат бұрын
I'm a developer that struggles with design so this stuff is very helpful. If you're looking for suggestions a 'how to build a <tech platform of choice> responsive design website' series would be very welcome 🙂
@AnandaKrishnan3de
@AnandaKrishnan3de 14 сағат бұрын
My wife is a ui designer and she uses figma at work. I happen to sit with her sometimes and I'm impressed by the prototype and seeing the results. (We both know abt penpot already (but not using). Anyway I wanted to try it so I will be using penpot. So thanks for this video.
@Penpot
@Penpot 7 сағат бұрын
Thanks for your words! We hope you can join Penpot soon :)
@axelhunger
@axelhunger Күн бұрын
Preferirian que la UI FUERAN LOS MAS SIMILARES A FIGMA. Es una cuestion de psicologia, carga cognitiva, aprendizaje, flujo de trabajo. Hay muchos libros que hablan de eso cómo la UX LAWS, LA LEY DE JACOB Y ABOUT FACE. Imaginate que cada comando fuera distinto en un software y no pudieras personalizarlo. Ayuda a los usuarios también a criterios usar iconos consistente a los existentes que estan acostumbrados a ver. Y también el copy, por favor. Eso mínimo que digo, causaría una gran impacto de mejora para el negocio como la UX,
@axelhunger
@axelhunger Күн бұрын
A futuros años, luego ME HICIERON CASO, Y DESARROLLAN UN NUEVO DESIGN SISTEM. Entrevista a usuarios. Haz prueba a/b Mide.
@axelhunger
@axelhunger Күн бұрын
Tengo una idea pero no he usado penpot. Si primero me podrían dar una Demo, luego explicarles una idea que sería interesante implementar pero no existe. Podría tal vez hacerlo en figma un mock up y explicarles la idea. Es como funciona OUTLOOK.
@axelhunger
@axelhunger Күн бұрын
Es para una forma de prototipar, sin que desaparezca la otra. Empieza cliqueando un botón... y hacer muchas cosas. La cosa digan los desarrolladores, eso se puede hacer y no importa el tiempo que nos tome.
@BS-gr3bi
@BS-gr3bi Күн бұрын
I would suggest to put the language in which the video clip is in brackets at the end in title, or title to be on that language. Also if there is a translation of video to be in the title.
@hsdev
@hsdev 4 күн бұрын
The speed / responsiveness of the app was the only thing holding me back from fully adopting PenPot. But this version already feels much faster than previous. Thank you for your work on this and for making this app so awesome.
@hsdev
@hsdev 4 күн бұрын
Wow. Excelente. Gracias por la demostración.
@anton.p
@anton.p 4 күн бұрын
🎯 Key points for quick navigation: 00:31 *🎉 Penpot 2.0 was officially released on April 9th, with SAS deployment and on-premise Docker images.* 00:44 *🚀 The 2.0 release is celebrated for its months of hard work and significant improvements.* 01:43 *🌐 The new website was launched alongside Penpot 2.0, reflecting strong user passion and support for open source design and prototyping tools.* 02:24 *💌 The Penpot team received overwhelming support and appreciation from users before and after the 2.0 release.* 03:19 *📈 The release of Penpot 2.0 led to a significant increase in sign-ups and user engagement.* 03:31 *🎉 The announcement of Adobe's acquisition of Figma in September 2022 boosted awareness and validation for Penpot as a key alternative.* 04:10 *🌟 Penpot 2.0 surpassed previous sign-up metrics, reflecting its organic growth and user engagement.* 06:22 *🔍 Penpot aims to maintain a 1:2 ratio of designers to developers, highlighting its unique team structure and collaborative focus.* 07:46 *👥 Penpot successfully onboards developers, achieving a 1.5 ratio of developers to designers, with a goal of reaching 2:1.* 08:00 *🛠 The release of Penpot 2.0 was the most successful in terms of quickly addressing and resolving bug reports.* 08:58 *🔧 Penpot's metrics showed steady user engagement post-release, despite an initial misinterpretation of active user data due to UI changes.* 11:02 *🧮 Adjusting the metrics for active users clarified that Penpot's new UI allowed for more efficient usage, reducing file update events by 35-40%.* 12:33 *📚 Penpot provides extensive resources and tutorials to help users make the most of the 2.0 features.* 13:14 *🎓 Jesse Showalter uses Penpot to teach basics of flex layout and grid layout, showcasing its educational value.* 16:01 *🖥 Penpot's blog and user guide offer detailed content and tutorials on new features like CSS grid layout and the component system.* 17:24 *🌍 Penpot encourages community contributions, including code contributions, translations, and creating templates and tutorials.* 18:44 *🌟 Penpot seeks community involvement in testing upcoming features and providing feedback.* 19:29 *🤝 Penpot is working on starting local communities and invites users to participate and contribute to shaping the community.* 20:10 *🙌 The first contribution to Penpot starts with just saying hi, emphasizing the welcoming nature of the community.* 21:07 *💡 Penpot's initiative system breaks down the development process into short to mid-term goals, focusing on delivering value through modular teams.* 21:59 *🛠 The initiative system includes various projects like frontend integration tests and the plugin framework to improve Penpot's development and user experience.* 24:35 *🧩 Penpot is working on various initiatives, including component system refactoring, performance improvements, and an internal design system.* 25:01 *🚀 Penpot's performance initiative focuses on text editing as a starting point, aiming to enhance overall performance.* 25:15 *🎨 Penpot plans to finalize its internal design system, ensuring consistency across the platform and collaborations.* 25:29 *🎉 The design tokens initiative aims to build native support for design tokens in Penpot, enhancing compatibility and flexibility.* 25:43 *🔄 A new initiative focuses on a Figma to Penpot exporter, simplifying the transition for users moving from Figma.* 25:57 *🤖 The AI initiative and quality of life improvements ensure users get the best experience from Penpot.* 26:11 *🛠 Mike from Hima discusses the collaboration with Penpot on integrating native design tokens, aiming for seamless interoperability and advanced features.* 27:33 *🔧 The integration will support advanced logic operations, flexible theming, and color modifiers, enhancing both designer and engineer experiences.* 28:01 *🌍 The initiative will consider applications beyond web and mobile, including AR, VR, gaming, and motion.* 29:20 *📈 The goal is to build a powerful, flexible, and unopinionated design token engine in Penpot, ensuring true scalability.* 30:28 *🔄 The integration of the graph engine and style dictionary ensures non-destructive design logic and consistency across platforms.* 31:24 *🎨 Penpot will be the first design platform to have native integration with this ecosystem, removing brittleness and boosting efficiency.* 32:19 *🖥 The demo shows a new panel for design tokens, allowing direct native access and editing in the UI, with ongoing rapid expansion.* 33:29 *🌟 The collaboration showcases how open-source projects can bring innovation and inspire more design contributions.* 36:53 *📹 Alejandro from Rand Room demonstrates the Penpot exporter plugin, allowing seamless transfer of Figma files to Penpot.* 40:56 *🚀 The exporter plugin enables easy migration of existing designs, making Penpot more accessible for new users and facilitating the transition.* 42:33 *🛠 Alonso introduces the plugin system initiative, showcasing the potential for user-created plugins to extend Penpot's functionality.* 43:28 *🔍 Plugins can read data, create content, and integrate with third-party tools, enhancing Penpot's capabilities.* 45:28 *🧩 A demo plugin for Feather Icons shows how third-party integration can provide additional resources without importing large libraries.* 46:53 *🧩 Another demo showcases a table creator plugin, utilizing Penpot's new grid layout for responsive design.* 50:08 *🎨 A plugin can read colors from the local library and create a color palette, demonstrating the power of Penpot's plugin system.* 51:01 *📐 The plugin creates a responsive color palette using the grid layout, showcasing flexibility in design adjustments.* 51:13 *🛠 Penpot plans to release a testing environment soon, allowing users to create and try out their own plugins.* 51:28 *🎉 The demo showcased various plugins to demonstrate the capabilities of Penpot's plugin system, inspiring users to develop their own.* 52:22 *🌟 A playground environment will be available soon, enabling users to experiment with the plugin system.* 52:34 *🤖 The AI initiative focuses on building open-source models and technology, emphasizing ethical and transparent development.* 54:06 *🧩 The complexity of the AI challenge involves integrating structure, semantics, and visual rendering in Penpot's design.* 55:41 *🔧 AI integration also considers the reuse of components, adding layers of complexity to the generative AI approach.* 56:51 *🚀 The AI initiative blends ethics, multimodal challenges, and reusable components to ensure meaningful and useful solutions.* 57:55 *🥳 Community questions covered topics like component variants, emphasizing ongoing improvements and future plans.* 59:08 *💡 Plans for a certified build for enterprise self-hosting and thresholds for storage on the SaaS platform to generate revenue.* 01:00:45 *⚡ Penpot is focused on improving performance through reengineering, with upcoming performance enhancements.* 01:02:34 *🌐 The focus remains on maintaining a browser-based platform while exploring options for desktop-like offline experiences.* 01:04:11 *🎂 The livestream also celebrated a team member's birthday, adding a personal touch to the community interaction.* Made with HARPA AI
@superlucky4499
@superlucky4499 5 күн бұрын
Adobe's new ToS sent me here!
@portillajoe
@portillajoe 6 күн бұрын
Gracias por los tutoriales en español!!
@obvinpro
@obvinpro 6 күн бұрын
This app will overtake sketch next year to be the second alternate to Figam and will be competing with Figma in the upper year. Penpot is the blender of digital product team
@cialk
@cialk 6 күн бұрын
Tokens are so good!, Nesting based component variants not so much though, i would have opted for variable based (maybe it's just a first step?)
@closetgeek
@closetgeek 7 күн бұрын
I hope it's easier for me to grasp than the easyfest repo because I desperately need to figure out how to implement design tokens and I've been completely lost every time I start
@ryoukaii22149
@ryoukaii22149 8 күн бұрын
keren🔥
@ww4102
@ww4102 8 күн бұрын
How is performance for you guys? I'd like to use it but it doesn't feel very responsive. Lunacy and figma are faster for me, but Foss solution would be ideal
@fckn_jeew9372
@fckn_jeew9372 9 күн бұрын
Thet's cool! thnks
@PinguNutnut-yc9xu
@PinguNutnut-yc9xu 9 күн бұрын
amz work! Congrat!
@danielmunoz2316
@danielmunoz2316 9 күн бұрын
Gracias por este tutorial en castellano
@GellishGarnerPMangubat
@GellishGarnerPMangubat 10 күн бұрын
I hope to implement a AI feature or any external plugin or api
@Beryesa.
@Beryesa. 7 күн бұрын
nah, they better focus on the core than random useless trends. Document renderer ...
@marvinzuniga6706
@marvinzuniga6706 7 күн бұрын
Excelente UI/UX profesionals
@1anchit
@1anchit 6 күн бұрын
Sorry to see state of people who want AI and lack skills to do the job properly.
@rabbap8997
@rabbap8997 10 күн бұрын
Can Penpot the color of multiple buttons at the same time as in figma does either for text? Because I was trying something like that but I couldn’t
@jay_wright_thats_right
@jay_wright_thats_right 10 күн бұрын
Penpot needs real designers to create content for this product.
@yevgenyo2181
@yevgenyo2181 12 күн бұрын
This is amazing!🤩😍
@yevgenyo2181
@yevgenyo2181 12 күн бұрын
Great work!😍
@zakaria20062
@zakaria20062 13 күн бұрын
for me only things missing is blur background like figma
@MuhammadHussain
@MuhammadHussain 14 күн бұрын
This is amazing. Just what we need as a developer.
@rabbap8997
@rabbap8997 14 күн бұрын
I love penpot
@danielmunoz2316
@danielmunoz2316 15 күн бұрын
Please address bugs, performance issues and bring back the star and the arc tool!
@AsirisC
@AsirisC 15 күн бұрын
Token implementation will be a HUGE win for Penpot. I only need desktop app to fully switch from Figma to Penpot.
@joeclay4700
@joeclay4700 15 күн бұрын
I've been using Penpot desktop app on my mac for a while now...
@AlexanderNavarroIKW
@AlexanderNavarroIKW 14 күн бұрын
There is a desktop app for windows as far as i know, I've been using it for a while now
@SimplyPhy
@SimplyPhy 14 күн бұрын
@@joeclay4700how? The desktop extension by Korbs hasn’t worked for Mac since 2.0. (Can’t link it here…)
@Penpot
@Penpot 10 күн бұрын
Thanks!. One of our contributors is working on the desktop app. Learn more about it in our community space community.penpot.app/t/penpot-desktop-v0-2-0-development-what-do-you-want-to-see/2186/22
@anitawhale1013
@anitawhale1013 7 күн бұрын
@@AlexanderNavarroIKW PWA
@NYProductions
@NYProductions 15 күн бұрын
So excited for the future. Go Penpot! 🔥
@CharlesThorburn
@CharlesThorburn 15 күн бұрын
So excited to see what you are working on! Well done on Penpot 2.0 and can't wait for new features.
@user-ev6fj5up9w
@user-ev6fj5up9w 15 күн бұрын
Penpot 🔥🔥🔥
@jostasizzi818
@jostasizzi818 15 күн бұрын
Did i got rickrolled
@gorudonu
@gorudonu 15 күн бұрын
more please !
@DaDyne
@DaDyne 16 күн бұрын
Estoy aprendiendo Penpot y Español. Estos videos son perfectos para mi 😂❤
@shadowbanned111
@shadowbanned111 20 күн бұрын
These are all great features and bring you closer to Figma level usability. However, how are you still missing core feature like ability to set individual border width per side? Things like that make it hard to sell as viable replacement.
@Ycomputer
@Ycomputer 21 күн бұрын
Hello dear friend, I am looking for a complete tutorial on how to design a website with Penpot, but there is no video, I am designing with Elementor and I am looking for a better one, but you do not have a tutorial on how to create a website in three modes: desktop, tablet and mobile
@lmlSLASHlml
@lmlSLASHlml 23 күн бұрын
I noticed each area can have 1 element. What if i wanted to have an image like you did and a text on the bottom left corner of each image in each area ? So 2 elements in the same area?
@swampflux
@swampflux 24 күн бұрын
Congrats! I’m getting back into penpot and recommend it to anyone being told figma is the only option. It ain’t! In terms of what these kinda of tools should be doing for your team, Penpot is superior. Everyone can have access when finance isn’t cutting costs on users subscriptions to only an elite few.
@combox2376
@combox2376 28 күн бұрын
To make input text for prototypes would be a great feature to differences from others
@muktmukt
@muktmukt 29 күн бұрын
Hello, from the little projects I participate, I see two major things : - the size of the free software project, backed by a fundation or a company (Wordpress, etc) or not at all (only community organized project, yes it exists! lol), many differences between those two world - open source, free sofware, community organized or not whatever : an enormous majority of features can always be architecturized and coded during a paid or funded project ("pro" or non-profit whatever) because the final client/user need this or that feature, fund a team to build it and when it's mature it's integrated inside the whole project (or in a plugin)… BUT for UX, ergonomy, etc, it's the total opposite : an enormous majority of tasks is never funded inside a specific sub-project paid by someone, so almost of those tasks are maid by volunteers in free time So for dev tasks, there are both devs who work in their free time (like always in free software) AND many features added during a paid project. And for UX tasks, the vast majority are maid during free time. Concretely "add this new filter to Gimp" or "add this new shopping cart feature in this CMS" can always be funded easily during a project, but "redesign of Gimp", or "redesign of this CMS UX" almost never integrate a funded project.
@youtubecopyrights
@youtubecopyrights Ай бұрын
Designing for Open Source is such an important topic. So many open source projects show neglect of design and trying to contribute as a designer can be very confusing and or faced with resistance.
@onikun2120
@onikun2120 Ай бұрын
Круто!
@zakusmanali3036
@zakusmanali3036 Ай бұрын
I am doing front end web developer. Using Figma because of my university however, Figma doesn’t have the dev mode for free. Should I use PenPot?
@Penpot
@Penpot 10 күн бұрын
You know the answer :) YES
@MadWlad
@MadWlad Ай бұрын
Love the redesign! Thank you guys!
@MadWlad
@MadWlad Ай бұрын
Just imagine, there would be an awesome and powerfull design-team in the gimp project 😍
@AGI-Bingo
@AGI-Bingo Ай бұрын
OpenSource desperately needs better coordination tools. Just the fact that gh doesnt allow pms, is a forced handicap, that we need evolve out of.. Get ready for a new Golden Age of Open Source #WholesomeAGI 🌈
@Abhimabi
@Abhimabi Ай бұрын
Hi, nice to hear all these stuff but are there any link to find out these documentation
@Penpot
@Penpot Ай бұрын
superbloom.design/learning/blog/the-secret-life-of-open-source-designers/