اعلام تقني : يدمج Figma والمواقع الإلكترونية في Storybook

طريقة التثبيت والإعداد

أسهل طريقة هي باستخدام CLI الخاص بـ Storybook، والذي سيقوم بتثبيت الحزمة وإضافتها إلى ملف الإعدادات تلقائياً:

npx storybook@latest add @storybook/addon-designs

او يمكنك تثبيتها يدوياً باستخدام npm او yarn او pnpm:

npm install -D @storybook/addon-designs

# او

yarn add -D @storybook/addon-designs

# او

pnpm add -D @storybook/addon-designs

بعد التثبيت، تأكد من وجود "@storybook/addon-designs" في قائمة addons داخل ملف .storybook/main.js أو .storybook/main.ts:

export default {

addons: ["@storybook/addon-designs"],

};

🎨 ربط التصميم بقصة (Story)

لربط تصميم معين بقصة (Story)، أضف كتلة parameters كما في المثال أدناه.

يمكنك إضافة رابط Figma او أي موقع ويب آخر:

// في ملف القصة (Story file)

export default {

title: "Components/Button",

component: Button,

};

export const Primary = {

parameters: {

design: {

type: "figma", // او "link" لموقع ويب[citation:4]

url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File?node-id=0%3A1",

};

بعد ذلك، عند فتح قصة "Primary"، ستظهر علامة تبويب جديدة باسم "Designs" في لوحة الإضافات (Addon Panel) لعرض التصميم الذي أرفقته.

اعلام تقني