https://github.com/convertiv/handoff-drupal-demo
A simple demo of handoff > drupal token pipeline
https://github.com/convertiv/handoff-drupal-demo
Last synced: 11 months ago
JSON representation
A simple demo of handoff > drupal token pipeline
- Host: GitHub
- URL: https://github.com/convertiv/handoff-drupal-demo
- Owner: Convertiv
- Created: 2024-05-06T17:25:28.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-07T14:15:21.000Z (about 2 years ago)
- Last Synced: 2025-02-22T12:29:48.753Z (over 1 year ago)
- Language: PHP
- Size: 34.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Handoff Drupal Demo
This is a simple demo integrating Figma Tokens automatically extracted via the
[Handoff](https://www.handoff.com) automation toolchain. This demo extracts
tokens from a Figma file and loads them into a Bootstrap 5 Drupal theme.
This demo is limited to some foundational elements and a button component, but
should service as an example of how you could do more.
## Requirements
- A drupal local dev tool. We use Lando, but DDEV
- Node 18+
## Get Started
All of the tokens for this project are pulled from this Figma file.
https://www.figma.com/file/HC3BkyW71SsxV7Md433WbO/Unicorn-Starter?node-id=0-1&mode=dev
### Boot Drupal
This project has been tested with Lando, but it should work with any local dev
tooling. Here's instructions for how to spin it up with Lando.
```bash
# Start it up
lando start
# Install a site local drush
lando composer require drush/drush
# Install drupal
lando drush site:install --db-url=mysql://drupal10:drupal10@database/drupal10 -y
# Enable the bootstrap5 theme
lando drush theme:enable bootstrap5
# Set it as the default theme
lando drush config-set system.theme default bootstrap5
# List information about this app
lando info
```
Lando should boot the handoff demo at https://handoff-demo.lndo.site:444/
### Fetch tokens
Generate a Figma Dev Token -
https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
1. Copy the `.env.example` to `.env` and paste your dev token into
`DEV_ACCESS_TOKEN`
2. Then run `npm install` to install the dependencies
3. Then run `npm run fetch`. This will fetch the tokens and install them into
the Drupal theme.
4. Clear your drupal cache (`lando drush cc css-js`) and the tokens should take effect.
### See tokens update
To see them working, create a page with two buttons -
```html
Primary Button
Secondary Button
```
You should see the primary and secondary tokens from your Figma wired to your
buttons.