Skip to content

Latest commit

 

History

History
71 lines (43 loc) · 3.63 KB

README.md

File metadata and controls

71 lines (43 loc) · 3.63 KB
Raw

Bridging the Design-Dev Gap Workshop

Welcome to the 'Bridging the Design-Dev Gap Using Penpot' workshop repository! This workshop is designed to guide you through the process of seamlessly translating Penpot designs into code.

Workshop Overview

In this workshop, we'll walk through a practical and iterative process of bridging the design and development gap using Penpot. Here's a step-by-step breakdown of what we'll do:

  1. Design in Penpot: Start by crafting your designs within the Penpot environment. Leverage its intuitive interface and innovative features to create visually appealing and functional designs.

  2. Code Integration: Once your design is ready, we'll seamlessly integrate it with code in this repository. Copy and paste the generated code snippets, and witness the real-time translation of your Penpot design into functional code.

  3. Real-Time Visualization: Experience the immediate impact of your design decisions on the codebase. As you make changes in Penpot, observe how these modifications manifest in the code, providing a dynamic and interconnected view of your design and its corresponding code.

  4. Iterative Changes: The workshop doesn't stop at the initial integration. We'll guide you through making iterative changes in both the Penpot design and the codebase.

By the end of this workshop, you'll have a hands-on understanding of how to harmoniously synchronize design and development efforts using Penpot, from the initial design phase to iterative refinements, all within a collaborative and efficient environment. Let's code in tandem with design!

Getting ready

Follow these steps to get started:

  • Create a GitHub Account:
    If you don't have a GitHub account, create one here.

  • Fork the Repository:
    Click on the 'Fork' button in the upper right corner of this repository to create your copy.

    fork 1

    Then you will see something like this.

    Board

  • Open GitHub Codespaces:
    Navigate to the 'Code' tab and select the 'Codespaces' tab.

    Group (3)

  • Configure GitHub Codespaces:
    Set up GitHub Codespaces for this repository with your preferences or the "mark all done" button at the bottom.

    codespace config

  • Editor is ready: Now on your screen, you will see a code editor.

    editor

  • Install dependeces:

    In the terminal area at the bottom, write npm i to install dependencies.

  • Start server:

    Run the Development Server writing npm run dev in the terminal area.

  • Access the Application:

    Open the provided URL by pressing Ctrl + Click in your terminal or press this button at the right bottom. Screenshot from 2023-11-20 13-43-23

Workshop Exercises

Coping code from penpot

React to changes and commit them

Happy coding! If you encounter any issues, feel free to open an issue or reach out for assistance.